JQuery(1)

时间 2021-02-13

标签 javascript css html java jquery 编程数组浏览器 app dom 栏目 JQuery 繁體版

原文原文链接

JQuery的介绍

JQuery：即javascript库。对原生的js代码进行封装，咱们能够直接快速而高效的使用封装好的功能
常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，咱们主要学习的是 jQuery。javascript

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

JQuery的优势

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

2. 跨浏览器兼容，基本兼容了如今主流的浏览器java

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

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

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

6. 免费、开源。浏览器

体验JQuery

步骤app

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

JQuery入口函数

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

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

JQuery中的顶级对象

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

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

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

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的选择器便可，可是须要加引号

JQuery中的层级选择器

JQuery中的筛选选择器

筛选选择器顾名思义：就是在全部的选项中筛选符合条件的元素

<!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>

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>

链式操做

// 链式编程是为了节省代码量，看起来更优雅。
$(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>

淘宝精品

核心思路
思路分析:
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>

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>

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>

JQuery中的效果

显示与隐藏

<!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>

滑入滑出

<!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>

事件切换

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>

自定义动画

自定义动画很是强大，经过参数上的传递能够模拟不少动画，方法是animate();

<!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>

手风琴

鼠标通过某个小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>