jQuery学习笔记（2）：选择器之查找和过滤

jQuery学习笔记（2）：选择器之查找和过滤

查找

<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>

使用find()查找：

var ul = $('ul.lang');	//获得ul
var dy = ul.find('.dy');	//获得javascript,python,swift
var swf = ul.find('#swift');	//获得swift
var hsk = ul.find('[name=haskell]');	//获得haskell

从当前节点向上查找使用parent()方法：

var swf = $('#swift');	//获得swift
var parent = swf.parent();	//获得swift的上层节点<ul>
var a = swf.parent('.red');		//同时传入过滤条件，若不符合则返回空对象

对于同一层级的节点，可以通过next()和prev()方法。

过滤

过滤可以使用filter()方法，过滤掉不符合选择器条件的节点：

var langs = $('ul.lang li');	//拿到所有语言，javascript,python,swift,scheme,haskell
var a = langs.filter('.dy');	//拿到javascript,python,scheme
//这里的过滤是指选择出符合过滤条件的节点

或者传入一个函数，要特别注意函数内部的this被绑定为DOM对象，不是jQuery对象：

var langs = $('ul.lang li');	//拿到javascript,python,swift,scheme,haskell
langs.filter(function(){
	return this.innerHTML.indexOf('S') === 0;	//返回S开头的节点
	});	//拿到Swift,Scheme

map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：

var langs = $('ul.lang li');	//拿到javascript,python,swift,scheme,haskell
var arr = langs.map(function(){
	return this.innerHTML;
	}).get();	//用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

一个jQuery对象如果包含了不止一个DOM节点，first(),last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉：

var langs = $('ul.lang li');	//拿到javascript,python,swift,scheme,haskell
var js = langs.first();		//javascript,相当于$('ul.lang li:first-child')
var haskell = langs.last();		//haskell,相当于$('ul.lang li:last-child')
var sub = langs.slice(2,4);		//swift,scheme,参数和数组的slice()方法一致

---

javascript的slice()方法：slice(start,end)，返回一个新的数组，包含从start到end(不包括end元素)的元素。

---

JSON.stingify()方法是把javascript对象转换成json字符串。
基本语法：JSON.stringify(value,[,replacer][,space])
value: 必选字段，指输入的对象，比如数组这些。
replacer:该参数是可选的，它可以有两种类型，第一种是数组，第二种是函数方法。
space: 该参数的含义是指使用什么来做分隔符的。
1）如果该参数省略的话，那么显示出来的值是没有分隔符的。
2）如果是一个数字的话，那么它的含义是 缩进几个字符的意思，最大值为10.
3）如果是一个转义字符的话，比如 ‘\t’, 表示回车，那么它每行一个回车。
4）如果是字符串的话，那么每行输出值的时候把这些字符串附加上去，最大长度也是10个字符。

---