jquery基本选择和层次选择器详细介绍

jQuery选择器的出现不仅是为了简化JavaScript的写法，也是由于JavaScript提供的选择DOM的方式较少，难以满足实际开发的众多需求。因此，jQuery选择器中提供了更多选择DOM的方式，支持从CSS1到CSS3所有的选择器以及其他常用的选择器。jQuery选择器按照功能可以分为基本选择器、层次选择器、过滤选择器，下面我们详细介绍。一、基本选择器jQuery中基本选择器是*简单直观的选择器，包括id选择器、类选择器、元素选择器和通配符选择器。如下表所示：

上表中，jQuery提供的同时获取多个元素的选择器，是利用逗号(,)分隔，将每一个选择器匹配到的元素合并后一起返回。为了大家更好地理解基本选择器的使用，接下来通过一个案例进行演示，HTML代码片段如demo1.html所示。<style>div {border: 1px solid black;}</style><div id="byId">第1个div元素，id值为byDiv</div><p>第1个p元素</p><p class="byclass">第2个p元素，类名为byclass</p><div class="byclass">第2个div元素，类名为byClass</div>上述代码中，定义了两个div元素和两个p元素，第1个div元素的id值为byld，第2个div元素与第2个p元素设置了相同的类名byClass。使用浏览器访问demo1.html页面的初始效果如下图所示：

图1 页面初始效果下面使用不同的jQuery基本选择器操作以上的HTML页面。1.id选择器与类选择器不同的是，一个规范的HTML 文档中不会出现多个元素具有相同id值的情况。因此，一个id选择器只能获取一个元素。下面为id是byld的元素设置背景色。在demo1.html 文件中添加jQuery代码，如下所示。$("#byId").css("background", "pink");上述代码中，css()是 jQuery提供的方法，用于设置元素的CSS样式。其中，background用于设置背景，pink是背景颜色的值。修改完成后，重新使用浏览器访问demo1.html，页面效果如下图所示。

图2 id选择器2、类选择器一个HTML文档中，可以为不同元素设置同名的class值，这样便可以同时设置不同元素的相同样式或行为。修改demo1.html中的jQuery 代码，为页面中类名为byClass的所有元素设置相同的背景色。如下所示。$(".byClass").css("background", "#a0edbc");修改完成后，重新使用浏览器访问 demo1.html，页面效果如下图所示。

图3 类选择器从上图可以看出，引用了类名为byClass的p元素和div元素都被设置了背景色。3、元素选择器元素选择器适用于开发中需要为页面中的所有匹配元素添加样式或行为。修改demo1.html中的jQuery代码，将p元素中的文本大小设置为10 px，如下所示。$("p").css("font-size", "10px");修改完成后，重新使用浏览器访问demo1.html，页面效果如下图所示。

图4 元素选择器4．通配符选择器在实际开发中,若需要为页面上的所有元素添加相同的样式或者行为，此时便可用通配符选择器“*”一次性获取页面所有元素。修改demo1.html 中的jQuery代码，将页面的背景色设为yellow，如下所示。$("*").css("background", "yellow");修改完成后，重新使用浏览器访问demo1.html，页面效果如下图所示。

