码迷,mamicode.com
首页 > Web开发 > 详细

JQuery之选择器篇(一)

时间:2020-02-02 10:22:55      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:名称   ext   ref   pre   过滤   com   特定   选择   基本   

??今天回顾了之前学习的JQuery选择器,现在简单的总结一下。


JQuery选择器类型

??主要分为四类

  1. 基本选择器
  2. 层级选择器
  3. 过滤选择器
  4. 表单选择器

基本选择器

??基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能用一次,class允许重复使用。

  1. 标签选择器??div { color:Red;}
  2. ID选择器??#myDiv {color:Red;}
  3. 类选择器??.divClass {color:Red;}
  4. 后代选择器(类选择器的后代选择器)??.divClass span { color:Red;}
  5. 群组选择器??div,span,img {color:Red} ?? 即具有相同样式的标签分组显示

层级选择器

??如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等 大专栏  JQuery之选择器篇(一),那么层次选择器是一个非常好的选择。

  1. 后代??$(“ancestor descendant”)??选取ancestor元素里所有
    descendant(后代)元素
  2. 子元素 ?? $(“parent>child”) ??选取parent元素下的child(子)元素
  3. next元素 ??$(“prev+next”) ??选取紧接在prev元素后的next元素
  4. siblings元素 ??$(“prev~siblings”) ??选取prev元素之后的所有siblings元素

?? 在层次选择器中,第1个和第2个比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以使用的机率相对较少,可以用相应的方法代替。

??可以用next()方法来代替$(“prev+next”)选择器,即$(“.one+div”)与$(“.one”).next(“div”)等效

??可以用nextAll()方法来代替$(“prev~siblings”)选择器,即$(“.one~div”)与$(“.one”).nextAll(“div”)等效


小结
本文主要介绍了jQuery选择器中的基本选择器和层次选择器,后两者改天再总结。

JQuery之选择器篇(一)

标签:名称   ext   ref   pre   过滤   com   特定   选择   基本   

原文地址:https://www.cnblogs.com/lijianming180/p/12251182.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!