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 ...
随机推荐
- c#复制文件夹和文件
/// <summary> /// 拷贝文件夹 /// </summary> /// <param name="srcdir"></par ...
- 并发编程： 生产消费模型、死锁与Rlock、线程、守护线程、信号量、锁
一.守护进程 二.互斥锁 三.抢票 四.进程间通讯 五.进程间通讯2 一.守护进程 """ 进程间通讯的另一种方式 使用queue queue 队列 队列的特点: 先进的 ...
- 【测试代码执行时间】console.time + console.timeEnd 打印输出耗时
// 计时开始,内部文字为计时ID,开始要和结束保持一致 console.time('计时器1') // 需要测试执行时间的代码 for (let index = 0; index < 1000 ...
- R的数据结构--数组
数组:可以认为数组是矩阵的扩展,它将矩阵扩展到2维以上.如果给定的数组是1维的则相当于向量,2维的相当于矩阵. R语言中的数组元素的类型也是单一的,可以是数值型,逻辑型,字符型或复数型 参数解释 ar ...
- Spring入门篇——第5章 Spring AOP基本概念
第5章 Spring AOP基本概念 本章介绍Spring中AOP的基本概念和应用. 5-1 AOP基本概念及特点 5-2 配置切面aspect ref:引用另外一个Bean 5-3 配置切入点Poi ...
- 基于Ajax技术的前后端Json数据交互方式实现
前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起 ...
- shell编程expr表达式----传智播客的书linux编程基础中出现的问题
首先声明:本人是传智播客的粉丝,拥有他出的多本编程书籍,此文绝无诋毁抹黑之意. 但在linux系统编程第88页给出的while循环范例中,代码运行无法得到预期结果 原代码如下 #!/bin/sh su ...
- 云主机用samba服务实现和windows共享文件
最近刚刚入坑了百度云的云主机BCC,准备在云主机上实现samba服务,映射到本机来当硬盘使用,可是一直怎么试都不成功,后来咨询客服之后才知道samba默认使用的端口445端口被运营商封禁了,只好更改端 ...
- struts2的Action中使用spring的@Transactional注解事务出错
1.在Struts2使用的是spring管理对象. 使用spring的注解式事务配置, 在action的方法中直接使用事务遇到的问题. public class testAction extends ...
- [Cogs] 最大数maxnumber
http://cogs.pro:8080/cogs/problem/problem.php?pid=1844 Luogu 的数据真zhizhang Cogs AC #include <iostr ...