选择要操作的元素

选择将被操作的元素

下载代码中的chapter2\lab.selectors.html可以测试jQuery选择器字符串。

控制上下文

$()函数可以包括第二个参数，这个参数是上下文参数。

$('.wrappedElement','#sampleDOM').removeClass('wrappedElement')

这样就可以把选择器的应用范围限制在DOM树中指定的部分。

使用基本CSS选择器

jQuery兼容大部分的CSS3标准，可以直接将CSS选择器传递给$()函数：

示例	描述
a	选择所有链接元素
#specialID	选择id为specialID的元素
.specialClass	选择拥有CSS类specialClass的元素
a#specialID.specialClass	选择id为specialID并且拥有CSS类specialClass的链接元素
p a.specialClass	选择拥有CSS类specialClass的链接元素，并且这个元素是<p>的子元素
div,span	选择所有的div和所有的span

 

使用子节点、容器和特性选择器

子节点选择器：

• p > a，此选择器只会匹配<p>元素的直接子节点的链接。
• ul.myList>li>a

特性选择器：

• a[href^='http://]，匹配href特性值以http://开头的所有链接元素。
• form[method]，匹配拥有method特性的所有<form>元素。
• input[type='text']，匹配type特性值为text的所有<input>元素。
• a[href$='.pdf'，定位所有指向pdf文件的链接。
• a[href*='jquery']，匹配包含jquery字符串锚的链接

选择器	描述
*
e
e f
e>f
e+f
e~f
e.c
e#i
e[a]
e[a=v]
e[a^=v]
e[a$=v]
e[a!=v]
e[a*=v]

通过位置选择元素

冒号之前为上下文，冒号之后为过滤器。第一步确定上下文，然后在上下文中过滤出匹配的项。

过滤器	描述
:first	上下文的第一个元素
:last	上下文的最后一个元素
:first-child	上下文的第一个子节点
:last-child	上下文的最后一个子节点
:only-child	上下文的唯一子节点。
:nth-child(n)	上下文的第n个子节点，n从1开始
:nth-child(even|odd)	上下文的偶数或奇数子节点
:nth-child(Xn+Y)	上下文的由线性公式提供的子节点，n从1开始
:even	上下文的偶数元素
:odd	上下文的奇数元素
:eq(n)	匹配第n个元素，n从0开始
:gt(n)	匹配第n个元素之后的元素，不包括n，n从0开始
:lt(n)	匹配第n个元素之前的元素，不包括n，n从0开始

使用CSS和自定义的jQuery过滤选择器

过滤器	描述
:animated	选择处于动画状态的元素
:button	选择按钮元素。input[type=submit]/input[type=reset]/input[type=button]/button
:checkbox	选择复选框元素。input[type=checkbox]
:checked	选择处于选中状态的checkbox或radio元素
:contains(food)	选择包含文本food的元素
:disabled	选择处于禁用状态的元素
:enabled	选择处于启用状态的元素
:file	选择文件输入元素。input[type=file]
:has(selector)	选择至少包含一个匹配指定选择器元素的元素
:header	选择标题元素。h1,h2,h3,h4,h5,h6
:hidden	选择隐藏元素。
:image	选择图片输入元素。input[type=image]
:input	选择表单元素。(input/select/textarea/button)
:not(selector)	选择不匹配指定选择器的元素
:parent	选择有子节点(包含文本)的元素，空元素除外
:password	选择口令元素
:radio	选择单选框元素
:reset	选择重置按钮元素。input[type=reset]/button[type=reset]
:selected	选择列表中处于选中状态的<option>元素
:submit	选择提交按钮元素。input[type=submit]/button[type=submit]
:text	选择文本输入框元素。input[type=text]
:visible	选择可见的元素

1. 使用:not过滤器

   input:not(:checkbox)

   img:not([src*="dog"])

2. 使用:has过滤器

   div:has(span)

   tr:has(img[src$="puppy.png"])

创建新的html

            $('<img>',

              {

                  src: 'images/little.bear.png',

                  alt: 'Little Bear',

                  title: 'I woof in your general direction',

                  click: function () {

                      alert($(this).attr('title'));

                  }

              })

              .css({

                  cursor: 'pointer',

                  border: '1px solid black',

                  padding: '12px 12px 20px 12px',

                  backgroundColor: 'white'

              })

              .appendTo('body');

$()函数的第一个参数为标记名称。第二个参数用来指定特性和特性值，这个参数是一个javascript对象。

除了可以在第二个参数指定html特性外，还可以向少数jQuery方法传递值。如val, css, html, text, data, width, height, offset。

管理包装集

进一步精简由jQuery函数创建的包装集，提取、扩展或者获取包装集的子集。

可以使用网页chapter2/lab.operations.html来测试你的代码。这个网页允许输入任何可以生成jQuery包装集的表达式。

确定包装集大小

size()，返回包装集中元素的个数

从包装集中获取元素

1. 通过索引获取元素

   get(index)

   eq(index)

   first()

   last()

2. 以数组形式获取所有元素

   toArray()

3. 获取元素的索引

   index(element)

分解元素包装集

1. 添加更多元素到包装集

   $('img[alt]).add('img[title'])

   add(expr,context)

   $('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')

   $('p').add('hi there!')

2. 整理包装集中的内容

   $('img[title]').not('[title*=puppy]')

   not(expr)

   $('img').not(function(){return !$(this).hasClass('keepMe')})

   $('td').filter(function(){return this.innerHTML.match(/^\d+$/)})

   filter(expr)

   $('img')

   .addClass('seeThrough')

   .filter('[title*=dog]')

   .addClass('thickBorder')

3. 获取包装集的子集

   slice(begin, end)

   has(test)

4. 转换包装集中的元素

   map(callback)

   var allIds=$('div').map(function(){

   return (this.id==undefined)?null:this.id

   }).get()

5. 遍历包装集中的元素

   each(iterator)

    

使用关系获取包装集

方法	描述
children([selector])
closest([selector])
contents()
next([selector])
nextAll([selector])
nextUntil([selector])
offfsetParent()
parent([selector])
parents([selector])
parentsUntil([selector])
prev([selector])
prevAll([selector])
prevUntil([selector])
siblings([selector])

$(this).closest('div')

$(this).closest('div.myButtonContainer')

$(this).siblings('button[title="Close"')

更多处理包装集的方式

wrappedSet.find('p cite')

var hasImage = $('*').is('img')

管理jQuery链

$('img').filter('[title]').hide().end().addClass('anImage')

$('div').addClass('a').find('img').addClass('b').andSelf().addClass('c')