jQuery九类选择器
目的：通过选择器，能定位web页面（HTML/JSP/XML）中的任何标签, 注意：项目中，通常是多种选择器一起使用
基本选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<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() ); //2)查找DIV元素的个数
//alert( $("div").length ); //3)查找所有样式是"myClass"的元素的个数
//alert( $(".myClass").size() ); //4)查找所有DIV,SPAN,P元素的个数
//alert( $("DIV,span,p").size() ); //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
alert( $("#div1ID,.myClass,p").size() );
</script>
</body>
</html>
层次选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<!--
<input type="radio" value="z"/>
<input type="radio" value="e"/>
<input type="radio" value="y"/>
-->
<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)找到表单form里所有的子级input元素个数
//alert( $("form>input").size() ); //3)找到表单form同级第一个input元素的value属性值
//alert( $("form+input").val() ); //4)找到所有与表单form同级的input元素个数
alert( $("form~input").size() ); </script>
</body>
</html>
增强基本选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<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() ); //2)查找UL中最后个元素的内容
//alert( $("ul li:last").text() ); //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
//alert( $("table tr:odd").size() ); //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
//alert( $("table tr:even").size() ); //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
//html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来
//text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签
//alert( $("table tr:eq(1)").text() ); //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
//alert( $("table tr:gt(0)").size() ); //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
//alert( $("table tr:lt(3)").size() ); //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
//$(":header").css("background-color","red").css("color","#ffff33"); //3)查找所有[未]选中的input为checkbox的元素个数
alert( $(":checkbox:not(:checked)").size() ); </script> </body>
</html>
内容选择器可见性选择器
<html>
<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)查找所有p元素为空的元素个数
//alert( $("p:empty").size() ); //3)给所有包含p元素的div元素添加一个myClass样式
//$("div:has(p)").addClass("myClass"); //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
alert( $("p:parent").size() ); </script> </body>
</html>
可见性选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<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() ); //2)查找所有可见的tr元素的个数
//alert( $("table tr:NOT(:hidden)").size() );
alert( $("table tr:visible").size() );//提倡
</script> </body>
</html>
属性选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<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" /> <!--
<input type="checkbox" name="letternews" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
<input type="checkbox" name="accNEWSept" value="Evil Plans" />
--> <script type="text/javascript"> //1)查找所有含有id属性的div元素个数
//alert( $('div[id]').size() ); //2)查找所有name属性是newsletter的input元素，并将其选中
//$("input[name='newsletter']").attr("checked","checked"); //3)查找所有name属性不是newsletter的input元素，并将其选中
//$("input[name!='newsletter']").attr("checked","true");
/*
请问：在JS中如下符号表示什么意思
1)=/==/===
2)!=/!==
明天讲解
*/
//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>
</html>
子元素选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<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() );
});
*/ /*4)迭代每个ul中第2个li元素中的内容,索引从1开始
$("ul li:nth-child(2)").each(function(){
alert( $(this).text() );
});*/ //3)在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function(){
alert( $(this).text() );
});
</script>
</body>
</html>
表单选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<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() ); //3)查找所有密码框的个数
//alert( $(":password").size() ); //4)查找所有单选按钮的个数
//alert( $(":radio").size() ); //5)查找所有复选框的个数
//alert( $(":checkbox").size() ); //6)查找所有提交按钮的个数
//alert( $(":submit").size() ); //7)匹配所有图像域的个数
//alert( $(":images").size() ); //8)查找所有重置按钮的个数
//alert( $(":reset").size() ); //9)查找所有普通按钮的个数
//alert( $(":button").size() ); //10)查找所有文件域的个数
//alert( $(":file").size() ); //11)查找所有input元素为隐藏域的个数
//alert( $(":input:hidden").size() ); </script>
</body>
</html>
表单对象属性选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<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() ); //2)查找所有不可用的input元素的个数
//alert( $("input:disabled").size() ); //3)查找所有选中的复选框元素的个数
//alert( $(":checkbox:checked").size() ); //4)查找所有未选中的复选框元素的个数
//alert( $(":checkbox:NOT(:checked)").size() ); //5)查找所有选中的选项元素的个数
//alert( $("select option:selected").size() );
alert( $("#provinceID option:NOT(:selected)").size() ); </script> </body>
</html>
jQuery九类选择器的更多相关文章
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jQuery九类选择器详解
(1)基本选择器 <body> <div id="div1ID">div1</div> <div id="div2ID" ...
- jQuery九大选择器和jQuery对ajax的支持
一.jQuery九大选择器 1)基本选择器: <body> <div id="div1ID">div1</div> <div id=&qu ...
- JQuery九大选择器
九大选择器都是用来查找元素节点的.JQuery给我提供了九中类型的选择器. 1. 基本选择器 基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名来查找DO ...
- jquery九大选择器的用法举例
1:基本选择器 改变 id 为 one 的元素的背景色为 #0000FF" $("#one").css("background","#000 ...
- js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- js进阶 10-7 简单的伪类选择器可以干什么
js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...
- js实现类选择器和name属性选择器
jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器.id选择器.属性选择器.元素选择器.层级选择器.内容筛选选 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
随机推荐
- Scala语言基础
1. Scala语言的特点 a. 多范式编程语言,面向对象(抽象.封装)和函数式(过程.结果)编程 b. 代码简洁 ==>可读性较差 c. 代码会被变异成Java字节码,运行在JVM上 2. S ...
- 、M/C/U/简单加/密方法、
............................... 一．STM32Flash组织 STM32的Flash包括主存储器(HD版本,512KB)+信息块.信息块包括2KB的系统存储器(用于系统 ...
- SqlServer和Oralce保留几位小数以及当末尾小数为0也显示
需求描述:对数字类型值保留2位小数,当2位小数末尾出现0时也显示 SqlServer处理方法: 1.首先通过Round函数保留2位有效数字,多出的位数值变成0 2.通过Cast函数转成decimal( ...
- java.io.IOException: Broken pipe
最近项目虽然已经在正常运行,但是偶尔会有一些不知名的错误冒出来,比如时不时报一个数据库主键重复或者某些时候会有null的异常报出来.看看代码写完能跑起来还只是开始而已,需要不断精进重构,才能让代码运行 ...
- Almost Acyclic Graph CodeForces - 915D （思维+拓扑排序判环）
Almost Acyclic Graph CodeForces - 915D time limit per test 1 second memory limit per test 256 megaby ...
- KeyboardEvent keyCode Property
Definition and Usage The keyCode property returns the Unicode character code of the key that trigger ...
- Luogu P4109 [HEOI2015]定价 贪心
思路:找规律?$or$贪心. 提交:1次 题解: 发现:若可以构成$X0000$,答案绝对不会再在数字最后把$0$改成其他数: 若可以构成$XX50...0$更优. 所以左端点增加的步长是增加的($i ...
- is(expr|obj|ele|fn)
is(expr|obj|ele|fn) 概述 根据选择器.DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true.大理石平台支架 如果没有元素符合 ...
- 多线程：Thread类的Join()方法
多线程:Thread类的Join()方法 http://blog.163.com/hc_ranxu/blog/static/3672318220095284513678/ 当我们在线程B中调用Thre ...
- BigDecimal的3个toString方法
本文介绍BigDecimal的3个toString方法的区别. BigDecimal类有3个toString方法,分别是toEngineeringString.toPlainString和toStri ...