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 ...
随机推荐
- CI/CD持续集成小结
一.概念 什么是devops,基于Gitlab从零开始搭建自己的持续集成流水线(Pipeline) https://blog.csdn.net/chengzi_comm/article/details ...
- 操作xml文件
http://www.cnblogs.com/ 一.xml文件体系如下: <?xml version="1.0" encoding="utf-8" ?&g ...
- 第六章、ajax方法以及序列化组件
目录 第六章.ajax方法 一.choice参数介绍 二.MTV与MVC模型 三.ajax方法 四.案例 五.Ajax传json格式的数据 六. AJAX传文件 代码如下 ajax传文件需要注意的事项 ...
- spring 整合mongodb报NoSuchMethodError错误
刚开始通过网上查到相关的资料进行了一些配置,参考链接:http://www.open-open.com/lib/view/open1454374782167.html maven的dependenci ...
- [Abp vNext微服务实践] - 启动流程
前几篇分别介绍了abp vNext微服务框架和微服务CI/CD环境搭建,本篇开始介绍vNext微服务框架的开发环境搭建. 环境准备 官方介绍的系统架构图如下: 上图中身份服务和网关服务已经集成在系统中 ...
- 8.caffe：make_mean.sh（ 数据平均化 ）
个人实践代码如下: #!/usr/bin/env sh # Compute the mean image from the imagenet training lmdb # N.B. this is ...
- fiddler save files
使用fiddler 保存访问到的文件 使用jscript Fiddler Script 是用JScript.NET语言写的 JScript.NET 此语言可以调用C# api 参考地址:http:// ...
- Qt中PushButton的pressed,released,clicked三种响应的区别
Qt的PushButton的常用的三种响应有pressed,released和clicked. 优先级:pressed>released>clicked 按下按钮pressed函数的内容, ...
- Luogu P4781【模板】拉格朗日插值
洛谷传送门 板题-注意一下求多个数的乘积的逆元不要一个个快速幂求逆元,那样很慢,时间复杂度就是O(n2log)O(n^2log)O(n2log).直接先乘起来最后求一次逆元就行了.时间复杂度为O(nl ...
- 解决ubuntu的screen已经处于Attached状态，无法再打开窗口
Attached表示该窗口已经被上一登录用户使用,需要重新登录 1. 先查询窗口id screen -ls 3606.node (11/26/2019 07:31:49 PM) (Attached) ...