jQuery

已于 2023-04-20 14:17:54 修改
阅读量670 收藏 2
点赞数
分类专栏： 基础基础 JavaScript 文章标签： jquery javascript 前端
于 2022-08-23 12:33:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RD_Xiaobai/article/details/126482373
版权

typora-root-url: img

jquery

jquery概述

在原生JS中每次实现事件绑定都需要循环绑定，有时候也需要考虑兼容性问题。导致原生编写麻烦。

jQuery属于js(完全使用原生js进行封装)的第三方代码库(内置提供了很多方法)

所以使用jQuery就是使用内置封装的一些方法方便进行页面上的dom元素的操作

jQuery的在线文档地址：https://jquery.cuishifeng.cn/

jQuery官网：https://jquery.com/

jQuery版本

jQuery大的版本号区分1X,2X,3X

1X：目前停止更新，但是兼容IE低版本

2X：目前也是停止更新状态。不兼容IE低版本

3X：目前处于更新状态。不兼容IE低版本

jQuery的特点

1、链式编程

2、兼容问题的解决

3、简化页面元素的操作

jQuery使用的体验

//
<script src="jquery/jquery.js"></script>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        $('button').on('click',function(){
            console.log('123');
            console.log($(this).index())
        })
    </script>

jquery选择器

jQuery中的选择器是用于获取到页面上dom元素，但是返回的结果为jQuery对象不是dom对象

选择器的语法格式

$('css规则')
通过调用$函数最终可以得到对应的标签的对象

基本选择器

选择器名称语法说明
ID选择器$(‘#id值的名称’)根据指定的ID值找到元素
class选择器$(‘.class值的名称’)根据class的值找到元素
标签选择器$(‘标签名称’)根据标签名称找到元素
组合选择器$(‘规则1,规则2…’)根据将所有的规则找到的元素 合并为一个对象
<div id="div">div</div>
    <p>p标签</p>
    <p>p标签</p>
    <div class="div2">div</div>
    <button type="button">修改内容</button>
    <script>
        document.querySelector('button').onclick = function() {
            // ID选择器  text为jQuery中的内置方法 可以实现将内容进行修改
            // $('#div').text('测试');
            // class选择器
            // $('.div2').text('测试')
            // 标签选择器
            // $('p').text('测试')
            // 组合选择器
            $('#div,.div2').text('测试')
        }
    </script>

层次选择器

选择器名称语法说明
后代选择器$(‘父选择器 子选择器’)找到父选择器下的所有的子元素(子选择器)
子代选择器$(‘父选择器>子选择器’)根据父选择器找到子代(一层)的标签元素
兄弟选择器$(‘prev + next’)匹配所有紧接在 prev 元素后的 next 元素
兄弟选择器$(‘prev ~ siblings’)匹配 prev 元素之后的所有 siblings 元素
<div class="box">
        <div id="div">div</div>
        <p>我是儿子</p>
        <div>
            <p>我是孙子</p>
            <p>我是孙子</p>
        </div>
        <p>我是儿子2</p>
        
        <div class="div2">div</div>
    </div>
    <button type="button">修改内容</button>
    <script>
        document.querySelector('button').onclick = function() {
            // 后代选择器
            // $('.box p').text('成都市');
            // 子代选择器
            // $('.box>p').text('测试');
            // 兄弟选择器
            // $('#div+p').text('测试') //找下一个元素
            // $('#div~p').text('测试')//找所有的元素

        }

    </script>

jQuery选择器

筛选选择器（重点）

first$(‘选择器规则:first’)根据选择器规则找到的元素，筛选出第一个元素
last$(‘选择器规则:last’)根据选择器规则找到的元素，筛选出最后一个元素
even$(‘选择器规则:even’)偶数序号的元素
odd$(‘选择器规则:odd’)奇数序号
eq$(‘选择器规则:eq(序号)’)根据选择器规则找到的元素，筛选指定序号的元素元素
<ul>
    <li>元旦节</li>
    <li>春节</li>
    <li>清明节</li>
    <li>端午节</li>
</ul>
<script>
    // first筛选
    // $('li:first').text('元旦节 不放假');
    // eq   序号是从0开始的数字
    $('li:eq(1)').text('放假七天');
</script>

属性选择器

[attribute]$(‘[name]’)匹配标签上存在name属性的标签
[attribute=value]$(‘[type=“button”]’)根据标签匹配指定属性名称并且值为指定的标签
性别：<input type="radio" value="1" />靓仔<input type="radio" value="2" />靓妹
    爱好：<input type="checkbox" value="1" />打游戏<input type="checkbox" value="2" />打麻将
    <script>
        // console.log($('input[type]'))
        console.log($('input[type="radio"]'))
    </script>

子元素选择器

nth-child$(‘选择器规则:nth-child(index)’)找到父元素下的指定序号的子元素
<ul>
    <li>元旦节</li>
    <li>春节</li>
    <li>清明节</li>
    <li>端午节</li>
</ul>
<script>
    // 序号从1开始起步
    $('ul li:nth-child(3)').text('上坟 蹦迪');
</script>

表单选择器

<input type="text" />
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 隐藏域在页面上不可见 使用隐藏域可以额外的携带信息传递给服务端 -->
<input type="hidden" value="123" />
<input type="button" name="" id="">
<script>
    // console.log($(':input'))
    console.log($('input:hidden'));
</script>

jQuery对象dom对象的关系(重点)

dom对象

就是通过原生JS中document.getElementById,document.querySelector所得到的就是dom对象.一旦修改了dom

对象下的属性可能会导致页面上的元素相关内容发生变化

jQuery对象

使用jQuery选择器所得到的就是jQuery对象。由于jQuery属于原生js所编写的。所以jQuery对象中是包含着dom

对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUbzvfNY-1661229013735)(/1634176484915.png)]

结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MtPSxvq7-1661229013737)(/1634176537371.png)]

jQuery对象转换dom对象

<ul>
    <li>元旦节</li>
    <li>春节</li>
    <li>清明节</li>
    <li>端午节</li>
</ul>
<script>
    console.log($('li'));
    // jQuery对象转换为dom对象方式一 使用数组形式
    // $('li')[0] 就是一个dom对象，可以使用innerHTML属性
    $('li')[0].innerHTML = '使用dom对象就需要使用dom下的属性方法'
    // $('li')[0] 为dom对象 而text为jquery下的方法所以无法调用
    // $('li')[0].text('修改内容');
    // jQuery转换为dom对象方式二  使用get方法
    console.log($('li').get(0));

dom对象转换jQuery对象

