Hey小伙伴们,今天来聊聊我们在日常开发中经常用到的jQuery选择器,你知道吗?jQuery选择器就像是我们的小助手,帮我们快速定位和操作HTML元素,你知道jQuery中有哪些类型的选择器吗?就让我们一起了解一下这些神奇的选择器吧!
基本选择器
这是最基础的选择器,它们帮助我们快速找到HTML中的元素。
ID选择器:通过元素的ID属性来选择元素。$("#myId")会选择ID为myId的元素。
类选择器:通过元素的class属性来选择元素,比如$(".myClass")会选择所有class为myClass的元素。
标签选择器:通过HTML标签名来选择元素,比如$("p")会选择所有的<p>标签元素。
层次选择器
这些选择器帮助我们根据元素的层次结构来选择元素。
后代选择器:$("div p")会选择所有在<div>元素内部的<p>元素。
子选择器:$("ul > li")会选择所有直接作为<ul>元素子元素的<li>元素。
相邻选择器:$("h1 + p")会选择所有紧跟在<h1>元素后面的<p>元素。
通用兄弟选择器:$("h1 ~ p")会选择所有与<h1>元素有相同父元素的<p>元素。
基本过滤器
这些过滤器用于更精确地选择元素。
:first:选择匹配元素集合中的第一个元素,比如$("p:first")会选择第一个<p>元素。
:last:选择匹配元素集合中的最后一个元素,例如$("p:last")会选择最后一个<p>元素。
:even 和:odd:分别选择匹配元素集合中的偶数和奇数索引的元素,比如$("tr:even")会选择所有偶数行的<tr>元素。
:not(selector):选择除了指定选择器以外的所有元素,例如$(":not(.disabled)")会选择所有没有disabled类的元素。
这些选择器根据元素的内容来筛选元素。
:contains(text):选择包含指定文本的元素,比如$(":contains('Hello')")会选择所有包含文本“Hello”的元素。
:has(selector):选择包含指定选择器匹配的元素的元素,例如$("div:has(p)")会选择所有包含<p>元素的<div>元素。
可见性过滤器
这些选择器根据元素的可见性状态来选择元素。
:visible:选择所有可见的元素,比如$(":visible")会选择所有可见的元素。
:hidden:选择所有不可见的元素,例如$(":hidden")会选择所有不可见的元素。
属性过滤器
这些选择器根据元素的属性来选择元素。
[attr]:选择具有指定属性的所有元素,比如$("input[type='text']")会选择所有type属性为text的<input>元素。
[attr=value]:选择具有指定属性值的所有元素,例如$("a[href='http://example.com']")会选择所有href属性值为http://example.com的<a>元素。
[attr^=value]:选择属性值以指定值开始的所有元素,比如$("a[href^='http://']")会选择所有href属性值以http://开头的<a>元素。
子元素过滤器
这些选择器根据元素的子元素来选择元素。
:first-child 和:last-child:选择作为父元素的第一个或最后一个子元素的元素,例如$("p:first-child")会选择所有作为父元素第一个子元素的<p>元素。
:only-child:选择作为父元素唯一子元素的元素,比如$("p:only-child")会选择所有作为父元素唯一子元素的<p>元素。
表单选择器
这些选择器专门用于选择表单元素。
:input:选择所有表单元素,比如$(":input")会选择所有表单元素。
:checkbox 和:radio:选择所有<input type="checkbox">和<input type="radio">元素,例如$(":checkbox")会选择所有复选框元素。
就是jQuery中常用的一些选择器类型啦!这些选择器,可以让你在开发过程中更加得心应手,下次遇到复杂的DOM操作,不妨试试这些选择器,它们可能会给你带来意想不到的便利哦!记得多实践,多尝试,你会发现jQuery的世界真的很精彩!



还没有评论,来说两句吧...