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.简介上一篇宏哥介绍了如何设计支持不同浏览器测试,宏哥的方法就是通过来切换配置文件设置的浏览器名称的值,来确定启动什么浏览器进行脚本测试.宏哥将这个叫做浏览器引擎类.这个类负责获取浏览器类型和启动 ...

随机推荐

C语言基础(10)-数组
一.数组的定义数组就是在内存中连续的相同类型的变量空间. 二.数组在内存中的存储方式同一个数组所有的成员都是相同的数据类型,同时所有的成员在内存中的地址是连续的,数组名是一个地址的常量,代表数组中 ...
word2vec参数调整及lda调参
一.word2vec调参 ./word2vec -train resultbig.txt -output vectors.bin -cbow 0 -size 200 -window 5 -neg ...
【jQuery】初始化的三种方法
JQ初始化方法实际上有两种,由于美元符号可以定义 jQuery,那么就有三种方法可以进行初始化操作,根据个人习惯来选择吧! 第一种 $(document).ready(function(){ // j ...
[Algorithm] 群体智能优化算法之粒子群优化算法
同进化算法(见博客<[Evolutionary Algorithm] 进化算法简介>,进化算法是受生物进化机制启发而产生的一系列算法)和人工神经网络算法(Neural Networks,简 ...
[转]Oracle10g数据库自动诊断监视工具(ADDM)使用指南
第一章 ADDM简介在Oracle9i及之前,DBA们已经拥有了很多很好用的性能分析工具,比如,tkprof.sql_trace.statspack.set even ...
runtime理论知识
http://southpeak.github.io/2014/10/25/objective-c-runtime-1/ 转载http://www.jianshu.com/p/6b905584f536 ...
win7系统下python安装numpy，matplotlib，scipy和scikit-learn
1.安装numpy,matplotlib,scipy和scikit-learn win7系统下直接采用pip或者下载源文件进行安装numpy,matplotlib,scipy时会遇到各种问题,这是因为 ...
Android压缩图片到100K以下并保持不失真的高效方法
前言:目前一般手机的相机都能达到800万像素,像我的Galaxy Nexus才500万像素,拍摄的照片也有1.5M左右.这么大的照片上传到服务器,不仅浪费流量,同时还浪费时间. 在开发Android企 ...
解决VS2015安装后stdio.h ucrtd.lib等文件无法识别问题
今天突然想在windows上装个 VS2015 玩玩,结果遇到了如下bug:安装完 VS2015 后,直接新建项目->win32控制台->运行,结果报错!"无法打开包括文件: & ...
Python全栈【异常处理】
Python全栈[异常处理] 本节内容: 1.异常处理 2.什么时候用异常处理异常处理 1.异常处理: 异常就是程序运行时发生错误的信号,异常处理是在编程过程中为了增加友好性,在程序出现bug时一般 ...

jQuery九类选择器详解

jQuery九类选择器详解的更多相关文章

随机推荐

热门专题