jquery 常用选择器基础语法学习

 

  • siblings方法的常用应用场景:选中高亮

 

 实现代码

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一步实现多个同级div,只改变点击的当前div样式title>
head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>

<body>
<div id="little_light">
    <div class="light_greycolor">首页div>
    <div>珠江0度div>
    <div>百威陪酒div>
    <div>美味烧烤div>
    <div>烧汁鸡扒div>
    <div>扬州炒饭div>
    <div>就知道吃div>
div>
body>
<style>
    .light_greycolor {
        background-color:#FF8400;
    }
    #little_light>div{
        /*width: 140px;*/
        padding:3px 10px;
        height: 30px;
        border:1px solid red;
        float:left;
        margin-right:30px;
    }

style>
<script>
    $(function(){
        $("#little_light div").click(function(){
            $(this).siblings('div').removeClass('light_greycolor');  // 删除其他兄弟元素的样式//jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索。
            $(this).addClass('light_greycolor');
        });
    });
script>

html>

 

  •  知识点

1.过滤器filter(有xxx类的,或id=xxx的元素)与not(没有XXX类,或不是id=xxx的元素)jquery 常用选择器基础语法学习_第1张图片

jquery 常用选择器基础语法学习_第2张图片

2.父代选择器parent与parents(),parent是选则直接父类,parents是选择父类,父类的父类。

所以很重要的一点是:parent()是只返回一个元素的,而祖先选择器parents("ul")他返回多个祖先元素。他里面是可以过滤元素的。parents("ul")表示获取所有祖先元素,并且是ul的。这是比较常用的配合过滤使用。

jquery 常用选择器基础语法学习_第3张图片

 


jquery 常用选择器基础语法学习_第4张图片

最常的做法是配合元素过滤。

jquery 常用选择器基础语法学习_第5张图片

3.有父代选择器,那么就有子代选择器children和后代选择器find。

直接子代跟后代元素有什么不同?直接子代就是它的儿子,后代元素,可以是他的儿子,他的孙子...只要是它里面的元素即可。

跟上面类似,有点不同的是无论是直接子代,还是后代元素都可以有多个。

即children("p")返回p标签的所有子代元素。

find("p")返回所有p标签的后代元素。

jquery 常用选择器基础语法学习_第6张图片

jquery 常用选择器基础语法学习_第7张图片

 

5.接下来,还有一个就是获取兄弟元素(同胞,同一个层级)siblings("p")。常见的应用场景就是导航栏tab栏切换时的高亮效果。

还有就是next和prev方法,上一个和下一个同胞。

nextAll()和prevAll ()可以配合eq(2)使用,eq是获得数组中下标为2的元素。例如$(this).nextAll().eq(2).attr("href").attr是获得该元素的href属性的值。

 jquery 常用选择器基础语法学习_第8张图片

 

 学完之后,可以去找个购物车页面的模板,研究一下他的js代码是怎么写的。总结下来,发现只有获取直接父代的方法parent()是里面是没有过滤效果的(全文重点,以前还有点迷惑,现在总结出来,方便记忆。

你可能感兴趣的:(jquery 常用选择器基础语法学习)