图5 通配符选择器例如，修改以上的jQuery代码,为class值为byClass和id值为byld的元素设置背景色，如下所示。$(".byclass, #byId"）.css ("background", "yellow");

图6 同时获取多个元素二、层次选择器层次选择器中的“层次”是指DOM元素的层次关系。例如，按照层次结构关系可以获取指定DOM元素的子元素、后代元素、兄弟元素、父元素等。jQuery的层次选择器可以快速定位与指定元素具有层次关系的元素。层次选择器按照DOM元素的层次可以分为子元素选择器、后代选择器和兄弟选择器，具体如下表所示。层次选择器parent>child子元素选择器，根据父元素匹配所有的子元素元素集合selector selector1后代选择器， 根据祖先元素（selector）匹配所有的后代元素（selector1）元素集合prev + next兄弟选择器，匹配prev元素近邻的兄弟元素元素集合prev ~ siblings兄弟选择器，匹配prev元素后代的所有兄弟元素元素集合选择器描述返回值为了大家更好地理解层次选择器的使用，接下来通过一个案例为读者进行演示，HTML代码片段如 demo2.html所示。<p>这是div前面的p元素</p><div id="dv"><p>这是div中的第1个p元素</p><ul><li>这是第1个li元素</li><li><p>这是第2个li中的p元素</p></li></ul><p>这是div中的第2个p元素</p></div><p>这是div后面的第1个p元素</p><p>这是div后面的第2个p元素</p><p>这是div后面的第3个p元素</p>页面结构设计完成后，下面将*外层的div元素当做默认的元素，子元素、后代元素以及兄弟元素都是相对于该div元素进行操作。使用浏览器访问demo2.html，页面的初始效果如下图所示。

图7 页面初始效果下面使用不同的jQuery基本选择器操作以上的HTML页面。1. 子元素选择器子元素选择器指的是通过父元素(parent)获取其下的指定子元素(child)。下面在demo2.html文件中添加如下jQuery 代码，为div元素的子元素添加背景色。 $("#dv >p").css("backgroundColor", "red");上述代码中，在选择器中通过符号“>”获取id值为dv下的所有子元素p，并修改它们的背景色。修改完成后，使用浏览器访问 demo2.html，页面效果如下图所示。

图8 子元素选择器从上图可以看出，程序仅为id值为dv的元素下的p元素添加背景色，不会影响其他p元素的样式。多学一招：children()方法在jQuery中，还可以使用children()方法代替子元素选择器，获取指定元素的子元素.例如,获取demo2.html中，id值等于dv的元素下所有的子元素p，如下所示。$("#dv >p"); //使用子元素选择器获取$("#dv").children("p"); //使用 children()方法获取上述代码中，children()方法的参数p表示要获取的子元素，调用该方法的是子元素的父元素对象，如$("div")。2. 后代选择器后代元素与子元素的区别在于，后代元素不仅包括子元素,还包括子元素下的所有其他元素。替换demo2.html中的jQuery 代码，为id值等于dv的所有后代p元素添加背景色，如下所示。$("#dv p").css("backgroundColor", "red");上述代码中，在选择器中通过空格,获取id值为dv下的所有后代p元素，并修改它们的背景色。修改完成后，使用浏览器访问 demo2.html，页面效果如下图所示。

图9 后代选择器对比图9与图8，可以清楚地看出jQuery的子选择器和后代选择器的区别。多学一招：find()方法在jQuery中，还可以使用find()方法获取指定元素的后代元素。例如，获取 demo2-2.html 中 id值等于dv的元素下所有后代p元素，如下所示。$("#dv p");//使用后代选择器荻取$("#dv") .find ("p");//使用find()方法获取上述代码中，find()方法传递的参数p表示要获取的所有后代p元素。3. 兄弟选择器通过兄弟选择器可以获取指定元素的兄弟元素，兄弟元素可以理解为同辈元素或同级元素。修改demo2.html中的jQuery代码，为id为dv下一个p元素设置背景色，如下所示。$("#dv + p").css("backgroundColor", "red");上述代码中，在选择器中通过符号“+”获取紧邻id值为dv的下一个兄弟元素p，并修改它的背景色。修改完成后，使用浏览器访问demo2.html，页面效果如下图所示。

图10 获取相邻兄弟元素另外，若要获取指定元素后的所有兄弟元素，可以在选择器中使用符号“~”。修改demo2.html 页面中的jQuery代码，如下所示。$("#dv ~ p").css("backgroundColor", "red");修改完成后，使用浏览器访问demo2.html，页面效果如图11所示。

对比图11与图10可以清楚地看出，“prev + next”仅能获取prev元素紧邻的下一个同级元素，“prev ~ siblings”可获取prev后的所有同级元素。多学一招：next()、nextAll()和siblings()方法的使用jQuery中提供的next()方法可获取指定元素紧邻的下一个兄弟元素，nextAll()方法可获取指定元素后的所有兄弟元素，而siblings()方法则可获取指定元素的所有兄弟元素。下面以demo2.html为例进行演示，示例代码如下。 //获取id为dv后紧邻的兄弟元素p $("div").next("p").css("background", "red"); //获取id为dv后所有兄弟元素p $("div").nextAll("p").css("background", "red"); //获取id为dv的所有兄弟元素p $("div").siblings("p").css("background", "red");

图12 siblings()获取所有兄弟元素上述代码中，前两行代码获取的p元素分别与图10和图11相同。最后一行获取的p元素页面效果如图12所示。码上未来IT实训课程优势01课程内容牛  ●Java、Web、Python、互联网全栈开发、AIGC视觉设计&全媒体运营、短视频运     营、视频剪辑、平面设计、电商设计及运营等开发课程，每年迭代课程内容●真实企业资源，学习更深入02专家技术牛  ●技术大咖根据课程体系分重点、分阶段授课●5年以上企业一线开发经验项目经理、技术大牛实战授课03实训案例牛 ●真实的企业一线产品需求案例●全部来自一线的项目经理， 带来真实需求一线项目04学习模式牛 ●6个月全日制实训学习，真实的项目经验●讲练结合，掌握更熟练，全程技术老师跟踪辅导05就业服务牛 ●毕业即就业，学员就业●保薪资就业协议 入学即签订●4-5轮模拟面试+职业素养课程，全程跟踪，为就业保驾护航●毕业学生享受技术大咖终身支持指导课程适用人群●大学应往届生学习进修、在职提升、转行充电人群；●会基本的电脑操作，打字、有无编程基础均可；●对互联网编程感兴趣，想往网站开发、软件工程、大数据方向发展的人群；●低学历人群经过入学测试后方可选修。