jQuery

weixin_55136170

已于 2022-12-11 21:55:10 修改

阅读量225

点赞数

文章标签： jquery 前端 javascript

于 2022-12-02 17:22:49 首次发布

本文链接：https://blog.csdn.net/weixin_55136170/article/details/128150863

版权

jQuery简介

jQuery内部封装了原生的js代码 (还额外添加了很多的功能)

能够让你通过书写更少的代码完成js操作

类似于python里面的模块在前端模块不叫模块叫类库

兼容多个浏览器你在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery的宗旨

write less do more

让你用更少的代码完成更多的事情

复习

python导入模块发生了哪些事

导入模块其实需要消耗资源

jQuery在使用的时候也需要导入

但是它的文件非常的小(几十KB) 基本不影响网络速度

jQuery文件下载

压缩容量更小

未压缩

jQuery在使用之前一定要确保已经导入了

针对导入问题

1. 文件下载到了本地如何解决多个文件反复书写引入语句的方法

可以借助于pycharm自动初始化代码功能完成自动添加

settings -> editor -> file and code template

2. 直接引入jQuery提供的CDN服务（基于网络直接请求加载）

CDN : 内容分发网络 Content Distribution Network

CDN有免费的也有收费的

前端免费的CDN网站

bootcdn

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""你的计算机必须要有网络"""

jQuery基本语法

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

jQuery与js代码对比

eg:将p标签内部的文本颜色改为红色

 // 原生js代码操作标签
        let pEle = document.getElementById('d1')
        pEle.style.color = 'red'

        // jQuery操作标签
        $('p').css('color','blue')
```

基本选择器


// id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
// class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
// 标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]

/*一定要区分开(重点)*/
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id="d1">…</div>
document.getElementById('d1')
<div id="d1">…</div>
// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]

组合选择器/分组与嵌套

(document.getElementById('d1'));
jQuery.fn.init [div#d1]0: div#d1length: 1[[Prototype]]: Object(0)
$('div');
jQuery.fn.init(2) [div#d1, div.c1, prevObject: jQuery.fn.init(1)]0: div#d11: div.c1length: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('div.c1')
jQuery.fn.init [div.c1, prevObject: jQuery.fn.init(1)]
$('div#d1')
jQuery.fn.init [div#d1, prevObject: jQuery.fn.init(1)]
$('*');
jQuery.fn.init(16) [html, head, meta, title, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: jQuery.fn.init(1)]
$('#d1,.c1,p'); //并列+混用
jQuery.fn.init(3) [div#d1, p#d2, div.c1, prevObject: jQuery.fn.init(1)]
$('div span');

$('div > span'); //儿子
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(1)]0: span1: spanlength: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('div + span'); //毗邻

$('div ~ span'); //弟弟
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(1)]

基本筛选器

$('ul li');
jQuery.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: jQuery.fn.init(1)]

$('ul li:first'); //大儿子
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
$('ul li:last'); //小儿子
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
$('ul li:eq(2)'); //放索引
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
$('ul li:even'); //偶数索引 包含0
$('ul li:odd') //基数索引
jQuery.fn.init(5) [li, li, li, li, li, prevObject: jQuery.fn.init(1)]
$('ul li:gt(2)') //大于索引
jQuery.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: jQuery.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('ul li:lt(2)'); //小于索引
jQuery.fn.init(2) [li, li, prevObject: jQuery.fn.init(1)]
$('ul li:not("#d1")') // 移除满足条件的标签

$('div:has("p")'); //选取出包含一个或多个标签在内的标签
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]

属性选择器

$('[username]');
jQuery.fn.init(3) [input, input, p, prevObject: jQuery.fn.init(1)]
$('[username="jason"]');
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]
$('[username="egon"]');
jQuery.fn.init(2) [input, p, prevObject: jQuery.fn.init(1)]
$('p[username="egon"]');
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]
$('[type]');
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$('[type="text"]')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]

表单筛选器

$('input[type="text"]');
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]0: inputlength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('input[type="password"]')
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]
$(':text') //等价于上面第一个
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]0: inputlength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$(':password'); //等价于上面第二个
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

表单的对象属性

:enabled
:disabled
:checked
:selected


// 特殊情况
$(':checked'); // 它会将checked和selected都拿到
jQuery.fn.init(2) [input, option, prevObject: jQuery.fn.init(1)]0: input1: optionlength: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$(':selected'); // 它不会 只拿selected
jQuery.fn.init [option, prevObject: jQuery.fn.init(1)]0: optionlength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('input:checked'); // 自己加一个限制条件
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]

筛选器方法

$('.c1').prevAll(); // 上面所有的
jQuery.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: jQuery.fn.init(1)]
$('.c1').prevUntil('#d2');
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(1)]
$('#d1').next(); // 同级别下一个
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]
$('#d1').nextAll();
jQuery.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: jQuery.fn.init(1)]
#('#d1').nextUntil('.c1'); // 不包括最后一个
VM1405:1 Uncaught SyntaxError: Invalid or unexpected token
$('#d1').nextUntil('.c1');
jQuery.fn.init(4) [span, div#d2, span, span, prevObject: jQuery.fn.init(1)]
$('#d3').parent(); //第一级父标签
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]0: plength: 1prevObject: jQuery.fn.init [span#d3][[Prototype]]: Object(0)
$('#d3').parent().parent(); 
jQuery.fn.init [div#d2, prevObject: jQuery.fn.init(1)]
$('#d3').parent().parent().parent();
jQuery.fn.init [body, prevObject: jQuery.fn.init(1)]
$('#d3').parent().parent().parent().parent();
jQuery.fn.init [html, prevObject: jQuery.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent();
jQuery.fn.init [document, prevObject: jQuery.fn.init(1)]0: documentlength: 1prevObject: jQuery.fn.init [html, prevObject: jQuery.fn.init(1)][[Prototype]]: Object(0)
$('#d3').parent().parent().parent().parent().parent().parent();
jQuery.fn.init [prevObject: jQuery.fn.init(1)]length: 0prevObject: jQuery.fn.init [document, prevObject: jQuery.fn.init(1)][[Prototype]]: Object(0)
$('#d3').parents();
jQuery.fn.init(4) [p, div#d2, body, html, prevObject: jQuery.fn.init(1)]
$('#d3').parentsUntil('body');
jQuery.fn.init(2) [p, div#d2, prevObject: jQuery.fn.init(1)]
$('#d2').children(); //儿子
jQuery.fn.init(3) [span, p, span, prevObject: jQuery.fn.init(1)]0: span1: p2: spanlength: 3prevObject: jQuery.fn.init [div#d2][[Prototype]]: Object(0)
$('#d2').siblings(); //同级别上下所有
jQuery.fn.init(5) [span#d1, span, span, span, span.c1, prevObject: jQuery.fn.init(1)]

$('div p'); // 跟下面那个等价
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]0: plength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('div').find('p'); // find从某个区域内筛选出想要的标签
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]


// 下述两两等价
$('div span');
jQuery.fn.init(3) [span, span#d3, span, prevObject: jQuery.fn.init(1)]
$('div span:first');
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]0: spanlength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('div span').first();
jQuery.fn.init [span, prevObject: jQuery.fn.init(3)]0: spanlength: 1prevObject: jQuery.fn.init(3) [span, span#d3, span, prevObject: jQuery.fn.init(1)][[Prototype]]: Object(0)

$('div span:last');
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]
$('div span').last();
jQuery.fn.init [span, prevObject: jQuery.fn.init(3)]

$('div span:not("#d3")');
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(1)]
$('div span').not("#d3");
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(3)]

jQuery练习题

$('#i1');
r.fn.init [div#i1.container]0: div#i1.containerlength: 1[[Prototype]]: Object(0)
$('h2');
r.fn.init [h2, prevObject: r.fn.init(1)]0: h2length: 1prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('input');
$('.c1');
r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]
$('.btn-default');
r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]0: button#btnSubmit.btn.btn-defaultlength: 1prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('.c1,h2');
r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]
$('.c1,#p3')
r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]0: h1.c11: h1.c12: p#p3.dividerlength: 3prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('.c1,.btn');
$('form input');
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]0: input#exampleInputEmail1.form-control1: input#exampleInputPassword1.form-control2: input#exampleInputFilelength: 3prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('label input');
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]0: input1: input2: input3: input4: input#optionsRadios15: input#optionsRadios2length: 6prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('label + input');
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]0: input#exampleInputEmail1.form-control1: input#exampleInputPassword1.form-control2: input#exampleInputFilelength: 3prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('#p2').siblings();
r.fn.init(17) [li, li, li, li, li, li, li, li, li, li, li, li, p#p3.divider, li, li, li, li, prevObject: r.fn.init(1)]0: li1: li2: li3: li4: li5: li6: li7: li8: li9: li10: li11: li12: p#p3.divider13: li14: li15: li16: lilength: 17prevObject: r.fn.init [p#p2.divider][[Prototype]]: Object(0)
$('#p2').nextAll();
r.fn.init(9) [li, li, li, li, p#p3.divider, li, li, li, li, prevObject: r.fn.init(1)]0: li1: li2: li3: li4: p#p3.divider5: li6: li7: li8: lilength: 9prevObject: r.fn.init [p#p2.divider][[Prototype]]: Object(0)
$('#f1 input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]0: input#exampleInputEmail1.form-control1: input#exampleInputPassword1.form-control2: input#exampleInputFilelength: 3prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('#f1 input:first')
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]0: input#exampleInputEmail1.form-controllength: 1prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('#f1 input').first();
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(3)]0: input#exampleInputEmail1.form-controllength: 1prevObject: r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)][[Prototype]]: Object(0)
$('#my-checkbox input:last');
r.fn.init [input, prevObject: r.fn.init(1)]0: inputlength: 1prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('my-checkbox:checked');
r.fn.init [prevObject: r.fn.init(1)]length: 0prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('my-checkbox input:checked');
r.fn.init [prevObject: r.fn.init(1)]length: 0prevObject: r.fn.init [document][[Prototype]]: Object(0)
$('label').has('input');
$('#my-checkbox input[checked!="checked"]');

操作标签

操作类

"""

