JQuery(1)

头像
已注销
    阅读 21 分钟
    1

    JQuery的介绍

    JQuery：即javascript库。对原生的js代码进行封装，我们可以直接快速而高效的使用封装好的功能

    常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

    官网地址：https://jquery.com/，

    JQuery的优点

    1. 轻量级。核心文件才几十kb，不会影响页面加载速度。

    2. 跨浏览器兼容，基本兼容了现在主流的浏览器

    3. 链式编程、隐式迭代。

    4. 对事件、样式、动画支持，大大简化了DOM操作。

    5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。

    6. 免费、开源。

    体验JQuery

    步骤

    • 引入jQuery文件。
    • 在文档最末尾插入 script 标签，书写体验代码。

    JQuery入口函数

    // 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

    JQuery中的顶级对象

    $是jQuery的顶级对象，相当于原生JavaScript中的 window。

    $是 jQuery 的别称，在代码中可以使用 jQuery 代替

    <script>  
 //第一种方法  
 $(function() {  
       alert('hello JQuery')  
    })  
  
    //第二种方法  
 jQuery(function () {  
        alert('hello JQuery')  
    })  
</script>

    DOM对象与JQuery对象

    原生js获取的对象称为DOM对象

    用JQuery获取到的对象称为Jquery对象 Jquery对象的本质其实是$对DOM对象包装后产生的对象（以伪数组的方式存储）

    DOM对象只能使用javascript原生的方法，而JQuery对象只能使用Jquery中的方法

    <!DOCTYPE html>  
<html>  
    <head>  
         <meta charset="utf-8">  
        <title>DOM对象和JQuery对象</title>  
         <script src="./jquery-3.5.1.js"></script>  
    </head>  
<body>  
    <div>DOM对象</div>  
    <header>JQuery对象</header>  
</body>  
    <script>  
     //使用DON获取元素  
     var div = document.querySelector('div');  
     console.dir(div);  
  
     //使用jQuery获取元素  
     console.log($('header'))  
  
  
    </script>  
</html>

    image.png

    DOM对象和JQuery对象的相互转换

    DOM对象与JQuery对象是可以相互转换的。
    // 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

    JQuery的选择器

    JQuery的基本选择器

    $('选择器')里面的选择器直接写css的选择器即可，但是需要加引号

    image.png

    JQuery中的层级选择器

    image.png

    JQuery中的筛选选择器

    筛选选择器 顾名思义：就是在所有的选项中筛选符合条件的元素
    image.png
    <!DOCTYPE html>  
<html>  
<head>  
 <meta charset="utf-8">  
 <title>Jquery筛选选择器</title>  
 <script src="jquery-3.5.1.js"></script>  
</head>  
<body>  
<ul>  
 <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>  
</body>  
<script>  
  
 $(function () {  
      $('ul li:first').css('color', 'red');  
 $('ul li:last').css('color', 'yellow');  
 $('ul li:eq(1)').css('background', 'pink');  
 $('ol li:odd').css('background', 'yellow');  
 $('ol li:even').css('background', 'blue')  
   })  
</script>  
</html>

    image.png

    jQuery中如何设置样式

    $('元素').css('属性', '值')

    JQuery中的隐式迭代

    // 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作
    <!DOCTYPE html>  
<html>  
<head>  
 <meta charset="utf-8">  
 <title>隐式迭代</title>  
</head>  
<script src="jquery-3.5.1.js"></script>  
<body>  
<div>hello word</div>  
<div>hello word</div>  
<div>hello word</div>  
<div>hello word</div>  
  
<ul>  
 <li>hello word</li>  
 <li>hello word</li>  
 <li>hello word</li>  
 <li>hello word</li>  
</ul>  
</body>  
<script>  
 var div = document.querySelectorAll('div')  
   for (var i = 0; i < div.length; i++) {  
      div[i].style.backgroundColor = 'pink'  
 }  
   $('ul li').css('background', 'yellow')  
</script>  
</html>

    image.png

    链式操作

    // 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');

    JQuery中的排他思想

    // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
    <!DOCTYPE html>  
<html lang="en">  
  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
 <title>JQuery中的排它思想</title>  
 <script src="./jquery-3.5.1.js"></script>  
</head>  
  