<ul>
        <li>元旦节</li>
        <li>春节</li>
        <li>清明节</li>
        <li>端午节</li>
    </ul>
    <script>
        console.log($('li'));
        // jQuery对象转换为dom对象方式一 使用数组形式
        // $('li')[0] 就是一个dom对象，可以使用innerHTML属性
        $('li')[0].innerHTML = '使用dom对象就需要使用dom下的属性方法'
        // $('li')[0] 为dom对象 而text为jquery下的方法所以无法调用
        // $('li')[0].text('修改内容');
        // jQuery转换为dom对象方式二  使用get方法
        console.log($('li').get(0));

        // dom对象转换为进去jquery对象 $(dom对象)
        // $('li').get(0) 为dom对象
        console.log($($('li').get(0)));
        // jquery对象调用 dom下的属性  由于是设置属性不会错误，但是没有点击效果，如果使用jQuery对象调用dom对象下可以使用的方法，会导致语法错误
        $($('li').get(0)).onclick = function(){
            console.log(123)
        }
        
    </script>

jquery对象与dom对象的关系

1、jQuery对象中是包含着dom对象的

2、jQuery对象转换为dom对象的方式可以使用数组下标方式或者调用get方法

3、dom对象转换为jQuery对象 $(dom对象)

4、dom对象不能直接调用jQuery下的方法，jQuery对象不能直接调用dom对象下的方法

开关灯案例

<style>
    img {
        display: block;
        margin: 10px auto;
    }
</style>
<button>开灯</button>
<button>关灯</button>
<img src="images/coder.jpg" />
<script src="jquery.js"></script>
<script>
    let btns = $('button');
    // 开灯
    btns[0].onclick = function(){
        document.body.style.backgroundColor = 'white';
    }
    // 关灯
    btns.get(1).onclick = function(){
        document.body.style.backgroundColor = 'black';
    }
</script>

隔行换色案例

    <ul>
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
        <li>我是第4个li标签</li>
        <li>我是第5个li标签</li>
        <li>我是第6个li标签</li>
        <li>我是第7个li标签</li>
        <li>我是第8个li标签</li>
        <li>我是第9个li标签</li>
        <li>我是第10个li标签</li>
    </ul>

<script src="jquery.js"></script>
<script>
    let lis = $('li');
    for(let i = 0;i<lis.length;i++){
        if(i%2 == 0){
            lis[i].style.backgroundColor = 'skyblue';
        }else{
            lis[i].style.backgroundColor = '#333';
        }
    }
</script>

元素内容操作

操作元素的内容时直接调用方法表示获取。方法传递参数表示设置。当选择器匹配到多个标签时，如果设置操作，

全部设置，如果是读取操作，只读取第一个元素的内容(text除外)

html方法

<ul>
        <li><a href="">我是第1个li标签</a></li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
    </ul>
    <button type="button">html获取</button>
    <button type="button">html设置</button>
    <script>
        let btns = $('button');
        btns.get(0).onclick = function(){
            // 不传递参数表示获取内容  当匹配多个标签只取第一个标签的值 html方法可以获取到字标签的内容  html方法等价于innerHTML属性
            console.log($('li').html())
        }
        btns.get(1).onclick = function(){
            // 参数表示要设置的内容  html方法当修改内容时 可以使用标签
            $('li').html('<span>修改后的内容</span>');
        }
    </script>

text方法

    <ul>
        <li><a href="">我是第1个li标签</a></li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
    </ul>
    <button type="button">获取</button>
    <button type="button">设置</button>
    <script>
        let btns = $('button');
        btns.get(0).onclick = function(){
            // 不传递参数表示获取内容  当匹配多个标签提取出了所有标签的内容  并且忽略了字标签 text方法就类似textContent属性
            console.log($('li').text())
        }
        btns.get(1).onclick = function(){
            // 参数表示要设置的内容  text方法当修改内容时 将标签当做内容处理，没有正常解析
            $('li').text('<span>修改后的内容</span>');
        }
    </script>

val方法

<input type="text"  value="用户名"/>
<input type="text"  value="密码"/>
<button type="button">获取</button>
<button type="button">设置</button>
<script>
    let btns = $('button');
    btns.get(0).onclick = function(){
        // 获取数据，只取到第一个匹配的元素的内容
        console.log($('input').val())
    }
    btns.get(1).onclick = function(){
        // 参数表示要设置的内容  val方法当修改内容时 将匹配到的标签全部修改
        $('input').val('修改后的内容');
    }
</script>

样式操作

1、语法格式

//获取样式
jquery.css(样式名称)
//设置样式
jquery.css(样式名称,样式值)
或者
jquery.css({
    样式名称:值
   	...
})

2、使用示例

<div class="box">内容</div>
<div class="box" style="width:110px">内容</div>
<button type="button">获取</button>
<button type="button">设置</button>
<script>
    let btns = $('button');
    btns.get(0).onclick = ()=>{
        console.log($('.box').css('width'));
    }
    btns.get(1).onclick=()=>{
        // 修改当个样式
        $('.box').css('width','200px');
        // 批量设置样式
        $('.box').css({
            'border':'1px solid red',
            'fontSize':'18px'
        })
    }
</script>

筛选方法

筛选方法

筛选方法是针对已经匹配到了某些标签，继续调用方法进行查找

eq()$(‘选择器’).eq(index)在选择器的基础上再次筛选出指定序号的元素
find()$(‘选择器’).find(‘选择器’)在选择器的基础上再次以一定规则筛选出后代元素
next()$(‘选择器’).next()在选择器的基础上匹配相邻(兄弟)的下一个元素
nextAll()$(‘选择器’).nextAll()在选择器的基础上匹配相邻(兄弟)的后面的所有元素
prev()$(‘选择器’).prev()在选择器的基础上匹配相邻(兄弟)的前面一个元素
prevAll()$(‘选择器’).prevAll()在选择器的基础上匹配相邻(兄弟)的前面的所有元素
parent()$(‘选择器’).parent()寻找父级元素
siblings()$(‘选择器’).siblings()其他兄弟元素
 <ul>
        <li><a href="">我是第1个li标签</a></li>
        <li>我是第2个li标签</li>
        <li>
            <div>
                <a href="">第三个标签</a>
            </div>
        </li>
    </ul>
    <button type="button">设置</button>
    <script>
        $('button').get(0).onclick = function(){
            // find方法匹配所有满足条件的后代元素
            // $('ul').find('a').html('test');
            // next方法找到下一个兄弟元素
            // $('li').eq(0).next().html('test');
            // nextAll找到后面的所有兄弟元素
            // $('li').eq(0).nextAll().html('test');
            // 寻找父元素
            // console.log($('li:eq(0)').parent())
            // siblings查找当前的所有兄弟元素
            $('li').eq(1).siblings().html('tets');
        }
    </script>

突出展示案例