js版本 jQuery版本

classList.add() addClass()

classList.remove() reniveClass()

classList.contains() hasClass()

classList.toggle() toggleClass()

"""

css 操作
    <p>111</p>
    <p>222</p>
一行代码将第一个p标签变成红色第二个p标签变成蓝色
$('p').first().css('color','red').next().css('color','blue');
jQuery的链式操作使用jQuery可以做到一行代码操作很多标签

jQuery对象调用jQuery方法之后返回的还是jQuery对象也就可以继续调用jQuery方法
class MyClass(object):
    def func1(self):
        print('func1')
        return self

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

obj = MyClass()
obj.func2().func1()
位置操作

offset() # 相对于浏览器窗口

postion() # 相对于父标签

scrollTop() # 需要了解

scrollLeft()
$(window).scrollTop(); // 括号内不加参数就是获取
0
$(window).scrollTop();
429
$(window).scrollTop();
829
$(window).scrollTop(0); // 加了参数就是设置
尺寸
$('p').height(); // 文本
18
$('p').width();
1246
$('p').innerHeight(); //文本 + padding
24
$('p').innerWidth();
1250
$('p').outerHeight(); //文本 + padding + border
24
$('p').outerWidth();
1250
文本操作

"""

操作标签颞部的文本

js jQuery

