关于jquery:JQuery1

60次阅读

共计 12081 个字符，预计需要花费 31 分钟才能阅读完成。

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>

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>

正文完
jquery
发表至： jquery
2020-09-11
 0
关于jquery:了解一下这款jQuery-UI组件库的分页功能看如何让web移动开发更简单
关于jquery:CAB402-Programming
HR绩效统计太慢不用那么复杂这样可轻松搞定
关于jquery:pc端实现一个简单的抽拉式的动态效果