<div class="wrap">
    <ul>
        <li style="opacity: 1;"><a href="#"><img src="images/01.jpg"></a></li>
        <li style="opacity: 1;"><a href="#"><img src="images/02.jpg"></a></li>
        <li style="opacity: 1;"><a href="#"><img src="images/03.jpg"></a></li>
        <li style="opacity: 1;"><a href="#"><img src="images/04.jpg"></a></li>
        <li style="opacity: 1;"><a href="#"><img src="images/05.jpg"></a></li>
        <li style="opacity: 1;"><a href="#"><img src="images/06.jpg"></a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        // 当鼠标划入到图片时 将当前图片的透明度设置为1 其他的设置为0.5
        // 鼠标划出时 所有图片的透明度设置为1
        let lis = $('li');
        for(let i = 0;i<lis.length;i++){
            lis.get(i).onmouseenter = function(){
                // 将其他的设置为0.5 当前的设置为1
                // 在事件处理程序中this 还是表示当前dom对象
                // $(this).css('opacity',1);
                // 以前需要将lis再次进行循环 逐个进行设置。直接使用siblings就可以找到当前的所有的兄弟元素
                // $(this).siblings().css('opacity',0.5);
                $(this).css('opacity',1).siblings().css('opacity',0.5);
            }
            lis.get(i).onmouseleave = function(){
                lis.css('opacity',1);
            }
        }
    </script>

index方法

<ul>
    <li>111111111111111</li>
    <li class="on">22222222222222</li>
    <li>33333333333333</li>
</ul>
<button type="button" >获取序号</button>
<script>
    $('button')[0].onclick = function(){
        // 1、如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 
        // console.log($('.on').index())
        // 2、如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。参数为查找的元素，调用index的方法为集合
        // console.log($('li').index($('.on')));
        // 3、如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。
        console.log($('.on').index('li'));
    }
</script>

jQuery事件机制

页面载入事件

1、原生页面载入事件的问题

<script>
    // 页面载入事件是需要等待页面上资源加载完毕后才开始执行
    window.onload = function(){
        console.log('第一个载入事件');
    }

    window.onload = function(){
        console.log('第二个载入事件');
    }
</script>

当多次使用原生的页面载入事件时只有最后一次才会生效

2、jQuery中页面载入事件

 // jQuery中页面载入事件
$(function(){
    console.log('jQuery的页面载入事件')
})

$(document).ready(function(){
    console.log('jquery中的页面载入事件2')
})
$().ready(function(){
    console.log('jquery中的页面载入事件3')
})

jQuery中页面载入事件，可以与原生一起混合使用。并且jQuery页面载入事件可以支持多个，会顺序的执行

3、jQuery与原生载入事件的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
        // jQuery的页面载入事件 优先与原生js执行，jQuery中载入事件，不需要等待所有的资源全部加载完毕后才执行
        $(function(){
            console.log('jquery');
            console.log($('img').width(),'jquery')
        })
        window.onload = function(){
            console.log('js');
            console.log($('img').width(),'js')
        }
    </script>
</head>
<body>
    <img src="https://img2.baidu.com/it/u=384858136,1221925821&fm=26&fmt=auto">
    
</body>
</html>

jquery中事件发展历程

1、简单绑定

2、bind方法绑定事件

3、delegate方法绑定事件

4、on方法(推荐用法)

简单绑定事件

1、语法格式

jquery.事件名称(事件处理程序)
jquety表示jQuery选择器所得到的对象，这个对象包含多少个元素，每个元素就会绑定对应的事件

2、使用简单绑定

<button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮3</button>
    <script>
        // $('button') 匹配到了多个按钮，jQuery内部会将每一个button按钮进行循环绑定事件
        $('button').click(function(){
            console.log($(this).html());
        })
    </script>

bind方法

1、语法格式

jquery.bind(事件名称,数据,处理程序)

2、使用bind绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮3</button>
    <script>
        $('button').bind('click',function(){
            console.log($(this).html());
        });
    </script>
</body>
</html>

3、bind绑定未来元素

<input type="button" value="添加" id="add" />
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮3</button>
    <script>
        $('button').bind('click',function(){
            console.log($(this).html());
        });
        $('#add').bind('click',function(){
            let btnDom = document.createElement('button');
            btnDom.innerHTML = '后期追加按钮';
            document.body.appendChild(btnDom);
        })
    </script>

bind方法不支持未来元素绑定事件

delegate方法

<input type="button" value="添加" id="add" />
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮3</button>
    <script>
        // 为button按钮绑定点击事件  选择器需要匹配父元素，第一个参数需要指定选择器找到要触发事件的元素
        $('body').delegate('button','click',function(){
            console.log($(this).html())
        });
        $('#add').bind('click',function(){
            let btnDom = document.createElement('button');
            btnDom.innerHTML = '后期追加按钮';
            document.body.appendChild(btnDom);
        })
    </script>

on方法

1、语法格式

jquery.on(events,[selector],[data],fn)
普通绑定事件 jQuery对象匹配要绑定事件的元素，忽略selector参数
支持未来元素 jQuery对象匹配要绑定事件的父元素，传递selector参数

2、使用on方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
</head>
<body>
    <input type="button" value="添加" id="add" />
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮3</button>
    <script>
        // 为button按钮绑定点击事件
        $('body').on('click','button',function(){
            console.log($(this).html())
        });
        $('#add').on('click',function(){
            let btnDom = document.createElement('button');
            btnDom.innerHTML = '后期追加按钮';
            document.body.appendChild(btnDom);
        })
        
    </script>
</body>
</html>

突出展示案例使用on方法

<div class="wrap">
<ul>
    <li style="opacity: 1;"><a href="#"><img src="images/01.jpg"></a></li>
    <li style="opacity: 1;"><a href="#"><img src="images/02.jpg"></a></li>
    <li style="opacity: 1;"><a href="#"><img src="images/03.jpg"></a></li>
    <li style="opacity: 1;"><a href="#"><img src="images/04.jpg"></a></li>
    <li style="opacity: 1;"><a href="#"><img src="images/05.jpg"></a></li>
    <li style="opacity: 1;"><a href="#"><img src="images/06.jpg"></a></li>
</ul>
<script src="jquery.js"></script>
<script>
    // 当鼠标划入到图片时 将当前图片的透明度设置为1 其他的设置为0.5
    // 鼠标划出时 所有图片的透明度设置为1
    $('li').on('mouseenter',function(){
        $(this).css('opacity',1).siblings().css('opacity',0.5);
    }).on('mouseleave',function(){
        $('li').css('opacity',1);
    })
</script>

jQuery事件机制

一次绑定

当事件触发之后执行了事件处理程序，后期不会再次触发事件

1、语法格式

jquery.one(事件名称,事件处理程序)

2、使用one方法

<input type="button" value="一次事件">
<script>
    $('input').one('click',function(){
        console.log('只执行一次')
    })
</script>

事件解绑

1、语法格式

jquery.off(events,[selector],[fn])

