jQuery选择器及部分 api 的用法 |
您所在的位置:网站首页 › jquery获取元素类名 › jQuery选择器及部分 api 的用法 |
使用jQuery获取元素
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
jQuery为了方便使用者刻意和CSS选择器使用相同的语法,几乎支持所有类型的CSS3选择器,当然也有一些其特定的选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取元素。 $("p.intro") 选取所有 class="intro" 的 元素。 $("p#demo") 选取所有 id="demo" 的 元素。 jQuery 属性选择器 jQuery 使用 XPath(XPath 是一门在 XML 文档中查找信息的语言,XPath 用于在 XML 文档中通过元素和属性进行导航。) 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 $("p").css("background-color","red"); 选择器 基本,组合/层次选择器.png 基本过滤选择器.png 内容,可视化,属性过滤选择器.png 子元素,表单元素选择器.png可以看出来基本上和css选择器差不多,就感觉是在复习css选择器一样,简直不要太爽. 部分 api 的用法除了使用选择器jQuery还提供了一些方法帮助我们查找当前元素相关元素 .eq(index), .get([index]) 对于一个特定结果集,我们想获取到指定index的jQuery对象,可以使用eq方法 $('div').eq(3); 获取结果集中的第四个jQuery对象我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象,也就是我们说的jQuery对象转DOM对象 $('div')[2]; $('div').eq(2);get()不写参数把所有对象转为DOM对象返回 兄弟元素获取.next([selector]), .prev([selector]) next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素。prev正好相反,获取元素之前的同辈元素 $("h2").next(); 返回 的下一个同胞元素.nextAll([selector]), .prevAll([selector]) nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素,选择性筛选的选择器,prevAll与之相反,获取元素前面的同辈元素 $("h2").nextAll(); 返回 的所有跟随的同胞元素.siblings([selectors]) 获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器 $("h2").siblings(); 返回 的所有同胞元素也可以使用可选参数来过滤对同胞元素的搜索。 $("h2").siblings("p"); 返回属于 的同胞元素的所有元素 nextUntil() , prevUntil() 方法 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。prevAll与之相反,获取元素前面的同胞元素 $("h2").nextUntil("h6"); 返回 的所有跟随的同胞元素 父子元素获取children() 方法 返回被选元素的所有直接子元素,选择器选择性筛选 该方法只会向下一级对 DOM 树进行遍历。 $("div").children(); 返回每个 元素的所有直接子元素也可以使用可选参数来过滤对子元素的搜索。 $("div").children("p.1"); 返回类名为 "1" 的所有元素,并且它们是 的直接子元素 find() 方法 返回被选元素的后代元素,一路向下直到最后一个后代。 $("div").find("span"); 返回属于 后代的所有 元素 $("div").find("*"); 返回 的所有后代parent() 方法 $("span").parent(); 返回每个 元素的的直接父元素返回被选元素的直接父元素。 parents() 方法 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。 $("span").parents(); 返回所有 元素的所有祖先也可以使用可选参数来过滤对祖先元素的搜索。 $("span").parents("ul"); 返回所有 元素的所有祖先,并且它是 元素parentsUntil() 方法 返回介于两个给定元素之间的所有祖先元素。 $("span").parentsUntil("div"); 返回介于 与 元素之间的所有祖先元素 筛选当前结果集first() 方法 返回被选元素的首个元素。 $("div p").first(); 选取首个 元素内部的第一个元素 last() 方法 返回被选元素的最后一个元素. $("div p").last(); 选择最后一个 元素中的最后一个元素 filter() 方法 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。参数可以是一个选择器或者一个函数 $("p").filter(".url"); 返回带有类名 "url" 的所有元素 $('li').filter(function(index) { return index % 3 == 2; }) 返回下标除以3余数为2的所有li元素 not() 方法 返回不匹配标准的所有元素。 $("p").not(".url"); 返回不带有类名 "url" 的所有元素 has() 方法 返回拥有匹配指定选择器的一个或多个元素在其内的所有元素,如需选取拥有多个元素在其内的元素,请使用逗号分隔。 $("p").has("span"); 返回拥有一个 元素在其内的所有元素 is() 方法 用于查看选择的元素是否匹配选择器。 if ($("p").parent().is("div")) { alert("p 的父元素是 div"); } 如果的父元素是 元素,弹出提示信息 总结 以上就是关于jQuery选择器及部分 api 的用法,并给出具体实例,希望对有需要的人所有帮助。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |