鸣珂锵玉
鸣珂锵玉

web前端开发（四）—jQuery基础

目录

一、使用jQuery

二、jQuery基础选择器

按ID查找

按标签查找

按class查找

按属性查找

组合查找

多项选择器

练习

层级选择器（Descendant Selector）

子选择器（Child Selector）

过滤器（Filter）

表单相关

练习

查找

DOM操作

过滤

练习

添加DOM

删除节点

练习

鼠标事件

键盘事件

其他事件

事件参数

取消绑定

事件触发条件

jQuery是JavaScript世界中使用最广泛的一个库。

jQuery能帮我们干这些事情：消除浏览器差异/简洁的操作DOM的方法/轻松修改CSS等各种操作。

jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作！

 

一、使用jQuery

使用jQuery只需要在页面的引入jQuery文件即可：

    
    ...
    ...

$符号

$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名：

window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ == jQuery; // truetypeof($); // 'function'

 

二、jQuery基础选择器

选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')。

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点 (页面标签)。

 

按ID查找

如果某个DOM节点有id属性，利用jQuery查找如下：

// 查找 
id="abc">:
 
var $div = $('#abc');

注意，#abc以#开头。返回的对象是jQuery对象。

什么是jQuery对象？jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。

以上面的查找为例，如果id为abc的

存在，返回的jQuery对象如下：

[
id="abc">...
]

如果id为abc的

不存在，返回的jQuery对象如下：

[]

总之jQuery的选择器不会返回undefined或者null，这样的好处是你不必在下一行判断if (div === undefined)。

jQuery对象和DOM对象之间可以互相转化：

var div = $('#abc'); // jQuery对象var divDom = div.get(0); // 假设存在div，获取第1个DOM元素var another = $(divDom); // 重新把DOM包装为jQuery对象

通常情况下你不需要获取DOM对象，直接使用jQuery对象更加方便。如果你拿到了一个DOM对象，那可以简单地调用$(aDomObject)把它变成jQuery对象，这样就可以方便地使用jQuery的API了。

按标签查找

按tag查找只需要写上tag名称就可以了：

var ps = $('p'); // 返回所有
节点
ps.length; // 数一数页面有多少个
节点

按class查找

按class查找注意在class名称前加一个.：

var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// 
class="red">...
// 
class="green red">...

通常很多节点有多个class，我们可以查找同时包含red和green的节点：

var a = $('.red.green'); // 注意没有空格！
// 符合条件的节点：
// 
class="red green">...
// 
class="blue green red">...

按属性查找

一个DOM节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找：

var email = $('[name=email]'); // 找出
var passwordInput = $('[type=password]'); // 找出
var a = $('[items="A B"]'); // 找出

当属性的值包含空格等特殊字符时，需要用双引号括起来。

按属性查找还可以使用前缀查找或者后缀查找：

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM// 例如: name="icon-1", name="icon-2"var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM// 例如: name="startswith", name="endswith"

这个方法尤其适合通过class属性查找，且不受class包含多个名称的影响：

var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM// 例如: class="icon-clock", class="abc icon-home"

组合查找

组合查找就是把上述简单选择器组合起来使用。如果我们查找$('[name=email]')，很可能把表单外的

也找出来，但我们只希望查找，就可以这么写：

var emailInput = $('input[name=email]'); // 不会找出
name="email">

同样的，根据tag和class来组合查找也很常见：

var tr = $('tr.red'); // 找出class="red ...">...

多项选择器

多项选择器就是把多个选择器用,组合起来一块选：

$('p,div'); // 把
和
都选出来
$('p.red,p.green'); // 把
class="red">和
class="green">都选出来

要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。例如，

不会被上面的$('p.red,p.green')选择两次。

练习

使用jQuery选择器分别选出指定元素：

仅选择JavaScript

仅选择Erlang

选择JavaScript和Erlang

选择所有编程语言

选择名字input

选择邮件和名字input

 

    
id="para-1" class="color-red">JavaScript
    
id="para-2" class="color-green">Haskell
    
class="color-red color-green">Erlang
    
name="name" class="color-black">Python
    
class="test-form" target="_blank" action="#0" onsubmit="return false;">
        注册新用户
        
            
            
            
            
        
   

 

层级选择器（Descendant Selector）

如果两个DOM元素具有层级关系，就可以用$('ancestor descendant')来选择，层级之间用空格隔开。例如：

    
    class="lang">
        
  • class="lang-javascript">JavaScript
    •         
  • class="lang-python">Python
    •         
  • class="lang-lua">Lua
    •    

    要选出JavaScript，可以用层级选择器：

    $('ul.lang li.lang-javascript'); // [
  • class="lang-javascript">JavaScript
    • ]
    $('div.testing li.lang-javascript'); // [
  • class="lang-javascript">JavaScript
    • ]

    因为

    和
      都是
    • 的祖先节点，所以上面两种方式都可以选出相应的
    • 节点。

      要选择所有的

    • 节点，用：

      $('ul.lang li');

      这种层级选择器相比单个的选择器好处在于，它缩小了选择范围，因为首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素。

      例如：

      $('form[name=upload] input');

      就把选择范围限定在name属性为upload的表单里。如果页面有很多表单，其他表单的不会被选择。

      多层选择也是允许的：

      $('form.test p input'); // 在form表单选择被
      包含的

      子选择器（Child Selector）

      子选择器$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是节点必须是节点的直属子节点。还是以上面的例子：

      $('ul.lang>li.lang-javascript'); // 可以选出[
    • class="lang-javascript">JavaScript
      • ]
      $('div.testing>li.lang-javascript'); // [], 无法选出，因为
      和
    • 不构成父子关系

      • 过滤器（Filter）

      过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。观察过滤器的效果：

      $('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
      $('ul.lang li:first-child'); // 仅选出JavaScript$('ul.lang li:last-child'); // 仅选出Lua$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

      表单相关

      针对表单元素，jQuery还有一组特殊的选择器：

      :input：可以选择，