2、使用off方法

    <div class="main">
        <b>JavaScript吉祥物？</b>
    </div>
    <input type="button" value="解除绑定" />
    <script>
        function fn(){
            console.log('js');
        }
        $('b').on('click',fn);

        $('b').on('click',function(){
            console.log(1);
        });

        $('b').mouseenter(function(){
            console.log('鼠标划入')
        })
        $('.main').on('click','b',function(){
            console.log('事件委托方式注册事件')
        })
        // 点击解除绑定按钮后移除b标签上的事件
        $('input').click(function(){
            // 不传递参数 移除所有
            // $('b').off();
            // 传递参数移除指定的事件
            // $('b').off('click');
            // 传递2个参数指定移除哪一个事件的那个事件处理程序
            // $('b').off('click',fn);
            // 如果是使用委托的方式绑定事件，解除时需要在父元素上进行解除
            $('.main').off('click','b');
        })

    </script>

事件触发

事件触发，就是使用代码触发事件的执行

<button type="button">触发事件执行</button>
    <input type="button" value="存在cilik事件" />
    <script>
        $('input').on('cilik',function(){
            console.log('不存在的事件绑定');
        })
        $('button').click(function(){
            $('input').trigger('cilik')
        })
    </script>

class操作

基本使用

方法名称示例作用
addClassjquery.addClass(‘名称’)添加一个样式
removeClassjquery.removeClass(样式名称)删除一个样式
hasClassjquery.hasClass(样式名称)判断样式是否存在
toggleClassjquery.toggleClass(样式名称)如果样式不存在就添加否则就移除
<style>
        .width{width: 200px;}
        .height{height: 200px;}
        .font{ color: green;}
    </style>
    <div class="width">
        塞拉斯
    </div>
    <button>添加样式</button>
    <button>移除样式</button>
    <button>交替</button>
    <script>
        let btns = $('button');
        btns[0].onclick = function(){
            $('div').addClass('height');
        }
        btns[1].onclick = function(){
            $('div').removeClass('height');
        }
        btns[2].onclick = function(){
            $('div').toggleClass('font');
        }

    </script>

tab选项卡案例

<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="images/guojidapai.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/qingjieyongpin.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/nanshijingpin.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $('.tab>li').on('click',function(){
            // 当前点击的添加active 其他的移除active样式
            $(this).addClass('active').siblings().removeClass('active');
            // 根据当前点击的li标签获取到序号后，将对应序号的main显示 其他的隐藏
            $('.main').eq($(this).index()).addClass('selected').siblings().removeClass('selected')
        })
    </script>

jQuery动画

显示与隐藏

方法示例作用
show方法show([speed,[easing],[fn]])显示元素 speed表示速度 可以使用毫秒 easing设置匀速还是变速 fn表示运动完成之后回调函数
hide方法hide([speed,[easing],[fn]])隐藏
toggle方法toggle([speed,[easing],[fn]])交替的显示或者隐藏
<style>
        div{height: 200px; width: 200px; background-color: skyblue;}
    </style>
    <div></div>
    <button>显示</button>
    <button>隐藏</button>
    <button>交替</button>
    <script src="jquery.js"></script>
    <script>
        $('button').get(0).onclick = function(){
            $('div').show(3000,function(){
                console.log('显示动画完毕');
            })
        }
        $('button').get(1).onclick = function(){
            $('div').hide(3000,function(){
                console.log('隐藏动画完毕');
            })
        }
        $('button').get(2).onclick = function(){
            $('div').toggle(3000,function(){
                console.log('交替动画完毕');
            })
        }
    </script>

滑入与滑出

基本使用

方法示例作用
slideUp方法slideUp([speed,[easing],[fn]])向上隐藏
slideDown方法slideDown([speed,[easing],[fn]])向下显示
slideToggle方法slideToggle([speed,[easing],[fn]])交替的显示或者隐藏
<style>
        div{height: 200px; width: 200px; background-color: skyblue;}
    </style>
    <div></div>
    <button>隐藏</button>
    <button>显示</button>
    <button>交替</button>
    <script src="jquery.js"></script>
    <script>
        $('button').get(0).onclick = function(){
            $('div').slideUp(3000,function(){
                console.log('over');
            })
        }
        $('button').get(1).onclick = function(){
            $('div').slideDown(3000,function(){
                console.log('over');
            })
        }
        $('button').get(2).onclick = function(){
            $('div').slideToggle(3000,function(){
                console.log('over');
            })
        }
    </script>

下拉菜单案例

<div class="wrap">
        <ul>
            <li>
                <a href="javascript:void(0);">一级菜单1</a>
                <ul>
                    <li><a href="javascript:void(0);">二级菜单1</a></li>
                    <li><a href="javascript:void(0);">二级菜单2</a></li>
                    <li><a href="javascript:void(0);">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单1</a>
                <ul>
                    <li><a href="javascript:void(0);">二级菜单1</a></li>
                    <li><a href="javascript:void(0);">二级菜单2</a></li>
                    <li><a href="javascript:void(0);">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单1</a>
                <ul>
                    <li><a href="javascript:void(0);">二级菜单1</a></li>
                    <li><a href="javascript:void(0);">二级菜单2</a></li>
                    <li><a href="javascript:void(0);">二级菜单3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        // 为一级才绑定鼠标划入事件
        $('.wrap>ul>li>a').on('mouseenter',function(){
            $(this).next().slideDown(1000);
        }).on('mouseleave',function(){
            $(this).next().slideUp(1000);
        })
    </script>

淡入与淡出

基本使用

方法示例作用
fadeInjquery.fadeIn(speed,callback)修改透明度慢慢的显示
fadeOutjquery.fadeOut(speed,callback)修改透明度慢慢的隐藏
fadeTojquery.fadeTo(speed,opacity,callback)修改透明度到指定的值opacity 为透明度的值是小数
<style>
        div{height: 200px; width: 200px; background-color: skyblue;}
    </style>
    <div></div>
    <button>显示</button>
    <button>隐藏</button>
    <button>透明度</button>
    <script src="jquery.js"></script>
    <script>
         $('button').get(0).onclick = function(){
            $('div').fadeIn(3000,function(){
                console.log('over');
            })
        }
        $('button').get(1).onclick = function(){
            $('div').fadeOut(3000,function(){
                console.log('over');
            })
        }
        $('button').get(2).onclick = function(){
            $('div').fadeTo(3000,0.5,function(){
                console.log('over');
            })
        }
    </script>

呼吸轮播图案例

