前端全栈学习第十六天-jq-第一天-优快云博客

本文通过具体实例介绍了jQuery的基本用法和技巧，包括商品展示效果、图片透明度切换、好友面板切换等，展示了如何利用jQuery简化JavaScript编程。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
1：介绍jq的前世今生
2：jq案例
1.1
学习jq要达到的目标
掌握jq编程思想，利用jq做网页特效
所谓的jq就是js语法写的一些函数类(现在也终于明白为什么说js高阶函数就是函数作为参数使用，函数作为返回值使用了！因为框架库就是对函数的高度封装！)，但是有些功能jq没有封装，这时候就需要用原生的js来实现，这也就是为什么原生js的重要性。由于框架库都是拿来用的，只有原生js是自己写的，所以原生js很重要！
1.2为什么要学习jq？
由于js一个简单的功能都需要大量代码来完成
Js兼容代码很多
Js代码的容错性很差
Js中，window.onload(() 也只能有一个
这个时候用jq就比较舒服了
1.2初识jq
Jq和DOM，BOM一样，也有他的顶级对象，$
只有将普通的DOM对象封装成jq对象，才可以用jq的方法。有时候jq解决不了的事，还需要转化成DOM对象来解决
我们来看一下jq的入口函数$(function(){})
解释：由于jq的顶级对象是$，谁想用jq的方法，就必须是$()的形式，将其转化为jq对象，里面的function(){} 是一个匿名函数，实际上和沙箱的原理有异曲同工之处，内部的变量不会泄露到外部，而且不会出现命名冲突的问题
不管是js还是jq，他的代码都是页面加载完毕执行
Window.onload ========>页面中所有的内容加载完毕执行
.ready(function(){})
$(function(){}) ------->这两个是DOM基本标签加载后就触发
1.3常见的几个方法
.html()  --设置标签中间显示其他标签及内容，类似于innerHTML
.text()--设置标签中间显示的文本内容，类似于innerText
.val()--设置input标签中的value值，类似于value
.css() --设置元素的样式，类似于style
注意：()中写字符串,一个参数,就是要设置的值,什么也不写,返
回的是这个属性的值
.css()写的是键值对
案例：
2.1淘宝精品展示
<!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: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #center, #right {
            float: left;
        }

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

        #left li a, #right 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, #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="../../jquery-1.12.2.js"></script>
    <script>
        //页面加载完毕之后要做的事
        $(function () {
//获取左侧的li，注册鼠标进入事件
            $("#left>li").mouseover(function () {
//获取当前li的索引
                var index = $(this).index();
                $("#center>li:eq(" + index + ")").siblings("li").hide(); //当前中间模块的li的兄弟元素(就是图片)隐藏
                $("#center>li:eq(" + index + ")").show();//显示当前li元素所对应的图片
            });
//获取左侧的li，注册鼠标进入事件
            $("#right>li").mouseover(function () {
                var index = $(this).index() + 9; //左边的dao8，右边的从9开始，所以索引+9
                $("#center>li:eq(" + index + ")").siblings("li").hide();//字符串的拼接，index是变量("+index+")
                $("#center>li:eq(" + index + ")").show();
            });
        })
    </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>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
    </ul>
    <ul id="right">
        <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>
</body>
</html>
2.2突出显示
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;

        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="../../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //获取所以的li，注册鼠标进入和鼠标离开事件
            $(".wrap>ul>li").mouseover(function () {
                $(this).siblings("li").css("opacity", 0.5);
                $(this).css("opacity", 1);
            });
            $(".wrap").mouseout(function () { //这里鼠标离开以后，是将所有的图片opacity都变为原来的样式，所以是wrap包裹的！
//find() 针对当前的元素找里面的其他元素
                $(this).find("li").css("opacity", 1);
            })
        })
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>
2.3好友面板切换
<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">

        #u1 li {
            margin-bottom: 10px;
            background-color: Orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }

        #u1 li ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

        }

        #u1 li ul li {
            background-color: pink;
        }
    </style>
    <script src="../../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#u1>li>ul>li").hide(); //先让所有的li里面的内容隐藏
            $("#u1>li").click(function () {
                //。find() 这个函数是找吹正在处理元素的后代元素
                $(this).siblings("li").children("ul").find("li").hide(200);
                //这里是点击当前的li，让他的兄弟li的孩子ul里面的所有的li隐藏
                $(this).children("ul").find("li").show(200);
                //当前的li 的孩子元素ul里面的所有li显示
            })
        });
    </script>
</head>
<body>

<div style=" width:200px; height:500px; border:1px solid red;">
    <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
        <li>
            幼儿园同学
            <ul>
                <li>鼻涕虫</li>
                <li>爱哭鬼</li>
                <li>张大胆</li>
            </ul>
        </li>
        <li>小学同学
            <ul>
                <li>张三丰</li>
                <li>张无忌</li>
                <li>乔布斯</li>
            </ul>
        </li>
        <li>
            初中同学
            <ul>
                <li>盖茨</li>
                <li>川普</li>
                <li>奥巴马</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
2.4手风情


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }


    </style>
    <script src="../../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#box>ul>li").mouseover(function () {
                $(this).siblings("li").css("width", "100px");
                $(this).css("width", "800px");
            })
            $("#box>ul>li").mouseout(function () {
                $("#box>ul>li").css("width", "240px") //这里就不是this，因为你是要所有的li都变回原来的样式，！
            })
        })
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
</div>
</body>
</html>
2.5添加和移除类样式
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #dv {
            width: 20px;
            height: 200px;
            background-color: pink;
        }

        .cls1 {
            background-color: green;;
        }

        .cls2 {
            border-top: 10px solid #000;
        }
    </style>
</head>
<body>
<input type="button" value="带我" id="bt"/>
<input type="button" value="带我" id="bt2"/>

<div id="dv"></div>

</body>
<script src="../../jquery-1.12.2.js"></script>
<script>

    $(function () {
        $("#bt").click(function () {
            //多个类样式，中间用空格隔开
            $("#dv").addClass("cls1 cls2")
        });
        $("#bt2").click(function () {
//            移除类样式，什么也不写，移除全部
            $("#dv").removeClass();
        });
    })

    /*
     * 判断当前元素是否应用类样式
     * 用返回值类接受
     * var result  = $("#dv").hasClass("cls")
     * console.log("result“)  ----->返回的是布尔类型
     *
     * */
</script>
</html>
2.6 tab切换
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>
    <script src="../../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(".tab>li").mouseover(function () {
                $(this).addClass("active").siblings("li").removeClass("active");
                var index = $(this).index();
                $(".products>div:eq(" + index + ")").addClass("selected").siblings("div").removeClass("selected");
            })

        })
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>

</body>
</html>