赵工的个人空间

1.图像特效：

Web使用图像来改进页面设计、装饰导航栏、突出显示页面上的元素。

1）交换图像：

单个的常见JavaScript的用法是当鼠标移动到一幅图像上时，改变为另外一幅图像，现在更多使用CSS来实现。
每个图像都有一个src属性，表示一个图形文件的路径，如果改变这个属性以指向一个不同的文件，浏览器将会显示新的图像。示例：
<img src="inages/image.jpg" width="100" height="100" id="photo">
$('#photo').attr('src','images/newImage.jpg')
上述代码，使用.attr()函数将该标记的src属性设置为一个新文件。图像文件的路径是基于页面的位置的，而不是基于JavaScript代码的位置，这在使用外部JavaScript文件时要注意的。
在交换图像时，新的图像会使用与以前图像一样的属性设置，比如宽度、高度等，如果两幅图像大小不同，就会产生变形。这时往往需要下载新图像后获取其尺寸，然后改变相应的<img>标记的属性：
var newPhoto=new Image();
newPhoto.src='images/newImage.jpg';
var photo=$('#photo');
photo.attr('src',newphoto.src);
photo.attr('width',newphoto.width);
photo.attr('heigth,newphoto.heigth);
jQuery可以一次设置多个属性。上面代码可以简化为：
photo.attr({src:newphoto.src,width:newPhoto.width,height:newPhoto.height);
通常情况下，是将图像交换与一个事件处理程序结合使用，比如当鼠标悬停在图像上的时候，让图像变为另一幅图像，经常用于导航栏。
上述技术有一个问题，当交换src属性时，浏览器需要先下载该图像，这可能会有一定延迟。为了避免这个延迟，需要预载需要交换的新图像，方法是在脚本开始处创建一个数组，其中包含了要载入的所有图像，然后遍历图像，为每个项目创建一个新的inage图像：
var preloadImages=['images/roll.png','images/flower.png','images/cat.png'];
var imgs=[];
for (var i=0;i<preloadImages.length;i++) {
   imgs[i]=new Image();
   imgs[i].src=preloadImages[i];
}
然后，鼠标移动到图像上来触发一个图像交换：
$(document).ready(function(){
   var newPhoto=new Image();
   newPhoto.src='images/newImage.jpg'
   $('#photo').mouseover(function(){
      $(this).attr('src',newPhoto.src);
   });  //end mouseover
});  //end ready
上述代码先预载了要交换的图像，然后访问html当前图像，然后分配一个mouseover事件，以及改变图像src属性以匹配新图像的函数。
使用mouseover交换图像，还需要mouseout函数在鼠标离开时换回原图像。这时使用.hover()事件，可调用两个函数：
$(document).ready(function(){
   var newPhoto=new Image();
   newPhoto.src='images/newImage.jpg'
   var oldSrc=$('#photo').attr('src');
   $('#photo').hover(function(){
      $(this).attr('src',newPhoto.src);
   },function(){
      $(this).attr('src',oldSrc);
   });  //end hover
});  //end ready
.hover()函数接收2个函数参数，第一个函数是鼠标移动到图像上的动作，第二个参数是鼠标移开时的动作。代码中添加了一个变量，记录原图像的src属性，便于恢复原图像。
.hover()事件不仅限于转换图像，可以进行其他各种转换。

2.改进导航栏：

链接，是一个Web的核心，通过链接可以让很多Web页面联系起来成为一体。<a>标记就是给Web添加链接，通过JavaScript可以操作这些链接。

1）选择一个链接：

要对链接进行操作，首先要进行选择，选择一个页面上的所有链接，或者其中一个或一组链接。例如$('#mainNav a')，选择了id为mainNav中的所有链接。也可以使用属性选择器来选择链接。选择后，就可以使用.each()函数遍历链接，使用属性操作链接，添加事件函数等。

2）访问href属性：

使用jQuery的.attr()函数可以方便获取属性：
var homePath=$('#homeLink').attr('href');

3）Click事件：

$('#showForm').click(function(){
   $('#loginForm').fadeIn('slow');
   return false;
});
上述代码，为表单附加了一个click事件，当点击表单，会隐藏登录表单，阻止打开链接。上述代码也可以用另一种方式实现：
$('#showForm').click(function(){
   $('#loginForm').fadeIn('slow');
   evt.preventDefault();
});

4）在新窗口打开链接：

链接有一个target属性，如果设为_blank，点击时就会在新窗口（或新标签页）打开该链接。$('a[href^="http://"]').attr('target','_blank');
上述代码，jQuery使用属性选择器识别以http://开头的a标记，然后使用.attr()函数把每个链接的target属性设置为_blank。

5）创建新窗口：

Web浏览器打开新窗口基本的是open()方法：
open(URL, name, properties)
Open()方法接收3个属性，第一个是页面的URL，第二个参数是窗口的名字，最后一个参数包含了一个属性字符串。示例：
var newWin=open('http://www.google.com','theWin','height=200,width=200');
一旦为窗口提供了一个名字，如果试图用同样的名字打开另一个窗口，请求的页面只是载入之前创建的具体相同名字的窗口。
窗口的属性如下表：

上述属性不是所有浏览器都支持，而且有些外观也不同。
打开了一个窗口，也开始使用close()来关闭：
newWin.close();
适用于窗口对象的方法如下表：

现在浏览器都有弹出窗口的阻截功能，防止讨厌的弹出式广告。很多浏览器不允许使用大多数事件来打开浏览器窗口，使用JavaScript来打开窗口的唯一可靠方式，是当用户点击一个链接或提交一个表单的时候触发操作。

3.扩展表单：

表单使得Web站点可以收集来自访问者的信息，JavaScript为表单注入交互的能力，构建容易使用并且确保更精确的访问者反馈表单。
可以使用<input>、<textarea>、<select>等标记创建表单控件，包括按钮、文本框和菜单等。大多数表单元素使用<input>标记，如文本框、密码框等。

1）选择表单元素：

操作页面上的元素首先要选择那些元素。jQuery可以使用几乎任何CSS选择器来选择页面元素。示例：
<input name="user" type="text" id="user">
var userField=$('#user');
上面是HTML文本框的代码，后面是jQuery选择的方式。一旦选择了，就可以进行操作。
var fieldValue=$('#user').val();
上面jQuery代码访问该字段的值。
由于<input>标记用于单选按钮、文本框、密码框、复选框、提交按钮、重置按钮和隐藏字段等，不能只选择<input>标记，需要能够找到特定类型。jQuery提供了表单选择器，比如$(':text')选择所有文本框，然后可以使用.each()函数来遍历结果。jQuery的表单选择器见下表：

也可以把表单选择器和其他选择器组合使用。比如，$('#signup :text')选择id为signup表单的文本框。
jQuery还提供了有用的过滤器，可以找到与特定状态匹配的表单字段。示例：
$(':checked')
:checked选择选中标记或打开的所有字段，用于复选框和单选按钮。可以使用这个过滤器来找到一组单选按钮中哪一个是选中的。示例：
var checkedValue=$('input[name="shipping"]:checked').val();
上述代码，选择所有name为shipping的input元素，添加了:checked后的选择器只选择选中的一项，val()函数返回了该选择框中存储的值。
:selected选择一个列表或菜单中的所有选中的选项，可以在菜单或列表中做出选择。示例：
var selectedValue=$('#state. :selected').val();
这个过滤器的id名与:selected之间有一个空格，因为选择器选择的是<option>标记，而不是<select>标记。这个jQuery是找到id为state的<select>标记中的所有选中的选项，其中的空格像一个CSS子选择器一样工作。一个<select>菜单激活多个选项，意味着这个选择器可能会返回多个元素。

2）获取和设置表单元素的值：

jQuery的.val()函数，既可以设置表单字段的值，也可以读取表单字段的值。如果调用时不传递任何参数，就读取；如果给函数传递一个值，就设置。示例：
var fieldValue=$('#email').val();
$('#total').val(total);

3）确定按钮和选框是否选中：

单选按钮和复选框，要求访问者通过选择一个特定的值来做出选择。HTML中，checked属性确定一个特定的元素是否选中。示例：
<input type="checkbox" name="news" id="news" checked="checked" />
使用jQuery来选中选框的状态：
if ($('#news').attr('checked')) {
   //is checked
} else {
   //not checked
}
如果选框选中，代码$('#news').attr('checked')返回true；如果没有选中，返回undefined，JavaScript解释器把这个值看做等同于false。Checked属性也适用于单选按钮。

4）表单事件：

事件允许通过响应各种不同的访问者动作来为页面添加交互。
①submit：
当输入一个文本字段后，访问者通过单击一个提交按钮或者按下回车键来提交表单，submit事件就触发了。可以借助这个事件在表单提交时运行脚本，比如验证表单字段确保正确填写。
为了在表单提交事件触发时运行一个函数，首先要选择表单，然后使用jQuery的submit()函数添加脚本。示例：
$(document).ready(function(){
   $('#signup').submit(function(){
      if ($('#username').val()==""){
         alert('Please supply a name in the Name field.');
         return false;
      }
   });  //end submit
});  //end ready
上述代码，首先设置了必需的页面ready函数，使得代码在页面的html已经载入之后才运行；然后给表单添加submit事件函数；检查id为username的字段的值，如果为空就显示一个警告框。
②focus：
当用户单击表单上的一个文本字段或者跳转到一个文本字段，该字段就会接收到focus。Focus是浏览器触发的一个事件表示访问者的光标在一个特定的字段之上或之中，一些设计者使用它擦除一个字段中已经显示的任何文本。示例：
<input name="username" type="text" id="username" value="Please type your user name">
上述html文本在表单上创建了一个文本字段，其中有一个"Please type your user name"提示。当访问者把焦点放到这个字段，可以擦除文本内容，而不是迫使访问者自己动手通过填充表单来擦除内容：
$('#username').focus(function(){
   var field=$(this);
   if(field.val()==field.attr('defaultValue')){
      field.val('');
   }
});
文本字段有一个defaultValue的属性，表示当页面初次载入时字段中的文本。即便擦除了，浏览器依然记得当页面载入时字段中的内容。这个条件语句检查当前字段中的内容，与字段最初的内容比较，如果相同就会擦除字段中的文本。
③blur：
当跳转出一个字段或者单击当前字段之外的时候，浏览器触发一个blur事件。这个事件通常和文本字段或文本区域字段一起使用，在某人单击或跳转到一个字段之外时，运行一个验证脚本。示例：
<input name="quantity" type="text" id="quanjtity">
上述html文本创建一个文本字段，为了确保该字段只包含数值，加入代码：
$('#quantity').blur(function(){
   var fieldValue=$(this).val();
   if(isNaN(fieldValue)){
      alert('Please supply a number');
   }
});
使用isNaN()方法检查以确保这个值是一个数字，如果不是数字就显示一个警告框。
④Click：
当单击任何表单元素时，触发click事件。这个事件对于单选按钮和复选框特别有用，因为可以根据用户选择的按钮来添加改变表单的函数。示例：
$(':radio').click(function(){
   //script code
});
Click也可用于文本字段，但只有单击到字段中的时候click事件才会触发。
⑤change：
Change事件适用于表单菜单。当从一个菜单做出选择的时候，change事件触发。可以使用这个事件来运行一个验证函数。示例：
$('#country').change(function(){
   if($(this).val()=='Please choose a country')){
      alert('Please select a country from this menu');
   }
});
设计者常常在菜单的第一项添加一条说明，比如示例中的'Please choose a country'，为了确保访问者没有选择其中一个选项而把这个提示作为选择，就需要在每次从菜单做出新的选择时检查菜单的选择值。

5）为表单添加智能：

JavaScript提供了很多方法提高表单的易用性。
①聚焦表单第一个字段：
使用JavaScript，可以把光标放在一个字字段中，方便输入：
$(document).ready(function(){
   $('#username').focus();
});
加载页面后，光标会在id为username的字段中。可以创建一个通用的脚本，总是聚焦到表单的第一个文本字段上：
$(document).ready(function(){
   $(':text:first').focus();
});
jQuery提供了一个方法选择所有的文本框，即$(':text')，通过为任何选择器添加:first可以选择该元素的第一个实例。
如果页面上有多个表单，需要修改选择器指明是哪个表单。示例：
$(document).ready(function(){
   $('#signup:text:first').focus();
});
②关闭或打开字段：
假设一个字段，只有前一个复选框选中时才能够填充。要关闭或打开一个表单字段，可以使用JavaScript。关闭字段，直接把字段的disabled属性设为true。示例：
$(':input').attr('disabled',true);
如果要求单击single按钮时可以关闭收集配偶的社会安全号码字段，代码为：
$('#single').click(function(){
   $('#spouseSSN').attr('disabled',true);
});
如果关闭一个字段，可能希望有一种方式能够再次打开，直接将disabled的属性设为false：
$(':input').attr('disabled',false);
如果访问者选择了married选项，需要激活配偶的社会安全号码字段：
$('#married').click(function(){
   $('#spouseSSN').attr('disabled',false);
});
③阻止多次提交：
在访问者按下表单的提交按钮到新的页面出现之间，往往会有一段延迟，不耐烦的使用者会认为提交无效，一次次单击提交按钮。使用JavaScript可以在一次提交后关闭提交按钮，避免再次单击：
$('#formID').submit(function(){
   $('#submit').attr('disabled',true);
});
如果页面只有一个表单，甚至不需要为每个标签使用id：
$('form').submit(function(){
   $('input[type=submit]').attr('disabled',true);
});
此外，还可以通过修改按钮上的值来提示信息：
$('#formID').submit(function(){
   var subButton=$(this).find(':submit');
   subButton.attr('disabled',true);
   subButton.val('sending......');
});
④隐藏和显示表单选项：
不仅可以关闭字段，还可以隐藏字段。可以将上述的关闭字段代码改写为：
$('#single').click(function(){
   $('#spouseSSN').hide();
});
$('#married').click(function(){
   $('#spouseSSN').show();
});
隐藏字段，使得表单布局更加简单。有时候还需要隐藏字段的标签以及其他相关的文本等，可以把要隐藏的部分包含到一个div标记中，并加一个id，然后隐藏这个div。

4.扩展界面：

使用JavaScript，可以把Web页面流线化，隐藏内容直到需要的时候才显示，提供对信息更为容易的访问方式。
折叠面板和标签面板把很多信息放入一小块空间，允许用户单击一个标签页来访问小块空间中的内容。鼠标光标移动到链接、表单字段以及其他html元素上的时候，带有附加信息的弹出工具提示窗口将补充信息。控制页面内容的一种逐渐流行的方法是幻灯片，其内容会滑入或滑出视线。

1）标签页面板：

在页面放置太多内容可能会让访问者应接不暇，使得页面看起来很拥挤。JavaScript的一种技术是使用标签页面板，由顶部的标签和每次只能看见一个的面板组成。当访问者单击标签，当前可见的面板消失，隐藏的面板显示。
①HTML：
带有标签页的面板由标签页和面板这两个主要部分组成。如果在一个页面中包含了多个标签页面板，使用div标记包围起标签页和面板，标注其开始和结尾，并给div添加一个class，助于识别。如果页面只有单个标签页面板，只需要一个id。
标签通常是以无序列表的结构来组织的，它们之间有链接。示例：
<ul class="tabs">
   <li><a href="#panel1">Overview</a></li>
   <li><a href="#panel2">Specifications</a></li>
   <li><a href="#panel3">Shipping</a></li>
</ul>
列表项中的链接是指向分配给面板的id的页内链接，使得不支持JavaScript的访问者也可能直接跳转到相应的内容，就像一个常规的页内链接一样，只不过直接向上滚动页面到达相应的位置。
用一个div标记包围起所有的面板，这将有助于样式化，并且提供了一种方法使用jQuery来聚焦于标签页。示例：
<div class="panelContainer">
</div>
每个面板用一个div标记，并且可以容纳想要放置的内容，如标题、段落、图像和其他div。每个div需要一个独特的id，并与标签页中的href使用的id相匹配。示例：
<div class="panel" id="panel1">
   Content1
</div>
<div class="panel" id="panel2">
   Content2
</div>
<div class="panel" id="panel3">
   Content3
</div>
其中的class提供了样式化的方法，并且可以使用jQuery选择它们。
这样得到的整段代码为：
<div class="tabbedPanels">
   <ul class="tabs">
      <li><a href="#panel1">Overview</a></li>
      <li><a href="#panel2">Specifications</a></li>
      <li><a href="#panel3">Shipping</a></li>
   </ul>
   <div class="panelContainer">
      <div class="panel" id="panel1">
         Content1
      </div>
      <div class="panel" id="panel2">
         Content2
      </div>
      <div class="panel" id="panel3">
         Content3
      </div>
   </div>
</div>
②CSS：
标签页面板的CSS创建并排按钮的标签效果，还可以样式化面板，使得与标签页成为一个一致协调的整体。
如果想将标签页面板宽度限定在某个尺寸，可以创建一个样式：
.tabbedPanels {
   width:50%;
}
由于项目列表是缩进的，如果想让标签页和左边界对齐，需要删除它们左边和右边的任何补白。还要让标签页并排放置，必须使列表项浮动。由于列表项前面通常有项目符号，需要删除。样式表为：
.tabs {
   margin:0;
   padding:0;
}
.tabs li {
   float:left;
   list-style:none;
}
列表项中的a标记，需要删除下面的下划线，把链接的display属性设置为block，以便padding和margin属性可以应用：
.tabs a {
   display:block;
   text-decoration:none;
   padding:3px 5px;
}
当然，还可以添加background-color、fonts、font-color和font-size属性设置，更加突出效果。
突出显示与当前显示的面板对应的标签页，可以帮助访问者识别面板中的信息。常见的方法是创建一个样式，当访问者单击该标签页后，jQuery动态地应用这个样式。这个样式给激活的标签页和面板同样的背景颜色，使得选中的标签页与其面板具有一致的视觉效果：
.tabs a.active {
   background-color:white;
}
常用的方法是给面板和标签页周围一个边框，当点击了一个标签页，标签页底部的边框消失，并且标签页显得和面板融合为一体了。为此，需要给.tabs a的样式添加一个边框，并且将底部的边距设置为-1像素，负值实际上会使面板重叠。然后给.tabs a.active样式设一个底部边框颜色，使其与面板的背景颜色匹配。还需要给面板容器添加一个边框，使得它与.tabs a style的边框具有相同的样式、宽度和颜色。
因为所有的标签页都向左浮动，必须清除面板容器，否则将折返到标签页的右侧，而不是出现在标签页的下面：
.tabbedPanels {
   width:50%;
   clear:left;
}
还可以为这个样式添加背景、边框、补白等。
可以使用一个面板容器样式来为面板创建基本的格式，包括边框、背景颜色等，也可以创建一个panel样式，将格式化应用于单个的面板div。
要格式化面板的内容，可以使用子选择器来选定每个面板div中的标记。例如，要让一个橙色面板中的一个<h2>标记显示Arial字体，可以创建：
.panel h2 {
   color:orange;
   font-family:Arial,Helvetica,sans-serif;
}
如果要样式化面板中的一个段落，创建一个.panel p的样式。
③JavaScript：
准备好HTML和CSS，可以看到顶部的标签页，下面有三个div彼此重叠。需要添加程序使得面板打开和关闭，并且修改标签页上的class，让一个标签页为激活的。
给标签页内部的链接添加一个click事件，给click事件添加一个匿名函数，作用是隐藏当前可见的面板，之前的标签页删除active类，单击的标签页添加active类，显示和标签页相关联的面板。代码为：
$(document).ready(function(){
   $('.tabs a').click(function(){
      var $this=$(this);
      $('.panel').hide();
      $('.tabs a.active').removeClass('active');
      $this.addClass('active').blue();
      var panel=$this.attr('href');
      $(panel).fadeIn(250);
      return false;
   });  //end click
   $('.tabs li:first a').click();
});  //end ready

2）添加内容幻灯片：

用于解决信息过多的另一种工具是内容幻灯片，每次从一堆内容中显示一幅图片。幻灯片面板通常具有相同的大小，并且在一个幻灯移动中动态地出现在屏幕上，而且常常运行一段时间，每隔数秒面板就会幻灯式滑过屏幕。幻灯片通常用在主页上，以保持页面简单而富有吸引力，而同时又突出显示很多内容。单击幻灯片中的一个面板，通常会导向另一个Web页面。