jQuery的选择器 一、 基本选择器 1....在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配类的名称就可以被类选择器选取到。...使用公式:(“.class”) 示例:(“.box”) //获取class属性值为box的所有元素 4.复合选择器 复合选择器将多个选择器...(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号”,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的...selector2:另一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等 selectorN:(可选择)任意多个选择器,可以是ID选择器、元素选择器或类名选择器等
原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。 1....基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可,但是要加引号 ? 2. 层级选择器 层级选择器最常用的两个分别为:后代选择器和子代选择器。 ?...基础选择器和层级选择器案例代码 我是div 我是nav div 我是p <...筛选选择器 筛选选择器,顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 : ? 4....2.需要得到当前小li 的索引号,就可以显示对应索引号的图片 3.jQuery 得到当前元素索引号 $(this).index() 4.中间对应的图片,可以通过 eq(index) 方法去选择 5.显示元素
jQuery选择器 jQuery的基本用法 < script type=“text...(selector).nextAll() – 返回匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。...(selector).prev() – 返回的是前面的同胞元素 (selector).prevAll() – 返回匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。...(selector).eq() – 指定索引的新元素。 (selector).get() – 获得由选择器指定的 DOM 元素。...(selector).each() 对对象进行迭代,为每个元素执行函数 (selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素 (selector).text()
基本选择器 基本选择器是最简单的选择器,可以通过元素id、class和标签名等来直接查找DOM元素。 元素选择器 根据给定元素名匹配元素。如下选择的是所有div元素。... 层次选择器 如果想利用DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,可以使用层次选择器。... 过滤选择器 基本过滤选择器 选择器 描述 实例 :first 选取第一个元素。...[attribute1][attribute2][attributeN] 用属性选择器合并成一个符合属性选择器,满足多个条件。... 表单对象属性过滤选择器 选择器 描述 实例 :enabled 选取所有可用元素。
1. jQuery选择器的介绍 jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样。...2. jQuery选择器的种类 标签选择器 类选择器 id选择器 层级选择器 属性选择器 示例代码: $('#myId') //选择id为myId的标签 $('.myClass') // 选择class...为myClass的标签 $('li') //选择所有的li标签 $('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签 $('input[name=first]')...// 选择name属性等于first的input标签 说明: 可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功,否则选择失败。...小结 jQuery选择器就是选择标签的 标签选择器是根据标签名来选择标签 类选择器是根据类名来选择标签 id选择器是根据id来选择标签 层级选择器是根据层级关系来选择标签 属性选择器是根据属性名来选择标签
1 $("*") ---------选取所有元素 2 $(this) --------选择当前HTML元素 3 $("p.a") -----选取p元素下class为a...的元素 4 $("p:first") ----选取第一个p元素 5 $("ul li:first-child") ----选取ul下第一个li元素 6 $("tr:even") -----
jquery选择器允许对html中的元素组合单个元素进行操作,jquery的选择器和css的选择器几乎大同小异,大致分为元素选择器、id选择器和类选择器。...jquery的选择器基于元素的id、类、类型、属性、属性值等查找或选择html元素,基于已经存在的css选择器,另外,jquery也支持自定义选择器。...jquery中所有选择器都是以美元符号开头,即$()。 元素选择器 <!...id选择器 jquery的id选择器通过html元素中的id属性选取指定的元素,页面中的元素id必须是唯一的,所有在选择的时候需要使用#id选择器。 <!...类选择器 类选择器,也就是.class选择器。jquery可以通过指定的class查找元素。 <!
类选择器,点击事件 $(".demo").click(function(){ alert() }) ?...(#tt).length>0){ } 选择器 ? image.png 属性过滤选择器 div[id] div[title=test] div[title!...image.png 层次选择器 ? image.png ?...image.png 内容过滤选择器 :contains() :has() ? image.png 可见性过滤选择器 :hidden :visible ? image.png 子元素过滤选择器 ?...image.png 表单选择器 :input :text :password :radio :checkbox :submit ? image.png ---- 表格隔行变色 ?
基本选择器(*) 在开发过程中,jQuery对象的定义 var $obj=$("选择的对象"); //$obj为自定义的元素名 id选择器 $("#id"); 选中的结果是该元素的jQuery对象 标签选择器...$("标签名称");jquery对象的集合,如果选择结果只有一个,那么是当前对象 类选择器 $(".类名"); jQuery对象的集合,类名是在css中定义 并集选择器 $("selector1seletor2...全局选择器 $("*"); jQuery对象的集合,会选中所有 层次选择器(*) 后代选择器 $("selector1 selector2"); 选择selector1内部所有满足selector2的元素...选择满足选择器1元素后面的满足选择器2的元素 注意:只能选择相邻后面的一个 同辈元素选择器 $("选择器1~s选择器2"); 选择选择器1元素之后的同辈元素, 并且同辈元素满足选择器2的要求 注意:前面的同辈元素是不会被选择的...:first-child 匹配所给选择器( :之前的选择器)的第一个子元素; 等同于: :nth-child(1) 注意:但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一 个子元素
jquery用法思想 选择某个网页元素,然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。...$('#myId') //选择id为myId的网页元素 $('.myClass') // 选择class为myClass的元素 $('li') //选择所有的li元素 $('#ul1 li span')...').filter('.myClass'); //选择class等于myClass的div元素 $('div').eq(5); //选择第6个div元素 上面演示如何使用jquery来选择上元素,那么下面继续来演示一下选择集的过滤...选择集转移 $('div').prev(); //选择div元素前面紧挨的同辈元素 $('div').prevAll(); //选择div元素之前所有的同辈元素 $('div').next(); //选择...判断是否选择到了元素 jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。
1 jQuery 选择器 原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。 1.1....基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可,但是要加引号 ? 1.2. 层级选择器 层级选择器最常用的两个分别为:后代选择器和子代选择器。 ?...基础选择器和层级选择器案例代码 我是div 我是nav div 我是p <...筛选选择器 筛选选择器,顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 : ?...1.4 知识铺垫 jQuery 设置样式 $('div').css('属性', '值') jQuery 里面的排他思想 // 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式
1、 基本选择器 选择器 描述 结果 示例 #id 根据id获取元素 单个 $(“#myid”)选取id的值为myid的元素 .class 根据class获取元素 集合 $(“.myclass”)选取...,.myclass,#id等 获取对应标签元素 集合 $(“a,.myclass,#myid”)获取a、class的值为myclass以及id为myid的元素集合 2、 层次选择器 选择器 描述 结果...3、 过滤选择器 基本过滤 选择器 描述 结果 示例 :first 选取第一个元素 单个 $(“div:first”)选取div元素中第一个div :last 选取最后一个元素 单个 $(“div:...元素 :empty 选取不包含子元素或者文本是空的元素 集合 $(“span:empty”)选取不含子元素或者没有内容的span :has(selector) 选取有选择器所匹配的元素 集合 $(“div...:selected”) 4、 表单选择器 选择器 描述 结果 示例 :input 选取input、textarea以及select和button元素 集合 $(“:input”) :text 选取单行文本框
jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是jQuery选择器?...层叠样式表 良好地继承了css选择器语法,还继承了其获取页面元素便捷高效的特点 于css不同,jQuery选择器获取元素后,为该元素添加的是行为 有良好的兼容性 优势 1. ...通过 过滤选择呢亲选择元素 (1) 基本过滤选择器 (2) 可见性过滤选择器 详解: 通过css选择器选取元素 jQuery支持大多数css选择器 最常用的有:基本选择器,层次选择器和属性选择器 在jQuery...基本选择器 1. 继承了css选择器的语法和功能 2. 主要由元素标签名,class,id和多个选择器组成 3. 可以实现大多数页面元素的查找 4. ...在层次选择呢亲中,后代选择器和子选择器较为常用,而相邻元素选择器和同辈元素选择器在jQuery中可以用更加简单的方法代替: (1)使用next()房代替prev-next(相邻元素选择器) (2)使用nextAll
jQuery是一种流行的JavaScript库,用于简化HTML文档的操作和动态交互。在jQuery中,层次选择器是一种非常有用的选择器,可以根据元素之间的层次关系选择特定的元素。...在jQuery中,层次选择器使用空格来表示元素之间的层次关系。下面是一些常用的层次选择器:后代选择器(Descendant Selector)用于选择所有指定元素的后代元素。...子元素选择器(Child Selector)用于选择指定元素的直接子元素。...全部兄弟选择器(General Sibling Selector)用于选择指定元素后面的所有兄弟元素。...无论是处理DOM元素还是实现动态交互,jQuery的层次选择器都是非常有用的工具。
先说选择器,要知道js里,也有,就是你给标签起了id,class名,在js里需要获取是一个意思。...在jq中很方便,不用写很长的xxx=document.getElementById(‘xxx’) 1.基本选择器 ? 2.层次选择器 ? 3.过滤选择器 ? 4.内容过滤器 ?...5.可见选择器 ? 6.属性选择器 ? 7.子元素选择器 ?...其中nth-child(xn+y)表示:从第y各元素起,选取每第x个元素 例3n+2表示从第二个子元素开始,选取每个第三个的元素 even:偶数 odd:奇数 8.表单元素过滤选择器 ?...表单中选择确切的某个属性的元素,不需要全部都写input 熟练使用选择器是熟练使用jq的前提 图片全部来自个人word文档中的截图,如有错误欢迎指出,互相学习。
名称 用法 描述 :eq(index) $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。...:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中,选择索引号为奇数的元素 :even $(“li:even”).css(“color”, ”red”); 获取到的...li元素中,选择索引号为偶数的元素 案例: 我是第7个li 我是第8个li 我是第9个li 我是第10个li <script src="<em>jquery</em>
HTML5学堂:jQuery的选择器可以让我们很方便的操作获取元素,那么本文介绍的是jQuery选择器的几种选择器,希望对大家有帮助!谢谢!...1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test...,如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ......")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签) 可以见DEMO。...4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test") <p class="test
选择器 1.基本选择器 2.过滤选择器 a)基本过滤选择器: :first//(选取第一个元素) :last//(选取最后一个元素) :even//(选取索引是偶数的所有元素) :odd//(选取索引是奇数的所有元素...:has(selector)//选取含有选择器所有匹配的元素的元素 :parent//选取含有子元素或者文本的元素 c)可见性选择器 :hidden//选取所有不可见的元素 (包括<input type...d)属性选择器 [attribute]//选取拥有此属性的元素 [attribute=value]//选取属性的值为value的元素 [attribute!...[attribute*=value]//选取属性的含有value的元素 [selector1][selector2][selectorN]//属性选择器合并成一个复合属性选择器, 注意:此处为属性选择器的并集...:only-child//若某子元素是其父元素中惟一的子元素,将会被匹配 f)表单对象属性选择器 :enabled//选择所有可用元素,例$("#form1:enabled") :disabled
在jQuery选择器定位页面元素时,无须考虑定位元素在页面中是否存在,即使不存在,浏览器也不会报错! 二、jQuery选择器: 1....过滤选择器:例:$("#select option:selected") $("li:nth-child(2)") (1)简单过滤选择器【:first、:last、:not、:even、:odd、:...eq、:gt、:lt、:header、:animated】 (2)内容过滤选择器【:contains、:empty、:has、:parent】 (3)可见性过滤选择器【:hidden、:visible...(^,$,*)=value]】 (5)子元素过滤选择器【:nth-child(eq|even|odd|index)、:first-child、:last-child、:noly-child】 (6)...表单选择器:例:$("#form1 :input") 例:$("#form1 :password") 三、 jQuery元素属性操作: 1.
关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :任何有效的选择器。...child: 用来筛选子元素的选择器 $(function(){ $("ul.myul > li").css("border","2px solid red"); //将ul带有.myul...; $("ancestor descendant") 选择给定的祖先元素的所有后代元素 ancestor:任何有效的选择器; descendant: 一个用来筛选子元素的选择器;...red") //将所有紧跟在 label 后面的input 标签加上边框 }); $("prev ~ siblings") 选择任何一个有效选择器以后面的所有兄弟元素。...它们具有相同的父元素。 prev 任何有效的选择器 siblings 一个选择器用来过滤第一个选择器之后的兄弟选择器。
领取专属 10元无门槛券
手把手带您无忧上云