认识和使用JavaScript库

1、js库常用语法说明

• 使用$()函数作为选择器方法的简写
• 支持以点将方法连缀起来的语法，例如：$('p').removeClass('classFoo').addClass('classBar');
• jQuery提供的迭代语法：each，

$('li').each(function(i){    alert( typeof this );})

jQuery的each方法以及其它循环方法，会基于列表中的每个元素来执行一个回调函数。这个回调函数只接收元素在列表中的索引作为参数，并在当前节点的上下文中执行，因此上面例子中的this引用的就是每个li元素自身。

2、CSS选择器知识

在多数JS库中都可以使用以下类型的CSS选择器功能：

• $('*')选择所有元素；
• $('tag')选择所有HTML标签中的tag元素；
• $('tagA tagB')选择所有作为tagA后代的tagB元素；
• $('tagA,tagB,tagC')选择所有tagA元素、tagB元素、tagC元素；
• $('#id')和$('tag#id')选择所有ID为id的元素或ID为id且标签为tag的元素；
• $('.className')和$('tag.className')选择所有类名为className的元素或类名为className且标签为tag的元素。

也可以使用组合选择器$('#myList li')或$('ul li a.selectMe')以空格来分隔选择更具体的后代元素。

jQuery还支持下列CSS2.1属性选择器：

• $('tag[attr]')选择所有带attr属性的tag元素；
• $('tag[attr=value]')选择所有attr属性值恰好等于value的tag元素；
• $('tag[attr*=value]')选择所有attr属性值中包含字符串value的tag元素；
• $('tag[attr~=value]')选择所有attr属性值中为空格分隔的多个字符串且其中一个字符串等于value的tag元素；
• $('tag[attr^=value]')选择所有attr属性值以value开头的tag元素；
• $('tag[attr$=value]')选择所有attr属性值以value结尾的tag元素；
• $('tag[attr!=value]')选择所有attr属性值不等于value的tag元素；

子选择器或同辈选择器：

• $('tagA > tagB')选择作为tagA元素子元素的所有tagB元素；
• $('tagA + tagB')选择紧临tagA元素且位于其后的tagB元素；
• $('tagA ~ tagB')选择作为tagA同辈元素且位于其后的所有tagB元素；

还支持一些伪类和伪元素选择器：

• $('tag:root')选择作为文档根元素的tag元素；
• $('tag:nth-child(n)')选择作为其父元素正数第n个子元素的所有tag元素；
• $('tag:nth-last-child(n)')选择作为其父元素倒数第n个子元素的所有tag元素；
• $('tag:nth-of-type(n)')选择几个同辈tag元素中的正数第n个；
• $('tag:nth-last-of-type(n)')选择几个同辈tag元素中的倒数第n个；
• $('tag:first-child')选择作为其父元素第一个子元素的tag元素；
• $('tag:last-child')选择作为其父元素最后一个子元素的tag元素；
• $('tag:first-of-type')选择几个同辈tag元素中的第一个；
• $('tag:last-of-type')选择几个同辈tag元素中的最后一个；
• $('tag:only-of-type')选择同辈元素中唯一一个标签为tag的元素；
• $('tag:empty')选择所有没有子元素的tag元素；
• $('tag:enabled')选择界面元素中所有已经启用的tag元素；
• $('tag:disabled')选择界面元素中所有已经禁用的tag元素；
• $('tag:checked')选择界面元素中所有已经被选中的tag元素；
• $('tag:not(s)')选择与选择器s不匹配的所有tag元素；

使用选择器与使用DOM方法的效率对比：请选择出文章中nav元素中包含的所有链接。

（1）先使用DOM方法实现

var links = [];var articles = document.getElementByTagName("article");for (var a=0; a<articles.length; a++) {    var navs = articles[a].getElementByTagName("nav");    for (var n=0;n<navs.length; n++) {        var links = nav[n].getElementsByTagName("a");        for (var l=0;l<links.length; l++) {            links[links.length] = links[l];        }    }}

（2）使用选择器实现

var links = $('article nav a');

3、jQuery库提供的一些专有选择器

• $('tag:even')选择匹配元素集中偶数序号的元素——特别适合突出显示表格行！
• $('tag:odd')选择匹配元素集中奇数序号的元素；
• $('tag:eq(0)')和$('tag:nth(0)')选择匹配元素集中的第一个元素，如页面中第一个段落；
• $('tag:gt(n)')选择匹配元素集中索引值大于n的所有元素；
• $('tag:lt(n)')选择匹配元素集中索引值小于n的所有元素；
• $('tag:first')等价于:eq(0)；
• $('tag:last')选择匹配元素集中的最后一个元素；
• $('tag:parent')选择匹配元素集中包含子元素（文本节点也算）的所有元素；
• $('tag:contains('test')')选择匹配元素集中包含指定文本的所有元素；
• $('tag:visible')选择匹配元素集中所有可见的元素（包括display属性为block和inline、visibility属性为visible以及type属性不是hidden的表单元素）；
• $('tag:hidden')选择匹配元素集中所有隐藏的元素（包括display属性为none、visibility属性为hidden以及type属性为hidden的表单元素）。

使用举例：

