赵工的个人空间

jQuery是一种流行且易于使用的JavaScript框架，全部jQuery库仅由一个单独的JavaScript文件组成，语法也易于学习，使用一个简单的命名空间和一致的功能性。与jQuery用户接口UI插件一起使用，可以创建一个强大的、高度交互的web应用。

1.下载和托管：

jQuery的主页上有两种下载可供选择，产品版和开发版。除非打算开发jQuery插件或者查看jQuery内部，应该下载和使用缩小的产品版。
也可以使用CDN（内容传送网络）访问一个托管版本的jQuery，可以在设计的网页和JavaScript程序中包含jQuery而无需在个人服务器本地托管该文件。但建议在本地下载和托管jQuery文件，本地版更快速也更可靠。
可以使用和包含任何其他外部JavaScript文件一样的方式在网页中包含jQuery，示例：
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

2.基本jQuery语法：

当页面包含jQuery库时，增加了一个jquery()函数，有一个使用jquery()函数的快捷方法$()。

jQuery语句也以分号结束，可以使用单引号或双引号作为jQuery中的选择器，但最好坚持使用一种方式。

3.jQuery连接到Load事件：

使用jQuery最常见的方式是在页面的load事件期间连接到元素上，可以通过文档元素的.ready()函数实现。.ready()内编写的代码仅在完全加载DOM之后执行，即包含HTML、CSS和其他脚本在内的完整文档树加载完毕才开始执行，二不会等待加载图像。语法：
$(document).ready()
示例：
$(document).ready(alert('hi'));
$(document).ready()函数使得不再需要使用浏览器的load事件或者在load事件插入一个函数调用。$(document).ready()是大部分jQuery编程的核心，有了它，DOM的所有元素在.ready()函数前都可用。
如果未使用.ready()，jQuery代码不会等待加载整个文档，只要将它加载到浏览器中就会执行，如果代码中尝试处理还未加载的HTML、CSS代码，可能会抛出错误。
基本上，所有的程序代码都放在这个函数中，几乎每个使用jQuery的页面都包括，只需要包括一次，并且通常是脚本的第一行和最后一行。有一种简写方式：
$(function(){
   //代码
});
使用jQuery来补充常规的JavaScript，使得很多艰巨的单调的任务变得简单，可以将主要精力用在构建功能，而不是担心跨浏览器的微小差异。

4.使用选择器：

选择器是使用jQuery和DOM的关键，可用来识别和分组jQuery函数执行的元素。选择器可被用来收集具有某个标记、某个id或者某个应用于它的类的所有元素，还可以选择特定数量的元素，或者只选择拥有特定祖先的元素。jQuery中的工作方式都基于CSS中的选择器。

1）根据id选择元素：

语法：$("#elementID")
示例：
HTML代码：<a href="#" id="linkOne">Link</a>
JavaScript代码：getElementById("linkOne")
jQuery代码：$("#linkOne")

2）根据类选择元素：

语法：$(".className")
示例：
HTML代码：<div class="spectialClass">Link</a>
jQuery代码：$(".spectialClass")
类选择器可以访问应用了特定类的所有元素，然后需要使用函数遍历获取的元素。

3）根据标记选择元素：

可以使用选择器按元素的标记来选择，比如所有的<div>元素：
jQuery代码：$("div")
标记选择器也返回多个元素。

4）根据层级选择元素：

可以根据元素的位置与页面上其他元素的关系选择元素。示例：
$("div a")
上述代码选择div元素内的所有a元素。
对于以下html代码：
<div id="leftNav">
<a href="link1.html">Link1</a>
<a href="link2.html">Link2</a>
</div>
下面是获取两个锚元素的jQuery选择器：
$("#leftNav a")
子选择器：如果想要一个元素的直接后代，使用大于号
$("div > p")
相邻的兄弟选择器：出现在一个标记之后的标记
$(" h2+ div")
也可以使用:nth-child()选择器选择一组中的第n个孩子：
$("p:nth-child(3)")

5）根据位置选择元素：

