web前端之锋利的jQuery二：jQuery选择器

最新推荐文章于 2020-02-13 22:07:50 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2020-02-13 22:07:50 发布

阅读量1.3k

点赞数 3

本文链接：https://blog.csdn.net/u014785563/article/details/53465749

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

jQuery

14 篇文章 0 订阅

订阅专栏

web前端之锋利的jQuery二：jQuery选择器

1.css选择器
标签选择器：E{CSS规则}
ID选择器：#ID{CSS规则}
类选择器：.className{CSS规则}
群选择器：E1,E2,E3{CSS规则}
后代选择器：E F{CSS规则}
通配选择器：*{CSS规则}
其他选择器：伪类选择器（E:PseudoElements{CSS规则}）、子选择器(E>F{CSS规则})、临近选择器(E + F{CSS规则})、属性选择器(E[attr]{CSS规则})

2.jQuery选择器
jQuery选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为他们添加相应的行为。

<script type="text/javascript">
    function demo(){
        alert('javascript demo');
    }
</script>
<p onclick="demo();">点击我</p>

<script type="text/javascript">
    $(".demo").click(function(){
        alert(' jquery demo');
    });
</script>
<p class="demo">点击我</p>

jQuery选择器的优势：
$()函数在很多JavaScript类库中都被作为一个选择器函数来使用，$(“#ID”)用来代替document.getElementById()函数。通过$(“tagName”)来代替document.getElementsByTagName()函数。
jQuery选择支持CSS1、CSS2的全部和CSS3的部分选择器。

<div>test</div>
<script type="text/javascript">
document.getElementById("tt").style.color="red";
</script>
//报错，因为没有ID为tt的元素

//改进版
<div>test</div>
<script type="text/javascript">
if(docuemnt.getElementById("tt")){
    docuemnt.getElementById("tt").style.color="red";
}
</script>
//这样可以解决这个问题，但是代码量无疑变多了

<div>test</div>
<script type="text/javascript">
$("#tt").css("color","red");//这里无需判断$("#tt")是否存在
</script>

jQuery选择器：

基本选择器：
#id 给指定的id匹配一个元素$(‘#id’)
.class 给指定的class匹配元素$(‘.class’)
element 给指定的元素名匹配元素 $(‘element’)
* 匹配所有元素 $(‘*’)
selector1,selectro2… 将每个匹配到的元素合并后一起返回 $(‘selector1,selectro2’)

层次选择器：
$(“ancestor descendant”) 选取ancestor元素下所有的descendant后代元素
$(“parent>child”) 选取parent元素下child子元素
$(“prev+next”) 选取紧接在prev后的下一个next元素 prev与next是同辈元素(一个)
$(“prev~sibling”) 选取紧接在prev后的所有sibling元素 prev与sibling是同辈元素(多个)

可以使用next()方法来代替$(“prev+next”)
$(“.one + div”) == $(“.one”).next(“div”)

可以使用nextAll()方法来代替$(“prev~sibling”)
$(“#prev~div”) == $(“#prev”).nextAll(“div”)

过滤选择器：
:first 选取第一个元素 $(“div:first”)
:last 选取最后一个元素 $(“div:last”)
:not(selector) 去除所有与给定选择器匹配的元素 $(“input:not(.myClass)”)选取className不是myClass的input元素
:even 选取索引是偶数的所有元素，索引从0开始 $(“input:even”)
:odd 选取索引是奇数的所有元素，索引从0开始 $(“input:odd”)
:eq(index) 选取索引等于index的元素(index从0开始)
:gt(index) 选取索引大于index的元素(index从0开始)
:lt(index) 选取索引小于index的元素(index从0开始)
:header 选取所有的标题元素，例如h1,h2,h3等等
:animated 选取当前执行动画的所有元素
:focus 执行当前获取焦点的元素

内容过滤选择器：
:contains(text) 选取含有文本内容为“text”的元素 $(“div:contains(‘我’)”)
:empty 选取不包含子元素或者文本的空元素 $(“div:empty”)
:has(selector) 选取含有选择器所匹配的元素的元素 $(“div:has(p)”)选取含有p元素的div元素
:parent 选取含有子元素或者文本元素的元素 $(“div:parent”)选取拥有子元素（包括文本元素）的div元素

可见性过滤选择器：
:hidden 选取所有不可见的元素 $(“:hidden”)所有不可见的元素 $(“input:hidden”)选取不可见的input元素
:visible 选取所有可见的元素 $(“div:visible”) 选取所有可见的div元素

属性过滤选择器：

[attribute]  选取拥有此属性的元素  $("div[id]")
[attribute=value]  选取属性值为value的元素
[attribute!=value]  选取属性值不等于value的元素
[attribute^=value]  选取属性值以value开始的元素
[attribute$=value]  选取属性值以value结束的元素
[attribute*=value]  选取属性值含有value的元素
[attribute|=value]  选取属性等于给定字符串或以该字符串为前缀(该字符后跟一个连字符'-')的元素  $("div[title|='en']")
[attribute~=value]  选取属性用空格分隔的值中包含一个给定值的元素  $("div[title~='en']")
[attribute1][attribute2][attributeN]  用属性选择器合并成一个符合属性选择器，满足多个条件。每选择一次，缩小范围一次  $("div[id][title$='test']")选取拥有属性id，并且属性title以“test”结束的div元素

子元素过滤选择器：
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)
:first-child 选取每个父元素的第一个子元素
:last-child 选取每个父元素的自后一个子元素
:only-child 如果这个元素是父元素中唯一一个子元素，那么被匹配，否则，不被匹配

:nth-child(even) 选取每个父元素下的索引值是偶数的元素
:nth-child(odd) 选取每个父元素下的索引值是奇数的元素
:nth-child(2) 选取每个父元素下的索引值为2的元素
:nth-child(3n) 选取每个父元素下索引值是3的倍数的元素（n从1开始）
:nth-child(3n+1) 选取每个父元素下的索引值是3n+1的元素（n从1开始）

表单对象属性过滤选择器：
:enabled 选取所有可用元素 $(“#form1 :enabled”)选取id为form1的表单内的所有可用元素
:disabled 选取所有不可用元素同理
:checked 选取所有被选中的元素(单选框、复选框)
:selected 选取所有被选中的选项元素(下拉列表)

表单选择器：
:input 选取所有的input、textarea、select、button元素
:text 选取所有的但行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:images 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有不可见元素

在里面进行相应的调试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>jQuery选择器</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <style type="text/css">
    div,span,p{
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border:#000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
    }
    div.mini{
        width: 55px;
        height: 55px;
        background: #aaa;
        font-size: 12px;
    }
    div.hide{
        display: none;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){

    });

    </script>
</head>
<body>
    <div class="one" id="one">
        id为one，class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two，class为one，title为mini的div
        <div class="mini" title="other">class位mini，title为other</div>
        <div class="mini" title="test">class位mini，title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为·mini</div>
        <div class="mini">class为·miniclass为·mini</div>
        <div class="mini">class为·mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为·mini</div>
        <div class="mini">class为·mini</div>
        <div class="mini">class为·mini</div>
        <div class="mini" title="tesst">class位mini，title为tesst</div>
    </div>
    <div style="display:none;" class="none">
        style="display:none;" class="none"
    </div>
    <div class="hide">class="hide"</div>
    <div>
        包含input的type为“hidden”的div
        <input type="hidden" size="8">
    </div>
    <span id="mover">正在执行动画的span元素</span>
</body>
</html>

一些方法：
show():显示隐藏的匹配元素
css(name,value):给元素设置样式
text(String):设置匹配元素的文本内容
filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合，注意区分它和find()方法。find()会在元素内寻找匹配元素，而filter()则是筛选元素。一个是对他的·子集操作，一个是对自身集合元素进行筛选
addClass(class):未匹配的元素添加指定的类名