<div class="slider">
    <!--图片容器  8图 -->
    <ul>
        <li><a href="#"><img src="images/jd/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/jd/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/jd/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/jd/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/jd/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/jd/6.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/jd/7.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/jd/8.jpg" alt=""></a></li>
    </ul>
    <!--箭头-->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
    <script src="jquery.js"></script>
    <script>
        // index记录当前显示的图片的序号
        let index = 0;
        $('.arrow-right').on('click',function(){
            index++;
            if(index == 8){
                index = 0;
            }
            $('li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
        })
        $('.arrow-left').on('click',function(){
            index--;
            if(index == -1){
                index = 7;
            }
            $('li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
        })
    </script>

自定义动画

基本使用

1、语法

jquery.animate(params,[speed],[easing],[fn])
params:格式要求为对象，对象中指定需要运动的信息(样式名称)  设置的对象的属性必须是数字
speed：表示速度 可以使用毫秒
easing：默认jQuery提供"linear" 和 "swing".
fn：表示动画运行完毕之后的回调函数

2、使用自定义动画

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        left:0;
        top:100px
    }
</style>
<button>开始运动</button>
<div></div>
<script>
    $('button').on('click',function(){
        $('div').animate({
            // 设置改变的信息
            left:200
        },3000,'linear',function(){
            console.log('第一次执行结束')
            $('div').animate({
                top:200,
            },3000,'swing',function(){
                alert('over');
            })
        }) 
    })
</script>

360开机案例

<div class="box" id="box">
    <span id="closeButton"></span>
    <div class="hd" id="headPart">
        <img src="images/t.jpg" alt="">
    </div>
    <div class="bd" id="bottomPart">
        <img src="images/b.jpg" alt="">
    </div>
</div>
<script src="jquery.js"></script>
<script>
    $('#closeButton').on('click',function(){
        $('#bottomPart').animate({height:0},2000,function(){
            $('#box').animate({width:0},2000);
        })
    })
</script>

each方法使用

<ul>
        <li>什么也没有</li>
        <li>什么也没有</li>
        <li>什么也没有</li>
        <li>什么也没有</li>
        <li>什么也没有</li>
        <li>什么也没有</li>
        <li>什么也没有</li>
        <li>什么也没有</li>
        <li>什么也没有</li>
        <li>什么也没有</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        // each方法将选择器匹配到的元素 每一个进行循环
        // 匿名函数中参数与forEach 相反
        $('li').each(function(index,item){
            // index表示下标
            // item 表示循环的元素的dom对象
            $(item).css('opacity',(index+1)/10)
        })
    </script>

手风琴案例

<div id="box">
    <ul>
        <li><img src="images/collapse/1.jpg"></li>
        <li><img src="images/collapse/2.jpg"></li>
        <li><img src="images/collapse/3.jpg"></li>
        <li><img src="images/collapse/4.jpg"></li>
        <li><img src="images/collapse/5.jpg"></li>
    </ul>
</div>
<script src="jquery.js"></script>
<script>
    $('li').on('mouseenter',function(){
        // 动画将当前划入的宽度设置为800  其他的兄弟宽度动画的设置为100
        $(this).animate({width:800},1000).siblings().animate({width:100},1000);
    }).on('mouseleave',function(){
        // 滑出时将所有的全部还原宽度
        $('li').animate({width:240},1000);
    })
</script>

动画队列

由于动画的运动需要时间，如果多次针对同一个元素设置动画，为了保证动画执行问题，jQuery针对动画设计了

排队机制。当执行动画时，会按照动画的顺序逐个执行

停止动画

1、语法

jquery.stop([clearQueue],[jumpToEnd])
clearQueue:表示是否清除动画对象
jumpToEnd:是否跳转到动画的结束位置

2、基本使用

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
    <button>开始</button>
    <button>停止</button>
    <div></div>
    
    <script src="jquery.js"></script>
    <script>
        $('button:eq(0)').on('click',function(){
            $('div').slideUp(3000);
            $('div').slideDown(3000);
        })

        $('button:eq(1)').on('click',function(){
            // jquery.stop([clearQueue],[jumpToEnd])
            // 清除动画队列 后面还有多少动画 不会执行了， 运行到当前动画的结束
            // $('div').stop(true,true);
            // 清除动画队列 不跳转到当前动画的结束位置
            // $('div').stop(true,false);
            // 不清除动画队列 运行到当前动画的结束
            // $('div').stop(false,true);
            // 不清除动画队列 也不跳转到当前动画的结束
            $('div').stop(false,false);
        })
    </script>

解决案例中问题

1、下拉菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gEWekm5N-1661229013738)(/…/…/…/…/…/…/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/text/md%E7%9F%A5%E8%AF%86%E7%82%B9/tow_stage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/day31%E8%B5%84%E6%96%99/img/1634282897421.png)]

2、手风琴案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lsva2wJw-1661229013739)(/…/…/…/…/…/…/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/text/md%E7%9F%A5%E8%AF%86%E7%82%B9/tow_stage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/day31%E8%B5%84%E6%96%99/img/1634283079692.png)]

jQuery文档操作

创建节点

<div class="main">

</div>
<button>创建节点</button>
<script>
    $('button').on('click',()=>{
        // 直接将标签的内容使用$包裹得到jQuery对象
        // let $a = $('<a href="http://baidu.com">百度一下</a>');
        // let $a = $('<a>');
        // $a.text('百度一下'); 
        // let $a = $('<a>',{href:"baidu.com"}) ;
        //     $a.text('百度一下');     
        $('.main').append($a);
    })
</script>

添加节点

1、添加元素的位置问题

外部的面面
<div>
    内部的前面
    内容
    内部的后面
</div>
外部的后面

2、常用方法

方法名称示例作用
appendjquery.append()在匹配到的标签的内部的后面添加元素
prependjquery.prepend()在匹配的标签的内部的前面添加元素
beforejquery.before()在匹配的标签的外部的前面添加元素
afterjquery.after()在匹配的标签的外部的后面添加元素
appendTojqueryObj.appendTo(content)将jqueryObj内容加入到content后面

3、使用示例

<p>p标签</p>
    <div>
        <span>span标签</span>
    </div>
    
    <button>prepend</button>
    <button>after</button>
    <button>before</button>
    <button>appendTo</button>
    <script>
        $('button:eq(0)').click(function(){
            // 将新的内容加入到div标签中
            // $('div').prepend('<b>追加的内容</b>');
            // 添加的是页面上存在的元素会剪切 其他的方法一样
            $('div').prepend($('p'));
        })
        $('button:eq(1)').click(function(){
            $('div').after('<b>追加的内容</b>');

        })
        $('button:eq(2)').click(function(){
            $('div').before('<b>追加的内容</b>');

        })
        $('button:eq(3)').click(function(){
            // 将匹配到的div标签 加入到p标签中
            $('div').appendTo($('p'));

        })

    </script>

节点添加案例

显示表格

