乐趣区

关于jquery:JQuery1

作者：

jiezi

在

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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章