jQuery九类选择器详解
（1）基本选择器
<body>
<div id="div1ID">div1</div>
<div id="div2ID">div2</div>
<span class="myClass">span</span>
<p>p</p>
<script type="text/javascript">
//1)查找ID为"div1ID"的元素个数
alert($("#div1ID").size());//1
//2)查找DIV元素的个数
alert($("div").length);//2
//3)查找所有样式是"myClass"的元素的个数
alert($(".myClass").size());//1
//4)查找所有DIV,SPAN,P元素的个数
alert($("DIV,span,p").size());//4
//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
alert($("#div1ID,.myClass,p").size());//3
</script>
</body>
（2）层次选择器
<body>
<form>
<input type="text" value="a" />
<table>
<tr>
<td><input type="checkbox" value="b" /></td>
</tr>
</table>
</form>
<input type="radio" value="ccccccccc" />
<input type="radio" value="d" />
<input type="radio" value="e" />
<script type="text/javascript">
//1)找到表单form里所有的input元素的个数
alert( $("form input").size() );//2
//2)找到表单form里所有的子级input元素个数
alert( $("form>input").size() );//1
//3)找到表单form同级第一个input元素的value属性值
alert( $("form+input").val() );//ccccccccc
//4)找到所有与表单form同级的input元素个数
alert($("form~input").size());//3
</script>
</body>
（3）增强基本选择器
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input type="checkbox" checked />
<input type="checkbox" checked />
<input type="checkbox" />
<table border="1">
<tr>
<td>line1[0]</td>
</tr>
<tr>
<td>line2[1]</td>
</tr>
<tr>
<td>line3[2]</td>
</tr>
<tr>
<td>line4[3]</td>
</tr>
<tr>
<td>line5[4]</td>
</tr>
<tr>
<td>line6[5]</td>
</tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1)查找UL中第一个LI元素的内容
//html()要用于html/jsp，不能用在xml
//text()既能用于html/jsp，且能用于xml
alert($("ul li:first").text());//list item 1
//2)查找UL中最后个元素的内容
alert($("ul li:last").text());//list item 5
//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
alert($("table tr:odd").size());//3
//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
alert($("table tr:even").size());//3
//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
//html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来
//text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签
alert($("table tr:eq(1)").text());//line2[1]
//7)查找表格中第二第三行...的个数，即索引值是1和2...，也就是比0大
alert($("table tr:gt(0)").size());//5
//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
alert($("table tr:lt(2)").size());//2
//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
$(":header").css("background-color", "red").css("color", "blue");
//10)查找所有[未]选中的input为checkbox的元素个数
alert($(":checkbox:not(:checked)").size());//1
</script>
</body>
（4）内容选择器
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<style type="text/css">
.myClass {
font-size: 44px;
color: blue
}
</style>
</head>
<body>
<div>
<p>John Resig</p>
</div>
<div>
<p>George Martin</p>
</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<div></div>
<p></p>
<p></p>
<script type="text/javascript">
//1)查找所有包含文本"John"的div元素的个数
alert($("div:contains('John')").size());//2
//2)查找所有p元素为空的元素个数
alert($("p:empty").size());//2
//3)给所有包含p元素的div元素添加一个myClass样式
$("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
alert($("p:parent").size());//2
</script>
</body>
（5）可见性选择器
<body>
<table border="1" align="center">
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
<script type="text/javascript">
//1)查找隐藏的tr元素的个数
alert($("table tr:hidden").size());//1
//2)查找所有可见的tr元素的个数
alert($("table tr:NOT(:hidden)").size());//2
alert($("table tr:visible").size());//2 提倡
</script>
</body>
（6）属性选择器
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="newsaccept" value="Evil Plans" />
<script type="text/javascript">
//1)查找所有含有id属性的div元素个数
alert($('div[id]').size());//1
//2)查找所有name属性是newsletter的input元素，并将其选中
$("input[name='newsletter']").attr("checked", "checked");
//3)查找所有name属性不是newsletter的input元素，并将其选中
$("input[name!='newsletter']").attr("checked", "true");
//4)查找所有name属性以'news'开头的input元素，并将其选中
$("input[name^='news']").attr("checked", "checked");
//5)查找所有name属性以'letter'结尾的input元素，并将其选中
$("input[name$='letter']").attr("checked", "checked");
//6)查找所有name属性包含'news'的input元素，并将其选中
$("input[name*='news']").attr("checked", "checked");
//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
$("input[id][name$='letter']").attr("checked", "true");
</script>
</body>
（7）子元素选择器
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Marry</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<script type="text/javascript">
//1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
$("ul li:first-child").each(function() {
alert($(this).text());
});
//2)迭代每个ul中最后1个li元素中的内容,索引从1开始
$("ul li:last-child").each(function() {
alert($(this).text());
});
//3)迭代每个ul中第2个li元素中的内容,索引从1开始
$("ul li:nth-child(2)").each(function() {
alert($(this).text());
});
//4)在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function() {
alert($(this).text());
});
</script>
</body>
（8）表单选择器
<body>
<form>
<input type="button" value="Input Button" /><br />
<input type="checkbox" /><br />
<input type="file" /><br />
<input type="hidden" name="id" value="123" /><br />
<input type="image" src="../images/lb.jpg" width="25px" height="25px" /><br />
<input type="password" /><br />
<input type="radio" /><br />
<input type="reset" /><br />
<input type="submit" /><br />
<input type="text" /><br />
<select>
<option>Option</option>
</select><br />
<textarea></textarea><br />
<button>Button</button><br />
</form>
<script type="text/javascript">
//1)查找所有input元素的个数
alert($("input").size());//10，找input标签
alert($(":input").size());//13，找input标签和select/textarea/button
//2)查找所有文本框的个数
alert($(":text").size());//1
//3)查找所有密码框的个数
alert($(":password").size());//1
//4)查找所有单选按钮的个数
alert($(":radio").size());//1
//5)查找所有复选框的个数
alert($(":checkbox").size());//1
//6)查找所有提交按钮的个数
alert($(":submit").size());//2
//7)匹配所有图像域的个数
alert($(":image").size());//1
//8)查找所有重置按钮的个数
alert($(":reset").size());//1
//9)查找所有普通按钮的个数
alert($(":button").size());//2
//10)查找所有文件域的个数
alert($(":file").size());//1
//11)查找所有input元素为隐藏域的个数
alert($(":input:hidden").size());//1
</script>
</body>
（9）表单对象属性选择器
<body>
<form>
<input type="text" name="email" disabled="disabled" />
<input type="text" name="password" disabled="disabled" />
<input type="text" name="id" />
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<select id="provinceID">
<option value="1">广东</option>
<option value="2" selected="selected">湖南</option>
<option value="3">湖北</option>
</select>
</form>
<script type="text/javascript">
//1)查找所有可用的input元素的个数
alert( $("input:enabled").size() );//4
//2)查找所有不可用的input元素的个数
alert( $("input:disabled").size() );//2
//3)查找所有选中的复选框元素的个数
alert( $(":checkbox:checked").size() );//2
//4)查找所有未选中的复选框元素的个数
alert( $(":checkbox:NOT(:checked)").size() );//1
//5)查找所有选中的选项元素的个数
alert( $("select option:selected").size() );//1
alert( $("#provinceID option:NOT(:selected)").size() );//2
</script>
</body>
jQuery九类选择器详解的更多相关文章
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
- CSS3中的伪类选择器详解
类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...
- CSS3 结构伪类选择器 详解
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...
- jQuery九类选择器
目的:通过选择器,能定位web页面(HTML/JSP/XML)中的任何标签, 注意:项目中,通常是多种选择器一起使用 基本选择器 <html> <head> <meta ...
- web前端学习（三）css学习笔记部分（4）-- CSS选择器详解
4. 元素选择器详解 4.1 元素选择器 4.2 选择器分组 用英文逗号","相连,使用相同的样式表 使用通配符对所有元素进行通用设定. 4.3 类选择器详解 4.3.1. ...
- CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
- 《手把手教你》系列基础篇（九十七）-java+ selenium自动化测试-框架设计篇-Selenium方法的二次封装和页面基类（详解教程）
1.简介 上一篇宏哥介绍了如何设计支持不同浏览器测试,宏哥的方法就是通过来切换配置文件设置的浏览器名称的值,来确定启动什么浏览器进行脚本测试.宏哥将这个叫做浏览器引擎类.这个类负责获取浏览器类型和启动 ...
随机推荐
- php 时间戳与日期的转换（转载）
UNIX时间戳和格式化日期是我们常打交道的两个时间表示形式. a:Unix时间戳存储.处理方便,但是不直观 b:格式化日期直观,但是处理起来不如Unix时间戳那么自如 [关于两者的互相转换] 日 期 ...
- 防御CSRF的方法有哪些（一） HTTP 头中自定义属性并验证 CSRF跨站域请求伪造攻击
CSRF (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下 ...
- CJCMS系列--demo代码篇
CJCMS之前写了不多的文章,但是一直没有上代码,也许代码写得很乱很差,但是我觉得总得有个开始,持续改进.作为一个喜欢分享的程序员,我决定分享一下. 前面文章中的结构比较全,而此次我给出的demo,没 ...
- HDOJ 4770 Lights Against Dudely
状压+暴力搜索 Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- Go 项目的目录结构 及 安装技巧
项目目录结构如何组织,一般语言都是没有规定.但 Go 语言这方面做了规定,这样可以保持一致性 1.一般的,一个 Go 项目在 GOPATH 下,会有如下三个目录: |--bin |--pkg |--s ...
- ObjC运行时部分概念解析(一)
转型iOS已经许久了,Runtime(运行时)还没有好好了解过.之前没有阅读过源码,紧紧凭借自己的臆测.现在阅读下源码,做一些笔记.方便再次翻阅 SEL SEL是一个关键字,如果没有涉及runtime ...
- windows XP 神key
微软内部泄露的XP的CD-KEY和无限次激活码!亲测!!! Windows XP专业版最新注册码HTXH6-2JJC4-CDB6C-X38B4-C3GF3RT4H2-8WYHG-QKK6K-WWHJ2 ...
- 本地mysql打不开的解决方法
今天打开本地mysql的数据库,却一直打开报错.错误代码是10061. 让同事过来一看,发现是自己的mysql服务器并未启动.右下角任务管理器的mysql服务器为红色未启动状态.
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
- JSON 的标准：双引号而非单引号！
刚刚测试发现一段很简单的.看似正确的代码却是错误的: <?php $json_str = "{'name':'Eric', 'age':23}"; var_dump(json ...