<body>  
<button>按钮</button>  
<button>按钮</button>  
<button>按钮</button>  
<button>按钮</button>  
<button>按钮</button>  
<button>按钮</button>  
</body>  
<script>  

  
 // jquery中的排他思想  
  
 $(function () {  
   $('button').click(function () {  
   // $(this).siblings('button').css('background', '')  
 // $(this).css('background', 'red') // 链式编程  
 $(this).css('background', 'red').siblings('button').css('background', "")  
      })  
   })  
</script>  
</html>

    image

    淘宝精品

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

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>淘宝精品图</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                font-size: 14px;
            }

            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;
            }

            #title,
            #content {
                float: left;
            }

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

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

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

            #content {
                border-left: 1px solid pink;
                border-right: 1px solid pink;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <ul id="title">
                <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="./img/女靴.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/雪地靴.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/冬裙.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/呢大衣.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/毛衣.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/棉服.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/女裤.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/羽绒服.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/牛仔裤.jpg"></a>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                $("#title li").click(function() {
                    //获得当前li的索引号
                    var index = $(this).index();
                    //进行链式操作
                    console.log(index)
                    $('#content div').eq(index).show().siblings().hide()

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

</html>

    image

    tab栏切换

    思路分析: 1.点击上部的li，当前li 添加current类，其余兄弟移除类。
          2.点击的同时，得到当前li 的索引号
          3.让下部里面相应索引号的item显示，其余的item隐藏
    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tab栏切换</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                overflow: hidden;
                list-style: none;
            }

            .tab {
                width: 800px;
                margin: 200px auto;
            }

            .tab-list li {
                box-sizing: border-box;
                float: left;
                width: 200px;
                height: 30px;
                color: white;
                text-align: center;
                padding: 7px 0px;
                font: normal normal 14px '楷体';
                background-color: rgb(70, 99, 117)
            }

            .tab-con {
                width: 800px;
            }

            .tab-con div {
                width: 100%;
                height: 30PX;
                text-align: center;
                line-height: 30PX;
                background-color: PINK;
                margin-bottom: 1px;
            }

            .curent {
                background-color: skyblue !important;
            }

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

    <body>
        <div class="tab">
            <div class="tab-list">
                <ul>
                    <li class="curent">选项一</li>
                    <li>选项二</li>
                    <li>选项三</li>
                    <li>选项四</li>
                </ul>
            </div>
            <div class="tab-con">
                <div class="items" style="display: block;">选项一</div>
                <div class="items">选项二</div>
                <div class="items">选项三</div>
                <div class="items">选项四</div>

            </div>
        </div>

        <script>
            $('.tab-list li').click(function() {
                $(this).addClass('curent').siblings('li').removeClass('curent');
                // 获取索引
                var index = $(this).index();
                $('.tab-con div').eq(index).show().siblings().hide()
            })
        </script>
    </body>

</html>

    image

    JQury样式操作

    操作CSS方法

    // 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

    操作类样式方法

    // 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");
    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Jquery类操作</title>
    <script src="./jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: #0000FF;
        }

        .two {
            background-color: purple;
            transition: all 2s;
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
<div class="one"></div>
<script>

    $('.one').click(function () {
        $(this).toggleClass('two')
    })
    
    

</script>
</body>

</html>

    image

    JQuery中的效果

    显示与隐藏

    image.png

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery效果之显示与隐藏</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 145px;
                height: 400px;
                background-color: purple;
            }
        </style>
    </head>

    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>显示与隐藏</button>
        <div class="box"></div>
        <script>
            $(function() {
                $('button').eq(0).click(function() {
                    $('.box').show(1000, function() {
                        console.log('显示')
                    })
                })

                $('button').eq(1).click(function() {
                    $('.box').hide(1000, function() {
                        console.log('隐藏')
                    })
                })

                $('button').eq(2).click(function() {
                    $('.box').toggle(1000, function() {
                        console.log('显示与隐藏')
                    })
                })

            })
        </script>
    </body>

