-
2019-06-21 09:16:52
选择器 描述 返回 示例 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > child") 选取parent元素下的child(子)元素,与$("ancestor descendant")有区别,$("ancestor descendant")选择的是后代元素 集合元素 $("div > span")选取<div>元素下元素名是<span>的子元素 $("prev + next") 选取紧接在prev元素后的next元素 集合元素 $(".one + div")选取class为one的下一个<div>同辈元素 $("prev ~ siblings") 选取prev元素之后的所有siblings元素 集合元素 $("#two ~ div")选取id为two的元素后面的所有<div>同辈元素 更多相关内容 -
jQuery--选择器(基本选择器、层次选择器)详解
2019-10-01 09:52:50jQuery选择器完全继承了CSS选择的风格,将jQuery选择器分为4类:基本选择器、层次选择器、过滤选择器和表单选择器。 基本选择器 基本选择器是jQuery中最常用的选择器,通过元素的id、className或tagName来查找页面中...jQuery选择器
通过jQuery选择器可以方便快捷地获得页面中的元素,然后为其添加相应行为,无需担心浏览器的兼容性问题。jQuery选择器完全继承了CSS选择的风格,将jQuery选择器分为4类:基本选择器、层次选择器、过滤选择器和表单选择器。
基本选择器
基本选择器是jQuery中最常用的选择器,通过元素的id、className或tagName来查找页面中的元素,如下表:
选择器 描述 返回 #ID 根据元素的ID进行匹配 单个jQuery对象 .class 根据元素的class属性进行匹配 jQuery对象数组 element 根据元素的标签名进行匹配 jQuery对象数组 selector1,selectot2,…,selectorN 将每个选择器匹配的结果合并后一起返回 jQuery对象数组 * 匹配页面的所有元素,包括html、head、body等 jQuery对象数组 示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery基本选择器</title> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> </head> <body> <div id="idDiv">idDIv</div> <div class="classDiv" style="border: 1px;">classDiv</div> <div class="classDiv">classDiv</div> <span class="classSpan">classSpan</span> <script type="text/javascript"> $(function(){ $("#idDiv").css("color","blue"); $(".classDiv").css("background-color", "#dddddd"); $("span").css("font-size", "40px"); $("#idDiv,.classSpan").css("font-style","italic"); }); </script> </body> </html>
层次选择器
jQuery层次选择器是通过DOM对象的层次关系来获取特定的元素,如同辈元素、后代元素、子元素和相邻元素等。层次选择器的用法与基本选择器相似,也是使用$()函数来实现,返回结果均为jQuery对象数组。
选择器 描述 返回 $(“ancestor descendant”) 选取ancestor元素中的所有的子元素 jQuery对象数组 $(“parent > child”) 选择parent元素中的直接子元素 jQuery对象数组 $(“prev+next”) 选取紧邻prev元素之后的next元素 jQuery对象数组 $(“prev~siblings”) 选取prev元素之后的siblings兄弟元素 jQuery对象数组 示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery层次选择器</title> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> </head> <body> <div> 搜索条件<input name="search"/> <form> <label>用户名:</label> <input name="userName" /> <fieldset> <label>密 码:</label> <input name="password" /> </fieldset> </form> <hr /> 身份证号:<input name="none" /><br /> 联系电话:<input naem="none"/> </div> <script type="text/javascript"> $(function(){ //form下的所有input $("form input").css("width","200px"); //form的直接子元素input $("form>input").css("background","pink"); //紧邻label的input $("label+input").css("border-color","blue"); //$("label").next("input").css("border-color","blue"); //form之后相邻的input $("form~input").css("border-bottom-width","5px"); //$("form").nextAll("input").css("border-bottom-width","4px"); $("*").css("padding-top","10px"); }); </script> </body> </html>
-
【jquery】jquery选择器有哪些
2020-03-25 16:05:064大类:基本选择器、层次选择器、过滤选择器、表单选择器 目录 1、jquery基本选择器 2、jquery层次选择器 3、jquery过滤选择器 4、jquery表单选择器 1、jquery基本选择器 基本选择器是JQuery最常用的选择器,...4大类:基本选择器、层次选择器、过滤选择器、表单选择器
目录
1、jquery基本选择器
基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素。
$("#myELement")
选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass") 注意:在网页中id只能使用一次,即id具有唯一性,但class是允许重复使用的。
2、jquery层次选择器
层次选择器通过DOM元素间的层次关系来获取元素,主要的层次关系包括父子、后代、相邻、兄弟关系。
$("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 说明:只有这个方法返回的是JQuery对象才能进行链式操作。
3、jquery过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头(关于css伪类选择器更多知识可以参考css学习手册)。按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器共六种选择器。下面我们分别来简单看一下jquery这六种过滤选择器
(1)jquery基本过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配,书写时都以(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种。
$("tr:first"):选择所有tr元素的第一个
$("tr:last"):选择所有tr元素的最后一个
$("input:not(:checked) + span") :过滤掉:checked的选择器的所有的input元素
$("tr:even"):选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd"):选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)"):选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") :选择td元素中序号大于4的所有td元素
$("td:ll(4)"):选择td元素中序号小于4的所有的td元素
$(":header"):匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素
$("div:animated"):匹配所有正在执行动画效果的元素
(2)jquery内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。
$("div:contains('John')") :选择所有div中含有John文本的元素
$("td:empty") :选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") :选择所有含有p标签的div元素
$("td:parent"):选择所有的以td为父节点的元素数组
(3)jquery可见性过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
$("div:hidden"):选择所有的被hidden的div元素
$("div:visible"):选择所有的可视化的div元素
(4)jquery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
$("div[id]"): 选择所有含有id属性的div元素
$("input[name='newsletter']"):选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") :选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']"): 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") :选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") :选择所有的name属性包含'news'的input元素
(5)jquery子元素过滤选择器
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") :匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始。
$("div span:first-child"):返回所有的div元素的第一个子节点的数组
$("div span:last-child"):返回所有的div元素的最后一个节点的数组
$("div button:only-child") :返回所有的div中只有唯一一个子节点的所有子节点的数组
(6) jquery表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤。
$(":enabled"):选择所有的可操作的表单元素
$(":disabled"):选择所有的不可操作的表单元素
$(":checked"):选择所有的被checked的表单元素
$("select option:selected"):选择所有的select 的子元素中被selected的元素
$(”input[@ name =S_03_22]“).parent().prev().text():选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“):名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name =radio_01][@checked]“).val();:一个名为 radio_01的radio所选的值
$("A B"):查找A元素下面的所有子节点,包括非直接子节点
$("A>B") :查找A元素下面的直接子节点
$("A+B") :查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") :查找A元素后面的兄弟节点,不包括非直接子节点
4、jquery表单选择器
利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。
注意:注意:要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的。
$(":input") :选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text") : 选择所有的text input元素
$(":password"): 选择所有的password input元素
$(":radio") :选择所有的radio input元素
$(":checkbox") :选择所有的checkbox input元素
$(":submit") :选择所有的submit input元素
$(":image") : 选择所有的image input元素
$(":reset") :选择所有的reset input元素
$(":button") :选择所有的button input元素
$(":file") :选择所有的file input元素
$(":hidden"):选择所有类型为hidden的input元素或表单的隐藏域
-
层次选择器(父子、后代、兄弟、相邻)
2020-11-30 15:09:42选择器 说明 M N 后代选择器,选择M元素内部后代的N元素(所有N元素) M>N 子代选择器,选择M元素内部子代的N元素(所有第1级N元素) M~N 兄弟选择器,选择M元素后所有的统计N元素 M+N 相邻选择器,...选择器 说明 M N 后代选择器,选择M元素内部后代的N元素(所有N元素) M>N 子代选择器,选择M元素内部子代的N元素(所有第1级N元素) M~N 兄弟选择器,选择M元素后所有的统计N元素 M+N 相邻选择器,选择M元素相邻的下一个N元素(M、N是同级元素) 一、后代选择器
语法:M N{}
说明:在后代选择器中,M元素与N元素用空格隔开,表示选中M元素内部后代的N元素。
举例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #first p { color: blueviolet; } </style> </head> <body> <div id="first"> <p>子元素</p> <p>子元素</p> <div id="second"> <p>子元素的子元素</p> <p>子元素的子元素</p> </div> <p>子元素</p> <p>子元素</p> </div> </body> </html>
由以上例子可知,后代选择器包含的是其后代的所有元素二、子代选择器
语法:M>N
说明:子代选择器用于选中元素内部的某一个子元素。
举例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #first>p { color: blueviolet; } </style> </head> <body> <div id="first"> <p>子元素</p> <p>子元素</p> <div id="second"> <p>子元素的子元素</p> <p>子元素的子元素</p> </div> <p>子元素</p> <p>子元素</p> </div> </body> </html>
由此例可知,子代选择器只选中其元素内部某一个子元素,并且不包括其他的后代元素。三、兄弟选择器
语法:M~N{}
说明:在兄弟选择器中,表示M元素后面的的所有某一兄的元素
举例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #second~p { color: blueviolet; } </style> </head> <body> <div id="first"> <p>子元素</p> <p>子元素</p> <div id="second"> <p>子元素的子元素</p> <p>子元素的子元素</p> </div> <p>子元素</p> <p>子元素</p> </div> </body> </html>
#second~p表示选中id=second元素后面的所有兄弟元素,这里要注意的是,兄弟元素值选中后面的所有兄的元素,不包括前面的。、四、相邻选择器
语法:M+N{}
说明:在相邻选择器中,M元素和N元素之间使用+符号,表示选中M元素后面的某一个相邻的兄弟元素
举例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #second+p { color: blueviolet; } </style> </head> <body> <div id="first"> <p>子元素</p> <p>子元素</p> <div id="second"> <p>子元素的子元素</p> <p>子元素的子元素</p> </div> <p>子元素</p> <p>子元素</p> </div> </body> </html>
相邻选择器技巧:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> /*去除所有元素默认的padding和margin*/ *{padding:0;margin:0;} /*去除列表项默认符号*/ div{list-style-type: none;} a+a{ border-right: 2px solid blue; float: left; } </style> </head> <body> <div> <a>关于我们</a> <a>联系我们</a> <a>版权声明</a> <a>负责声明</a> <a>广告服务</a> <a>意见反馈</a> </div> </body> </html>
我们可以使用相邻选择器为两个元素之间添加一个边框的效果,平时所见的底部信息栏便是如此。 -
jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器
2016-10-18 10:18:16jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器 -
WEB前端 -- 属性选择器与层次选择器
2018-03-05 08:26:421.层次选择器层次选择器选择器CSS模式JQuery模式描述后代选择器ul li a{}$('ul li a')获取追溯到的多个DOM对象子选择器div > p{}$('div p')只获取子类节点的多个DOM对象next选择器div + p{}$('div + p')只... -
jQuery的选择器分类都有哪些?
2020-12-18 20:26:31根据所获取页面中元素的不同,可以将jQuery选择器分为四大类:基本选择器、层次选择器、过滤选择器、表单选择器。其中在过滤选择器中又可分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、... -
CSS选择器有哪些?哪些属性可以继承?
2018-11-19 12:17:40CSS选择器有哪些? 选择符类型 例子 例子描述 通用选择器 * 类别选择器(.class) .intro 选择class=”intro”的所有元素 ID选择器(#id) #first 选择id=”first”的所有元素 标签选择器(element) div 选择... -
jQuery中常用的选择器 (常用的选择器有哪些)
2019-12-04 21:52:21一、基本选择器 基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。 1、ID选择器 #id 描述:根据给定的id匹配一个元素, 返回单个元素(注:在网页中,id名称不能重复... -
css3选择器--层次选择器
2017-06-01 16:29:37层次选择器:通过html的dom元素间的层次关系获取元素,主要层次关系有 后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器: E F, 作用的是选择元素的后代元素。包括子元素、孙辈元素等。(常用) div div{ color... -
层级选择器(基础)+基本选择器
2020-10-17 17:33:28ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素 语法:$("ancestor descendant") ancestor是祖辈或者父辈的标签或者属性,descendant是后代的标签或者属性 -
jQuery 层级选择器(子代、后代选择器)
2019-10-25 23:22:35子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 跟CSS的选择器一模一样。... -
jQuery层次选择器
2018-07-28 12:13:51层次选择器 通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。 层次选择器 选择器 描述 返回 示例 $("ancestor descendant") 选取... -
jquery类选择器/基于下标的选择器/层次选择器的使用场景
2016-10-20 09:18:59一直以来,认为jquery在选择器上多此一举,既然有了id选择器,那么为什么还要费劲去搞各种其它选择器,id选择器难道不是万能的吗,难道不是最简单的吗?说到最简单,有可能是当之无愧,但是要说万能,确实名不副实;... -
css四个层次选择器
2018-10-23 14:38:371.后代选择器 选中parent元素内部后代所有 n 元素。 parent n{} 2.子代选择器 选中 parent 元素内部 的子元素 n parent>n{} 3.兄弟选择器 选中 brother 元素后面的所有某一类兄弟元素 n。 brother~n{} 4.... -
CSS选择器到底有哪些?CSS笔记(一)
2020-04-19 20:26:57文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器类选择器选择器分组(并集选择器)通配选择器复合选择器(交集选择器)后代元素选择器子元素选择器伪类... -
CSS常用选择器(通配符选择器,标签选择器,类选择器,id选择器.....),你知道多少?
2020-03-07 15:20:58CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。 ... -
css3选择器--基本选择器,层次选择器,属性选择器
2016-12-05 23:35:27而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以... -
jQuery 层次选择器,属性选择器
2016-12-01 10:40:25jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div") -
CSS系列之高级选择器/层次选择器/结构伪类选择器/属性选择器
2019-06-19 23:05:4101 层次选择器 a. 后代选择器 格式: E F { 声明;} 应用:获取E元素下所有与F匹配的元素 b. 子选择器 格式:E>F{声明;} 应用:只获取E下面的与F匹配的第一层子元素 c.相邻兄弟选择器 格式:E+F{声明;} ... -
jQuery选择器之层级选择器
2019-01-28 17:24:44若要通过DOM 元素之间的层次关系来获取元素,如后代元素,子元素,相邻元素...jQuery中有四种层次选择器: 后代选择器 子选择器 相邻元素选择器 同辈元素选择器 最常用的是后代和子选择器。 名称 描述 返回值... -
HTML &CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择...
2018-06-19 11:11:15复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成,其中... -
jQuery学习之基本选择器、层次选择器和并且选择器
2017-08-02 10:56:55层次选择器 function f1 () { //派生选择器(父子关系)--不考虑层次 //$('div span').css('color','red'); //直接子元素选择器(父子关系)--考虑层次 //$('div >span').css('background-color','... -
CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先?
2017-04-25 23:26:57CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先? 选择符类型 例子 例子描述 通用选择器 * 类别选择器(.class) .intro 选择class=”intro”的所有元素 ID... -
JQuery四大选择器
2019-01-21 16:20:43基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用)。所谓的网页中id只能使用一次的意思是说,一个网页中的id是不... -
jQuery中选择器有哪几种(哪几种最常见)
2018-12-29 14:34:16一、基本选择器 基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。 1、ID选择器 #id 描述:根据给定的id匹配一个元素, 返回单个元素(注:在网页中,id名称不能重复... -
CSS3选择器——2、层次选择器
2015-02-14 17:49:46CSS3选择器——2、层次选择器 *{ margin: 0px; padding: 0px; } body{ width: 300px; margin: 0 auto; } div{ margin: 5px; padding: 5px; border: 1px solid #ccc; ... -
JQuery_九大选择器
2017-07-25 18:19:07JQuery中九大选择器。 -
CSS后代选择器
2017-12-02 14:54:30关系选择器 ...于是,关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。 表 2-2 关系选择器 选择器 语法 功能描述 版本 后代选择器 E F 选择E元素的所有后代F元素 1 -
四选一多路选择器的设计与仿真
2019-08-06 17:22:40四选一多路选择器的设计与仿真 2. 实验目的 设计一个四选一多路选择器,并进行仿真测试。 3. 实验要求 当 s1、s0 均为低电平时,输出 i0;当 s1 为低电平,s0 为高电平时,输出 i1;当 s1 为高电平,s0 为低...