发表于： 2023-03-23 20:24:47

0 124



今天学习的jquery知识点：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery修改样式css方法</title>
    <script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: red;
            transition: all 0.5s;
        }
        .current {
            background-color: blue;
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>

    <div class="current"></div>

    <script>
        // //3、操作样式之css方法
        // $(function() {
        //     // (1)参数只写属性名 则返回的是属性值
        //     console.log($("div").css("width")); //返回的是 200px
        //
        //     // (2)参数是属性名,属性值,逗号分割 是设置一组样式 属性必须加引号 值如果是数字可以不用引号跟单位
        //     // $("div").css("width","300px");
        //     // $("div").css("width",300);
        //     //(3) 参数可以是对象形式 方便设置多组样式，属性名跟属性值用冒号隔开，属性可以加引号
        //     $("div").css({
        //         width: 400,
        //         height: 400,
        //         //如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
        //         backgroundColor: "pink"
        //     })
        // })

        // 操作类的三种方式
        $(function () {
            // 1、添加类 addClass()
            // $("div").click(function () {
            //     $(this).addClass("current")
            // });

            // 2、删除类 removeClass()
            // $("div").click(function () {
            //     $(this).removeClass("current")
            // });

            // 3、切换类 toggleClass()
            $("div").click(function () {
                $(this).toggleClass("current")
            });
        })
    </script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>我是div</div>
  <div>我是div</div>
  <div>我是div</div>
  <div>我是div</div>

  <ul>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
  </ul>
  <ol>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
  </ol>

  <script>
    //1、获取了四个div的值
    // console.log($('div'));

    //2、 给四个div设置背景颜色为粉色 jquery对象不能使用style
    $('div').css('background','pink');
    //3、隐式迭代就是把匹配的所有元素进行遍历循环，给每一个元素添加css这个方法
    // $('ul li').css('color', 'red');

    // :first 获取第一个元素  :eq(索引号index)  获取到索引号的元素 index从0开始
    $(function() {
      $('ol li:first').css('color','blue');
      $('ol li:last').css('color','pink'); // :last 获取最后一个元素
      $('ol li:eq(2)').css('color','red');
      $('ul li:odd').css('color','red');   // 所有索引号为奇数的元素
      $('ul li:even').css('color','blue');  // 所有索引号为偶数的元素
    })


  </script>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选方法</title>
    <script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<!--    <div class="grandfather">-->
<!--        <div class="father">-->
<!--            <div son>儿子</div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="nav">-->
<!--        <p>我是屁</p>-->
<!--        <div>-->
<!--            <p>我是p</p>-->
<!--        </div>-->
<!--    </div>-->

    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
    </ul>
    <div class="current">我有current</div>
    <div>我也有current</div>

    <script>
        // 注意 方法都是 带括号
        $(function() {
            //1、父 parent() 返回的是 最近一级的父级元素
            // console.log($(".nav").parent());

            //2、子
            // (1) 亲儿子 children() 子代选择器 类似于 ul>li
            // $(".nav").children("p").css("color","red");

            // (2)  可以选所有的子代 find() 类似于 后代选择器
            $(".nav").find("p").css("color","red");
            //3、兄
            //(1)兄弟元素 siblings 除了自身元素之外的亲兄弟
            $("ol .item").siblings("li").css("color","red");
            // (2)  nextAll 查询当前之后的 所有兄弟元素
            // $("ol .item").nextAll("li").css("color","red");
            // (3)  prevAll 查询 当前之前的 所有兄弟元素
            // $("ol .item").prevAll("li").css("color","blue");

            //4、第n个元素
            let index = 3;
            //(1) 我们可以利用选择器的方式选择
            $("ul li:eq(2)").css("color","red");
            //(2) 我们可以利用选择方法的方式选择 更推荐这种写法
            $("ul li").eq(3).css("color","blue");
            // $("ul li").eq(index).css("color","blue");
            //5、 判断是否有某个类名
            console.log($("div:first").hasClass("current")); //true
            console.log($("div:last").hasClass("current")); //false
        })

    </script>
</body>
</html>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery排他思想-链式编程</title>
    <script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
            list-style: none;
            text-decoration: none;
        }
        .wrapper {
            width: 270px;
            height: 220px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #content {
            float: left;
        }

        #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-color: red;
        }
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }

    </style>
