jQuery简介

"""
jQuery内部封装了原生的js代码(还额外的添加了很多的功能)
能够让你通过书写更少的代码完成js操作
类似于Python的模块 在前端模块不叫模块,叫“类库”

兼容多个浏览器

jQuery的宗旨
	write less do more
	然你用更少的代码完成更多的事情
	

jQuery要学习的内容
  选择器
  筛选器
  样式操作
  文本操作
  属性操作
  文档处理
  事件
  动画效果
  插件
  each、data、Ajax(重点)
  
jQuery下载
  https://jquery.com/download/
  直接把文档复制粘贴到一个js文件就行了
"""

jQuery下载

https://jquery.com/download/
直接把文档复制粘贴到一个js文件就行了

jQuery的两种导入方式

第一种:本地文件导入
	把jq的js文件用script导入即可,src填jq文件所在的本地

第二种:网络导入(要有网络才可以使用)
	直接引入jQuery提供的CDN服务(基于网络直接导入)
    CDN:内容分发网络
      有免费的也有收费的
      前端免费的CDN网站:https://www.bootcdn.cn/
        导入jQuery:
        # 1、没有压缩过的
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        # 2、压缩过的
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery基本语法

jQuery(选择器).action()
秉持着jQuery的宗旨,jQuery可以简写为$
jQuery() == $()

jq与js对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
</head>
<body>
    <p id="d1">JavaScript和jQuery的对比</p>
    <script>
        // 使用原生js改变p标签的颜色
        let pEle = document.getElementById('d1')
        pEle.style.color = 'red'
        
        // 使用jq框架改变p标签的颜色
        $('p').css('color','green')
    </script>
</body>
</html>

jQuery查找标签

基本选择器

<body>
    <div>
        <span></span>
        <p class="c1"></p>
    </div>
    <span id="d1"></span>

    <script>
        // id选择器
        $('#d1')
        // class选择器
        $('.c1')
        // 标签选择器
        $('span')
		
        
        """一定要区分开"""
        // jq对象转成js的标签对象
        $('#d1')[0]
        // js的标签对象转成jq对象
        $(document.getElementById('d1'))
    </script>
</body>

所有通过jq选择器选择的对象叫jq对象,就相当于一个个的列表,要通过索引取值取出对应的标签

组合选择器/分组与嵌套

<body>
    <span class="c1"></span>
    <span></span>
    <div>
        <span></span>
        <span></span>
        <p>
            <span></span>
        </p>
    </div>
    <span id="d1"></span>
    <span></span>

    <script>
        // 后代选择器,div下所有的span
        $('div span')
        
        // 儿子选择器,div下一级别的所有span
        $('div>span')
        
        // 毗邻选择器,div同级别下的第一个span
        $('div+span')
        
        // 弟弟选择器,div同级别下所有的span
        $('div~span')
        
        
        // 同时选择多个标签
        $('#d1,.c1,div,p span')
    </script>

基本筛选器

<body>
    <ul>
        <li id="d1">101</li>
        <li>102</li>
        <li>103</li>
        <li>104</li>
        <li>105</li>
        <li class="c1">106</li>
        <li>107</li>
        <li>108</li>
        <li>109</li>
        <li>110</li>
    </ul>
    <div>div1
        <p>div>p</p>
    </div>
    <div>div2</div>

    <script>
        // 拿到ul下所有的li,返回一个jq对象,数组的形式
        $('ul li')

        // jq对象中的第一个标签
        $('ul li:first')

        // jq对象中的最后一个标签
        $('ul li:last')

        // 根据索引找到标签,括号内填索引
        $('ul li:eq(0)')

        // 找到jq对象中索引为偶数的标签,索引0包含在内
        $('ul li:even')

        // 找到jq对象中索引为奇数的标签
        $('ul li:odd')

        // 找到jq对象中索引大于2的标签,括号内填索引
        $('ul li:gt(2)')

        // 找到jq对象中索引小于2的标签,括号内填索引
        $('ul li:lt(2)')

        // 筛选出jq对象中除了id为d1的所有标签
        $('ul li:not("d1")')

        // 筛选出包含p标签的div标签
        $('div:has("p")')
    </script>
</body>

属性选择器

