选择将被操作的元素

下载代码中的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')