<table>
        <input type="text" >
        <input type="text" >
        <input type="text">
        <button type="button" class="add">添加</button>
        <thead>
            <th>id</th>
            <th>姓名</th>
            <th>墓志铭</th>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        let data = [
            {id:1,name:'司马迁',text:'轻于鸿毛 重于泰山'},
            {id:2,name:'司马光',text:'司马光砸缸'},
            {id:3,name:'李白',text:'千里江陵一日还'},
        ];
        // 添加内容
        $('.add').on('click',()=>{
            let newData ={
                id:$('input').eq(0).val(),
                name:$('input').eq(1).val(),
                text:$('input').eq(2).val(),
            }
            data.push(newData);
            show();
        })

        show();
        function show(){
            $('tbody').html('');
            data.forEach((item)=>{
                let html = `<tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.text}</td>
                    </tr>`;
                let $tr = $(html);
                $('tbody').append($tr);
            })
        }
    </script>

穿梭框

<h1>城市选择：</h1>
    <select id="src-city" name="src-city" multiple="">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
        <option value="5">西红柿</option>
    </select>
    <div class="btn-box">
        <!--实体字符-->
        <button id="btn-sel-all"> &gt;&gt; </button>
        <button id="btn-sel-none"> &lt;&lt; </button>
        <button id="btn-sel"> &gt;</button>
        <button id="btn-back"> &lt; </button>
    </div>
    <select id="tar-city" name="tar-city" multiple="">
    </select>
    
    <script src="jquery.js"></script>
    <script>
        // 全部内容右移
        $('#btn-sel-all').click(()=>{
            $('#tar-city').append($('#src-city>option'));
        })
        // 全部内容左移
        $('#btn-sel-none').click(()=>{
            $('#src-city').append($('#tar-city>option'));
        });
        // 左侧选中的右移
        $('#btn-sel').click(()=>{
            $('#tar-city').append($('#src-city>option:selected'))
        });
        // 右侧选中左移
        $('#btn-back').click(()=>{
            $('#tar-city>option:selected').appendTo($('#src-city'));
        })
    </script>

节点清除

1、可以删除的方法

html('') 清除内容 但是节点存在
empty() 清除内容 但是节点存在
remove() 节点与内容全部删除

2、使用remove

<div>
        <span>div内容</span>
    </div>
    <input type="button" value="删除">
    <script>
        $('input').click(()=>{
            //$('span').html(''); 
            // $('span').empty();
            $('span').remove();
        })
    </script>

节点克隆

1、语法格式

jquery.clone(true)
传递参数true表示克隆的同时复制事件

2、使用复制功能

<div>
        <span>div内容</span>
    </div>
    <input type="button" value="克隆">
    <script>
        $('span').click(()=>{
            console.log('click')
        })
        $('input').click(()=>{
            let newSpan = $('span').clone(true);
            $('div').append(newSpan);
        })
    </script>

属性操作

attr方法

1、语法格式

//添加属性
jquery.attr(属性名称,属性值)
//获取属性
jquery.attr(属性名称)
//删除属性
jquery.removeAttr(属性名称);

2、基本使用

<input type="text" name="user" value="猫" class="textClass" data-index="1" />

<button>获取</button>
<button>设置</button>
<button>删除</button>
<script>
    $('button').eq(0).on('click',function(){
        console.log($('input').attr('class'));
        console.log($('input').attr('data-index'));
        // 自定义属性都是以data-开头的属性
        console.log($('input').data('index'))
    })
    $('button').eq(1).on('click',function(){
        $('input').attr('class','c2')
    })
    $('button').eq(2).on('click',function(){
        $('input').removeAttr('class')
    })
</script>

3、案例

<h2>
            美女画廊
        </h2>
    
        <ul id="imagegallery">
            <li>
                <a href="images/meinv/1.jpg" title="美女A">
                    <img src="images/meinv/1-small.jpg" width="100" alt="美女1">
                </a>
            </li>
            <li>
                <a href="images/meinv/2.jpg" title="美女B">
                    <img src="images/meinv/2-small.jpg" width="100" alt="美女2">
                </a>
            </li>
            <li>
                <a href="images/meinv/3.jpg" title="美女C">
                    <img src="images/meinv/3-small.jpg" width="100" alt="美女3">
                </a>
            </li>
            <li>
                <a href="images/meinv/4.jpg" title="美女D">
                    <img src="images/meinv/4-small.jpg" width="100" alt="美女4">
                </a>
            </li>
        </ul>
        <div style="clear:both"></div>
        <img id="image" src="images/meinv/placeholder.png" alt="" width="450px">
        <p id="des">选择一个图片</p>
    
        <script src="js/jquery.js"></script>   

        <script>
            $('#imagegallery img').on('click',function(e){
                console.log(e)
                // 获取到图片地址跟title
                let src = $(this).attr('src')
                let title = $(this).attr('alt')
                console.log(title);
                $('#image').attr('src',src);
                $('#des').html(title);
                // 组装默认行为
                return false;
            })
        </script>

prop方法

prop方法的使用形式与attr一模一样。唯一就是prop方法主要是针对标签的内置属性使用，特别是一些布尔值的

属性。attr方法可以用于使用在自定义属性中

<input type="checkbox" id="test" />
<button>获取</button>
<script>
    $('button').click(function(){
        console.log($('#test').prop('checked'));
    })

</script>

尺寸操作

宽高方法

1、使用的方法

//设置或者获取宽度、高度
jquery.width/height()
//获取宽度/高度 内容+padding
jquery.innerWidth/innerHeight()
//获取宽度/盖度 内容+padding+border
jquery.outerHeight/outerWidth()

2、使用示例

<img src="images/990.jpg" />
<script src="js/jquery.js"></script>
<script>
    console.log($('img').width())
</script>

offset与position方法

原生JS中offsetTop与offsetLeft表示相对于父级定位元素的位置。position方法与原生的offsetTop与offsetLeft相

对于。offset表示相对于docuemt 定位位置。两个方法都返回对象，对象包括top与left属性，并且只能读不能修改

scrollTop 与scrollLeft方法

//获取或者设置垂直滚动距离
jquery.scrollTop()
//获取或者设置水平滚动距离
jquery.scrollLeft()

jQuery中的ajax

get方法

1、语法格式

//get表示发送get方式的请求
//第一个参数表示ajax请求的地址
//第二个参数表示请求过程中携带的参数,格式可以是对象也可以是字符串
//第三个参数表示请求回调函数
//第四个参数表示返回数据的格式
$.get(请求地址，请求参数,回调函数,返回数据格式)

/*
	在jQuery中使用存在两种方式
	1、通过选择器调用jQuery下的方法
	2、$直接调用
*/

2、服务端代码

<?php 

    $name = $_GET['name'];

    echo  json_encode(['name'=>$name]);

?>

3、前端代码

<script src="js/jquery.js"></script>
    <script>
        $.get('server/get.php',{name:'123'},function(res){
            console.log(res);
        },'json')
    </script>

post方法

1、语法格式

//格式与get方法一模一样
$.post(请求地址,请求参数,回调函数,返回数据类型)

2、创建服务端代码

<?php 

    $name = $_POST['name'];

    echo  json_encode(['name'=>$name]);

