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框架无须安装，只需要在网页文档的头部(<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元素对象：
<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对象元素。
<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><script type="text/javascript">
$(function () {
var li = document.getElementsByTagName("li");
var $li = $(li[0]); //把第一个li元素封装为jQuery对象
alert($li.html()); //调用jQuery对象的方法
})
</script><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对象中返回。
jQuery("div#wrap>p:first").addClass("red");②jQuery(html)
参数表示一个HTML结构字符串，此时jQuery将创建一个对应结构的HTML文档片段。例如：
$('ul').append($('<li>new item</li>'));③jQuery(elements)
参数是一个DOM元素对象或集合，此时jQuery将DOM元素或集合中的DOM元素封装为jQuery对象。例如：
$(document).ready(function(){
$('ul').css('color','red');
});④jQuery(fn)
参数是一个处理函数。$(document).ready()由于频繁使用，所以jQuery使用$(fn)来代替，fn表示处理函数。ready处理函数在文档内容完全载入后执行，因此不需要等待外部链接文件载入完成，响应要比load()事件早。
$(function(){
$('ul').css('color','red');
});
<三、jQuery语法>
jQuery代码是非常优雅的，也是非常灵巧的。它允许用户连续设计各种行为，从而实现按人的惯性思维进行快速开发。例如：
<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>链式代码已经成为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")
②选择功能的选择器不会有默认范围，因为其作用是选择而不是过虑。
<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事件只能够被编写一次，下面的写法是不允许的，此时它仅能影响最后一次指定的事件处理函数。
<script type="text/javascript">
window.οnlοad=funciton(){
alert("页面初始化1");
}
window.οnlοad=funciton(){
alert("页面初始化2");
}
window.οnlοad=funciton(){
alert("页面初始化3");
}
</script><script type="text/javascript">
var f1=function(){
alert("页面初始化1");
}
var f2=function(){
alert("页面初始化1");
}
var f3=function(){
alert("页面初始化1");
}
window.οnlοad=function(){
f1();
f2();
f3();
}
</script><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是回调函数设定的参数。
————本文摘自《jQuery开发完全技术宝典》
扫一扫
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
