1.基本元素选择器
$(“p”) //选取<p>元素 $(“p.info”) //选取所有class=”info”的<p>元素 $(“p#demo”) //选取id=”demo”的第一个<p>元素
分层选择器:使用这种选择器时,需要传入多个值,并用空格或大于号分隔。例如:
$(“div input”) //选择div下所有的input $(“div > input”) //选择父元素(div)下的子元素(input)
2、基本条件选择器
使用这种选择器时,需要在元素的选择符后加上基本条件运算符,这些条件运算符都是jQuery内置的运算符。例如:
$(“p:first”) //选择第一个段落 $(“p:last”) //选择最后一个段落 $(“tr:even”) //选择偶数表格行 $(“tr:odd”) //选择奇数表格行 $(“input:not(:checked)”) //选择所有未被选中的元素 $(“tr:eq(1)”) //选择索引值为1的表格行 $(“tr:gt(0)”) //选择索引值大于0的表格行 $(“tr:lt(2)”) //选择索引值小于2的表格行 $(“:header”) //选择所有标题元素 $(“:animated”) //选择所有正在执行动画的元素
3、内容条件选择器
使用这种选择器时,需要在元素的后面加上内容筛选运算符。例如: $(“div:contains(„John‟)”) //选择包含‘John’文本的层元素
$(“td:empty”) //选择不包含文本或者子元素的表格单元 $(“div:has(p)”) //选择包含段落元素的层元素 $(“td:parent”) //选择包含文本或者子元素的表格单元
4、可见性条件选择器
使用这种选择器时,需要在元素后面加上可见性条件。例如:
$(“tr:hidden”) //选择所有隐藏的表格行 $(“tr:visible”) //选择所有可见的表格行
5、属性选择器
使用这种选择器时,需要利用元素属性并使用一定条件来进行选择。例如: $(“div[id]”) //选择具有id属性的层
$(“input[name=‟newletter‟]”) //选择具有属性name并且属性值为‘newletter’的表单输入元素 $(“input[name!=‟newsletter‟]”) //选择具有属性name并且属性值不为‘newletter’的表单输入元素 $(“input[name^=‟news‟]”) //选择具有属性name并且属性值以‘news’为起始内容的表单输入内容 $(“input[name$=‟letter‟]”) //选择具有属性name并且属性值以‘letter’为结束内容的表单输入元素 $(“input[name*=‟man‟]”) //选择具有属性name并且属性值包含‘man’内容的表单输入元素 $(“input[id][name$=‟man‟]”) //选择具有属性id和name并且name的值以‘man’为结束内容的表单输入内容
6、子元素选择器
使用这种选择器时,需要加入子元素的选择条件。例如:
$(“ul li:nth-child(2)”) //选择第2个列表项 $(“ul li:nth-child(even)”) //选择偶数索引列表项 $(“ul li:nth-child(odd)”) //选择奇数索引列表项 $(“ul li:nth-child(3n)”) //选择索引值为3的倍数的列表项 $(“ul li:first-child”) //选择第一个列表项 $(“ul li:last-child”) //选择最后一个列表项 $(“ul li:only-child”) //选择列表出现且仅出现一个的列表项
7、表单元素选择器
使用这种选择器时,需要加入代表不同表单元素类型的标示符。例如:
$(“:input”) //选择所有input,textarea,select和button元素 $(“:text”) //选择单行文本框 $(“:password”) //选择密码框 $(“:radio”) //选择单选按钮 $(“:checkbox”) //选择复选框 $(“:submit”) //选择提交按钮 $(“:image”) //选择所有图像域 $(“:reset”) //选择重置按钮 $(“:button”) //选择普通按钮 $(“:file”) //选择文件域 $(“:hidden”) //选择隐藏域 $(“input:enabled”) //选择所有可用元素 $(“input:disabled”) //选择所有不可用元素 $(“input:checked”) //选择所有被选中的复选框和单选按钮 $(“select option:selected”) //选择所有被选中的option