</html>

    image

    滑入滑出

    image.png

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery效果之滑动与滑落</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            p {
                display: flex;
            }

            button {
                flex: 3;
            }
        </style>
    </head>

    <body>
        <p> <button>上滑动</button>
            <button>下滑动</button>
            <button>切换滑动</button>
        </p>
        <div><img src="img/MI.png"></div>
        <script>
            $(function() {
                $('button').eq(0).click(function() {
                    $('div').slideUp(1000, function() {
                        console.log("向上滑动")
                    })
                })

                $('button').eq(1).click(function() {
                    $('div').slideDown(1000, function() {
                        console.log("向上滑动")
                    })
                })
                $('button').eq(2).click(function() {
                    $('div').slideToggle(1000, function() {
                        console.log("向上滑动")
                    })
                })
            })
        </script>
    </body>

</html>

    image

    事件切换

    JQuery为我们提供了一个新事件，相当于css中的hover
    hover([over,]out)     // 其中over和out为两个函数
    • over:鼠标移到元素上要触发的函数（相当于mouseenter）
    • out:鼠标移出元素要触发的函数（相当于mouseleave）
    • 如果只写一个函数，则鼠标经过和离开都会触发它
    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery效果之滑动与滑落</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            p {
                display: flex;
            }

            button {
                flex: 3;
            }
        </style>
    </head>

    <body>
        <p> <button>按钮</button>
            <button>按钮</button>

        </p>
        <div><img src="img/MI.png"></div>
        <script>
            //第一种方法
            /*$(function(){
                    
                $('button').hover(function(){
                    // 第一个回调函数相当于鼠标经过
                    $('div').slideUp(1000)
                },function(){
                    // 第二个回调函数相当于鼠标离开
                    $('div').slideDown(1000)
                })
            })*/

            // 第二种方法 利用hover事件切换与slideToggle完成效果

            $(function() {
                $('button').hover(function() {
                    $('div').stop().slideToggle()
                })


            })
        </script>
    </body>

</html>

    image

    自定义动画

    自定义动画非常强大，通过参数上的传递可以模拟很多动画，方法是animate();
    image.png
    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery中的animate动画</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                display: flex;
            }

            button {
                flex: 1;
            }

            .box {
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>

    <body>
        <button>点击移动</button>
        <div class="box"></div>
        <script>
            $(function() {
                $('button').click(function() {
                    $('.box').animate({
                        left: 200,
                        top: 100,


                    }, 1000)
                })
            })
        </script>
    </body>

</html>

    image

    手风琴

    鼠标经过某个小li 有两步操作
    1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
    2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JQuery手风琴效果</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            img {
                display: block;
            }

            ul {
                list-style: none;
            }

            .king {
                width: 720px;
                margin: 200px auto;
                background: url(./img/bg.png) no-repeat;
                overflow: hidden;
                padding: 10px;
            }

            .king li {
                position: relative;
                float: left;
                width: 69px;
                height: 69px;
                margin-right: 10px;
            }

            .king li.curent {
                width: 224px;
            }

            .king li.curent .small {
                display: none;
            }

            .king li.curent .big {
                display: block;
            }

            .king .big {
                width: 224px;
                display: none;
            }

            .king .small {
                position: absolute;
                top: 0;
                left: 0;
                width: 69px;
                height: 69px;
                background-color: blue;
                border-radius: 5px;
            }
        </style>
        <script src="./jquery-3.5.1.js"></script>
    </head>

    <body>
        <div class="king">
            <ul>
                <li class="curent">
                    <a href="#"><img src="./img/m.png" alt="" class="big"><img src="./img/m1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/t.png" alt="" class="big"><img src="./img/t1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/w.png" alt="" class="big"><img src="./img/w1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/z.png" alt="" class="big"><img src="./img/z1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/c.png" alt="" class="big"><img src="./img/c1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/h.png" alt="" class="big"><img src="./img/h1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/h.png" alt="" class="big"><img src="./img/h1.jpg" alt="" class="small"></a>
                </li>
            </ul>
        </div>
        <script>
            //入口函数
            $(function() {

                // 鼠标经过某个小li 有两步操作：
                $(".king li").mouseenter(function() {
                    // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                    $(this).stop().animate({
                        width: 224
                    }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()
                    // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                    $(this).siblings('li').stop().animate({
                        width: 69
                    }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut()
                })



            });
        </script>
    </body>

</html>

    image

    jquery
    已注销
    54 声望3 粉丝

    保持呼吸 坚持学习

    « 上一篇
    Web API(7)
    下一篇 »
    JQuery(2)

    引用和评论

    推荐阅读
    头像
    Vue

    已注销阅读 1.2k

    0 条评论
    得票最新