innerText text() //括号内不加参数就是获取，加了就是赋值

innerHTML html()

"""
$('div').text();
'\n        有些话听听就过去了，不要在意，都是成年人！\n\n    '
$('div p').text();
'有些话听听就过去了，不要在意，都是成年人！'
$('div').html();
'\n        <p>有些话听听就过去了，不要在意，都是成年人！</p>\n\n    '
$('div').text('你们都是我的大宝宝')
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
$('div').html('你个臭美诶')
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
$('div').text('<h1>你们都是</h1>')
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
$('div').html('<h1>你们都是</h1>')
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
获取值操作

"""

js jQuery

.value .val()

"""
$('#d2')
jQuery.fn.init [input#d2]
$('#d2').val();
''
$('#d2').val();  // 括号内不加参数就是获取 加了就是赋值
'C:\\fakepath\\WebTracker_Squad_fb_allocation_NSB_MN_RAN_BOAM_RD_O&M_UI_CM&SPEC_HAZ_SG.xlsx'
$('#d2')[0].value;
'C:\\fakepath\\WebTracker_Squad_fb_allocation_NSB_MN_RAN_BOAM_RD_O&M_UI_CM&SPEC_HAZ_SG.xlsx'
$('#d2')[0].files; // 牢记两个对象之间的转换
FileList {0: File, length: 1}0: File {name: 'WebTracker_Squad_fb_allocation_NSB_MN_RAN_BOAM_RD_O&M_UI_CM&SPEC_HAZ_SG.xlsx', lastModified: 1669809033773, lastModifiedDate: Wed Nov 30 2022 19:50:33 GMT+0800 (China Standard Time), webkitRelativePath: '', size: 10259, …}length: 1[[Prototype]]: FileList
$('#d2')[0].files[0];
属性操作

"""

