jQuery 选择器(二)
来源:互联网 发布:国家实行网络什么战略 编辑:程序博客网 时间:2024/05/23 10:50
4)内容选择器
:contains('john'):表示包含指定字符串的标签,字符串大小写敏感:empty:表示查询空标签的元素
:has('p'):表示查询有子元素的元素
.addClass("样式名"):为查询到的所有标签添加样式
:parent:表示查询非空标签
5)可见性选择器
:hidden:表示查询所有隐蔽的标签:visible:表示查询所有显示的标签
或:not(:hidden)
6)属性选择器
div[id]:表示查询含有id属性的div元素input[name='newsletter']:表示查询含有name属性,且其值是"newsletter"的input元素
input[name!='newsletter:表示查询含有name属性,且其值不是"newsletter"的input元素
input[name^='newsletter:表示查询含有name属性,且其值以"news"开头的input元素
"input[name$='letter':表示查询含有name属性,且其值以"letter"结尾的input元素
input[name*='news']::表示查询含有name属性,且其包含"news"的input元素
input[id][name$='letter']:表示查询含有id属性,且含有name属性,其值以"letter"字符串结束的input元素
7)子元素选择器
:first-child:表示查询第一个子元素:last-child:表示查询最后一个子元素
:only-child:表示查询只有一个子元素的元素
:nth-child(编号从1开始),表示查询指定编号的元素
8)表单选择器
:input:查找所有input元素的个数,注:包含所有input,textarea,select和button元素:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:file
9)表单对象属性
:enabled:表示查询可用的元素:disabled:表示查询不可用的元素
:checked:表示查询选中的复选/单选框的元素
:selected:表示查询选中的下拉框元素
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.6.js"></script></head><body><hr /><div><p>ma yun</p></div><div><p>ma hua teng</p></div><div>lei jun</div><div>lei bu si</div><p></p><p></p><div></div><hr /><table align="center" border="1" height="200" width="200">//第一行不显示<tr style="display: none;"><td>value 1</td></tr><tr><td>value 1</td></tr><tr><td>value 1</td></tr></table><hr /><div>test2</div><hr /><div align="center"><input type="checkbox" name="newselect" value="hot fuzz" /><input id="myID" type="checkbox" name="newselect" value="cold fusion"><input type="checkbox" name="newsaccept" value="evil" /></div><hr /><div align="center"><ul><li>bob</li><li>john</li><li>mary</li></ul><ul><li>green</li><li>white</li><li>bill</li></ul><ul><li>jack</li></ul></div><script type="text/javascript">/* * :contains('john'):表示包含指定字符串的标签,字符串大小写敏感:empty:表示查询空标签的元素:has('p'):表示查询有子元素的元素 .addClass("样式名"):为查询到的所有标签添加样式:parent:表示查询非空标签 *//*var con =$("div:contains('ma')").size();alert(con);alert($("div:empty").size());alert($("p:empty").size());//:has('p'):表示查询有子元素的元素alert($("div:has(p)").size());// .addClass("样式名"):为查询到的所有标签添加样式$("div:has('p')").addClass('MyClass');//patents表示查询非空标签alert($("p:parents").size());*///可见性//查询隐藏的tr元素//alert($("table tr:hidden").size());// alert($("tr:hidden").size());//查找所有可见// alert($("table tr:visible").size());// alert($("tr:visible").size());/* * div[id]:表示查询含有id属性的div元素input[name='newsletter']:表示查询含有name属性,且其值是"newsletter"的input元素input[name!='newsletter:表示查询含有name属性,且其值不是"newsletter"的input元素input[name^='newsletter:表示查询含有name属性,且其值以"news"开头的input元素"input[name$='letter':表示查询含有name属性,且其值以"letter"结尾的input元素input[name*='news']::表示查询含有name属性,且其包含"news"的input元素input[id][name$='letter']:表示查询含有id属性,且含有name属性,其值以"letter"字符串结束的input元素 * */alert($("div[id]").size());alert($("input[name='newselect']").size());alert($("input[name='!newselect']").size());alert($("input[name^='news']").size());// 且其值以"letter"结尾的input元素,并将其选中// alert($("input[name$='select']").attr("checked","checked"));////alert($("input[name*='new']").attr("checked","checked"));//input[id][name$='letter']:表示查询含有id属性,且含有name属性,其值以"letter"字符串结束的input元素 $("input[id][name$='select']").attr("checked", "checked");/* * * :first-child:表示查询第一个子元素:last-child:表示查询最后一个子元素:only-child:表示查询只有一个子元素的元素:nth-child(编号从1开始),表示查询指定编号的元素 * * *///自动循环子元素$("ul li:first-child").each(function() {alert($(this).html());})$("ul li:last-child").each(function() {alert($(this).html());})//查找唯一子元素$("ul li:only-child").each(function() {alert($(this).html());})//查找li第二个子元素$("ul li:nth-child(2)").each(function() {alert($(this).html());})/* * :input:查找所有input元素的个数,注:包含所有input,textarea,select和button元素:text:password:radio:checkbox:file:submit:reset:image:file * * 9)表单对象属性:enabled:表示查询可用的元素:disabled:表示查询不可用的元素:checked:表示查询选中的复选/单选框的元素:selected:表示查询选中的下拉框元素 */</script></body></html>
阅读全文
0 0
- Jquery选择器(二)
- jQuery选择器(二)
- jQuery 选择器(二)
- jQuery选择器(二)
- Jquery选择器练习(二)
- jquery初步(二) 选择器
- JQuery库:(二)选择器
- Jquery系列(二) 选择器
- jQuery(二)高级选择器
- jQuery的选择器(二)
- jquery学习(二)选择器
- jQuery(二)常规选择器
- jQuery学习笔记(二)--jQuery选择器
- 学jquery(二)大话jquery选择器
- jquery(二)大话jquery选择器
- jQuery学习笔记二(jQuery选择器)
- Jquery(二)jquery选择器
- JQuery选择器(二) 层次选择器
- 设计模式复习(一)
- 顺序图实验记录,又懒又差劲,好懒好懒
- Ubuntu14.04安装ROS indigo
- 快速排序
- 基于位置的服务之如何找到自己的位置
- jQuery 选择器(二)
- Vue.js 学习7 事件处理器
- 两数之和
- ORA-12541: TNS: 无监听程序 解决方法
- 微服务实战(二):使用API Gateway
- 工具--Eclipse/MarkDown/XMind文章分类目录
- Listview中加入gridview发生事件冲突
- 数组指针,指针数组,函数指针,指针函数
- vim常用command