一、基本选择器
<body>

    <div>

        <div id="div1">

            aaaaaaaaaaa</div>

        <div class="c1">

            bbbbbbbbb</div>

        <span>ccccccccc</span>

    </div>

</body>
$(function () {

    $("#div1").html("hello world 1"); //根据id匹配元素（a）

    $(".c1").html("hello  world 2"); //根据Yclass匹配元素（b）

    $("span").html("hello world 3"); //根据元素名称匹配 （c）

    $("span,div.c1").html("hello world 4"); //匹配页面所有的span 和class=c1的div（b c）

    $("*").html("hello world 5"); //匹配页面所有元素,也包含body

});

二、层级选择器

<body>

    <span id="span1">

        aaaaaaaaa</span>

    <span class="c1">

        bbbbbbbbb</span>

    <div>

        ccccccccc

        <span>ddddddddd</span>

    </div>

    <div>eeeeeeeee</div>

</body>
$(function () {

    $("body span").html("hello world 1"); //选取body中所有的span（a b d）

    $("body>span").html("hello world 2"); //选取body元素的子span元素(a b)

    $("span.c1+div").html("hello world 3"); //选取class为c1的span的下一个div元素，注意是同级元素

    $("span.c1").next().html("hello world 3"); //跟上行效果相同 (c)

    $("span.c1~div").html("hello world 4"); //选取class为c1的span的后面的所有div

    $("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)

});

三、基本过滤选择器

<body>

    <h1>header1</h1>

    <h2>header2</h2>

    <h3>header3</h3>

    <span id="span1">aaaaaaaaa</span>

    <span class="c1">bbbbbbbbb</span>

    <div>

        ccccccccc

        <span>ddddddddd</span>

    </div>

    <div>eeeeeeeee</div>

</body>
$(function () {

    $("div:first").html("hello world 1"); //选取所有div中的第一个div

    $("span:last").html("hello world 2"); //选取所有span中的最后一个

    $("span:not(.c1)").html("hello world 3"); //选取除class为c1的span外的所有span

    $("span:even").html("hello world 4"); //选取索引为偶数的span，索引从0开始

    $("span:odd").html("hello world 5"); //选取索引为奇数的span，索引从0开始

    $("span:eq(2)").html("hello world 6"); //选取指定索引的span，索引从0开始

    $("span:gt(0)").html("hello world 7"); //选取大于指定索引的span，不包含指定索引

    $("span:lt(2)").html("hello world 8"); //选取小于指定索引的span，不包含指定索引

    $(":header").html("hello world 9"); //选取页面中所有的标题元素 h1 h2 h3...

});

四、内容过滤选择器

<body>

    <span id="span1">aaaaaaaaa</span>

    <span class="c1">bbbbbbbbb</span>

    <span></span>

    <div>

        ccccccccc

        <span id="span2" class="c2">ddddddddd</span>

    </div>

    <div>eeeeeeeee</div>

</body>
$(function () {

    $("span:contains(aa)").html("hello world 1"); //选取内容包含aa的span元素

    $("span:empty").html("hello world 2"); //选取空的span元素

    $("div:has(span)").html("hello world 3"); //选取包含span的div元素

    $("span:parent").html("hello world 4"); //选取包含子元素的span元素，包含文本

});

五、属性过滤选择器

<body>

    <span id="span1">aaaaaaaaa</span>

    <span class="c1">bbbbbbbbb</span>

    <span></span>

    <div>

        ccccccccc

        <span id="span2" class="c2">ddddddddd</span>

    </div>

    <div>eeeeeeeee</div>

</body>
$(function () {

    $("span[id]").html("hello world 1"); //选取有属性id的span元素

    $("span[id=span2]").html("hello world 2"); //选取属性id等于span2的span元素

    $("span[id!=span2]").html("hello world 3"); //选取属性id不等于为span2的span元素

    $("span[id^=span]").html("hello world 4"); //选取属性id以span开始的span元素

    $("span[id$=2]").html("hello world 5"); //选取属性id以2结尾的span元素

    $("span[id*=an]").html("hello world 6"); //选取属性id包含an的span元素

    $("span[id*=an][class$=2]").html("hello world 6"); //选取属性id包含an并且class以结尾的span元素

});

六、子元素过滤选择器

<body>

   <div class="c1">

        <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span>

   </div>

   <div class="c1">

        <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span>

   </div>

   <div class="c1">

        <span>aaaaaaaa</span>

   </div>

</body>
$
(function () {

    $("div.c1 :nth-child(1)").html("hello world 1"); //选取class等于c1的div的指定索引子元素

    $("div.c1 :nth-child(even)").html("hello world 2"); //选取class等于c1的div的偶数子元素

    $("div.c1 :nth-child(odd)").html("hello world 3"); //选取class等于c1的div的奇数子元素

    $("div.c1 :first-child").html("hello world 4"); //选取class等于c1的div的第一个子元素

    $("div.c1 :last-child").html("hello world 5"); //选取class等于c1的div的最后一个子元素

    $("div.c1 :only-child").html("hello world 6"); //选取class等于c1的div只有一个子元素的子元素

});

7、表单选择器

<body>

  <form id="form1" action="#">

    <input type="button" value="button1" />

    <input type="text" value="text1" />

    <input type="text" value="text2" />

    <textarea rows="8" cols="40"></textarea><br />

    <input type="checkbox" name="chk" />篮球

    <input type="checkbox" name="chk" />足球

    <input type="password" />

    <input type="hidden" /><br />

    <select multiple="multiple">

        <option selected="selected">武汉</option>

        <option selected="selected">黄冈</option>

        <option >麻城</option>

    </select>

    <input id="n" type="radio" name="s"/>男

    <input type="radio" name="s"/>女<br />

    <input type="submit" /><input type="reset" />

  </form>

</body>
$(function () {

    //表单中的表单元素

    $("#form1 :input").val("hello world 1");

    //表单中的input元素

    $("#form1 input").val("hello world 1");

    $(":text").val("hello world 2");

    $(":password").val("hello world 3");

    //男的单选框被选中

    $(":radio[id=n]").attr("checked", true);

    $(":checkbox[name=chk]").length;

    $(":submmit").val("提交");

    $(":reset").val("重置");

    $(":button").val("hello world 4");

    $(":hidden").val("hello world 5");

});

8、表单对象属性过滤选择器

<body>

  <form id="form1" action="#">

    <input type="text" disabled="disabled" value="禁用1" />

    <input type="text"  value="启用1" />

    <input type="text" disabled="disabled" value="禁用2" />

    <input type="text"  value="启用2" />

    <input type="checkbox" name="chk" value="篮球" checked="checked"/>篮球

    <input type="checkbox" name="chk" value="足球" />足球

    <input type="checkbox" name="chk" value="编程" checked="checked"/>编程

    <input type="checkbox" name="chk" value="旅游" checked="checked"/>旅游

    <select multiple="multiple">

        <option selected="selected">武汉</option>

        <option selected="selected">黄冈</option>

        <option >麻城</option>

    </select>

  </form></body>
 
$(function () {

    $("#form1 input:enabled").val("hello world 1"); //选取form表单中没有禁用的文本框

    $("#form1 input:disabled").val("hello world 2"); //选取form表单中没有禁用的文本框

    $("#form1 input:checked").attr("checked",false); //选取form表单中选的复选框

    $("select option[selected]").each(function () {

        alert($(this).val());

    });

});
 
使用选择器要注意的地方
<body>

    <div id="div#1">aaaaaaaaaaa</div>

    <div class="c[1]">bbbbbbbbb</div>

    <div class="c1">

        <div name="div">ccccccccc</div>

        <div name="div">ddddddddd</div>

        <div name="div">eeeeeeeee</div>

        <div class="c1" name="div">fffffffff</div>

    </div>

    <div class="c1" name="div">gggggggg</div>

    <div class="c1" name="div">hhhhhhhh</div>

</body>
$(function () {

    //有时在id或是class中有一些特殊字符如 [等，需要用反斜杠进行转义

    $("#div\\#1").html("hello world 1");

    $(".c\\[1\\]").html("hello world 2");

    //有没有空格的区别

    //有空格是选取class等于c1的div里面的name等于div的div（c d e f）

    $(".c1 [name=div]").html("hello world 3");

    //没有空格是选取class等于c1并且name等于div的div (f g h)

    $(".c1[name=div]").html("hello world 4");

});

jQuery常用选择器汇总的更多相关文章

  1. jQuery常用选择器总结

    jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...

  2. jquery 常用选择器和方法以及遍历（超详细）

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  3. jquery常用选择器（转）

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  4. js和jQuery常用选择器

    笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...

  5. jquery 常用选择器基础语法学习

    siblings方法的常用应用场景:选中高亮 实现代码 <!DOCTYPE html> <html> <head> <meta charset="U ...

  6. jquery常用选择器和常用方法

    基本选择器 $(”#myDiv”) //匹配唯一的具有此id值的元素 $(”div”) //匹配指定名称的所有元素 $(”.myClass”) //匹配具有此class样式值的所有元素 $(”*”) ...

  7. jquery常用选择器

    1.数字性过滤 $("tr:first")               //选择所有tr元素的第一个 $("tr:last")                / ...

  8. jquery及jquery常用选择器使用

    本文为博主原创,未经允许不得转载: 1.jquery强大之处:   容易上手,强大的选择器,解决浏览器的兼容   完善的时间机制,出色的ajax封装,丰富的ui    2.jquery是一个javas ...

  9. jquery 常用选择器 回顾 ajax() parent() parents() children() siblings() find() eq() has() filter() next()

    1. $.ajax() ajax 本身是异步操作,当需要将 异步 改为 同步时: async: false 2.parent()  父级元素  和  parents() 祖先元素 的区别 parent ...

随机推荐

  1. excel筛选两列值是否相同，如果相同返回第三列值

    见图:

  2. Ueditor开发经验

    Ueditor是百度开发的一款免费使用的富文本编辑器. 先前就一直使用Ueditor,觉得功能挺多的,而且还给出了详细的文档,供二次开发. 但Ueditor已经出新的版本(和先前版本很不相同),网上很 ...

  3. 11g Rac 切换

    <pre name="code" class="sql">[grid@devrac1 ~]$ crsctl status res -t ------ ...

  4. 福建省队集训被虐记——DAY3

    昨天没写--今天补上吧 一如既往的跪了 棋盘 [问题描述] 给出一个N*M的方格棋盘,每个格子里有一盏灯和一个开关,开始的时候,所有的灯都是关着的.用(x, y)表示第x行,y列的格子.(x, y)的 ...

  5. Kafka在Linux环境下搭建过程

    准备工作 Kafka集群是把状态保存在Zookeeper中的,首先要搭建Zookeeper集群.由于我们之前的分布式系统中已经安装zookeeper服务,这里不进行zookeeper安装教程以及应用教 ...

  6. android CMWAP, CMNET有何差别

    什么是CMNET,什么是CMWAP? 答:CMWAP和CMNET仅仅是中国移动为其划分的两个GPRS接入方式.中国移动对CMWAP作了一定的限制,主要表如今CMWAP接入时仅仅能訪问GPRS网络内的I ...

  7. git commit -am 合并操作

    二,合并的操作 1, 首先按需修改文件 echo >> lz66303.txt 2, 然后按需提交被修改的文件到HEAD缓存区,并把这个修改记录到分支中 git commit -am&qu ...

  8. linux磁盘管理、新增磁盘、分区、挂载

    1. du -sh 查看目录.文件总大小 -a:全部文件与目录大小都列出来.如果不加任何选项和参数只列出目录(包含子目录)大小. -c:最后加总2. df -h 查看磁盘使用量3. lsblk 查看系 ...

  9. 函数内部用setTimeout()调用自身函数相当于setInterval()

    本来setTimeout(function(){},time)只执行了一次function,但是当 function demo() { alert(1); setTimeout('demo()' ,5 ...

  10. 关于EventHandler的使用

    也就是委托和事件的使用.使用过,但了解的不够深入,现在逐渐来填以前留下的坑吧. EventHandler, EventHandler<TEventArg> 是.net Framework内 ...