jQuery提供几种方法在一组中选择更特殊的元素，其中一个方法是使用first和last选择器：
$("p:first")
$("p:last")
如下的html代码：
<p>First P</p>
<p>Second P</p>
<p>Third P</p>
要选择第2个p元素，使用：
$("p")[1]
注意，数组索引以0开头。这种方法依赖该元素在层级中的严格位置，最好还是使用id选择器来选择一个单独的或特定的元素。
还有一种根据索引选择元素的方法是使用:eq语法。例如要选择第3段：
$("p:eq(3)")
还有一种有用的位置选择器是使用even和odd，每隔一个元素选择一个：
$("p:even")
当处理表格数据以改变行的颜色时，even和odd非常有用。示例：
$(document).ready(function() {$('tr:odd).css("background-color","#abacab");});

6）根据属性选择元素：

jQuery允许选择仅仅包含一个属性的元素或者包含一个具体特定值属性的元素。例如具有alt属性的所有图像：
$("img[alt]")
只选择alt属性被设置为某值的图像：
$("img[alt='alternate text']")
上述代码只有当alt文本是单词alternate text时才会选择图像，其中单引号和双引号交替使用。如果使用相同的引号，就要使用转义引号的标记：
$("img[alt=\"alternate text\"]")
这种类型选择器需要完全的匹配。jQuery还有不要求完全匹配的通配符选择器：

7）选择表单元素：

jQuery包含与web表单相关的本地选择器。

8）更多选择器：

jQuery中还有更多的选择器，比如选择所有隐藏元素(:hidden)或者所有可见元素(:visible)以及激活元素、禁用元素和其他元素的选择器。
not()找到不匹配一个特定选择器类型的元素：
$('a:not(.navButton)');
把要忽略的选择器的名字传递给not()。上述代码的意思是，不带有.navButton类。
$('a:not([href^="http://"])');
上述代码是找到不以http://开头的链接。
:has()找到包含了其他选择器的元素。
$('li:has(a)');
找到有连接的li标记。
:contains()找出包含特定文本的元素。
$(a:contains(Click Me!));
上述代码找到显示Click me！的每一个链接。
:hidden找到隐藏的元素，包括CSS的display属性设置为none的元素。
$('div:hidden').show();
:visible是与:hidden相对应的属性，找到页面上的可见元素。

5.函数：

jQuery使用函数对选定元素执行操作，函数可以是内置于jQuery的，也可以是自定义的。jQuery函数对集合内建了循环进行遍历，不再需要创建循环。
jQuery函数可以使用串联形式：
$('#popUp').width(300).height(300).text('Hi!').fadeIn(1000);
但不能在串联中添加非jQuery函数。

1）遍历DOM：

jQuery包含很多循环和遍历函数，称为tranversing。使用遍历函数时，几乎总要用户自定义函数和$()选择器的帮助。$(this)选择器指向当前的对象，即当前正在遍历的项目。示例：
$(document).ready(function(){
   $('tr:odd).css("background-coloe","#abacab");});
   $('.percentage').each(function(){
      if ($(this).text()>=5) {
         $(this).css('font-weight','bold');
      }
   });
});
上述代码中，使用一个选择器收集有percentage类应用于它们的所有元素，接着使用.each()函数访问其中的每一个元素。在.each()函数内，用户自定义函数执行一个条件来确定Win Percentage列中的值是否大于或等于0.5。如果是，代码调用.css()函数来为该元素添加一个font-weight属性并将其设置为bold。
应用parent()函数，进一步选择$(this)的父，可以将整个行变成粗体：
$(document).ready(function(){
   $('tr:odd').css("background-coloe","#abacab");});
   $('.percentage').each(function(){
      if ($(this).text()>=5) {
         $(this).parent().css('font-weight','bold');
      }
   });
});
上面的示例中，使用JavaScript直接访问和修改CSS，但通过JavaScript修改网页样式或表象方面是不被推荐的。更好的方法是通过CSS应用或删除样式而非直接修改属性。
jQuery操作CSS样式的方法包括.hasClass()、.addClass()、.removeClass()、.toggleClass()。

2）操作属性：

jQuery还有操作CSS属性的函数。
.addClass()函数为元素添加一个特定的类：
$('a[href^="http://"]').addClass('externalLink');
上述代码会将<a href="http://www.dwenzhao.cn/">改变为<a href="http://www.dwenzhao.cn/" class="externalLink">。
.removeClass()函数从选择的元素上删除特定的类：
$('#alertBox').removeClass('hightlight');
.toggleClass()函数用于切换特定的类，即如果不存在就添加，如果已经存在就删除。
$('#changeStyle').click(function() {
  $('body'.toggleClass('altStyle');
});
.css()函数可以直接修改元素的CSS属性，有三种方式：找到元素的CSS属性的当前值、在元素上设置CSS属性、一次设置多个CSS属性。要确定一个CSS属性的当前值，可以把属性的名字传递给函数：
var bgcolor=$('#main').css('background-color');
上述代码运行后，id为main的元素的背景颜色值字符串将赋给一个变量。
注意，jQuery的.css()返回的颜色值是RGB值，使用返回值形式，而且不识别font、margin、padding、border等的缩写属性，必须使用font-face、margin-top这类的特定属性。jQuery把所有的单位值都转换为像素。
.css()函数可以设置CSS属性，需要提供属性名和值两个参数：
$('body').css('font-size','200%');
提供的第二个参数可能是一个字符串值，或者是一个数值，jQuery会将其转换为像素：
$('.pullquote').css('padding',100);
设置CSS属性时可以使用缩写方法：
$('p.highlight').css('border','1px solid black');
使用.css()函数一次修改多个属性，有两种形式：
$('#highlightedDiv').css({'background-color':'#FF0000','border':'2px solid #EF0037'});
$('#highlightedDiv').css('background-color','#FF0000'.css('border','2px solid #EF0037');
上述代码，上面一种使用json格式参数，下面一种使用函数串联形式。
.attr()函数可被用来获取和设置指定DOM的属性。示例：
var imageFile=$('#banner img').attr('src');
上述代码返回id为banner的元素中的img标签的src属性，并保存在一个变量中。当把一个属性名传递给att()函数时，不需要关心属性名的大小写。.attr()函数可以接受两个参数，第2个参数可以设置标记的属性。示例：
$('#banner img').attr('src','images/newImage.png');
还有如下的例子：
$("#myImageID".attr("alt")) //获取atl属性
$("#myImageID".attr("alt","new text")) //设置atl属性
如果要从标记删除一个属性，可以使用.removeAttr()函数。示例：
$('body').removeAttr('bgColor');

3）修改文档和HTML：

可以使用.text()和.val()这类函数重写页面。一般并不重写所有页面，会需要重写页面内的部分HTML或者修改文本及值。
.html()函数获取或修改选定元素内的全部HTML。示例：
<div id="myDiv">Here is a div, it's quite nice</div>
jQuery代码：
$("#myDiv").html('<span class="redStyle">This is a new content of the div</span>');
上述代码，由myDiv标识的<div>，其文本已经换为一个带有<span>元素的新文本。
.text()函数支持选定元素内对文本的获取和设置，但.text()只修改文本，不能修改选定元素内的HTML。示例：
$("#myDiv").text('This is a new content of the div');
上述代码，只修改了文本，并没有添加span及样式。

4）插入元素：

使用函数:after()和:before()函数，很容易在页面内添加元素，它们分别在选定元素的后面或者前面添加。示例：
<div id="myDiv">Here is a div, it's quite nice</div>
jQuery代码：
$("#myDiv").before("<div>This is a new div</div>");
$("#myDiv").after("<div>This is a new div, it appears afetr myDiv</div>");
运行上述代码，该页面有了3个div元素。
.append()函数把html作为选择元素的最后一个孩子元素添加：
$('#errors').append('<p>There are four errors in this form</p>');
.prepend()函数在选择的开始标签之后直接添加html：
$('#errors').prepend('<p>There are four errors in this form</p>');
注意，:after()和:before()函数是在选择的元素之外添加，而.append()和.prepend()函数是在选择的元素之内添加。

5）替换和删除：

.remove()函数可用于删除：
$('#popup').remove();
$('span.error').remove();
上述代码删除id为popup的标记和使用error类的span标记。
.replaceWith()函数用于替换：
$('#product101').replaceWith(<p>Added to cart</p>);
上述代码从页面删除了<img>标记并且用<p>标记替代。
.clone()函数用于复制一个元素。

6）其他函数：

.fadeOut()函数导致一个元素慢慢消失。
.each()函数对每个元素执行特定的操作。这其中往往需要使用匿名函数。匿名函数的基本结构为：
function() {
   //操作
}
由于没有名字，因此无法调用这个函数，只能作为一个参数传递给其他函数。示例：
$('selector').each(function(){
   //操作
});

7）this和$(this)：

this引用一个传统的DOM元素，而要将其转换为jQuery的对应物，需要使用$(this)。
示例页面：
<div id="bibliography">
<h3>web pages referenced in this article</h3>
<ul id="bibList">
</ul>
</div>
如果要遍历每个链接，添加.each()函数：
$('a[href^="http://"]').each()
添加一个匿名函数，其中获取每个链接的URL。要访问每次迭代时的当前元素，需要$(this)：
$('a[href^="http://"]').each(function(){
   var extLink=$(this).attr('href');
   $('#bibList').append('<li>'+extLink+'</li>');
});
代码中的匿名函数，先创建变量extLink，然后将当前元素的href属性值存储到该变量中。每次迭代，$(this)引用页面上的一个不同链接，也就是每次迭代的extLink变量都会变化。最后将新的列表添加到<ul>标记中。

8）回调函数：

jQuery大量使用回调函数，特别是ajax中。

6.事件：

jQuery使得程序能够响应鼠标点击、表单提交、按键等等，跨浏览器事件处理非常简单。

1）绑定和解除绑定：

.bind()函数将一个事件处理程序连接到一个事件。
.bind(event,data,functionName)
其中，event是希望响应的事件，data是一个可选对象，包含将被传入事件处理程序的额外数据，handler是对该事件的响应函数。示例：
<a href="/link1.html" id="myLink">A link</a>
$("#myLink").bind("click",function(){alert("clicked the link");});
上述代码，在为锚标记捕获click事件之后，页面显示一个警告框。
.bind()函数可以把多个事件绑定到一个元素上。示例：
$(document).bind('click keypress',function(){
   $('#lightbox').hide();
});
提供多个事件名，每个名称用空格隔开。
可以使用.bind()函数绑定的事件见下表：

jQuery还提供能够执行的快捷函数，不必写.bind("click",function())…，而只需简写成.click(function()…。可以将前面的代码重写为：
$("#myLink").click(function(){alert("clicked the link");});
示例代码：
$(document).ready(function(){
   $('#braingiaLink').click(function(){
      alert("hello");
      return true;
   });
   $('#myDiv').click(function(){
      $('#braingiaLink').click();
   });
});
当包含上述代码的页面载入浏览器后，点击div中的任何地方都会为锚触发click事件，就像点击了锚本身一样。
如果要想停止对事件的响应，可以使用.unbind()函数解除绑定：
.unbind(event,function)
函数接受两个参数，event参数是希望停止响应的事件，function参数是目前绑定到事件的函数。示例：
$('.tabButton').unbind('click');
$('a').unbind('mouseover');
通过对一个事件多次调用.bind()，可以对该事件绑定对个事件处理程序。
所谓事件冒泡event budding，是指多个元素可以响应同一个操作。比如一个元素分配了一个click事件，当点击该元素时，它的每个祖先元素也可以响应同样的事件，如果给它们也分配了click事件的情况下。jQuery提供了stopPropagation()函数来阻止事件传递到一个祖先元素上。示例：
$('#theLink').click(function(evt) {
   //do something
   evt.stopPropagation();
});
注意，.bind()函数仅向页面上存在的元素附加事件，二后来创建的新元素都不能用这种方法来绑定，而需要用.live()方法。示例：
$('#button').click(function() {
   append('<div class="future">New Div</div>');
});
$('div').live('click',function() {
   $(this).css({'color':'red','font-weight':'bold'})
      .html('Click me');
   ]);
});
如果要删除.live()附加的事件处理函数，要使用.die()方法。如果调用时不使用任何参数，所有事件处理函数都将被删除：
$(element).die();
如果仅删除指定的事件处理函数：
$(element).die('click');

2）鼠标事件和悬停：

可以使用mouseover和mouseout等鼠标事件。示例：
$(document).ready(function(){
   $('#braingiaLink').click(function(){
      alert("hello");
      return true;
   });
   $('#myDiv').click(function(){
      $('#braingiaLink').click();
   });
   $('#wrapperP').mouseover(function(){
      $('#braingiaLink').hide();
   });
   $('#wrapperP').mouseout(function(){
      $('#braingiaLink').show();
   });
});
上述代码，使用两个额外的jQuery函数.hide()和.show()。当鼠标进入wrapperP的段落时，braingiaLink标识的锚消失，只有当鼠标离开该段落区域时才能重现。该链接可以使用键盘导航激活。
jQuery有一个.hover()函数，以两个函数为参数。当鼠标光标移到到元素上时，第一个函数运行；当鼠标光标从元素上移开时，第二个函数运行。基本结构为：
$('#selector').hover(function1,function2);
可以实现当鼠标移到一个id为菜单的链接上，当前不可见的子菜单的div显示，当鼠标离开时，子菜单再次隐藏：
$('#menu').hover(function(){
  $('#submenu').show();
},function() {
  $('#submenu').hide();
}); //end hover
如果感到匿名函数容易令人混淆，也可以使用普通的函数。

3）.toggle()事件：

.toggle()事件响应click事件，一次单击触发第一个函数，下一次单击触发第二个函数。当想要使用单击在两种状态之间交替就使用这个事件。比如，第一次单击链接让submenu显示，下一次单击链接让其消失：
$('#menu').toggle(function(){
   $('#submenu').show();
}, function(){
   $('#submenu').hide();
});  //end toggle
.toggle()函数可以接收三个以上的函数作为参数，依次运行，然后返回第一个。

4）事件对象：

无论何时Web浏览器触发事件，都记录了有关事件的信息，并将其存储在所谓的事件对象中。事件对象包含了事件发生的时候收集的信息。例如，鼠标光标的水平和垂直坐标，发生事件的元素，或者事件触发的时候shift键是否按下。
如果要找到鼠标光标在页面上任何地方单击时的x坐标和y坐标：
$(document).click(function(evt) {
   var xPos=evt.pageX;
   var yPos=evt.pageY;
   Alert('X:'+xPoa+'Y:'+yPos);
}); //end click
当函数调用的时候，事件对象可以存储到evt变量中。
事件对象有很多不同的属性，而且属性列表会根据浏览器的不同而有所变化。下表为一些常见属性：

如果访问了keypress()事件的事件对象which属性，就会得到按下的键的一个数值代码。如果想确定这个键，需要用JavaScript方法处理which属性，把按键值转换为键盘上实际的字母、数字或者符号。String.fromCharCode(evt.which);

5）阻止事件的常规行为：

一些HTML元素对事件有预先编程的响应，有时不希望Web浏览器的常规行为进行，可以使用preventDefault()函数来阻止Web浏览器对一个事件的常规响应。preventDefault()函数是事件对象的一部分，所以要使用evt.preventDefault()形式。示例：
$('#menu').click(function(evt){
   //code
   evt.preventDefault();
]);
另一种技术是在事件函数的末尾直接返回值false。示例：
$('#menu').click(function(evt){
   //code
   return false;
]);

6）其他事件处理程序：

.delegate()函数。当要为一个页面加载后才添加的元素附加一个对象，可以使用这个函数。