?>

3、使用post方法

<script>
        $.post('server/post.php',{name:'abcd'},function(res){
            console.log(res);
        },'json');
    </script>

ajax方法

1、语法格式

$.ajax({
    url：请求地址
    type:请求类型 get/post..
    data:请求携带的参数 支持字符串与对象
    success:成功的回调。自动会传递一个参数表示服务端返回的结果
    dataType:服务端返回的数据类型
})

2、发送post请求

<script src="js/jquery.js"></script>
<script>
    $.ajax({
        url:'server/post.php',
        type:'post',
        dataType:'json',
        data:'name=leo',
        success: function(backData){
            console.log(backData);
        },
        // 失败的回调
        error:function(XMLHttpRequest, textStatus, errorThrown){
            console.log(XMLHttpRequest,textStatus)
        },
        // 请求超时 
        timeout:1
    });
</script>

jQuery中的jsonp

1、语法

$.ajax({
    url:'server/jsonp.php',
    type:'get',
    success:function(res){},
    dataType:'jsonp'
})

2、创建服务端

<?php 

    $callback = $_GET['callback'];
    echo "$callback({'name':'abc'})";
?>

3、客户端代码

<script src="js/jquery.js"></script>
    <script>
        $.ajax({
            url:'server/jsonp.php',
            type:'get',
            success:function(res){
                console.log(res);
            },
            // 表示发起请求时使用的参数名称是什么，默认是callback
            jsonp:'callback',
            // 指定处理数据的函数名称 默认还是成功回调
            jsonpCallback:'fn',
            // 指定返回数据格式为jsonp
            dataType:'jsonp'
        })
    </script>

ajax中的钩子方法

钩子函数**，就是当某种情况触发会后自动执行的函数** 本质是在源码中已经存在该函数，但是没有具体的含义。如

果一旦函数有意义就调用起来。在ajax中钩子函数设置后。针对每一个请求，一旦条件满足就会执行

<script>
    $(document).ajaxStart(function(){
        console.log('bofre 请求发送之前执行的代码');
    })
    $(document).ajaxSuccess(function(){
        console.log('请求完成并且成功收到数据后的代码');
    })
    $.get('server/get.php',function(res){
        console.log(res,'已经收到了服务端的结果')
    })
</script>

多库共存

同时导入多个不同的jQuery版本的源码后导致出现的问题。关键问题就在于$符号与jQuery变量的冲突。jQuery中

可以使用noConflict方法将$符号的控制权释放

1、只转移$符号的控制权

 <!-- 先载入3.4.1版本的jQuery -->
    <script src="js/jquery.js"></script>
    <!-- 再载入1.12版本的jQuery -->
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // $是哪一个版本所提供的$  $为1.12.4所提供的功能。
        // 查看$的版本是哪一个  
        // console.log(jQuery.fn.jquery);
        // 表示交出$符号的控制权  表示当前所使用的这个版本的jQuery不在占用$符号了 只交出了$符号的控制权 jQuery变量控制权还保留
        $.noConflict(); 
        // 此时的$符号表示3.4.1版本 jQuery表示1.12.4
        console.log($.fn.jquery);
    </script>

2、交出$与jQuery的控制权

// 将$与jQuery变量的控制权交出  $_12变量为交出之前的$符号对应的变量
let $_12 = $.noConflict(true);
console.log(jQuery.fn.jquery,$.fn.jquery);
console.log($_12.fn.jquery);

jQuery扩展

jQuery扩展就是给jQuery追加新的方法控制某些功能

1、语法格式

1、需要使用的jQuery对象调用
jQuery.fn.extend(object)  参数为一个对象指定，每一个元素为额加追击的函数
2、直接使用$符号调用
jQuery.extend(object) 参数为一个对象指定，每一个元素为额外追加的函数

2、需要jQuery对象调用的扩展

<div class="box"></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
    // 添加扩展的功能
    jQuery.fn.extend({
        myCss:function(key,value){
            // this指向调用这个方法的对象。所以为jquery对象
            console.log(this);
            this.each(function(index,item){
                item.style[key] = value
            })
        }
    })
    // 使用扩展功能
    $('.box').myCss('height','100px');

</script>

3、直接使用$符号调用

// 直接使用$符号调用的方法
jQuery.extend({
    max:function(a,b){
        return (a>b)?a:b;
    }
});
console.log($.max(2,3))

jQuery插件

jQuery插件介绍

jquery插件就是其他人基于jQuery的基础之上所实现的一些功能，可以直接拿过来使用

在使用jQuery插件的过程中一定要看文档

http://www.htmleaf.com/

https://www.jq22.com/

颜色插件

<button>开始</button>
<div class="box"></div>
<script src="js/jquery.js"></script>
<script src="js/jquery.color.js"></script>
<script>
    $('button').click(()=>{
        $('.box').animate({
            left:200,
            backgroundColor:'green'
        },3000)
    })
</script>

评分插件

<body>
    <div id="startone"  class="block clearfix" >
        <div class="star_score"></div>
        <p style="float:left;">您的评分：<span class="fenshu"></span> 分</p>
        <div class="attitude"></div>
    </div>
</body>
</html>
<script>
    scoreFun($("#startone"))
</script>

另外一个评分插件http://www.htmleaf.com/jQuery/Rating-Star-Rating/201809275346.html

日期插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="laydate/laydate.js"></script>
</head>
<body>
    选日期:<input type="text" class="layui-input" id="selectTime">
    <script>
        laydate.render({
            // 配合的页面上标签
            elem:'#selectTime',
            // 选择日期的类型  time表示时间  year表示年份 date表示日期
            type: 'date',
            // 一旦选中了就触发执行
            done:function(){
                console.log('done')
            }
        })
    </script>
</body>
</html>

目前文档不全 查看源码示例中的写法

弹出层插件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="layer/layer.js"></script>
</head>

<body>
    <button class="tips">简单提示</button>
    <button class="delete">删除</button>
    <button class="login">登录</button>
    <script>
        $('.login').click(function () {
            layer.open({
                // 设置弹出层的标题
                title:'登录页面',
                // 表示弹出的是一个页面内容
                type: 2,
                skin: 'layui-layer-rim', 
                // 控制大小
                area: ['500px', '580px'], 
                content:'http://localhost/szHTML2112/day32/代码/login.html'
            })
        });
        $('.tips').click(function () {
            layer.msg('简单提示');
        });
        $('.delete').click(function () {
            // confirm内置的方法 询问
            layer.confirm('是否删除这条数据', {
                //按钮
                btn: ['确认', '取消'] 

                // 后面的函数分别对应 重要与奇葩的处理方式
            }, function () {
                // 处理删除的逻辑
                layer.msg('删除完毕', {
                    icon: 1
                });
            }, function () {
               
            });
        });
    </script>
</body>

</html>

延迟加载插件

