JQuery元素选择
2014-02-07 16:05
183 查看
1.基本元素选择器
分层选择器:使用这种选择器时,需要传入多个值,并用空格或大于号分隔。例如:
2、基本条件选择器
使用这种选择器时,需要在元素的选择符后加上基本条件运算符,这些条件运算符都是jQuery内置的运算符。例如:
3、内容条件选择器
使用这种选择器时,需要在元素的后面加上内容筛选运算符。例如: $(“div:contains(„John‟)”) //选择包含‘John’文本的层元素
4、可见性条件选择器
使用这种选择器时,需要在元素后面加上可见性条件。例如:
5、属性选择器
使用这种选择器时,需要利用元素属性并使用一定条件来进行选择。例如: $(“div[id]”) //选择具有id属性的层
6、子元素选择器
使用这种选择器时,需要加入子元素的选择条件。例如:
7、表单元素选择器
使用这种选择器时,需要加入代表不同表单元素类型的标示符。例如:
$(“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
相关文章推荐
- jquery中元素选择方法
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)
- jquery如何选择带有多个class的元素
- jQuery元素选择
- JQuery基础教程:选择元素(中)
- jQuery获取Select元素,并选择的Text和Value:
- jQuery入门:选择元素 Selecting Elements
- jQuery选择id属性带有点符号元素的方法
- jquery学习手记(4)元素的选择与操作
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
- jQuery内容过滤选择器选择元素实例讲解
- jquery基础教程 - 第二章 选择元素
- Jquery选择兄弟元素
- jQuery 子元素选择
- JQuery基础教程:选择元素(下)
- jQuery参考实例 1.8 将前一次选择的元素集合并到当前选择的元素集中
- jquery可见性选择器(匹配所有隐藏的元素)
- JQuery选择器使用以及对元素的操作方法
- Jquery选择元素