js jQuery

setAttribute() attr(name,value)

getAttribute() attr(name)

removeAttribute() removeAtr(name)

在用变量存储对象的时候 js中推荐使用

XXXEle 标签对象

jQuery中推荐使用

$XXXEle jQuery对象

"""
$('#d1');
jQuery.fn.init [p#d1]
let $pEle = $('p');
undefined

$pEle.attr('id');
'd1'

$pEle.attr('name');
undefined

$pEle.attr('username');
'jason'

$pEle.attr('class');
undefined

$pEle.attr('class','c1');
jQuery.fn.init [p#d1.c1, prevObject: jQuery.fn.init(1)]

$pEle.attr('id','c666');
jQuery.fn.init [p#c666.c1, prevObject: jQuery.fn.init(1)]
$pEle.attr('password','555');
jQuery.fn.init [p#c666.c1, prevObject: jQuery.fn.init(1)]
$pEle.removeAttr('p')
jQuery.fn.init [p#c666.c1, prevObject: jQuery.fn.init(1)]
$pEle.removeAttr('password')
jQuery.fn.init [p#c666.c1, prevObject: jQuery.fn.init(1)]
对于标签上有的能够看到的属性和自定义属性用attr

对于返回布尔值比如checkbox, radio, option是否被选中用prop
$('#d3').attr('checked')
'checked'
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
'checked'
$('#d3').attr('checked','checked')

//上面的无效

$('d2').prop('checked');
undefined
$('#d2').prop('checked');
false
$('#d2').prop('checked');
false
$('#d2').prop('checked');
true
$('#d4').prop('checked',false);
jQuery.fn.init [input#d4]
$('#d4').prop('checked',true);
jQuery.fn.init [input#d4]
文档处理

"""

js jQuery

createElement() $('<p>')

appendChild append

