《JQuery基础教程》第二章摘记

书的全名是：

Jonathan Chaffer, Karl Swedberg, 李松峰. jQuery基础教程(第4版)[J]. 中国科技信息, 2013(23):105-105.

是本好书，我看完之后就一个感觉，以前我是怎么有脸称自己会JQuery基础的。而且看完前一二章之后二话不说，直接去淘宝自己买了一本。毕竟好书啊。

下面的内容是对前３章的摘记，可能有点杂，但我尽量还原他的意思。

第一章就是一些介绍，我没看，所以直接从第二章开始了。

第2章　选择元素

以前我叫他们选择器，也可以叫选择符。这个下面分开介绍。

2.1 理解DOM

• DOM：Document Object Model，文档对象模型

说的简单一点就是我们写在.html中的文档的代码，无论这代码是body，head，还是a，span。

2.2 使用$()函数

以前总是被这个$()弄昏，弄不懂他什么含义，因为在编写JQuery代码的时候，用到JS的部分，一下子就不知道他到底要干嘛了，现在我知道了：

$( )=JQuery( )

表示这是一个JQuery对象，而不是什么变量，或者别的什么。

2.3 CSS选择符

什么是CSS选择符，这里有个大哥还是大姐总结的蛮好的：我是超链接。

2.3.1 代码清单 2-１:子元素组合符

$(document).ready(function(){
    $('#selected-plays > li').addClass('horizontal');
});

#selected-plays > li

2.3.2 代码清单 2-２：否定式伪类选择符

$(document).ready(function(){
    $('#selected-plays li:not(.horizontal)').addClass('sub-level');
});

否定式：:not()
伪类：.horizontal
否定式伪类选择符：li:not(.horizontal)

2.4 属性选择符

注意，是属性，比如img有alt属性！！！input有type属性，属性一般是包含在标签内部的内容。

例子：

$('img[alt]')

2.4.1 代码清单 2-3：通配符

$(document).ready(function(){
    $('a[href^="mailto:"]').addClass('maito');
});

通配符：href^=”mailto”

超链接中以mailto开头的超链接。

2.4.2 代码清单 2-4：通配符２

$(document).ready(function(){
    $('a[href$=".pdf"]').addClass('pdflink');
});

超链接中以pdflink为结尾的超链接。

2.4.2 代码清单 2-5：组合通配符

$(document).ready(function(){
    $('a[href^="http"][href*="henry"]').addClass('henryLink');
});

组合：[href^=”http”][href*=”henry”]

以http开头，其中包含henry的超链接。

2.5 自定义选择符

不属于DOM，也不属于CSS属性，是JQuery添加的选择符，所以叫自定义选择符。

2.5.1 代码清单 2-6：奇偶性

$(document).ready(function(){
    $('tr:even').addClass('alt');
});

奇：even
偶：odd

2.5.2 代码清单 2-7：单独奇偶性

$(document).ready(function(){
    $('tr:nth-child(odd)').addClass('alt');
});

:nth-child(odd)

代码清单2-6中时，是把所有选择的tr作为一个整体，比如有两个table，那么上下两个table的tr是连着算奇偶性的，但是使用这个的时候，上下两个table是单独计算奇偶性的。

2.5.3 代码清单 2-8：基于上下文内容选择元素

$(document).ready(function(){
    $('tr:contains(Henry)').addClass('highlight');
});

基于上下文内容选择：:contains(Henry)

2.5.4 基于表单的选择符

• input
• button
• enabled
• disabled
• checked
• selected

2.6 DOM遍历方法

2.6.1 代码清单 2-9：filter使用方法

代码清单2-6可以使用filter重写：

$('tr').filter(':even').addClass('alt');

也可以直接传入函数进行判断：

$('a').filter(function(){
    return this.hostname && this.name!=location.hostname;
}).addClass('external');

this的使用方法下面会有讲解，结合那个例子可以更好的理解。

2.6.2 代码清单 2-10：大弟弟选择符

$document.ready(function(){
    $('td:contains(Henry)').next().addClass('hightLight');
});

兄弟选择符：next()

2.6.3 代码清单 2-11：全部弟弟选择符

$(document).ready(function(){
    $('tr:contains(Henry)').nextAll().addClass('highLight');
}

与next()和nextAll()对应的有：

• prev()
• prevAll()

全部兄弟选择器：siblings()。

2.6.4 代码清单 2-12：在选择时包含自身

$(document).ready(function(){
    $('td:contains(Henry)').nextAll().addBack().addClass('highLight');
});

添加自身：.addBack()

2.6.5 代码清单 2-13：父元素选择

$(document).ready(function(){
    $('td:contains(Henry)').parent().children().addClass('highLight');
});

父元素选择：.parent()

2.6.6 代码清单 2-14：连缀

$('td:contains(Henry)')
.parent()
.find('td:eq(1)')//td的第二个td
.addClass('highLight')
.end()           //回到最开始的parent()
.find('td:eq(2)')
.addClass('highLight')

关于JQuery的数组是从０开始计算的，而CSS则是从１开始的，注意。

2.7 访问DOM元素：get(index)/[index]

直接在计算中获取DOM元素：

var myElement=$('#my-element').get[0];

或者有简写形式：

var myElement=$('#my-element')[0];