</head>
<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>

    <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>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="../js2-DOM/图片/猫.jpg" width="220px" height="220px"></a>
            </div>
            <div>
                <a href="#"><img src="../js2-DOM/图片/狗.jpg" width="220px" height="220px"></a>
            </div>
            <div>
                <a href="#"><img src="../js2-DOM/图片/恶魔.jpg" width="220px" height="220px"></a>
            </div>
            <div>
                <a href="#"><img src="../js2-DOM/图片/猫.jpg" width="220px" height="220px"></a>
            </div>
            <div>
                <a href="#"><img src="../js2-DOM/图片/狗.jpg" width="220px" height="220px"></a>
            </div>
            <div>
                <a href="#"><img src="../js2-DOM/图片/恶魔.jpg" width="220px" height="220px"></a>
            </div>
        </div>
    </div>

    <script>

        $(function() {
            // 1、隐式迭代 给所以的按钮都绑定了点击事件
            $("button").click(function() {
                //2、当前元素变化背景颜色
                // $(this).css("background","red");
                //改变点击字体颜色
                // $(this).css("color","red");
                //3、其余的兄弟去掉背景颜色  含有隐式迭代 siblings() 方法返回被选元素的所有同级元素
                // $(this).siblings("button").css("background","");
                //清除其他的字体颜色 因为在button 事件内 siblings()里的"button" 可以省略
                // $(this).siblings().css("color","");

                //链式编程
                // 意思是 我的颜色为红色 我的兄弟的颜色为空
                // $(this).css("background","red").siblings().css("background","");
                $(this).css("color","red").siblings().css("color","");

                // 意思是 我的兄弟为红色 我本身不变色
                // $(this).siblings().css("background","red");

                // 意思是 我的兄弟的父亲为蓝色 我本身不变色
                // $(this).siblings().parent().css("background","blue")

            })
        })


        $(function() {
            //鼠标经过
            $("#left li").mouseover(function() {
                const index = $(this).index();
                // console.log(index); 输出索引号
                //让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show();
                //让其余的图片（就是其他的兄弟）隐藏起来
                // $("#content div").eq(index).siblings().hide();
                //链式编程
                $("#content div").eq(index).show().siblings().hide();
            })
        })


    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery下拉菜单练习</title>
    <script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-decoration:none;
        }
        a {
            margin: 0 10px;
            color: #333333;
        }

        .nav {
            display: flex;
            width: 400px;
            height: 50%;
            margin: 100px auto;
        }

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

        .nav ul {
            display: none;
            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>

</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() {
        //鼠标经过
        $(".nav>li").mouseover(function() {
            // $(this) jQuery 当前元素 this不要加引号
            // show() 是显示元素
            $(this).children('ul').show();
        })
        //鼠标离开
        $(".nav>li").mouseout(function() {
            // hide() 是隐藏元素
            $(this).children('ul').hide();
        })
    })

</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery-tab栏切换</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .tab {
            position: relative;
            width: 800px;
            margin: 40px auto;
        }

        li {
            list-style-type: none;
        }

        .tab_list {
            float: left;
            height: 39px;
            line-height: 39px;
            text-align: center;
            cursor: pointer;
            background: rgb(245, 240, 240);
            border: 1px solid rgb(160, 151, 151);
        }

        .tab_list li {
            display: inline-block;
            padding: 0 10px 0 10px ;
            text-align: center;
            border: 1px solid #333333;
        }

        .tab_list .current {
            background-color: red;
            color: #fff;
        }

        .tab .tab_con {
            position: absolute;
            top: 39px;
            display: block;
        }

        .item {
            display: none;
        }
    </style>
</head>
<body>

        <!--当鼠标点击上面相应的选项卡（tab) ，下面的内容跟着变化-->
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价 (50000)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block">商品介绍模块内容</div>
                <div class="item">规格与保证模块内容</div>
                <div class="item">售后保障模块内容</div>
                <div class="item">商品评价模块内容</div>
                <div class="item">手机社区模块内容</div>
            </div>
        </div>


        <script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
        <script>
            $(function() {
                //1.点击上部的li，当前li添加current类，其余兄弟移除类
                $(".tab_list li").click(function() {
                    //链式编程操作
                    $(this).addClass("current").siblings().removeClass("current");
                    //2.点击的同时，得到当前li的索引号
                    const index = $(this).index();
                    // console.log(index);
                    //3.让下部里面相应索引号的item显示，其余的item隐藏
                    $(".tab_con .item").eq(index).show().siblings().hide();
                });
            })
        </script>

</body>
</html>


上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1