初学JQuery基础
2014-04-02 10:49
387 查看
初学JQuery基础(原创+转载)
JavaScript是一种脚本语言，主要功能是设计网页交互，动态效果。但是由于JavaScript版本之间的差异性，以及各大浏览器对于JavaScript和DOM的解析不统一，要编写跨浏览器的程序非常麻烦。因此为了简化JavaScript开发，一些JavaScript代码库就应运而生了，其中最有代表性的就是jQuery。jQuery是一个快速、简捷的JavaScript框架，它的设计宗旨是“Write
Less，Do More”，即倡导写了更少的代码，做更多的事情。jQuery封装了JavaScript常用的功能代码，提供一种简洁、快捷的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，能够兼容CSS3，兼容各种主流浏览器，如：IE6.0+，FF1.5+，Safari2.0+，Opera9.0+，Chrome等，因此越来越被人喜爱。
jQuery能够满足下列需求：
①取得页面中的元素
②修改页面的外观
③改变页面的内容
④响应用户的页面操作
⑤为页面添加动态效果
⑥不需刷新页面即可从服务器获取信息
⑦简化常见的JavaScript任务
jQuery框架无须安装，只需要在网页文档的头部(<head>标签里面)导入jQuery框架源代码的文件即可，导入的文件可以使用相对路径，也可以使用绝对路径。导入jQuery的方法是：
<script src="框架源代码路径"type="text/javascript"></script>
jQuery的核心就是从HTML文档中匹配元素并对其执行操作，内置的模拟CSS选择器能够通过元素的特性或者文档位置来描述元素的样式。jQuery把确保代码能够跨越所有主流浏览器以一致的方式进行工作，摆在了高优先级的位置，解决了跨浏览器兼容问题，使DOM的操作趋于统一。
jQuery框架本身就是在JavaScript语言基础上进行包装的，因此jQuery代码本质上也是JavaScript代码，自然jQuery代码可以与JavaScript代码相互使用。初学者可以没必要去区分到底哪一行是jQuery代码，哪一行是JavaScript代码，但是必须区分清楚jQuery对象和Dom对象，以及他们各自适用的方法。
DOM对象
DOM是HTML与XML的应用编程接口(API)，DOM将整个页面映射为一个由层次结点组成的文件。
jQuery对象
jQuery对象是通过jQuery框架包装DOM对象之后产生的一个新对象，从本质上分析它仅是DOM对象的集合，因此可以把DOM对象看成一独立的个体，而jQuery可以是多个DOM对象组成的数据集合。
<一、jQuery对象和DOM对象的互相转换>
jQuery框架为jQuery对象定义了独立使用的方法和属性，它无法直接调用DOM对象的方法，相反，DOM对象也无法直接调用jQuery对象的方法或属性。但它们之间是可以相互转换的，因为它们所操作的对象都是DOM元素，只不过jQuery对象是包含多个DOM元素的数组，也称为类数组，而DOM对象是一个单个的DOM元素。
1.把jQuery对象转换为DOM对象有两种方法：
①借助数组下标来读取jQuery对象集合中的某个DOM元素对象：
[html] view
plaincopy
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
var lis = $("li"); //传入一个标签元素，返回jQuery对象
var li = lis[0]; //返回DOM对象
alert(li.innerHTML);
})
</script>
②借助jQuery对象的get()方法，为get()方法传递一个下标值，即可从jQuery对象中取出一个DOM对象元素。
[html] view
plaincopy
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
var lis = $("li");
var li = lis.get(0);
alert(li.innerHTML);
})
</script>
2.把DOM对象转换为jQuery对象：对于DOM对象来说，直接把它传递给$()函数即可，jQuery对象会自动把它包装为jQuery对象，然后就可以自由调用jQuery定义的方法。
[
[html] view
plaincopy
<script type="text/javascript">
$(function () {
var li = document.getElementsByTagName("li");
var $li = $(li[0]); //把第一个li元素封装为jQuery对象
alert($li.html()); //调用jQuery对象的方法
})
</script>
实际上，也可以把DOM元素数组传递给$()函数，jQuery对象会自动把所有DOM元素包装在一个jQuery对象中。
[html] view
plaincopy
<script type="text/javascript">
$(function () {
var li = document.getElementsByTagName("li");
var $li = $(li); //把所有li元素封装为jQuery对象
alert($li.html()); //调用jQuery对象的方法
})
</script>
<二、jQuery构造器>
jQuery把所有的操作都包装在一个jQuery()函数中，形成统一(也是唯一)的操作入口，这为jQuery降低了门槛。jQuery()函数能够接收任意类型的数据，但是能够解析的参数包括也下四种类型。
①jQuery(expression,context)
参数为一个表达式，该表达式可以是ID、DOM元素名、CSS表达式、XPath表达式等，jQuery将根据表达式匹配文档中的元素，然后将找到的元素包装到一个jQuery对象中返回。
[html] view
plaincopy
jQuery("div#wrap>p:first").addClass("red");
在上面的表达式字符串中，div#wrap表示id为wrap的div元素，然后在该元素中匹配子元素p，最后筛选出第一个p元素。"div#wrap>p:first"是CSS表达式，如果使用XPath表达式表示，则应该表示为"div#wrap/p:first"，:first是一个伪类，表示其中的第一个。addClass()为jQuery对象用来添加CSS样式类的方法，相反操作的方法为removeClass().
②jQuery(html)
参数表示一个HTML结构字符串，此时jQuery将创建一个对应结构的HTML文档片段。例如：
[html] view
plaincopy
$('ul').append($('<li>new item</li>'));
$('<li>new item</li>')将其中的字符串转换为DOM对象，然后通过append()方法加入元素到最后。
③jQuery(elements)
参数是一个DOM元素对象或集合，此时jQuery将DOM元素或集合中的DOM元素封装为jQuery对象。例如：
[html] view
plaincopy
$(document).ready(function(){
$('ul').css('color','red');
});
在上面的代码中，jQuery构造函数把document对象封装为一个jQuery对象，然后调用ready()方法。Ready事件处理函数为document对象绑定一个事件，当页面初始化后将ul的颜色设置为红色。
④jQuery(fn)
参数是一个处理函数。$(document).ready()由于频繁使用，所以jQuery使用$(fn)来代替，fn表示处理函数。ready处理函数在文档内容完全载入后执行，因此不需要等待外部链接文件载入完成，响应要比load()事件早。
[html] view
plaincopy
$(function(){
$('ul').css('color','red');
});
<三、jQuery语法>
jQuery对象及基本语法
$(this).hide() 隐藏当前对象
$("p").hide() 隐藏所有<p>标签
$("p.test").hide() 隐藏所有class="test"的<p>标签
$("#test").hide() 隐藏所有id="test"元素
jQuery使用美元符号$来表示定义一个jQuery对象，选择器用来查找页面中的DOM元素，后米阿尼的方法动作时对该对象执行的操作。
jQuery代码是非常优雅的，也是非常灵巧的。它允许用户连续设计各种行为，从而实现按人的惯性思维进行快速开发。例如：
[html] view
plaincopy
<style type="text/css">
.panel
{
padding :60px;
background-color :Red;
color:#FFFFFF;
font-size:50px;
font-weight:bold;
width:600px;
text-align:center;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//第一行代码，在文档中添加四个按钮
$('<input type="button" value="click me" /><input type="button" value="triggle click me" /><input type="button" value="detach handler" /><input type="button" value="show/hide text" />').appendTo($('body'));
//分别选中四个按钮，并为它们绑定不同的事件处理函数
$('input[type="button"]')
.eq(0).click(function () { //找到第一个按钮，并绑定事件处理函数
alert('you clicked me!');
}).end().eq(1) //返回所有按钮，再找到第二个按钮
.click(function () { //为第二个按钮绑定click事件处理函数
$('input[type="button"]:eq(0)').trigger('click');
}).end().eq(2) //返回所有按钮，再找到第三个按钮
.click(function () { //为第三个按钮绑定click事件处理函数
$('input[type="button"]:eq(0)').unbind('click');
}).end().eq(3) //返回所有按钮，再找到第四个按钮
.toggle(function () { //为第四个按钮绑定toggle事件处理函数
$('.panel').hide('slow');
}, function () {
$('.panel').show('slow');
});
});
</script>
在以上代码中，通过end()方法取消当前的jQuery对象，返回前面的jQuery对象。这样当匹配某个按钮时，为其绑定事件处理函数，然后调用end()方法，则又返回前一个jQuery对象，即按钮集合。
链式代码已经成为jQuery非常流行的一个特点，在使用链条方式写代码时，可能会用到eq()、filter()的jQuery方法改变链式方法的对象，但是借助jQuery的end()方法又能够恢复最初的jQuery对象，从而可以实现继续执行链式操作。
注意：①有几个jQuery的方法并不返回jQuery对象，所以链式操作就不能继续下去，如get()就不能像eq()那样使用。
②如果在同一个jQuery对象上执行不超过3个方法，则可以在同一行内书写。
③如果在同一个jQuery对象上执行很多的操作，则应该分行进行书写，这样方便阅读和修改。
④对于多个对象执行少量的操作，则可以为每一个对象书写一行代码。如果涉及子元素操作，则可以考虑使用缩进进行设计，这样能够区分层次。
⑤如果对于多个对象执行很多连续的操作，则可以考虑结合上面几种方法同时进行设计。
<四、jQuery选择器>
jQuery选择器支持ID、tagName、CSS1~CSS3表达式、XPath表达式，它不仅模仿CSS和XPath选择器的用法和功能，还自定义了很多过滤方法。
所谓选择器(Selector)，通俗地说就是一个表示特殊语义的字符串。只要把选择器字符串传递给jQuery()构造函数，就能够选择不同的DOM对象，并且返回jQuery对象。jQuery选择器按照功能主要分为选择和过滤，并允许配合使用，可以同时使用组合成一个选择器字符串。两者的主要区别是：
①过滤作用的选择器是指定条件从前面匹配的内容中筛选的。过虑选择器可以单独使用，此时表示从全部“*”中筛选。$(":[title]")等同于$("*:title")
②选择功能的选择器不会有默认范围，因为其作用是选择而不是过虑。
[html] view
plaincopy
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[type='button']").click(function () {
var i = 0;
$("input[type='text']").each(function () {
i += parseInt($(this).val());
});
$('label').text(i);
});
$('input:lt(2)').add('label')
.css('border', 'none')
.css('borderBottom', 'solid 1px navy')
.css({ 'width': '30px' });
});
</script>
</head>
<body>
<input value="1" type="text"/><span>+</span><input value="2" type="text"/>
<input type="button" value="="/>
<label> </label>
</body>
在以上代码中，$("input[type='button']")选择器可以匹配文档中的type属性值为button的input元素，这个是CSS表达式。在为button添加的click事件处理函数中，$("input[type='text']")
选择器能够匹配文档中所有输入框，然后调用each()方法遍历所有匹配的文本框，利用$(this)选择器获取当前文本框，使用val()读取当前文本框的值，经过parseInt()转换类型后再将它们相加之后作为文本信息添加到label元素中显示出来。
其中，$('input:lt(2)')选择器能够匹配文档中的所有input元素，然后筛选出排在前面的两个input元素，其中，伪类:lt表示序号小于某个值的意思。匹配到input元素后，再添加label对象，合并成一个jQuery对象，然后通过链式语法连续调用3个css()方法为文本框设置样式。
注意：如果只给css()方法传递一个字符串参数，则表示读取样式的值，如css('color')就表示读取当前jQuery对象的样式属性color的值，而如果给它传递两个参数，则表示设置样式的值。jQuery对象定义了很多类似的方法，如：val()、text()、html()、click()、change()等。
<五、jQuery事件>
1.HTML DOM文档加载是按顺序执行的，这与浏览器的渲染方式有关系，一般浏览器的渲染操作的顺序大致按如下几个步骤完成：
①解析HTML结构②加载外部脚本和样式表文件③解析并执行脚本代码④构造HTML
DOM模型⑤加载图片等外部文件⑥页面加载完毕
2.load事件必须等到网页中所有内容全部加载完毕之后，才被执行。如果一个页面中包含了大数据的多媒体文件，则就会出现网页文档已经呈现出来，而由于网页数据还没有加载完毕，导致load事件不能够及时被触发。而jQuery的ready事件是在DOM结构绘制完毕之后就执行，也就是说它先于外部文件的加载就被执行了，这样能够确保文档呈现和脚本初始化设置保持同步。总之，ready事件先于load事件被激活，如果网页文档中没有加载外部文件，则它们的响应时间基本是相同的。
3.JavaScript的load事件只能够被编写一次，下面的写法是不允许的，此时它仅能影响最后一次指定的事件处理函数。
[html] view
plaincopy
<script type="text/javascript">
window.onload=funciton(){
alert("页面初始化1");
}
window.onload=funciton(){
alert("页面初始化2");
}
window.onload=funciton(){
alert("页面初始化3");
}
</script>
如果希望这三个事件处理函数都被执行，则应把它们包含在一个处理函数中。
[html] view
plaincopy
<script type="text/javascript">
var f1=function(){
alert("页面初始化1");
}
var f2=function(){
alert("页面初始化1");
}
var f3=function(){
alert("页面初始化1");
}
window.onload=function(){
f1();
f2();
f3();
}
</script>
而对于jQuery的ready事件类型来说，我们可以在同一个文档中多次定义。
[html] view
plaincopy
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
alert("页面初始化1");
});
$(function(){
alert("页面初始化2");
});
$(function(){
alert("页面初始化3");
});
</script>
<六、jQuery类数组操作>
jQuery类数组的操作主要包括元素定位、查找、复制和删除等。另外，还可以通过迭代器和映射器扩展对类数组的操作功能。类数组的操作对象是集合。
1.定位元素：jQuery定义了get()和index()方法用来定位元素，它们是集合操作的最基本方法。另外，jQuery还定义了get(index)和eq(index)方法，用来读取指定位置的元素。get(index)和eq(index)方法的主要区别在于：
get(index)方法用于读取集合中的元素，它与直接通过[i]来读取元素的方法是完全相同的；
eq(index)方法用于克隆集合中的元素，也就是说不修改数组元素。
2.复制元素：jQuery模拟Array的slice()方法也实现了元素的复制功能
3.添加元素：使用add()方法添加元素
4.过滤元素：filter()方法能够筛选出与指定表达式匹配的元素集合，也可以通过该方法来筛选当前的jQuery对象的元素，或者使用逗号分隔的多个表达式。filter()方法是grep()和multiFilter()函数的综合，如果参数是函数，就采用jQuery.grep()函数来完成，否则采用jQuery.multiFilter()函数进行selector方式的过滤。jQuery.grep()函数提供了以自定义函数回调的形式来过滤集合中不需要的元素，最后形成需要的数组，与map()函数功能类似。jQuery.multiFilter()函数支持采用“,”符号分隔的selector多表达式方式。
jQuery.multiFilter()函数也可以作为筛选器，与jQuery.filter()方法一样，selector的多表达式也可以只是筛选器的组合，即以·、#、:、[这四种符号作为分隔的表达式。
not()方法也是根据selector来过滤不符合条件的元素，但是not()方法建立在filter()方法基础之上，执行效率更高。
5.映射元素：集合映射是非常实用的工具。jQuery定义了each()和map()两个映射方法。each()方法是对集合中的每个元素都执行回调函数，而map()方法还能够收集每个回调函数的返回结果组成一个新的集合。
callback回调函数的语法格式如下：callback:function(index,value)，参数index表示索引号，参数value表示数组的index对应的元素或对象的第index个处理的属性。
如果使用参数args()，则callback回调函数的语法格式如下：callback(args)，参数args是回调函数设定的参数。
6.绑定时间：bind(绑定的事件类型，绑定的方法名)
例子：
$(function(){
$("#btn").bind("click",function(){
alert("HelloWorld!");
})
})
<七、jQuery属性操作、CSS操作和内容操作
1、属性操作
获取属性值：attr(name)
修改属性值：attr(key,name)
删除属性：removeAttr(name)
示例：获取<a>标签中属性href的值
<a id="link"href="http://www.baidu.com" />
$("#link").attr("href");
2、CSS操作
获取样式：css(name)
修改单个样式：css(key,value)
修改多个样式：css({key1:value1,key2:value2,key3:value3...})
示例：设置背景颜色
$("#demo").css({"backdround-color":"#FFFFFF"});
3、内容操作
获取或设置HTML内容：html()、html(val)；
只用于获取或设置标签的值
获取或设置对象的值：val()、val(val)；
用于获取或设置文本的值
追加内容：append(content)
删除节点：remove()
————本文摘自《jQuery开发完全技术宝典》
JavaScript是一种脚本语言，主要功能是设计网页交互，动态效果。但是由于JavaScript版本之间的差异性，以及各大浏览器对于JavaScript和DOM的解析不统一，要编写跨浏览器的程序非常麻烦。因此为了简化JavaScript开发，一些JavaScript代码库就应运而生了，其中最有代表性的就是jQuery。jQuery是一个快速、简捷的JavaScript框架，它的设计宗旨是“Write
Less，Do More”，即倡导写了更少的代码，做更多的事情。jQuery封装了JavaScript常用的功能代码，提供一种简洁、快捷的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，能够兼容CSS3，兼容各种主流浏览器，如：IE6.0+，FF1.5+，Safari2.0+，Opera9.0+，Chrome等，因此越来越被人喜爱。
jQuery能够满足下列需求：
①取得页面中的元素
②修改页面的外观
③改变页面的内容
④响应用户的页面操作
⑤为页面添加动态效果
⑥不需刷新页面即可从服务器获取信息
⑦简化常见的JavaScript任务
jQuery框架无须安装，只需要在网页文档的头部(<head>标签里面)导入jQuery框架源代码的文件即可，导入的文件可以使用相对路径，也可以使用绝对路径。导入jQuery的方法是：
<script src="框架源代码路径"type="text/javascript"></script>
jQuery的核心就是从HTML文档中匹配元素并对其执行操作，内置的模拟CSS选择器能够通过元素的特性或者文档位置来描述元素的样式。jQuery把确保代码能够跨越所有主流浏览器以一致的方式进行工作，摆在了高优先级的位置，解决了跨浏览器兼容问题，使DOM的操作趋于统一。
jQuery框架本身就是在JavaScript语言基础上进行包装的，因此jQuery代码本质上也是JavaScript代码，自然jQuery代码可以与JavaScript代码相互使用。初学者可以没必要去区分到底哪一行是jQuery代码，哪一行是JavaScript代码，但是必须区分清楚jQuery对象和Dom对象，以及他们各自适用的方法。
DOM对象
DOM是HTML与XML的应用编程接口(API)，DOM将整个页面映射为一个由层次结点组成的文件。
jQuery对象
jQuery对象是通过jQuery框架包装DOM对象之后产生的一个新对象，从本质上分析它仅是DOM对象的集合，因此可以把DOM对象看成一独立的个体，而jQuery可以是多个DOM对象组成的数据集合。
<一、jQuery对象和DOM对象的互相转换>
jQuery框架为jQuery对象定义了独立使用的方法和属性，它无法直接调用DOM对象的方法，相反，DOM对象也无法直接调用jQuery对象的方法或属性。但它们之间是可以相互转换的，因为它们所操作的对象都是DOM元素，只不过jQuery对象是包含多个DOM元素的数组，也称为类数组，而DOM对象是一个单个的DOM元素。
1.把jQuery对象转换为DOM对象有两种方法：
①借助数组下标来读取jQuery对象集合中的某个DOM元素对象：
[html] view
plaincopy
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
var lis = $("li"); //传入一个标签元素，返回jQuery对象
var li = lis[0]; //返回DOM对象
alert(li.innerHTML);
})
</script>
②借助jQuery对象的get()方法，为get()方法传递一个下标值，即可从jQuery对象中取出一个DOM对象元素。
[html] view
plaincopy
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
var lis = $("li");
var li = lis.get(0);
alert(li.innerHTML);
})
</script>
2.把DOM对象转换为jQuery对象：对于DOM对象来说，直接把它传递给$()函数即可，jQuery对象会自动把它包装为jQuery对象，然后就可以自由调用jQuery定义的方法。
[
[html] view
plaincopy
<script type="text/javascript">
$(function () {
var li = document.getElementsByTagName("li");
var $li = $(li[0]); //把第一个li元素封装为jQuery对象
alert($li.html()); //调用jQuery对象的方法
})
</script>
实际上，也可以把DOM元素数组传递给$()函数，jQuery对象会自动把所有DOM元素包装在一个jQuery对象中。
[html] view
plaincopy
<script type="text/javascript">
$(function () {
var li = document.getElementsByTagName("li");
var $li = $(li); //把所有li元素封装为jQuery对象
alert($li.html()); //调用jQuery对象的方法
})
</script>
<二、jQuery构造器>
jQuery把所有的操作都包装在一个jQuery()函数中，形成统一(也是唯一)的操作入口，这为jQuery降低了门槛。jQuery()函数能够接收任意类型的数据，但是能够解析的参数包括也下四种类型。
①jQuery(expression,context)
参数为一个表达式，该表达式可以是ID、DOM元素名、CSS表达式、XPath表达式等，jQuery将根据表达式匹配文档中的元素，然后将找到的元素包装到一个jQuery对象中返回。
[html] view
plaincopy
jQuery("div#wrap>p:first").addClass("red");
在上面的表达式字符串中，div#wrap表示id为wrap的div元素，然后在该元素中匹配子元素p，最后筛选出第一个p元素。"div#wrap>p:first"是CSS表达式，如果使用XPath表达式表示，则应该表示为"div#wrap/p:first"，:first是一个伪类，表示其中的第一个。addClass()为jQuery对象用来添加CSS样式类的方法，相反操作的方法为removeClass().
②jQuery(html)
参数表示一个HTML结构字符串，此时jQuery将创建一个对应结构的HTML文档片段。例如：
[html] view
plaincopy
$('ul').append($('<li>new item</li>'));
$('<li>new item</li>')将其中的字符串转换为DOM对象，然后通过append()方法加入元素到最后。
③jQuery(elements)
参数是一个DOM元素对象或集合，此时jQuery将DOM元素或集合中的DOM元素封装为jQuery对象。例如：
[html] view
plaincopy
$(document).ready(function(){
$('ul').css('color','red');
});
在上面的代码中，jQuery构造函数把document对象封装为一个jQuery对象，然后调用ready()方法。Ready事件处理函数为document对象绑定一个事件，当页面初始化后将ul的颜色设置为红色。
④jQuery(fn)
参数是一个处理函数。$(document).ready()由于频繁使用，所以jQuery使用$(fn)来代替，fn表示处理函数。ready处理函数在文档内容完全载入后执行，因此不需要等待外部链接文件载入完成，响应要比load()事件早。
[html] view
plaincopy
$(function(){
$('ul').css('color','red');
});
<三、jQuery语法>
jQuery对象及基本语法
$(this).hide() 隐藏当前对象
$("p").hide() 隐藏所有<p>标签
$("p.test").hide() 隐藏所有class="test"的<p>标签
$("#test").hide() 隐藏所有id="test"元素
jQuery使用美元符号$来表示定义一个jQuery对象，选择器用来查找页面中的DOM元素，后米阿尼的方法动作时对该对象执行的操作。
jQuery代码是非常优雅的，也是非常灵巧的。它允许用户连续设计各种行为，从而实现按人的惯性思维进行快速开发。例如：
[html] view
plaincopy
<style type="text/css">
.panel
{
padding :60px;
background-color :Red;
color:#FFFFFF;
font-size:50px;
font-weight:bold;
width:600px;
text-align:center;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//第一行代码，在文档中添加四个按钮
$('<input type="button" value="click me" /><input type="button" value="triggle click me" /><input type="button" value="detach handler" /><input type="button" value="show/hide text" />').appendTo($('body'));
//分别选中四个按钮，并为它们绑定不同的事件处理函数
$('input[type="button"]')
.eq(0).click(function () { //找到第一个按钮，并绑定事件处理函数
alert('you clicked me!');
}).end().eq(1) //返回所有按钮，再找到第二个按钮
.click(function () { //为第二个按钮绑定click事件处理函数
$('input[type="button"]:eq(0)').trigger('click');
}).end().eq(2) //返回所有按钮，再找到第三个按钮
.click(function () { //为第三个按钮绑定click事件处理函数
$('input[type="button"]:eq(0)').unbind('click');
}).end().eq(3) //返回所有按钮，再找到第四个按钮
.toggle(function () { //为第四个按钮绑定toggle事件处理函数
$('.panel').hide('slow');
}, function () {
$('.panel').show('slow');
});
});
</script>
在以上代码中，通过end()方法取消当前的jQuery对象，返回前面的jQuery对象。这样当匹配某个按钮时，为其绑定事件处理函数，然后调用end()方法，则又返回前一个jQuery对象，即按钮集合。
链式代码已经成为jQuery非常流行的一个特点，在使用链条方式写代码时，可能会用到eq()、filter()的jQuery方法改变链式方法的对象，但是借助jQuery的end()方法又能够恢复最初的jQuery对象，从而可以实现继续执行链式操作。
注意：①有几个jQuery的方法并不返回jQuery对象，所以链式操作就不能继续下去，如get()就不能像eq()那样使用。
②如果在同一个jQuery对象上执行不超过3个方法，则可以在同一行内书写。
③如果在同一个jQuery对象上执行很多的操作，则应该分行进行书写，这样方便阅读和修改。
④对于多个对象执行少量的操作，则可以为每一个对象书写一行代码。如果涉及子元素操作，则可以考虑使用缩进进行设计，这样能够区分层次。
⑤如果对于多个对象执行很多连续的操作，则可以考虑结合上面几种方法同时进行设计。
<四、jQuery选择器>
jQuery选择器支持ID、tagName、CSS1~CSS3表达式、XPath表达式，它不仅模仿CSS和XPath选择器的用法和功能，还自定义了很多过滤方法。
所谓选择器(Selector)，通俗地说就是一个表示特殊语义的字符串。只要把选择器字符串传递给jQuery()构造函数，就能够选择不同的DOM对象，并且返回jQuery对象。jQuery选择器按照功能主要分为选择和过滤，并允许配合使用，可以同时使用组合成一个选择器字符串。两者的主要区别是：
①过滤作用的选择器是指定条件从前面匹配的内容中筛选的。过虑选择器可以单独使用，此时表示从全部“*”中筛选。$(":[title]")等同于$("*:title")
②选择功能的选择器不会有默认范围，因为其作用是选择而不是过虑。
[html] view
plaincopy
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[type='button']").click(function () {
var i = 0;
$("input[type='text']").each(function () {
i += parseInt($(this).val());
});
$('label').text(i);
});
$('input:lt(2)').add('label')
.css('border', 'none')
.css('borderBottom', 'solid 1px navy')
.css({ 'width': '30px' });
});
</script>
</head>
<body>
<input value="1" type="text"/><span>+</span><input value="2" type="text"/>
<input type="button" value="="/>
<label> </label>
</body>
在以上代码中，$("input[type='button']")选择器可以匹配文档中的type属性值为button的input元素，这个是CSS表达式。在为button添加的click事件处理函数中，$("input[type='text']")
选择器能够匹配文档中所有输入框，然后调用each()方法遍历所有匹配的文本框，利用$(this)选择器获取当前文本框，使用val()读取当前文本框的值，经过parseInt()转换类型后再将它们相加之后作为文本信息添加到label元素中显示出来。
其中，$('input:lt(2)')选择器能够匹配文档中的所有input元素，然后筛选出排在前面的两个input元素，其中，伪类:lt表示序号小于某个值的意思。匹配到input元素后，再添加label对象，合并成一个jQuery对象，然后通过链式语法连续调用3个css()方法为文本框设置样式。
注意：如果只给css()方法传递一个字符串参数，则表示读取样式的值，如css('color')就表示读取当前jQuery对象的样式属性color的值，而如果给它传递两个参数，则表示设置样式的值。jQuery对象定义了很多类似的方法，如：val()、text()、html()、click()、change()等。
<五、jQuery事件>
1.HTML DOM文档加载是按顺序执行的，这与浏览器的渲染方式有关系，一般浏览器的渲染操作的顺序大致按如下几个步骤完成：
①解析HTML结构②加载外部脚本和样式表文件③解析并执行脚本代码④构造HTML
DOM模型⑤加载图片等外部文件⑥页面加载完毕
2.load事件必须等到网页中所有内容全部加载完毕之后，才被执行。如果一个页面中包含了大数据的多媒体文件，则就会出现网页文档已经呈现出来，而由于网页数据还没有加载完毕，导致load事件不能够及时被触发。而jQuery的ready事件是在DOM结构绘制完毕之后就执行，也就是说它先于外部文件的加载就被执行了，这样能够确保文档呈现和脚本初始化设置保持同步。总之，ready事件先于load事件被激活，如果网页文档中没有加载外部文件，则它们的响应时间基本是相同的。
3.JavaScript的load事件只能够被编写一次，下面的写法是不允许的，此时它仅能影响最后一次指定的事件处理函数。
[html] view
plaincopy
<script type="text/javascript">
window.onload=funciton(){
alert("页面初始化1");
}
window.onload=funciton(){
alert("页面初始化2");
}
window.onload=funciton(){
alert("页面初始化3");
}
</script>
如果希望这三个事件处理函数都被执行，则应把它们包含在一个处理函数中。
[html] view
plaincopy
<script type="text/javascript">
var f1=function(){
alert("页面初始化1");
}
var f2=function(){
alert("页面初始化1");
}
var f3=function(){
alert("页面初始化1");
}
window.onload=function(){
f1();
f2();
f3();
}
</script>
而对于jQuery的ready事件类型来说，我们可以在同一个文档中多次定义。
[html] view
plaincopy
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
alert("页面初始化1");
});
$(function(){
alert("页面初始化2");
});
$(function(){
alert("页面初始化3");
});
</script>
<六、jQuery类数组操作>
jQuery类数组的操作主要包括元素定位、查找、复制和删除等。另外，还可以通过迭代器和映射器扩展对类数组的操作功能。类数组的操作对象是集合。
1.定位元素：jQuery定义了get()和index()方法用来定位元素，它们是集合操作的最基本方法。另外，jQuery还定义了get(index)和eq(index)方法，用来读取指定位置的元素。get(index)和eq(index)方法的主要区别在于：
get(index)方法用于读取集合中的元素，它与直接通过[i]来读取元素的方法是完全相同的；
eq(index)方法用于克隆集合中的元素，也就是说不修改数组元素。
2.复制元素：jQuery模拟Array的slice()方法也实现了元素的复制功能
3.添加元素：使用add()方法添加元素
4.过滤元素：filter()方法能够筛选出与指定表达式匹配的元素集合，也可以通过该方法来筛选当前的jQuery对象的元素，或者使用逗号分隔的多个表达式。filter()方法是grep()和multiFilter()函数的综合，如果参数是函数，就采用jQuery.grep()函数来完成，否则采用jQuery.multiFilter()函数进行selector方式的过滤。jQuery.grep()函数提供了以自定义函数回调的形式来过滤集合中不需要的元素，最后形成需要的数组，与map()函数功能类似。jQuery.multiFilter()函数支持采用“,”符号分隔的selector多表达式方式。
jQuery.multiFilter()函数也可以作为筛选器，与jQuery.filter()方法一样，selector的多表达式也可以只是筛选器的组合，即以·、#、:、[这四种符号作为分隔的表达式。
not()方法也是根据selector来过滤不符合条件的元素，但是not()方法建立在filter()方法基础之上，执行效率更高。
5.映射元素：集合映射是非常实用的工具。jQuery定义了each()和map()两个映射方法。each()方法是对集合中的每个元素都执行回调函数，而map()方法还能够收集每个回调函数的返回结果组成一个新的集合。
callback回调函数的语法格式如下：callback:function(index,value)，参数index表示索引号，参数value表示数组的index对应的元素或对象的第index个处理的属性。
如果使用参数args()，则callback回调函数的语法格式如下：callback(args)，参数args是回调函数设定的参数。
6.绑定时间：bind(绑定的事件类型，绑定的方法名)
例子：
$(function(){
$("#btn").bind("click",function(){
alert("HelloWorld!");
})
})
<七、jQuery属性操作、CSS操作和内容操作
1、属性操作
获取属性值：attr(name)
修改属性值：attr(key,name)
删除属性：removeAttr(name)
示例：获取<a>标签中属性href的值
<a id="link"href="http://www.baidu.com" />
$("#link").attr("href");
2、CSS操作
获取样式：css(name)
修改单个样式：css(key,value)
修改多个样式：css({key1:value1,key2:value2,key3:value3...})
示例：设置背景颜色
$("#demo").css({"backdround-color":"#FFFFFF"});
3、内容操作
获取或设置HTML内容：html()、html(val)；
只用于获取或设置标签的值
获取或设置对象的值：val()、val(val)；
用于获取或设置文本的值
追加内容：append(content)
删除节点：remove()
————本文摘自《jQuery开发完全技术宝典》
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery中子元素和后代元素的区别
- Jquery实现侧边栏跟随滚动条固定（兼容IE6）
- JQuery中的DOM操作
- 如何使用seajs+jQuery构建中型项目
- Jquery版本导致Ajax不执行success回调函数
- Jquery实现侧边栏跟随滚动条固定（兼容IE6）
- jQuery动画效果animate和scrollTop结合使用实例
- jquery删除指定的html标签并保留标签内文本内容的方法
- jQuery瀑布流插件Wookmark使用实例
- jquery实现不同大小浏览器使用不同的css样式表的方法
- jquery 判断滚动条到达了底部和顶端的方法
- 使用jquery中height()方法获取各种高度大全
- jquery中子元素和后代元素的区别示例介绍
- jquery跟js初始化加载的多种方法及区别介绍
- jQuery防止click双击多次提交及传递动态函数或多参数
- 一起学习JQuery
- jquery源码学习
- jQuery-validate error messages in Twitter ...
- jquery垂直弹性下拉二级菜单
- jQuery中的hover方法教程