jQuery学习笔记1-选择器

在学习jQuery前务必要有xhtml、css、xml、Javascript的基础,否则很难进行下去。本文参考了《Learning jQuery》和《jQuery 1.3中文参考》。强烈建议去下载这份手册,弄得不错,很方便。最近我就稍微看一下《Learning jQuery》,然后参照着《jQuery 1.3中文参考》做了几个实例,很轻松,jQuery比想象中的简单,用起来很顺手。下面进入正题。

jQuery中基本的操作就是选择文档中的某一部分,这是通过$()函数完成的。$()是jQuery的工厂函数,又称选择器。$()支持css、xpath的选择符,同时还有自定义选择符。$()函数会消除使用for遍历一组元素的需求,因为放到圆括号中的任何元素都将自动执行循环遍历,然后存在一个jQuery对象中。例如:

基本

$('p') 会取得文档中的所有段落。

$('#id') 会取得文档中对应id的一个元素。

$('.class') 会取得文档中带有class类的所有元素。

$('*') 取得所有元素

层级

$('form input') 取得form下的所有后代是input的元素

$('#play > li') 选择id为play的元素下的子元素是li的元素

$('#play + input) 选择紧接在id为play的元素后所有input元素

$('#play ~ input') 选择紧接在id为play的元素后相邻的input元素

自定义选择符

基本

$('tr:first') 取得第一个tr元素

$('tr:last') 取得最后一个tr元素

$('#play li:not(.abc)') 选择id为play的后代元素中所有的列表项li,并且没有abc类

$('tr:even') 匹配索引为偶数的所有tr元素

$('tr:odd') 匹配索引为奇数的所有tr元素

$('tr:eq(1)') 取得第二个tr元素(数组是从0开始的)

$('tr:gt(0)') 取得索引比0大的所有元素

$('tr:lt(2)') 取得索引比2小的所有元素

$('tr:header') 取得如h1、h2、h3之类的标题所有元素

$(':animated') 取得正在执行动画效果的所有元素

$('tr:hidden') 取得所有隐藏的元素(css中”display:none”、表单中type=”hidden”)

$('tr:visible') 取得所有可见的元素

内容

具体查询api,不再赘述

:contains :empty :has :parent

子元素

:nth-child :first-child :last-child :only-child

表单

:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden

表单对象的属性

:enabled :disabled :checked :selected

属性

$(a[title]') 选择带有title属性的链接(1.3中title前不再需要加@)

$("input[name='newsletter']").attr("checked", true) 匹配给定的属性是某个特定值的元素

$("input[name!='newsletter']").attr("checked", true) 匹配所有不含有指定的属性,或者属性不等于特定值的元素。

$("input[name^='news']") 匹配给定的属性是以某些值开始的元素

$("input[name$='letter']") 匹配给定的属性是以某些值结尾的元素

$("input[name*='man']") 匹配给定的属性是以包含某些值的元素

$("input[id][name$='man']") 复合属性选择器,需要同时满足多个条件时使用。