自定义的属性和标签自带的属性都可以,自带的属性例如color、background、font-size等等

<body>
    <input type="text" username="egan">
    <input type="text" username="json">
    <div username="json"></div>

    <script>
        // 选择属性中有username的标签,自定义的属性和标签自带的属性都可以
        $('[username]')

        // 选择属性是username,且值为json的标签
        $('[username="json"]')

        // 选择div标签中有属性为username,且值为json的标签
        $('div[username="json"]')
    </script>
</body>

表单筛选器

表单属性筛选器:

表单属性筛选器:
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

表单对象筛选器:

表单对象筛选器:
:enabled
:disabled
:checked  # 注意使用他的时候的特殊性,最好写成$('input:checked')
:selected
<body>
    <form action="">
        <p>账号:<input type="text"></p>
        <p>密码:<input type="password"></p>
        <input type="button" value="登录">


        <select name="" id="">
            <option value="">111</option>
            <option value="">222</option>
            <option value="" selected>333</option>
        </select>

        <p>
            <input type="radio" name="gender">男
            <input type="radio" name="gender" checked>女
        </p>

    </form>

    <script>
        // 在form表单中,$('[type]="text"')可以简写成以下形式
        $(':text')
        // 以下同理
        $(':password')
        $(':button')
        
        // 特殊情况:会把属性值为checked和selected的都选上
        // 如果只要含有checked属性值的可以写成$('input:checked')
        $(':checked')
        // 选择属性值有selected的
        $(':selected')
    </script>
</body>

选择器方法

# 找到下一个同级别标签
next()
# 找到同级别下面所有的标签
nextAll()
# 从当前标签开始到往下直到符合条件的标签(顾头不顾尾)
nextUntil('选择器')

# 上一个
prev()
prevAll()
prevUntil('选择器')

# 父标签
parent()
parents()
parentsUntil('选择器')

# 找到所有的子标签
children()

# 找到所有同级别的标签
siblings()

# 从某个区域筛选出想要的标签
find('选择器')
<body>
    <span id="d1">span</span>
    <span>span</span>
    <div id="d2">div
        <span>div>span</span>
        <p>div>p
            <span id="d3">div>p>span</span>
        </p>
        <span>div>span</span>
    </div>
    <span>span</span>
    <span>span</span>
    <span class="c1">span</span>

    <script>
        // 找到下一个同级别标签
        $('#d1').next()
        // 找到同级别下面所有的标签
        $('#d1').nextAll()
        // 从当前标签开始到往下直到类名为c1的标签,不包含c1(顾头不顾尾)
        $('#d1').nextUntil('.c1')

        // 找到下一个同级别标签
        $('.c1').prev()
        // 找到同级别上面所有的标签
        $('.c1').prevAll()
        // 从当前标签开始到往上直到id为d2的标签,不包含d2(顾头不顾尾)
        $('.c1').prevUntil('#d2')

        // 找到当前标签的父标签
        $('#d3').parent()
        // 找到当前标签的所有父标签
        $('#d3').parents()
        // 从当前标签开始,找到标签为body的所有父标签,不包含body(顾头不顾尾)
        $('#d3').parentsUntil('body')

        // 找到所有的子标签
        $('#d2').children()

        // 找到所有同级别的标签
        $('#d2').siblings()

        // find从某个区域筛选出想要的标签
        $('div').find('p')

        // div下第一个span标签,等价于$('div span:first')
        $('div span').first()

        // div下最后一个span标签,等价于$('div span:last')
        $('div span').last()
        
        // div除了id为d3的span标签,等价于$('div span:not("d3")')
        $('div span').not('#d3')
    </script>
</body>

jQuery操作标签

操作类

# js操作类
classList.add()			添加类
classList.remove()		删除类
classList.contains()	判断类是否存在
classList.toggle()		类存在则删除,不存在则添加
# jq操作类
addClass()			添加类
removeClass()		删除类
hasClass()			判断类是否存在
toggleClass()		类存在则删除,不存在则添加

操作css

<body>
    <p>111</p>
    <p>222</p>
    <p>333</p>

    <script>
       // 一行代码把第一个p标签变为红色,第二个p标签变为绿色,第三个p标签变为黄色
        $('p').first().css('color','red').next().css('color','green').next().css('color','yellow')
    </script>