"""
let $pEle = $('<p>')
undefined
$pEle;
jQuery.fn.init [p]
$pEle.text('你好啊， 草莓要不要，来几个？')
jQuery.fn.init [p]
$pEle;
$pEle.attr('id','d1');
jQuery.fn.init [p#d1]
$pEle
jQuery.fn.init [p#d1]
$pEle[0]
<p id="d1">你好啊， 草莓要不要，来几个？</p>
$('#d1').append($pEle)
jQuery.fn.init [div#d1]
$('#d1').append($pEle[0])
jQuery.fn.init [div#d1]


let $pEle = $('<p>')
undefined
$pEle.attr('id','d3')
jQuery.fn.init [p#d3]
$pEle.text('你好啊 草莓要不要来几个？')
jQuery.fn.init [p#d3]
$('#d1').prepend($pEle);
jQuery.fn.init [div#d1]
$pEle.prependTo($('#d1'));
jQuery.fn.init [p#d3, prevObject: jQuery.fn.init(1)]


let $pEle = $('<p>')
undefined
$pEle.attr('id','d3')
jQuery.fn.init [p#d3]
$pEle.text('你好啊 草莓要不要来几个？')
jQuery.fn.init [p#d3]
$('#d1').prepend($pEle);
jQuery.fn.init [div#d1]
$pEle.prependTo($('#d1'));
jQuery.fn.init [p#d3, prevObject: jQuery.fn.init(1)]
$('#d2').after($pEle);  //放在某个标签后面
jQuery.fn.init [p#d2]
$pEle.insertAfter($('#d2'));
jQuery.fn.init [p#d3, prevObject: jQuery.fn.init(1)]
$pEle.insertAfter($('#d1'));
jQuery.fn.init [p#d3, prevObject: jQuery.fn.init(1)]

$('#d1').remove() //将标签从DOM树中删除
$('#d1').empty(); //清空标签里所有的内容
$('#d1').html('');

事件

    <script>
        //第一种
        $('#d1').click(function (){
            window.alert('别说话， 吻我')
        })
        document.getElementById('d2').onclick = function (){
            window.alert('别说话，吻我')
        }
        //第二种（功能更加强大 还支持事件委托）
        $('#d3').on('click',function (){
            window.alert('借我钱买草莓，后面还你')
        })
    </script>

克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border: 1px solid blue;
        }
    </style>

</head>
<body>
    <button id="d1">屠龙宝刀，点击就送</button>
    <script>
        $('#d1').on('click',function (){
            console.log(this) //this指代的永远是当前被操作的标签对象
            //$(this).clone().insertAfter($('#d1')) //clone默认情况下只克隆html和css， 不克隆事件
            $(this).clone(true).insertAfter($('#d1')) //括号内加true即可克隆事件
        })
    </script>
</body>
</html>

自定义模态框

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .left {
            float:left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .items {
            border: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">菜单一
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="title">菜单二
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="title">菜单三
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
    </div>
</div>
<script>
    $('.title').click(function (){
        //window.alert(this)
        //console.log(this)
        //先给所有的items加hidden,然后将被点击的标签内部hide移除
        $('.items').addClass('hide')
        $(this).children().removeClass('hide')
        }
    )
</script>
</body>
</html>

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position: fixed;
            background-color: black;
            right: 20px;
            bottom: 20px;
            height: 50px;
            width: 50px;
        }
    </style>

</head>
<body>
<a href="" id="d1">65</a>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: yellow"></div>
<div style="height: 500px;background-color: blue"></div>
<a href="#d1" class="hide">回到顶部</a>

<script>
    $(window).scroll(function (){
        if($(window).scrollTop() >300){
            $('#d1').removeClass('hide')
        }else
        {
            $('#d1').addClass('hide')
        }
    })
</script>
</body>
</html>

阻止后续事件执行

<script>
    $('#d2').click(function (event){
        $('#d1').text('宝贝，你能看到我吗')
        // 阻止标签后续事件的执行 方式1
        // return false
        // 阻止标签后续事件的执行 方式2
        event.preventDefault()
    })
</script>

阻止事件冒泡

<script>
    $('#d1').click(function () {
        alert('div')
    })
    $('#d2').click(function () {
        alert('p')
    })
    $('#d3').click(function (e) {
        alert('span')
        // 阻止事件冒泡的方式 1
        // return false
        e.stopPropagation()
    })
</script>

事件委托

<body>
    <button>是兄弟，就来砍我</button>

    <script>
        // 给页面上所有的button标签绑定点击事件
        // $('button').click(function (){ //无法影响到动态创建的标签
        //     window.alert(123)
        // })

        // 事件委托
        $('body').on('click','button',function (){
            alert(123) //在指定的范围内，将事件委托给某个标签，无论该标签是事先写好的，还是后面动态创建的
        })
    </script>
</body>
</html>

页面加载

等待页面加载完毕再执行代码

window.onload = function(){}

jQuery中等待页面加载完毕

// 第一种
$(document).ready(function(){
//js代码
})

// 第二种
$(function(){
//js代码
}
)

// 第三种

// 直接写在body内部最下方

动画效果（了解）

$('#d1').hide(5000)
jQuery.fn.init [div#d1]
$('#d1').show(10000)
jQuery.fn.init [div#d1]
$('#d1').slideUp(5000)
jQuery.fn.init [div#d1]
$('#d1').slideDown(5000)
jQuery.fn.init [div#d1]
$('#d1').fadeIn(5000)
jQuery.fn.init [div#d1]
$('#d1').fadeOut(5000)
jQuery.fn.init [div#d1]
$('#d1').fadeIn(5000)
jQuery.fn.init [div#d1]
$('#d1').fadeTo(5000)
jQuery.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
jQuery.fn.init [div#d1]

补充

// 第一种
$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>
jQuery.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: jQuery.fn.init(1)]

// 第二种

$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM582:1 0 111
VM582:1 1 222
VM582:1 2 333
(3) [111, 222, 333]

有了each之后就无需自己写for循环了

用它更加的方便

data()

能够让标签存储

$('div').data('info','回来吧，我原谅你了')
jQuery.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: jQuery.fn.init(1)]
$('div').first().data('info')
'回来吧，我原谅你了'
$('div').last().data('info')
'回来吧，我原谅你了'
$('div').last().data
ƒ ( key, value ) {
		var i, name, data,
			elem = this[ 0 ],
			attrs = elem && elem.attributes;

		// Gets all values
		if ( key === undefined ) {
			if ( this.length ) {
				data = dataUser.get( elem…
$('div').last().data()
{info: '回来吧，我原谅你了'}
$('div').last().data('xxx')
undefined
$('div')
[[Prototype]]: Object(0)