• 修改页面中第一个段落的字体粗细：$("p:first").css("font-weight","bold");
• 用一行代码来显示所有隐藏了的<div>元素：$('div:hidden').show();
• 隐藏所有包含单词“scared”的div元素：$("div:contains('scared')").hide();

jQuery提供的专为快速访问表单元素的选择器：

• :input选择表单中的所有元素（input、select、textarea、button）；
• :text选择所有文本字段（type="text"）；
• :password选择所有密码字段（type="password"）；
• :radio选择所有单选按钮（type="radio"）；
• :checkbox选择所有复选框（type="checkbox"）；
• :submit选择所有提交按钮（type="submit"）；
• :image选择所有表单图像（type="image"）；
• :reset选择所有重置按钮（type="reset"）；
• :button选择所有其他按钮（type="button"）；

4、使用回调函数进行筛选

在上述高级选择器仍然不能满足你的需要时，还可以使用回调函数来选择DOM元素，也就是基于每个元素执行相应的筛选代码。

回调函数返回true则意味着相应的元素会出现在结果集中，返回false则意味着相应元素不会出现在结果集中。

举例：选择“只包含一个图像子元素的所有锚标签”。

使用jQuery实现：

//jQuery库的回调筛选函数var singleImageAnchors = $('a').filter(function() {     return ($('img',this).length == 1)})

5、使用jQuery操作DOM元素

（1）给文档的body元素添加一个新的div元素。新的div元素会有一个值为example的id，并且包含“Hello”。

$('<div id="example">Hello</div>').appendTo(document.body);

（2）移动某些元素的位置，如把一个列表中的所有元素全部转移到另一个列表中

$('ul#list1 li').appendTo("ul#list2")

（3）把一个列表中的所有元素全部复制到另一个列表中

$('ul#list1 li').clone().appendTo("ul#list2")

6、jQuery加载事件的方法

下面是前面章节中使用的在浏览器打开时，执行自动加载指定函数的实现方法。

function addLoadEvent(func) {    var oldonload = window.onload;    if (typeof window.onload != 'function') {        window.onload = func;    } else {        window.onload = function() {            oldonload();            func();        }    }}

jQuery实现方法一：

$(document).ready(handler);$(handler);

jQuery实现方法二：

$(document).ready(function() {    //在页面加载后执行一些操作})

jQuery实现方法三：

function myFunction() {    //在页面加载后执行一些操作}$(myFunction);

或

$(function() {    //在页面加载后执行一些操作});

7、jQuery可以支持的其它事件

jQuery大概支持以下事件：

• blur
• focus
• click
• dbclick
• mouseover
• mouseout
• submit

使用这些事件，可以为DOM元素批量注册事件处理函数。比如，为页面中的每个链接注册相同的click事件处理函数：

$('a').click( function(event) {    //在新窗口中打开当前href中的链接    window.open(this.getAttribute('href'));    //阻止链接的默认动作    return false;)

一类特殊的用途：你可以在没有实际用户交互的情况下，通过调用相应的方法来触发元素上已经注册的事件监听器

$('a:first').click();

8、jQuery与Ajax

（1）jQuery的高级方法

jQuery有一个低级的$.ajax方法，可以接受各种属性。不过，更多时候是使用那些对$.ajax()包装后的高级方法。

• $.post(url, params, callback)通过POST请求取得数据。
• $.get(url, params, callback)通过GET请求取得数据。
• $.getJSON(url, params, callback)取得JSON数据。
• $.getScript(url, callback)取得并执行JavaScript文件。

这些高级方法的回调方法总会被作为$.ajax()的成功回调方法调用。每个回调方法都接受两个参数，分别是请求对象的响应文本（responseText）和状态（status）。

$.get('some-server-side-script.php',    { key: 'value' },    function(responseText, status){        //你的代码    })

使用getJSON和getScript方法时响应会被求值，因此getJSON方法中传给回调的参数是一个JavaScript对象。

status状态的取值：

• success
• error
• notmodified

样例一：

// 使用$.get()实现快速的Ajax调用// 创建一个一次性的请求并在成功时弹出消息$.get('some-server-side-script.php',    { key: 'value' },    function(responseText, status){        alert('successful: ' + responseText);    }); 

样例二：

// 使用$.getJSON()加载JSON对象// 创建一个一次性的请求加载JSON文件并在成功时弹出消息$.getJSON('some-server-side-script.php', function(json){        alert('successful: ' + json.type);    }); 

（2）jQuery提供的load()方法

• $(expression).load(url, params, callback)把URL的结果加载到相应的DOM元素中。

这个方法会以返回的结果自动填充相应的一个或多个元素：

// $(...).load()用于自动填充元素// 创建一个一次性请求，用reponseText的内容填充#ajax-updater-target元素$("#ajax-updater-target").load(    'some-server-side-script.php',    { key: 'value' },    function(responseText, status){        alert('successful: ' + responseText);    });

（3）使用jQuery实现周期性的保存功能

// 每30秒保存一次#autosave-form表单的信息// 然后更新#autosave-status元素表明更新状态setTimeout(function() {    $('autosave-status').load(        'some-server-side-script.php',        $.param({            title:$('#autosave-form input[@name=title]').val(),            story:$('#autosave-form textarea[@name=story]').val()        })    );}, 30000);