</body>
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象,也就是继续调用其他方法

Python代码解释为什么jQuery可以链式操作
"""
class MyClass(object):
    def func1(self):
        print('func1')
        return self

    def func2(self):
        print('func2')
        return self
    

obj = MyClass()
obj.func1().func2()
"""

位置操作

# offset()			标签相对于浏览器窗口的位置
# position()		标签相对于父标签的位置
# scrollTop()		滚动条距离浏览器顶部的距离
# scrollLeft()		滚动条距离浏览器左边的距离
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            position:relative;
            top:200px;
            left:200px;
        }
        p{
            position:absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <div>div
        <p>ppppp</p>
    </div>
    <script>
        // 标签距离浏览器窗口的距离  {top: 300, left: 300}
        $('p').offset()

        // 标签距离父标签的距离  {top: 100, left: 100}
        $('p').position()

        // 滚动条距离浏览器顶部的距离
        $(window).scrollTop()
        // 括号内写数值就是设置距离
        $(window).scrollTop(200)

        // 滚动条距离浏览器左边的距离
        $(window).scrollLeft()
        // 括号内写数值就是设置距离
        $(window).scrollLeft(100)
    </script>
</body>
</html>

尺寸

# 标签内文本的高度和宽度
height()
width()

# 标签内文本+padding的高度和宽度
innerHeight()
innerWidth()

# 标签内文本+padding+边框的高度和宽度
outerHeight()
outerWidth()
    <style>
        div{
            height: 100px;
            margin:10px;
            padding:10px;
            border:5px solid;
        }
    </style>
</head>
<body>
    <div>ddd</div>

    <script>
        // 标签内文本的高度和宽度,不包含margin、padding和边框
        $('div').height()
        $('div').width()

        // 包含padding
        $('div').innerHeight()
        $('div').innerWidth()
        
        // 包含padding和边框
        $('div').outerHeight()
        $('div').outerWidth()
    </script>
</body>

文本操作

"""js"""				"""jQuery"""
# 查看标签内的文本内容
innerText()				text()
# 查看标签内的HTML结构
innerHtml()				html()
<body>
    <div>
        <p>
            天道崩塌,我陈平安唯有一剑,可搬山,断江,倒海,降妖,镇魔,敕神,摘星,摧城,开天
        </p>
    </div>

    <script>
        // 查看标签内的文本内容
        $('div').text()
        // 括号内添加字符串就是修改文本内容
        $('div').text('遇事不决,可问春风')

        // 查看标签内的HTML结构
        $('div').html()
        // 括号内写HTML代码可以识别
        $('div').html('<h1>言念君子,温其如玉</h1>')
    </script>
</body>

获取值操作

# js
.value()

# jquery
.val()
<body>
    <input type="text" value="初始默认值">
    <input type="file">

    <script>
        // 获取值
        $(':text').val()
        // 修改值
        $(':text').val('修改默认值')

        // 与js一样,文件不能通过.value的方式获取
        $(':file').val()
        // 要先把jQuery对象转为js的标签对象,然后用js的标签方法获取文件
        $(':file')[0].files[0]
    </script>
</body>

属性操作

# js
setAttribute()			修改属性
getAttribute()			获取属性
removeAttribute()		删除属性
# jQuery
attr(属性名,属性值)		修改属性
attr(属性名)			  获取属性
removeAttr(属性名)		  删除属性

prop()					判断属性是否存在
"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox、radio、option是否被选中用prop
"""
<body>
    <div id="d1"></div>
    <input type="checkbox" value="111" id="d2">
    <input type="checkbox" value="222" checked id="d3">
    <input type="checkbox" value="333" id="d4">

    <input type="radio" value="men" name="age" id="d5">男
    <input type="radio" value="women" name="age" id="d6">女

    <script>
        // 查看属性
        $('div').attr('id')
        // 修改/添加属性
        $('div').attr('id','d2')
        $('div').attr('class','c1')
        // 删除属性
        $('div').removeAttr('id')

        // prop适用于用户是否选中CheckBox、radio、option等等
        // 判断标签是否有checked属性,返回布尔值
        $('#d2').prop('checked')
        // 把checked属性添加到标签中
        $('#d2').prop('checked',true)
        // 移除checked属性
        $('#d2').prop('checked',false)
    </script>
</body>

文档处理

# js
createElement('p')		创建标签
appendChlid()			内部尾部追加标签

# jQuery
$('<p>')		创建标签

append()		内部尾部追加标签
appendTo()		内部尾部追加标签
prepend()		内部头部追加标签
prependTo()		内部头部追加标签

after()			放在某个标签的后面(同级)
insertAfter()	放在某个标签的后面(同级)
before()		放在某个标签的前面(同级)
insertBefore()	放在某个标签的前面(同级)

remove()		删除当前标签及他的子标签,也就是从DOM树中删除了
empty()			空标签内的所有东西,类似于.html('')
<body>
    <div id="d1">
        <p id="d2"></p>
        <span></span>
        <p></p>
    </div>

    <script>
        // 创建标签
        let $pEle = $('<p>')

        // 内部尾部追加
        $('#d1').append($pEle)
        $pEle.appendTo($('#d1'))

        // 内部头部追加
        $('#d1').prepend($pEle)
        $pEle.prependTo($('#d1'))

        // 添加到某个标签后面
        $('#d1').after($pEle)
        $pEle.insertAfter($('#d1'))
        // 添加到某个标签前面
        $('#d1').before($pEle)
        $pEle.insertBefore($('#d1'))

        // 删除当前标签及他的子标签,也就是从DOM树中删除了
        $("#d1").remove()
        // 清空标签内的所有东西,类似于.html('')
        $("#d1").empty()
    </script>
</body>

jQuery事件

click()		点击事件
scroll()	监听屏幕滚动
focus()		input框获取焦点事件
input()		实时监听input框中的内容变化
hover()		括号内写两个函数的时候第一个函数代表鼠标移入事件,第二个函数代表鼠标移出事件,写一个函数的时候移入和移出都是同一个事件,也就是一个事件会触发两次
keydown()	监听键盘按键事件

绑定事件的两种方式

<body>
    <button id="d1">雪中悍刀行</button>
    <button id="d2">剑来</button>

    <script>
        // 第一行种
        $('#d1').click(function () {
            alert('徐凤年')
        })
        
        // 第二种,功能更强大,支持事件委托
        $('#d2').on('click',function () {
            alert('陈平安')
        })
    </script>
</body>

click事件:克隆事件(clone:jQuery的克隆方法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #d1{
            height: 100px;
            width: 100px;
            border-radius:20px;
            border:2px solid blue;
        }
    </style>
</head>
<body>
    <button id="d1">
        影奥义!分身!
    </button>

    <script>
        $('#d1').on('click',function(){
            // this指当前被操作的标签
            // clone:克隆,默认只克隆HTML和css,但是加了参数true后就会把事件也克隆了
            $(this).clone(true).insertAfter(this)
        })
    </script>
</body>
</html>

click事件:模态框事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .bottom{
            font-size:24px;
        }
        .zhong{
            position:fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color:rgba(0,0,0,0.5);
            height: 100%;
            width: 100%;
            z-index:1;
        }
        .top{
            position:fixed;
            top: 150px;
            left: 400px;
            width: 600px;
            height: 400px;
            background-color: lightgreen;
            border-radius:50px;
            z-index: 2;
        }
        .guanbi{
            display:none;
        }
    </style>
</head>
<body>
    <button class="bottom">百度一下你就知道</button>
    <div class="zhong guanbi"></div>
    <div class="top guanbi">
        <p>账号:<input type="text"></p>
        <p>密码:<input type="password"></p>
        <button class="but">关闭</button>
    </div>

    <script>
        let $botEle = $('.bottom')
        let $zhongEle = $('.zhong')
        let $topButEle = $('.but')
        let $topEle = $('.top')
        $botEle.on('click',function(){
            $zhongEle.removeClass('guanbi')
            $topEle.removeClass('guanbi')
        });
        $topButEle.on('click',function(){
            $zhongEle.addClass('guanbi')
            $topEle.addClass('guanbi')
        })
    </script>
</body>
</html>

click事件:菜单栏事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        .move{
            width: 30%;
            height: 100vh;
            background-color:#d576ba;
            text-align:center;
        }
        .list{
            margin:0 auto;
            width:50%;
        }
        .list:hover{
            cursor:pointer;
        }
        .items{
            border:2px solid green;
            border-radius:10px;
            margin-top:5px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div class="move">
        <div class="list">菜单一
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="list">菜单二
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="list">菜单三
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
    </div>

    <script>
        // 先把菜单栏下面的div影藏
        $('.items').addClass('hide')
        $('.list').on('click',function(){
            // 给当前点击的.list标签的子标签调用toggleClass方法
            $(this).children().toggleClass('hide')
        })
    </script>
</body>
</html>

scroll事件(监听屏幕滚动):返回顶部按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        div{
            width:100vw;
            height: 400px;
        }
        button{
            height: 50px;
            width: 50px;
            background-color: white;
            position:fixed;
            right:20px;
            bottom:20px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="background-color: red"></div>
    <div style="background-color: yellow"></div>
    <div style="background-color: green"></div>
    <div style="background-color: blue"></div>
    <button class="hide">返回顶部</button>

    <script>
        // scroll:监听屏幕滚动事件
        $(window).on('scroll',function(){
            // 当滚动条距离顶部大于300时移除hide类,返回顶部的按钮显示出来
            if($(window).scrollTop() > 300){
                $('button').removeClass('hide')
            }else{
                // 当滚动条距离顶部小于300时,隐藏按钮
                $('button').addClass('hide')
            }
        })

        // 点击事件,点击按钮返回页面顶部
        $('button').on('click',function(){
            $(window).scrollTop(0)
        })
    </script>
</body>
</html>

click事件:自定义登录校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
</head>
<body>
    <p>
        账号:<input type="text" id="name">
        <span style="color:red"></span>
    </p>
    <p>
        密码:<input type="password" id="word">
        <span style="color:red"></span>
    </p>
    <button class="but">登录</button>

    <script>
        let $name = $('#name')
        let $word = $('#word')
        $('.but').on('click',function(){
            // 获取两个input中的值
            let username = $name.val()
            let password = $word.val()
            // 判断username框中是否有内容
            if(!username){
                $name.next().text('账号不能为空')
            }
            // 判断password框中是否有内容
            if(!password){
                $word.next().text('密码不能为空')
            }
        })

        // input框获取焦点事件
        $('input').focus(function(){
            // 当input框获取焦点时清空span标签中的文本
            $(this).next().text('')
        })
    </script>
</body>
</html>

input事件:实时监控input输入的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        .c1{
            height: 50px;
            width: 120px;
            color:red;
            border:1px solid black;
            border-radius:10px;
            margin-top:10px;
            text-align:center;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    账号:<input type="text">
    <div class="c1 hide">当前账号不匹配</div>

    <script>
        // 定义一个本地账号
        let name = 'liu'
            // 实时监控input框中的值
        $(':text').on('input',function(){
            // 把监控到的值赋值给user
            let user = this.value
            // 判断input是否为空
            if(user !== ''){
                // input没有值隐藏提示框
                $('.c1').removeClass('hide')
            }else{
                // input有值显示提示框
                $('.c1').addClass('hide')
            }
            // 判断input中输入的值是否等于我们本地存的值
            if(user === name){
                $('.c1').css('color','green').text('匹配成功')
            }else {
                $('.c1').css('color','red').text('当前账号不匹配')
            }
        })
    </script>
</body>
</html>

hover事件:鼠标移入移出事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            text-align:center;
            border:1px solid red;
        }
        span{
            width: 200px;
            height: 50px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div>鼠标移进来试试</div>
    <span>看我</span>

    <script>
        // hover只能用第一种方法设置事件
        // hover的括号内可以写两个函数也可以只写一个函数
        // 写两个函数的时候第一个函数代表鼠标移入事件,第二个函数代表鼠标移出事件
        // 写一个函数的时候移入和移出都是同一个事件,也就是一个事件会触发两次
        $('div').hover(
            // 这是鼠标移入的事件
            function(){
                $('span').text('我进来了')
            },
            // 这是鼠标移出的事件
            function(){
                $('span').text('我又出去了')
            }
        )
    </script>
</body>
</html>

keydown事件:监听键盘按键事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        div{
            margin:0 auto;
            text-align: center;
        }
        span{
            border-radius: 10px;
            border:1px solid gold;
            margin:5px;
        }
    </style>
</head>
<body>
    <div>按下键盘来看看键盘对应的编码是多少把</div>
    <script>
        // 监听键盘按键事件,函数的参数中要传参,不是event也可以
        $(window).on('keydown',function(event){
            // event.keyCode就是获取键盘按键对应的编码
            let an = event.keyCode
            $('<span>').text('该键盘对应的编码是:'+an).insertAfter($('script'))
        })
    </script>
</body>
</html>

阻止后续事件执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
</head>
<body>
    <form action="">
        <span id="d1"></span>
        <input type="submit" id="d2">
    </form>

    <script>
        $('#d2').on('click',function(event){
            $('#d1').text('阻止了submit按钮提交form的动作')
            // 第一种方法:阻止标签后面的所有事件
            return false
            // 第二种方法:阻止标签默认事件执行,用该方法要向函数传一个参数
            event.preventDefault()
        })
    </script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
    <style>
        div,p,span{
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div style="width: 300px">div
        <p style="width: 200px">div>p
            <span style="width: 100px">div>p>span</span>
        </p>
    </div>

    <script>
        $('div').on('click',function(){
            $('<button>').text('我运行了div的事件').insertAfter('div')
        })
        $('p').on('click',function(){
            $('<button>').text('我运行了div>p的事件').insertAfter('div')
        })
        $('span').on('click',function(e){
            $('<button>').text('我运行了div>p>span的事件').insertAfter('div')
            // 阻止事件冒泡的第一种方式
            return false
            // 阻止事件冒泡的第二种方式,要向函数传一个参数
            e.stopPropagation()
        })
    </script>
</body>
</html>

事件委托

// 在指定的范围内,将事件委托给某个标签,无论该标签是事先写好的还是后面动态添加的
$('标签(事件委托的范围)').on('委托的事件','委托的标签',function(){
	事件内容
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
</head>
<body>
    <script>
        let t = 0
        // 给在每一个body标签内动态生成或者事先写好的button标签绑定一个click事件
        $('body').on('click','button',function(){
            alert('事件委托')
        })
        
        function func1(){
            t++
            // 在body标签内动态的创建button标签
            $('<button>').appendTo('body').text(t)
            // t等于10时关闭计时器
            if(t === 10){
                clearInterval(time)
            }
        }
        let time = setInterval(func1,1000)
    </script>
</body>
</html>

页面加载完毕在运行代码

"""js等待页面加载完毕"""
window.onload = function(){
    // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
    // js代码
})
# 第二种
$(function(){
    // js代码
})
# 第三种
直接写在body内部的最下方

动画效果

"""5000是时间,单位毫秒"""
# .hide(5000)			向左上角影藏标签
# .show(5000)			从左上角现行标签

# .slideUp(5000)		向上影藏标签
# .slideDown(5000)		向下现行标签

# .fadeOut(5000)		渐隐
# .fadeIn(5000)			渐现
# .faedTo(5000,0.4)		渐隐到0.4的透明度

jQuery对象的其他方法

clone()		克隆当前标签的HTML和css,在括号内添加参数true就可以把事件也克隆了
each()		会each后就不用自己写for循环了,用它更方便
data()		能够让标签帮我存储数据,并且用户看不到

each():会each后就不用自己写for循环了,用它更方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        // 会each后就不用自己写for循环了,用它更方便
        // each的第一种使用方法,index返回的是索引,obj返回的是与索引相对的标签
        $('div').each(function(index,obj){
            console.log(index,obj)
        })

        // 第二种使用方法,index返回索引,obj返回索引相对的值
        $.each([111,222,333],function(index,obj){
            console.log(index,obj)
        })
    </script>
</body>
</html>

data():能够让标签帮我存储数据,并且用户看不到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery3.6/compressed.js"></script>
    <title>Title</title>
</head>
<body>
    <div></div>

    <script>
        // 添加隐藏属性
        $('div').data('username','liu')
        // 查看隐藏属性
        $('div').data('username')
        // 删除隐藏属性
        $('div').removeData('username')
    </script>
</body>
</html>
版权声明:本文为liuhousheng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/liuhousheng/p/16930378.html