JQuery中选择元素的方法:
document.getElementById('div1');
document.getElementsByTagName('div');
getByClass(document,'box');
$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');
$('li:eq(2)').css('background','black');//所选择的元素集合中下标为2的元素,下标从0开始;
$('li:odd').css('background','red');//匹配下标为基数的元素
$('li:even').css('background','red');//下标为偶数的元素
$('li').filter('.box').css('background','red');//className为box的li元素;
$('li').filter('[title=hello]').css('background','red');
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