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

随机推荐

rootkit后门检查工具RKHunter
---恢复内容开始--- rkhunter简介: 中文名叫"Rootkit猎手", rkhunter是Linux系统平台下的一款开源入侵检测工具,具有非常全面的扫描范围,除了能够检 ...
向maven中央仓库提交jar
从来都是从中央仓库下载jar,这次需要向中央仓库提交jar, 利用Sonatype OSSRH可以把jar等资源提交给Maven的中央仓库. Sonatype OSSRH介绍: Sonatype OS ...
VBA笔记（三）——常用对象
VBA实际上就是操作Excel,把Excel进行拆解,划分多层对象,由顶至下为(也可以说是层层包裹): Application:代表Excel程序本性,之后我们操作对象都在它之下,因为是唯一且至高点, ...
HDU 1859
#include <iostream> #include <cstdio> #include <algorithm> #include <vector> ...
数据库阿里连接池 druid配置详解
http://blog.csdn.net/hj7jay/article/details/51686418 http://lj6684.iteye.com/blog/1770093 http://www ...
RBAC权限模型
RBAC 现在大多数的管理系统都是基于RBAC开发的组织机构权限框架.所有的操作都是基于角色(Role)来完成的.我们先从需求的角度出发,来了解关于系统权限管理. 用户A和用户B都属于研发部,我们可以 ...
BZOJ 题目整理
bzoj 500题纪念总结一发题目吧,挑几道题整理一下,(方便拖板子) 1039:每条线段与前一条线段之间的长度的比例和夹角不会因平移.旋转.放缩而改变,所以将每条轨迹改为比例和夹角的序列,复制一份 ...
DataReader
Datareader对象不能关使用new关键字创建.但可以使用ExecuteReader()方法创建. DataReader是一行一行的读取记录的.当记录中有数据时Read()返回TRUE,当到记录集 ...
采用MVC模式JDBC演示案例
MVC三层架构: Model 模型层,数据处理和业务逻辑 View 视图层,为客户展示内容 Control 控制层,协调控制,更新模型案例如下: 1.获得数据库连接 package com.db; ...
关于imageOrientation
用相机拍出来的照片都含有EXIF信息,UIImage的imageOrientation属性指的就是EXIF中的orientation信息.如果我们忽略orientation信心,而直接对照片进行想速处 ...

jQuery九类选择器详解

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

随机推荐

热门专题