Creating the wrapped element set
选择页面元素
多数jQuery操作的第一步,就是先选中页面中已存在的元素,然后对其进行操作。jQuery选择器很强大,完全支持W3C的css选择器语法(包括ie6上不支持的高级选择器),并且不依赖浏览器的css选择器的支持,是完全多浏览器兼容的,例:
- $("p a.specialClass")
- $("a[href*=jquery.com]")
- $("p:even")
- $("form > div")
- $("ul li:nth-child(2)")
jQuery还支持一些自定义的特别有用的选择器,例:
- $(":checkbox:checked:enabled")
- $("div p:not(:hidden)")
全部的选择器,可以查看JQuery官网的
选择器列表,比较多这里也没法一一介绍。另外推荐jQuery in Action一书
附赠源码中的选择器实验室,可以用来练习。jQuery使用插件也可以支持按照XPath选择元素。另外两个小的注意事项
- 除了nth-child的下标从1开始之外,其他涉及位置和下标的选择器,如eq都是0开始的
- :not 括号中只能跟过滤型选择器,而不能是选择型的,如p:not(:hidden)可以:not(p:hidden)不可以
建立新的元素
另外一部分的jQuery的操作始于新建新的页面元素,同样使用$,这个在第一章中讲过,这里还是有两个小注意事项:
- 新建元素可以省略后面的闭合标记,jQuery能自动补齐,如$('<div>')
- 不能用来新建script标记
管理被包装的元素集
“被包装的元素集”(wrapped element set)其实就是前面两点提到的选择的页面元素和新建的元素的合集。这些元素被选出来以后可能会需要一些管理,如取部分或是按照一个条件过滤等等,常见的作用于被包装的元素集的管理函数如下:
- size() - 获取元素集中元素的数量,如:$('a').size()
- get(index) - 访问元素集可以像数组一样,$('a')[2]就是取第三个元素,当然为了jQuery链也可以写成函数形式,如: $('a').get(2)
- add(expression) - 将$(expression)的到的元素添加到现有元素集中,jQuery链时格外有用,如: $('img[alt]').add('img[title]'), 有人说这和$('img[alt],img[title]')没什么区别吗,但是看了这个jQuery链的例子你就明白了, $('img[alt]').addClass('a').add('img[title]') .addClass('b')。当然也可以用add直接添加新建立的元素,如:$('p').add('new Element there!')
- not(expression) - 在元素集中去掉参数表达式所匹配的内容,和expression中的:not类似,如$('img[title]').not('[title*=puppy]')就等同于$('img[title]:not([title*=puppy])'),同:not,not()元素也只支持上文提到的过滤型选择器
- filter(expression) - express可以是string或者function。当传入string类型时,就是一个和not()动作相反的函数,在 元素集中去掉参数表达式不匹配的内容。当传入function时,通过function的返回值过滤所有返回false的元素,这样可以处理一些复杂的过滤动作,在function的上下文中this就表示当前待过滤的元素,例:$('td').filter(function(){return this.innerHTML.match(/^\d+$/)})
- slice(begin,end) - 和get()类似,是按照数组的处理方法截取元素集的方法,参数的含义和普通的数组的slice是相同的,如:$('*').slice(2,3);
- find(selector) - 在元素集中进一步进行选择,如wrappedSet.find('p cite'),其实就等同于$('p cite',wrappedSet)
- contains(text) - 在当前元素集中查找含有text的元素然后返回这些元素组成的集合。
- is(selector) - 检查元素集中是否至少有一个元素满足selector,如果是就返回true。如:var hasImage = $('*').is('img');
- 最后是一组按照被包装的元素集的DOM的上下关系组成新集合的方法:children(), next(), parent(), parents(), prev(), siblings(), nextAll(), prefAll(), contents(). 这些方法都是按照字面的意思返回一个新的元素集,除了contents外,都支持附带一个expression参数像filter函数那样进行过滤,contents函数主要用于获取iframe的内容
jQuery链所需的函数
除了管理元素集的一些函数外,还有几个可以处理元素集的函数,他们几乎是为jQuery链所生,如:
- clone() - 克隆
- end() - 将当前操作元素集调回到上一次的返回元素集。前面提到的若干函数和clone都是会返回一个新的元素集,有时候我们需要原来的那套元素集继续操作(如果不是jQuery链,大可使用两条语句,也就不需要end了,但是要一条链完成,就需要end了),举个例子: $('img').clone().appendTo('#b').addClass('a') 只能把克隆的那一份图片添加css类,如果要想给克隆前的那些图片添加类,就可以写作$('img').clone().appendTo('#b').end().addClass('a');
- andSelf() - 概念类似,将当前和上一次的元素集合并在一起作为新的当前元素集
最后小结,选取元素,选取复杂的元素集,做一些适当的过滤或是取其父节点或是创造一个新元素,这些正是Javascript操作DOM流程的第一步。jQuery提供了超级豪华的选取方案经常可以用几种不同的方法达到选取目的,这是为下一步修改这些元素做好准备。
链接:
《jQuery in Action》 in action系列