jquery选择器有什么?

jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery选择器句法形式:

$(selector).methodName();

selector是一个字符串表达示,用于识别DOM中的元素,然后使用jQuery提供的方法集合加以设置。

大多数情况下jQuery支持这样的操作:

$(selector).method1().method2().method3();

这个实例表示隐含DOM中id=”goAway”的元素,然后为其添加一个class=”incognito”属性。

$(’#goAway’).hide().addClass(’incognito’);

提示一下:当选择器表达示匹配多个元素时,可以象JavaScritp数组操作一样,方便灵活地利用数组指针进行选取。这是例子:

var element = $(’img’)[0];

匹配表达示的元素中,第一个元素对象将赋给变量element。

jQuery选择器分类

分类示意图:

1.jpg

1、基本选择器

jQuery选择器中使用最多的选择器,它由元素id、class、元素名、多个元素符组成。

功能表如下:

2.jpg

例1:CSS样式:<button id="btn" class="btn1">按钮</button>

使用如下:

console.log($("#btn"));
console.log($(".btn1"));
console.log($("*"));
console.log($("button"));
console.log($("#btn,.btn1,button"));

2、层次选择器

通过DOM元素间的层次关系来获取元素,主要层次关系包括父子、后代、相邻、兄弟关系。

功能表如下:

3.jpg

3-2.jpg

例2:CSS样式如下:

<ul>
    <li>1</li>
    <li>2
        <ol>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ol>
    </li>
    <li class="li3">3</li>
    <p>0000</p>
    <li>4</li>
</ul>

使用如下:

console.log($("ul li"));
console.log($("ul>li"));
console.log($(".li3+"));
console.log($(".li3~li"));

3、过滤选择器

(1)简单过滤选择器

过滤选择器是根据某类过滤规则进行元素的匹配,书写时都以(:)开头;简单过滤是使用最广泛的一种。

功能表如下:

4.jpg

例3:CSS样式如下:

<ul>
    <li>1</li>
    <li>2
        <ol>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ol>
    </li>
    <li class="li3">3</li>
    <p>0000</p>
    <li>4</li>
</ul>

使用如下:

console.log($("ul>li:first"));
console.log($("ul>li:last"));
console.log($("ul>li:even"));
console.log($("ul>li:odd"));
console.log($("ul>li:gt(1)"));
console.log($("ul>li:lt(1)"));
console.log($("ul>li:eq(1)"));
console.log($("ul>li:not(.li3)"));

(2)内容过滤选择器

根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位。

功能表如下:

5.jpg

例4:CSS样式如下:

<ul>
    <li>1</li>
    <li>2
        <ol>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ol>
    </li>
    <li class="li3">3</li>
    <p>0000</p>
    <li>4</li>
</ul>
<div><span>40</span></div>
<span></span>

使用如下:

console.log($("li:contains(2)"));
console.log($("span:empty"));
console.log($("span:parent"));
console.log($("div:has(span)"));

(3)可见性过滤选择器

根据元素是否可见的特征来获取元素

功能表如下:

6.jpg

例5:CSS样式如下:

<input type="button" class="btninput" value="按钮1" >
<input type="button" class="btninput" value="按钮2" >

使用如下:

console.log($(".btninput:hidden"));
console.log($(".btninput:visible"));

(4)属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素,如ID号或匹配属性值的内容,并以"[“号开始,以”]"号结束。

功能表如下:

7.jpg

例6:CSS样式:<button id="btn" class="btn1">按钮</button>

使用如下:

console.log($("button[id][class]"));
console.log($("button[id='btn'][class='btn1']"));

(5)子元素过滤选择器

获取所有父元素中指定的某个元素

功能表如下:

8.jpg

例7:CSS样式如下:

<ul>
    <li>1</li>
    <li>2
        <ol>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ol>
    </li>
    <li class="li3">3</li>
    <p>0000</p>
    <li>4</li>
</ul>
<div><span>40</span></div>

使用如下:

console.log($("ul>li:nth-child(2)"));
console.log($("ul>li:first-child"));
console.log($("ul>li:last-child"));
console.log($("div>span:only-child"));

(6)表单对象属性过滤选择器

对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素

功能表如下:

9.jpg

例7:CSS样式如下:

<input type="checkbox" checked>
<input type="checkbox">
<input type="radio">男
<input type="radio">女
<input type="text">
<select id="sel">
    <option>宝鸡</option>
    <option selected>西安</option>
</select>

使用如下:

console.log($("input[type='checkbox']:checked"));
console.log($("input[type='radio']"));
console.log($("input[type='text']"));
console.log($("input:text"));
console.log($(":input"));
console.log($(":button"));
$("#sel").change(function(){
    console.log($("#sel>option:selected"));
});

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是jquery选择器有什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