当页面打开时，会将页面上的所有的资源全部加载。由于全部加载导致用户体验不好(速度慢)。其次平台本身带宽

消费比较多。延迟加载(懒加载)。可以根据用户所访问的位置进行内容的加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.lazyload.js"></script>
</head>
<body>
    <img class="lazy" data-original="https://www.jq22.com/demo/tuupola-jquery_lazyload/img/bmw_m1_hood.jpg">
    <img class="lazy" data-original="https://www.jq22.com/demo/tuupola-jquery_lazyload/img/bmw_m1_side.jpg">
    <img class="lazy" data-original="https://www.jq22.com/demo/tuupola-jquery_lazyload/img/viper_1.jpg">
    <img class="lazy" data-original="https://www.jq22.com/demo/tuupola-jquery_lazyload/img/viper_corner.jpg">
    <img class="lazy" data-original="https://www.jq22.com/demo/tuupola-jquery_lazyload/img/bmw_m3_gt.jpg">
    <img class="lazy" data-original="https://www.jq22.com/demo/tuupola-jquery_lazyload/img/corvette_pitstop.jpg">
</body>
</html>
<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn"});
    });
  </script>

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="validate/jquery.validate.js"></script>
</head>
<body>
    <form method="GET">
        <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" name="password" id="pwd"></td>
        </tr>
        <tr>
            <td>重复密码</td>
            <td><input type="text" name="reppassword"></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="text" name="email"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="提交"></td>
        </tr>
    </table>
    </form>
</body>
</html>
<script>
    // 开始验证数据  validate表示对匹配的表单进行数据校验 对象中指定具体的信息
    $('form').validate({
        // 开启调试模式 调试模式只验证数据不提交数据
        debug:true,
        // 需要设置规则 rules表示整个表单数据验证规则 由于存在名称与值的对应，使用对象 属性名称使用表单input中的name值
        rules:{
            username:{
                // 用户名必须设置
                required:true,
                // 用户名最少2个字符串长度
                minlength:2,
                // 用户名最多16个字符长度
                maxlength:16
            },
            password:'required',
            // 重复密码必须与输入的相同
            // 如果规则只有一个并且还存在附加的指定 就必须要设置为对象格式
            reppassword:{
                equalTo:'#pwd'
            },
            email:'email',
        },
        // 设置提示信息
        messages:{
            username:{
                required:'用户名必须填写',
                minlength:'2',
                maxlength:'16'
            }
        },
        // 大部分场景不需要form表单直接提交。而是采用ajax的方式进行提交
        submitHandler:function(form){
            // form参数表示 form标签的dom对象
            console.log(form);
            // 代码执行到这个处理程序说明目前数据校验通过了
            console.log($(form).serialize());
            // 后续可以使用ajax请求请求发送给服务端。进行异步的校验  
        }
    });
    
</script>
pitstop.jpg">
</body>
</html>
<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn"});
    });
  </script>

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="validate/jquery.validate.js"></script>
</head>
<body>
    <form method="GET">
        <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" name="password" id="pwd"></td>
        </tr>
        <tr>
            <td>重复密码</td>
            <td><input type="text" name="reppassword"></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="text" name="email"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="提交"></td>
        </tr>
    </table>
    </form>
</body>
</html>
<script>
    // 开始验证数据  validate表示对匹配的表单进行数据校验 对象中指定具体的信息
    $('form').validate({
        // 开启调试模式 调试模式只验证数据不提交数据
        debug:true,
        // 需要设置规则 rules表示整个表单数据验证规则 由于存在名称与值的对应，使用对象 属性名称使用表单input中的name值
        rules:{
            username:{
                // 用户名必须设置
                required:true,
                // 用户名最少2个字符串长度
                minlength:2,
                // 用户名最多16个字符长度
                maxlength:16
            },
            password:'required',
            // 重复密码必须与输入的相同
            // 如果规则只有一个并且还存在附加的指定 就必须要设置为对象格式
            reppassword:{
                equalTo:'#pwd'
            },
            email:'email',
        },
        // 设置提示信息
        messages:{
            username:{
                required:'用户名必须填写',
                minlength:'2',
                maxlength:'16'
            }
        },
        // 大部分场景不需要form表单直接提交。而是采用ajax的方式进行提交
        submitHandler:function(form){
            // form参数表示 form标签的dom对象
            console.log(form);
            // 代码执行到这个处理程序说明目前数据校验通过了
            console.log($(form).serialize());
            // 后续可以使用ajax请求请求发送给服务端。进行异步的校验  
        }
    });
    
</script>
F2E_zeke
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery数据显示插件整合实现代码
10-28
由于我们公司的产品涉及到很多的表格数据显示，而且每张表的字段数都很多，在工作过程中(几任同仁的努力)，整合出一套自认为较为轻巧的方案
jquery form 加载数据示例
10-26
主要介绍了jquery form 加载数据的具体实现,需要的朋友可以参考下
jquery矩形可拉伸导航特效代码
03-20
js实现图片的透明度运动
m0_61683424的博客
09-09 2493
一.具体步骤： 1.创建img <img src="../images/2.jpeg" alt=""> 2.设置图片的样式 <style> * { margin: 0; padding: 0; } img { width: 300px; height: 300px; position: absol.
html鼠标拖动画矩形,jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
weixin_42324688的博客
06-04 383
本文实例讲述了jQuery实现的鼠标拖动画矩形框。分享给大家供大家参考，具体如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">鼠标拖动画矩形body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldse...
JQuery常见命令查找网站
weixin_40571937的博客
05-26 467
JQuery查询网站 Note http://jquery.cuishifeng.cn/ JQuery练习 https://www.mycodes.net/ 可以通过查看一些游戏的源码来练习或复习。 里面有只用hmtl和jQuery写的游戏。
jQuery简介（菜鸟版）
weixin_57726753的博客
05-01 927
jQuery简介（菜鸟版） 什么是jQuery jQuery是一个JavaScript函数库 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 例如获取同一个div元素js的代码量就比jQ的多 js的 jQ的 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HT...
鼠标移入/移出改变图片透明度_jQuery效果
weixin_34348805的博客
06-24 811
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery手册(jquery.cuishifeng.cn网页版)2
10-18
jquery手册(jquery.cuishifeng.cn网页版)，html版，离线浏览，非chm版，手机可看。
jquery1.8.3
09-26
jquery1.8.3官方包，包含jquery-1.8.3.min.js和jquery-1.8.3.js两个文件。
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery版本2.2.4
03-04
1、原生js使用太繁琐，使用jquery。 2、免费下载，希望大家爱上学习。 3、后面会出一个简单的使用方法。
jquery-migrate3.4版本
05-17
jquery-migrate3.4版本
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 363
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 368
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1006
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 299
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue 实现级联选择器功能
清音的博客
04-22 510
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

F2E_zeke

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值