书的全名是:
Jonathan Chaffer, Karl Swedberg, 李松峰. jQuery基础教程(第4版)[J]. 中国科技信息, 2013(23):105-105.
是本好书,我看完之后就一个感觉,以前我是怎么有脸称自己会JQuery基础的。而且看完前一二章之后二话不说,直接去淘宝自己买了一本。毕竟好书啊。
下面的内容是对前3章的摘记,可能有点杂,但我尽量还原他的意思。
第一章就是一些介绍,我没看,所以直接从第二章开始了。
第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-1:子元素组合符
$(document).ready(function(){
$('#selected-plays > li').addClass('horizontal');
});
#selected-plays > li
2.3.2 代码清单 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:通配符2
$(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的数组是从0开始计算的,而CSS则是从1开始的,注意。
2.7 访问DOM元素:get(index)/[index]
直接在计算中获取DOM元素:
var myElement=$('#my-element').get[0];
或者有简写形式:
var myElement=$('#my-element')[0];