前端学习笔记-jQuery-jQuery选择器/隐式迭代/链式编程

最新推荐文章于 2022-02-19 17:02:05 发布

Nanami Touko

最新推荐文章于 2022-02-19 17:02:05 发布

阅读量236

点赞数

分类专栏：前端学习-jQuery

本文链接：https://blog.csdn.net/qq_36434637/article/details/101154283

版权

前端学习-jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery选择器

jQuery基本选择器

原生JS获取原生的方式很多，很杂，而且兼容性情况，不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$("选择器") // 里面选择直接写CSS选择器即可，但是要加引号

jQuery层级选择器

jQuery筛选选择器

jQuery筛选方法

parents() // 返回所有父级（祖先元素）

parents("元素名") //返回指定父级

案例：新浪下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav > li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav > li > a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jQuery.min.js"></script>
</head>

<body>
<ul class="nav">
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
</ul>
<script>
    $(function () {
        // 获取jQuery对象
        $(".nav>li").mouseenter(function () {
            // $(this) jQuery 当前元素  this不要加引号
            // show() 显示元素  hide() 隐藏元素
            $(this).children("ul").show();
        });
        $(".nav>li").mouseleave(function () {
            $(this).children("ul").hide();
        });

    })
</script>
</body>
</html>

jQuery设置样式

$("div").css("属性","值")

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行对应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jQuery.min.js"></script>
    <title>Title</title>
</head>
<body>
<ul>
    <li>惊喜，意外，行不行</li>
    <li>惊喜，意外，行不行</li>
    <li>惊喜，意外，行不行</li>
    <li>惊喜，意外，行不行</li>
    <li>惊喜，意外，行不行</li>
</ul>
<script>
    $(function () {
        // 获取jQuery对象 修改样式
        // 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法 所有可以给所有的li改变颜色
        $("ul li").css("color","yellow");
    })
</script>
</body>
</html>

jQuery排他思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
    $(function () {
        // 获取jQuery对象 因为存在隐式迭代 所以所以按钮都绑定了点击事件
        $("button").click(function () {
            // 设置当前的button 按钮背景颜色为red色
            $(this).css("background","red");
            // 去掉其兄弟按钮的背景颜色
            $(this).siblings("button").css("background","");
        })
    })
</script>
</body>
</html>

案例：淘宝服饰精品案例分析

核心原理：鼠标经过左侧盒子的某个小li，就让内容区盒子对应图片显示，其余的图片隐藏
需要得到当前小li的索引号，就可以显示对应索引号的图片
jQuery得到当前元素索引号$(this).index()
中间对应的图片，可以通过 eq(index)方法去选择

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }

        #left,
        #content {
            float: left;
        }

        #left li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover {
            background-image: url(images/abg.gif);
        }

        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jQuery.min.js"></script>
</head>
<body>
<div class="wrapper">
    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <div id="content">
        <div>
            <a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a>
        </div>
        <div>
            <a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a>
        </div>
        <div>
            <a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a>
        </div>
        <div>
            <a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a>
        </div>
        <div>
            <a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a>
        </div>
        <div>
            <a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a>
        </div>
        <div>
            <a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a>
        </div>
        <div>
            <a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a>
        </div>
        <div>
            <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a>
        </div>
    </div>
</div>
<script>
    $(function () {
        // 获取jQuery对象 当鼠标经过 left 里面的 li 对应 content里面的 div显示
        $("#left li").mouseenter(function () {
            // jQuery得到当前元素索引号$(this).index()
            var index=$(this).index();
            // 当前 li 对应的 div显示
            $("#content div").eq(index).show();
            // 其他的div隐藏
           $("#content div").eq(index).siblings("div").hide();
        })
    })
</script>
</body>
</html>

链式编程

链式编程是为了节省代码量，看起来更优雅

例如：

$(this).css("color","red").sibling().css("color","");

使用链式编程一定注意是哪个对象执行样式！

Nanami Touko

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记-jQuery-jQuery选择器/隐式迭代/链式编程

jQuery选择器jQuery基本选择器原生JS获取原生的方式很多，很杂，而且兼容性情况，不一致，因此jQuery给我们做了封装，使获取元素统一标准。$("选择器") // 里面选择直接写CSS选择器即可，但是要加引号jQuery层级选择器jQuery筛选选择器jQuery筛选方法parents() // 返回所有父级（祖先元素）...
复制链接

扫一扫