jQuery-选择器

最新推荐文章于 2022-07-20 17:12:55 发布

wendZzz

最新推荐文章于 2022-07-20 17:12:55 发布

阅读量339

点赞数 2

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/bertZuo/article/details/82415419

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、id选择器

一个用来查找的ID，即元素的id属性
$( "#id" )
id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。

<input id="demo" type="button" value="按钮" />
<script>
    $(function(){
        $("#demo").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

2、类选择器

通过class样式类名来获取节点
$( ".class" )
jQuery使用JavaScript的原生getElementsByClassName()函数来实现的。

<input class="demo" type="button" value="按钮" />
<script>
    $(function(){
        $(".demo").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

3、元素选择器

根据给定（html）标记名称选择所有的元素
$( "element" )
原生方法getElementsByTagName()函数支持。

<input type="button" value="按钮" />
<script>
    $(function(){
        $("input").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

4、全选择器（*选择器）

通过传递*选择器来选中文档页面中的元素
$( "*" )
通过document.getElementsByTagName()中传递"*"同样可以获取到。

5、层级选择器

（1）子选择器

选择所有指定“parent”元素中指定的“child”的直接子元素
$("parent>child")

<form action="#">
    <input type="button" value="按钮" />
</form>
<script>
    $(function(){
        $("form>input").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

（2）后代选择器

选择给定的祖先元素的所有后代元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。
$("ancestor descendant")

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    $(function(){
        $("ul li").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

（3）相邻兄弟选择器

选择所有紧接在“prev”元素的“next”元素
$("prev+next")

<div>
    <p><span>HTML</span></p>
    <span><i>CSS </i><strong>CSS3</strong></span>
    <span><strong>JavaScript</strong></span>
</div>
<script>
    $(function(){
        $("p+span").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

在点击CSS和CSS3会弹出对话框，只会作用于prev元素后紧接的第一个元素中所有子元素。

（4）一般兄弟选择器

匹配“prev”元素之后的所有兄弟元素，具有相同的父元素，并匹配过滤“siblings”选择器
$("prev~siblings")

<div>
    <p><span>HTML</span></p>
    <span><i>CSS </i><strong>CSS3</strong></span>
    <span><strong>JavaScript</strong></span>
</div>
<script>
    $(function(){
        $("p~span").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

波浪号，点击CSS和CSS3和JavaScript时都会弹出对话框。

6、基本筛选选择器

（1）$(":first")
匹配第一个元素

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    $(function(){
        $("li:first").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

选择一组<li>标签中的第一个，也就是第一个 li 中的HTML点击之后会有弹框出现。

（2）$(":last")
匹配最后一个元素

（3）$(":not(selector)")
一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li class="noSelect">JavaScript</li>
</ul>
<script>
    $(function(){
        $("li:not(.noSelect)").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

那点击HTML和CSS都可以出现弹框，只有JavaScript不可以。

（4）$(":eq(index)")
在匹配的集合中选择索引值为index的元素

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    $(function(){
        $("li:eq(1)").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

（5）$(":gt(index)")
选择匹配集合中所有大于给定index的元素

（6）$(":lt(index)")
选择匹配集合中所有索引值小于给定index的元素

（7）$(":odd")
选择索引值为奇数的元素,从0开始计数

（8）$(":even")
选择索引值为偶数的元素,从0开始计数

（9）$(":header")
选择所有标题元素

（10）$(":lang(language)")
选择指定语言的所有元素

（11）$(":root")
选择该文档的根元素

（12）$(":animated")
选择所有正在执行动画效果的元素

7、内容筛选选择器

（1）$(":contains(text)")
选择所有包含指定文本的元素

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    $(function(){
        $("li:contains(M)").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

其中的text是区分大小写的，如果是m，那么点击第一个li也不会有弹窗出现。

（2）$(":parent")
选择所有含有子元素或者文本的元素，即选择当前元素的父元素。

<ul>
    <li><span>HTML</span></li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    $(function(){
        $("span:parent").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

（3）$(":empty")
选择所有没有子元素的元素(包含文本节点)

<ul>
    <li><span>HTML</span></li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li style="width: 50px;height: 20px;border: 1px solid red;"></li>
</ul>
<script>
    $(function(){
        $("li:empty").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

（4）$("：has(selector)")
选择元素中至少包含指定选择器的元素

<ul>
    <li><span>HTML</span></li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    $(function(){
        $("li:has(span)").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

8、可见性筛选选择器

（1）$(":visible")
选择所有显示的元素

（2）$(":hidden")
选择所有隐藏的元素
隐藏的元素是指:

CSS display的值为none
type="hidden"的表单元素
宽度和高度都显式设置为0
一个祖先元素为隐藏的,该元素是不会在页面上显示
CSS visibility的值为hidden
CSS opacity的值为0

9、属性筛选选择器

（1）$("[attribute|='value']")
选择指定属性等于给定字符串或该文字串为前缀(该字符串后跟一个连字符 - )的元素

<ul>
    <li class="one-demo">HTML</li>
    <li class="two-demo">CSS</li>
    <li class="three-demo">JavaScript</li>
</ul>
<script>
    $(function(){
        $("[class|='one']").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

（2）$("[attribute*='value']")
选择指定属性具有包含一个给定的子字符串的元素(选择给定属性是以包含某些值的元素)

<ul>
    <li class="oneDemo">HTML</li>
    <li class="twoDemo">CSS</li>
    <li class="threeDemo">JavaScript</li>
</ul>
<script>
    $(function(){
        $("[class*='one']").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

（3）$("[attribute~='value']")
选择指定属性用空格分隔的值中包含一个给定值的元素

<form action="#">
    <input type="button" name="button one" value="按钮1">
    <input type="button" name="button two" value="按钮2">
    <input type="button" name="button three" value="按钮3">
</form>
<script>
    $(function(){
        $("input[name~='one']").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

经过试验，还真是需要有空格间隔的才能选出来。

（4）$("[attribute='value']")
选择指定属性是给定值的元素

（5）$("[attribute!='value']")
选择不存在指定元素,或指定的属性值不等于给定值的元素

（6）$("[attribute^='value']")
选择指定属性是以给定字符串开始的元素

（7）$("[attribute$='value']")
选择指定属性是以给定值结尾的元素,区分大小写

（8）$("[attribute]")
选择所有具有指定属性的元素,该属性可以为任何值

<form action="#">
    <input type="button" name="one" value="按钮1">
    <input type="button" name="two" value="按钮2">
    <input type="button" value="按钮3">
</form>
<script>
    $(function(){
        $("input[name]").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

（9）$("[attributeFilter1][attributeFilterN]")
选择匹配所有指定的属性筛选器的元素

10、子元素筛选选择器

（1）$(":first-child")
选择所有父级元素下的第一个子元素

<form action="#">
    <input type="button" name="one" value="按钮1">
    <input type="button" name="two" value="按钮2">
</form>
<form action="#">
    <input type="button" name="three" value="按钮3">
    <input type="button" name="four" value="按钮4">
</form>
<script>
    $(function(){
        $("input:first-child").click(function(){
            alert("The first program of jQuery.");
        })
    })
</script>

选择到按钮1和按钮3，可以弹框出现。

（2）$(":last-child")
选择所有父元素下的最后一个子元素

（3）$(":only-child")
若某个元素是其父元素的唯一元素,则选中它

（4）$(":nth-child(n)")
选择父级元素的第n个子元素

（5）$(":nth-last-child(n)")
选择父元素的第n个子元素,从最后一个子元素开始计算

11、表单元素选择器

（1）$(":input")
选择所有input、textarea、select和button元素

（2）$(":text")
匹配所有文本框

（3）$(":password")
匹配所有密码框

（4）$(":radio")
匹配所有单选按钮

（5）$(":checkbox")
匹配所有复选框

（6）$(":submit")
匹配所有提交按钮

（7）$(":image")
匹配所有图像域

（8）$(":reset")
匹配所有重置按钮

（9）$(":button")
匹配所有按钮

（10）$(":file")
匹配所有文件域

12、表单对象属性筛选选择器

（1）$(":enabled")
选取可用的表单元素

（2）$(":disabled")
选取不可用的表单元素

（3）$(":checked")
选取被选中的<input>元素

（4）$(":selected")
选取被选中的<option>元素

13、特殊选择器this

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，就可以用jQuery提供的快捷方法直接处理样式了。this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

关注我吧

关注「前端一起学」公众号，看着项目进阶学习，让我们一起学前端，一起进步。

wendZzz

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery-选择器

1、id选择器一个用来查找的ID，即元素的id属性 $( "#id" ) id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。<input id="demo" type="button" value="按钮" /><script> $(function...
复制链接

扫一扫

专栏目录