1 jQuery简介
与JavaScript相比,jQuery拥有跨浏览器的兼容性,获取网页中不存在的元素也不会报错。
jQuery有两个版本分别是
1.x
与2.x
,区别在于2.x
移除了对IE6、7、8的支持。
符号$
jQuery把所有的功能都封装在jQuery
变量上,而$
符号就是jQuery
的别名,jQuery
是一个函数,也能被当成对象。
如果引入其他JavaScript库内也有$
符号从而发生冲突,此时可以使用noConflict
来解除jQuery库中的$
符号。
jQuery.noConflict();
jQuery
对象类似一个数组,而里面装载着一些DOM
节点对象,可以使用$(xxx).length
的形式得出数量。
2 选择器
jQuery的选择器用法与CSS中的选择器用法相差无几。
使用$(xxx)
的形式,就能返回一个jQuery
对象,jQuery
对象类似一个数组,而里面装载着一些DOM
节点对象,可以使用$(xxx).length
的形式得出数量。
jQuery
对象与DOM
节点对象可以互相转换,如:
/* 为了区分jQuery对象与普通对象的区别,变量一般以$开头 */
var $div=$(".abc");
/* 注意返回的是一个Array对象,内容是jQuery包含的内容,里面是abc类的DOOM节点对象集合(有时候使用了map()方法,返回集合的内容可能会发生变化) */
$div.get();
$div.get(0);//读取
/* 也可以直接用索引读取 */
$div[0];
/* 节点对象转换jQuery */
$(divDOM);
jQuery的选择器可分为基本选择器,层级选择器,过滤选择器,表单选择器。
2.1 基本选择器
基本选择器有:#id
选择器,.class
选择器,element
选择器,*
选择器。
此外这些选择器还可以适当地组合:
/* 选择同时拥有多个类名的节点 */
var $a=$(".classname1.classname2");//与CSS的一样,没有空格号
/* 按组合查找,与选择同时拥有多个类名的节点的方法类似 */
var $a=$('p.abc');
var $b=$('input[name=name]');
/* 多项选择 */
var a=$("p,div");
2.2 层级选择器
层级选择器就是通过DOM元素之间的层次关系来获取特定的元素,如后代元素,子元素(子元素是后代元素的子集),同辈元素,相邻元素等。
使用选择器表达相邻元素,使用的是+
符号(也可以使用next()
方法),如:
/* 获取ip为div1的div元素的下一个同辈的div元素 */
var $div = $("div#div1+div");
使用选择器表达某元素后面所有的同辈元素,使用的是~
符号(也可使用nextAll()
方法),如:
/* 获取ip为div1的div元素后面的所有同辈的div元素 */
var $div = $("div#div1~div")
2.3 过滤器选择器
过滤器选择器(filter)就像是CSS中的伪类选择器,通常以:
号开头。
可分为:基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单属性过滤。
2.3.1 基本过滤选择器
:first
:选取第一个元素:last
:选取最后一个元素:not(selector)
:剔除与之匹配的元素:even
:选取索引是偶数的元素,使用时要注意索引的基准,索引以0开始(CSS3中的选择器并没有这类型):odd
:选取奇数索引:eq(index)
:选取索引为index
的元素,如$(:eq(1))
:gt(index)
:选取索引比index
大的元素,如$(:gt(1))
:lt(index)
:选取索引比index
小的元素,如$(:lt(1))
:focus
:选取当前获得焦点的元素
2.3.2 内容过滤选择器
:contains(text)
:选取含有文本内容为text的元素,如$("div.contain('我')")
,注文本要加引号:has(selector)
:选取含有 选择器所匹配元素 的元素,$("div:has(p)")
,选取含有p
元素的div
元素
2.3.3 可见性过滤选择器
隐藏和显示对于动态网页很重要
:hidden
:选取看不见的元素,包括<input type="hidden"/>
,<div style="display:none;">
等:show
:选取看得见的元素
2.3.4 属性过滤选择器
2.3.5 子元素过滤选择器
nth-child(index/even/odd/equation)
:选取每个父元素下的第index
个子元素,注意p:nth-child
与p :nth-child
的区别:first-child
:last-child
注意:
nth-child(index)
其中的index
是从1开始,而不是像eq(index)
那样从0开始
$("ol li:first-child");
$("ol li:last-child");
$("ol li:nth-child(2)")
2.3.6 表单对象属性过滤选择器
此过滤器主要对表单的属性过滤::enabled
:选取可用元素:disabled
:选取不可用元素:checked
:选取被选中的元素(单选框,多选框),用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked')
:selected
:选取被选中的元素(下拉列表)
2.4 表单选择器
:input
:可以选出input
,button
,select
和textarea
,注意概念,这并不仅仅选出input
。比如想要去除button
,可以这么写#formname :input:not(button)
:file
:可以选择<input type="file">
,和input[type=file]
一样;:checkbox
:可以选择复选框,和input[type=checkbox]
一样;:radio
:可以选择单选框,和input[type=radio]
一样;:text
:选取单行文本框- 等等,主要就是针对
type
属性
3 查找
3.1 find()
使用find()
查找等同于使用组合查找方法,在某个节点的所有子节点中查找,使用find()方法,它本身又接收一个任意的选择器。
<ul class="lang">
<li class="js dy">JavaScript</li>
<li class="dy">Python</li>
<li id="swift">Swift</li>
<li class="dy">Scheme</li>
<li name="haskell">Haskell</li>
</ul>
var $ul = $('ul.lang'); // 获得<ul>
var $dy = ul.find('.dy'); // $('ul.lang.dy')
var $swf = ul.find('#swift'); // $('ul.lang#swift')
var $hsk = ul.find('[name=haskell]'); // $('ul.lang[name=haskell]')
3.3 children()
方法
与find()
类似,只不过children()
方法只取得当前节点的子元素,注意只考虑子元素不考虑后代元素,该方法接受可选的选择器表达式
3.2 parent()
,parents()
方法
parent()
取得当前节点的父级元素,注意只考虑父级元素不考虑祖先元素,该方法接受可选的选择器表达式,而parents()
方法可以历遍所有祖先元素,并返回所有匹配的祖先元素。
3.3 next()
, prev()
与siblings()
方法
同层的节点就可以使用next()
与prev()
,同样的,方法本身可以接受一个任意选择器。其中next()
用于向下找,而prev()
用于向上找,另外还有nextAll()
以及prevAll()
方法。
siblings()
方法用于获取所有匹配元素前后的同辈元素,同样的,方法本身可以接受一个任意选择器。
4 过滤
与高阶函数map、filter类似,jQuery对象也有类似的方法。
4.1 filter()
使用filter()
参数可以为节点选择器或函数,值得注意的是如果在函数中运用到this
,那么this
的指向是DOM对象(毕竟jQuery对象像是一个包含DOM对象的数组嘛)。
/* 传入选择器 */
var $langs = $('ul.lang li');
var $a = $langs.filter('.dy');
/* 传入函数 */
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
4.2 map()
map()
方法把一个jQuery对象包含的若干DOM节点转化为其他对象,所以说jQuery对象的内容不一定都是DOM节点
/* 传入函数 */
var langs = $('ul.lang li');
var arr = langs.map(function () {
return this.innerHTML;
}).get();
// 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
4.3 first()
、last()
和slice()
如同一直所说那样jquery对象就像是个数组,如果一个jQuery对象如果包含了不止一个DOM节点,first()
、last()
和slice()
方法可以返回一个新的jQuery对象。
var langs = $('ul.lang li'); //
var js = langs.first(); // 相当于$('ul.lang li:first-child')
var haskell = langs.last(); // 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // 参数和数组的slice()方法一致
4.4 $().each
与$.each()
$().each
方法规定为每个匹配元素规定运行的函数。注:返回 false 可用于及早停止循环,如:
var $li = $('.li');
$li.each(function(){
if ($(this).text() == 'python') {//注意:this指向的是JavaScript的DOM对象,而不是jQuery对象
alert('找到了' + $(this).index());
return false;
}
})
而$.each()
的作用是处理数组,如:
/* 拼接URL */
var data={name:"seiei",age:'19',sex:'man'};
var arr=[];
$.each(data,function(k,v){
arr.push(k + "=" + encodeURIComponent(v));
});
data = arr.join('&');