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 ...
随机推荐
- Maven新建项目出现 Could not calculate build plan:plugin 错误解决办法
删除本地.m2仓库中 org.apache.maven.plugins:maven-resources-plugin所在目录. 然后右击项目 Maven->Update Project-> ...
- json-server
json-server 一个前端模拟数据的本地化服务器 安装 npm install -g json-server 查看是否安装成功 json-server -v 新建一个文件夹 在文件夹中新建db. ...
- Comparing Sentence Similarity Methods
Reference:Comparing Sentence Similarity Methods,知乎.
- sklearn & ml tutorial
第一章 引言 pd.scatter_matrix(pd.DataFrame(X_train),c=y_train_name,figsize=(15,15),marker='o',hist_kwds={ ...
- C语言例题
1.连接两个字符串 将两个字符串连接,不要用stract函数 2.求矩阵外围元素之和 求3行3列矩阵的外围元素之和. 3.求矩阵主对角线和副对角线元素之和 求5行5列矩阵的主对角线和副对角线元素之和. ...
- js文件中使用el表达式问题
作者:Sang 单独js文件不能用el表达式. 首先,JSP是由服务端执行的,EL表达式自然也由服务端解析执行,因此如果EL所在的脚本在JSP页面内,它是可以获取到值的,这个值在服务器端返回到浏览器端 ...
- [2019牛客多校第二场][A. Eddy Walker]
题目链接:https://ac.nowcoder.com/acm/contest/882/A 题目大意:圆上有\(n\)个点,标号从\(0\)到\(n-1\),初始一个人在点\(0\),每次会等概率向 ...
- javascript内置对象一： Array数组
在JavaScript中的任何事物,字符串,数组,函数等等都是对象. 理解:浏览器自己封装好的对象,可以直接使用. push /pʊʃ/ 增加 在末尾增加 unshif ...
- JAVA的面向对象1
如何理解面向对象 我们说面向对象具有三大特征:封装性.继承性和多态性,那么我们怎么去理解所谓的封装.继承.多态? 1.封装:功能都给你做好了,你不必去理解它是怎么写出来的,直接使用即可. 如:房子.电 ...
- linux上安装nginx详细步骤
一.安装依赖包 yum install gcc gcc-c++ pcre-devel patch libffi-devel python-devel zlib-devel bzip2-devel op ...