JQuery学习笔记

JQuery基础知识

简介

jQuery 内部封装了原生的JS 代码 (还额外添加了很多功能)
能够让你通过书写更少的代码 完成js操作
类似于Python里面的模块 在前端 模块不叫模块 叫 "类库"
兼容多个浏览器 在使用JQuery的时候 不需要考虑浏览器兼容问题

JQuery的宗旨

write less do more
让程序员用更少的代码完成给更多的事情
JQuery 在使用的时候也需要导入
	但是它的文件非常小(几十kb) 基本不影响页面加载速度

实现功能

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• 提供大量的插件

针对导入问题

1 文件下载到本地 如何解决多个文件反复书写引入语句代码

`<script src="jQuery v3.6.0.js"></script>`

可以借助于pycharm 自动初始化代码功能完成自动添加
	配置
		编辑
			file and code template

2 直接引用 jQuery 提供的CDN服务 (基于网络直接请求加载)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	CDN: 内容分发网络
		CDN有免费的也有收费的
		前端免费的cdn网站
			bootcdn..cn
	优点: 无需下载对应文件, 直接走网络请求使用
	缺点: 要想使用这种方法, 计算机必须有网络

JQuery 基本语法

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

jQuery 与 js 的简单对比

// 将标签内部的文本颜色改成红色
// 原生 js 代码操作标签
let pEle = document.getElementById("d1")
pEle.style.color = "red"
// jQuery 操作标签
$("p").css('color', 'blue')

如何查找标签

基本选择器

// id 选择器
$("#d1")
/*S.fn.init [div#d1]*/

// class选择器
$('.c1')
/*S.fn.init [p.c1, prevObject: S.fn.init(1)]*/

// 标签选择器
$('span')
/*S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]*/

// 区分(重点)
// jQuery对象如何变成标签对象
>>> $("#d1")[0]		// 与 document.getElementById('d1') 相同
/*<div id= "d1"> … </div> "div
    "<span> div>span </span> 
	<p> … </p> 
</div>  */

// 标签对象如何转jQuery 对象
>>> $(document.getElementById('d1'))
/*S.fn.init [div#d1]*/

组合选择器 / 分组与嵌套

$('div')	// 找所有的div
S.fn.init(2) [div#d1, div.c1, prevObject: S.fn.init(1)]

$('div.c1')	// div 里面的 .c1
S.fn.init [div.c1, prevObject: S.fn.init(1)]

$('div#d1')	// 找div中的d1
S.fn.init [div#d1, prevObject: S.fn.init(1)]

$('*')	// 查找全部标签
S.fn.init(17) [html, head, meta, title, script, script, body, span, span, div#d1, span, p#p1, span, span, div.c1, span, span, prevObject: S.fn.init(1)]

$('#d1, .c1, p')	// 分组 id为d1  类为 c1  和 所有p标签
S.fn.init(3) [div#d1, p#p1, div.c1, prevObject: S.fn.init(1)]

$('#d1 span')	// d1 的所有 span后代
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]

$('#d1>span')	// d1 的所有 span儿子
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]

$('div+span')	// 毗邻
S.fn.init [span, prevObject: S.fn.init(1)]

$('#d1~span')	// 弟弟
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]

基本筛选器

$('ul li')
S.fn.init(10) [li, li, li, li, li, li, li, li, li, li, prevObject: S.fn.init(1)]

$('ul li:first')	//  大儿子
S.fn.init [li, prevObject: S.fn.init(1)]

$('ul li:last')		// 小儿子
S.fn.init [li, prevObject: S.fn.init(1)]

$('ul li:even')		// 偶数索引
S.fn.init(5) [li, li, li, li, li, prevObject: S.fn.init(1)]

$('ul li:odd')		// 奇数索引
S.fn.init(5) [li, li, li, li, li, prevObject: S.fn.init(1)]

$('ul li:gt(2)')	// 大于索引
S.fn.init(7) [li, li, li, li, li, li, li, prevObject: S.fn.init(1)]

$('ul li:lt(2)')	// 小于索引 
S.fn.init(2) [li, li, prevObject: S.fn.init(1)]

$('ul li:not(#l1)') // 移除满足条件的标签
S.fn.init(9) [li, li, li, li, li, li, li, li, li, prevObject: S.fn.init(1)]

$('div')
S.fn.init(2) [div, div, prevObject: S.fn.init(1)]

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

属性选择器

$('[username]')		// 找到拥有属性 username 的所有标签
S.fn.init(3) [input, input, p, prevObject: S.fn.init(1)]
$('[username="zhangsan"]') // 找到 username 值为 zhangsan 的标签
S.fn.init [input, prevObject: S.fn.init(1)]
$('p[username]')	// 找到 p 标签中含有 username 的标签
S.fn.init [p, prevObject: S.fn.init(1)]	

表单筛选器

// 以下只能对  form 标签内的标签有用
$(':text')	// 相当于 $('input[type='text']')
S.fn.init [input, prevObject: S.fn.init(1)]

$(':password')	// 相当于 $('input[type='password']')
S.fn.init [input#i1, prevObject: S.fn.init(1)]

// 注意          
$(':checked')	// 会将 checked 和 selected 全部拿到
S.fn.init(2) [input#c2, option, prevObject: S.fn.init(1)]

$(':selected')	// 只拿 selected
S.fn.init [option, prevObject: S.fn.init(1)]

$('input:checked')	// 自己加一个 限制条件 只会将 checked拿到
S.fn.init [input#c2, prevObject: S.fn.init(1)]

筛选器方法

$('#d1')
S.fn.init [span#d1]
$('#d1').next()	// 同级别下一个
S.fn.init [span, prevObject: S.fn.init(1)]
$('#d1').nextAll()	// 同级别下面全部
S.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: S.fn.init(1)]
$('#d1').nextUntil('.c1')	// 同级别下面直到 '.c1' 且不包含'.c1'
S.fn.init(4) [span, div#d2, span, span, prevObject: S.fn.init(1)]
             
$('.c1')
S.fn.init [span.c1, prevObject: S.fn.init(1)]
$('.c1').prev()	// 同级别前一个
S.fn.init [span, prevObject: S.fn.init(1)]
$('.c1').prevAll()	// 同级别前面全部
S.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: S.fn.init(1)]
$('.c1').prevUntil('#d2')	// 同级别往前 直到 id = d2 的标签 且不包含 d2 标签
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]0: span1: spanlength: 2prevObject: S.fn.init [span.c1, prevObject: S.fn.init(1)]__proto__: Object(0)

$('#d3')
S.fn.init [span#d3]
$('#d3').parent()	// 第一级父标签
S.fn.init [p, prevObject: S.fn.init(1)]
$('#d3').parent().parent()
S.fn.init [div#d2, prevObject: S.fn.init(1)]
$('#d3').parent().parent().parent()
S.fn.init [body, prevObject: S.fn.init(1)]
$('#d3').parent().parent().parent().parent()
S.fn.init [html, prevObject: S.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
S.fn.init [document, prevObject: S.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
S.fn.init [prevObject: S.fn.init(1)]
$('#d3').parents()	// 所有父标签
S.fn.init(4) [p, div#d2, body, html, prevObject: S.fn.init(1)]
             
$('#d3').parentsUntil('body')	// 儿子标签
S.fn.init(2) [p, div#d2, prevObject: S.fn.init(1)]
$('#d2').siblings()		// 同级别上下所有
S.fn.init(5) [span#d1, span, span, span, span.c1, prevObject: S.fn.init(1)]

            // 下述两两等价
// 查找 div标签下的所有 p 标签             
$('div p')
S.fn.init [p, prevObject: S.fn.init(1)]
$('div').find('p')		// 从某个区域内筛选出想要的标签 
S.fn.init [p, prevObject: S.fn.init(1)]

// 找到div中的第一个span标签
S.fn.init [p, prevObject: S.fn.init(1)]
$('div span:first')
S.fn.init [document]__proto__: Object(0)
$('div span').first()
// 找到div中的最后一个span标签
S.fn.init [span, prevObject: S.fn.init(1)]
$('div span:last')
S.fn.init [span, prevObject: S.fn.init(3)]
$('div span').last()
S.fn.init [span, prevObject: S.fn.init(3)]
// 找到div中除了 id 为 d3 的所有 span 标签
$('div span:not("#d3")')
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]0: span1: spanlength: 2prevObject: 
$('div span').not('#d3')
S.fn.init(2) [span, span, prevObject: S.fn.init(3)]

样式操作

操作类

"""
	js版本							jQuery版本
	classList.add()						addClass()
	classList.remove()					removeClass()
	classList.contains()				hasClass()
	classList.toggle()					toggleClass()
"""

css操作

<p>111</p>
<p>222</p>
"""一行代码将第一个p标签的颜色变成红色 第二个变成绿色"""
$('p').first().css("color", "red").next().css("color", "green")
# 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.func1().func2()

位置操作

(起手标签对象) eg: $('p').offset()
offset()  # 相对于浏览器窗口的距离
position() # 相对于父标签的距离
scrollTop() # 获取右侧滚动条距离顶部的距离
scrollTop(0) # 到达 距离顶部 0 距离的位置
scrollLeft() # 下侧滚动条距离左侧的距离

尺寸操作

(起手标签对象) eg: $('p').height()
height()  # 文本的高度
width()
innerHeight() # 文本 + padding 的高度
innerWidth()
outerHeight()  # 文本 + padding + border 的高度
outerWidth()

文本操作

"""
	js					jQuery
	innerText			text()		 括号内不加参数就是获取标签内容
	innerHtml			html()		括号内加参数就是设值
"""

获取值操作

"""
	js  			jQuery
	.value			val()  括号内不加参数就是获取, 加了参数就是设值
注意:
	文件对象获取, jQuery没有特别的方法
		$('f1')[0].files[0]		转换为原生 js 对象 利用其方法获取
"""

属性操作

"""
	js 中						jQuery
	setAttribute()					attr(name, value)
	getAttribute()					attr(name)
	removeAttribute()				removeAttr(name)
	
	在用变量存储对象的时候 js中推荐使用
		XXXEle		标签对象
	jQuery 中推荐使用
		$XXXEle 	jQuery对象
		let $d1Ele = $('#d1')
	
    <input type="checkbox" name="hobbies" value="sing" id = "d1"> sing
    <input type="checkbox" name="hobbies" value="swim" checked id = "d2"> swim
    <input type="checkbox" name="hobbies" value="game" id = "d3">game
    
    $('#d2').prop('checked')
    true
    $('#d1').prop('checked')
    false
    $('#d2').prop('checked', false)
    $('#d2').prop('checked')
    flase
    
    总结:
    	对于标签上有的能够看到的属性和自定义属性的用 attr
    	对于返回布尔值 比如 checkbox radio option 是否被选中 用 prop
"""

文档处理

"""
		js								jQuery
		createElement('p')				&('<p> ')
		appendChile()					append()
"""

let $pEle = $('<p>')
$pEle.text("hello world")
$pEle.attr('id','p1')

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

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

$('#d1').after($pEle)		// 在某标签的后面追加
👆 等效 👇
$pEle.insertAfter($('#d1'))

$('#d1').before($pEle)		// 在某标签的前面追加
👆 等效 👇
$pEle.insertBefore($('#d1'))

$('#d1').empty() 	// 清空标签内部的所有内容
效果与 $('#d1').HTML("") 等效 但是👆的语义更加明确

$('#d1').remove 	// 将标签从DOM树中删除

事件

绑定事件的方式

	// jQuery绑定事件第一种方式
    $('#b1').click(function (){
        alert("Don't speak, kiss me")
    })
    // jQuery绑定事件第二种方式(功能更加强大, 还支持事件委托)
    $('#b1').on('click', function (){
        alert("hello world")
    })
    // 原生 js
    document.getElementById('#b2').onclick = function (){
        alert("Don't speak, kiss me")
    }

克隆事件

<button id="b1">点击复制, 点的越多送的越多</button>
<script>
    $('#b1').on('click', function (){
        // alert(this)  // this  的是当前被操作的标签对象
        // $(this).clone().insertAfter($('body'))  // clone 默认值克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($(this))    // clone 加 true 就可以克隆事件
    }) 
</script>

模态框

<head>
	<style>
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 99;
        }

        .modal {
            position: fixed;
            width: 400px;
            height: 600px;
            top: 50%;
            left: 50%;
            margin-top: -300px;
            margin-left: -200px;
            background: white;
            z-index: 100;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div>我是最下面的</div>
    <div class="cover hide"></div>
    <div class="modal hide">
        <p>username: <input type="text"></p>
        <p>password: <input type="text"></p>
        <input type="button" value="cancel" id="b2">
    </div>
    <input type="button" value="confirm" id="b1">
    <script>
        let $coverEle = $('.cover')
        let $modalEle = $('.modal')
        $('#b1').on('click', function (){
            $coverEle.removeClass('hide')
            $modalEle.removeClass('hide')
        })
        $('#b2').on('click', function (){
            $coverEle.addClass('hide')
            $modalEle.addClass('hide')
        })
    </script>
</body>

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../lib/jQuery%20v3.6.0.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .left {
            float: left;
            width: 30%;
            height: 100%;
            position: fixed;
            background: orange;
        }
        
        .title {
            font-size: 36px;
            color: red;
            text-align: center;
        }
        
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="title">菜单一
        <div class="items">111</div>
        <div class="items">222</div>
        <div class="items">222</div>
    </div>
    <div class="title">菜单二
        <div class="items">111</div>
        <div class="items">222</div>
        <div class="items">222</div>
    </div>
    <div class="title">菜单三
        <div class="items">111</div>
        <div class="items">222</div>
        <div class="items">222</div>
    </div>
</div>
<script>
    $('.title').on('click', function () {
        $(this).children().toggleClass('hide')
    })
    $('.title').not(this).children().toggleClass('h')
</script>
</body>
</html>

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../lib/jQuery%20v3.6.0.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
        }

        .hide {
            display: none;
        }

        #a1 {
            width: 40px;
            height: 40px;
            background-color: black;
            float: right;
            bottom: 15%;
            right: 10%;
            position: fixed;
        }
    </style>
</head>
<body>
<a href="" id="a2"></a>
<div style="height: 500px; background-color: red" id="d1"></div>
<div style="height: 500px; background-color: greenyellow"></div>
<div style="height: 1000px; background-color: white"></div>
<a href="#d1" id="a1" class="hide">return to top</a>

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

登录校验 + input 实时监控

<body>
<p>username:
    <input type="text" id="username" >
    <span style="color: red" class="hide">用户名能为空</span>
</p>
<span style="color: blue"></span>
<p id="p_pwd">password:
    <input type="password" id="password" >
    <span style="color: red" class="hide">密码不能为空</span>
</p>
<button id="b1">commit</button>

<script>
    let $username = $('#username')
    let $password = $('#password')
    $('#b1').on('click', function () {
        let username = $username.val()
        let password = $password.val()
        if (!username) {
            $username.next().removeClass('hide')
        }
        if (!password) {
            $password.next().removeClass('hide')
        }
    })
    // 当鼠标点击其他位置且input内有更改时 触发
    // $('input').change(function () {
    //     $(this).next().addClass('hide')
    // })
    // input 实时监控
    $('input').on('input', function (){
        console.log($(this).parent())
        if (this.value){
            $(this).next().addClass('hide')
        }
        if (this.value.length < 6) {
            $(this).parent().next('span').text("username长度应该大于等于6位")
        } else {
            $(this).parent().next().text("")
        }
    })
</script>
</body>

hover事件

<body>
<p id="p1">welcome to hotel</p>
<p id="p2">welcome to Canteen</p>
<script>
    $('#p1').hover(function (){ // 鼠标悬浮 + 鼠标移开
        alert('132')
    })

    $("#p2").hover(function (){
        alert("I'm coming")     // 悬浮
    }, function (){
        alert("I'm off")        // 移开
    })
</script>
</body>

键盘按键按下事件

<script>
    $(window).keydown(function (event) {
        console.log(event.which)
        if (event.which === 16){
            alert('click the shift')
        }
    })
</script>

阻止后续事件

<form action="">
    <span id="s1" style="color: red"></span>
    <input type="submit" id="i1">
</form>
<script>
    $("#i1").on('click', function (e) {
        $('#s1').text('baby, could you see me')
        // 阻止标签后续事件的执行 方法一 更方便
        // return false
        // 阻止标签后续事件的执行 方法二
        e.preventDefault()
    })
</script>

阻止冒泡事件

<body>
<div id="d1">div
    <p id="p1">div>p
        <span id="s1">span</span>
    </p>
</div>
<!--若不阻止事件冒泡
    当点击span标签的时候
    会弹出 三个 alert 提示框
    span会逐级往上报告
-->
<script>
    $('#d1').on('click',function (){
        alert('div')
    })
    $('#p1').on('click',function (e){
        alert('p')
        // 阻止事件冒泡的方式2
        e.stopPropagation()
    })
    $('#s1').on('click',function (){
        alert('span')
        // 阻止事件冒泡的方式1
        return false
    })
</script>
</body>

事件委托

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

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

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

页面加载

<script>
  window.onload = function (){
      // js codes
  }
  // jQuery等待页面加载完毕
  // 第一种方法
  $(document).ready(function (){
      // js codes
  })
  // 第二种方法
  $(function (){
      // js codes
  })
  // 第三种方法 推荐使用
  // 直接写在body的最下面
</script>

补充: each

// 第一种使用方式
$('div').each(function(index){console.log(index)})
VM50:1 0
VM50:1 1
VM50:1 2
VM50:1 3
VM50:1 4
S.fn.init(5) [div, div, div, div, div, prevObject: S.fn.init(1)]
$('div').each(function(index, obj){console.log(index, obj)})
VM133:1 0 <div>​1​</div>​
VM133:1 1 <div>​2​</div>​
VM133:1 2 <div>​3​</div>​
VM133:1 3 <div>​4​</div>​
VM133:1 4 <div>​5​</div>​
S.fn.init(5) [div, div, div, div, div, prevObject: S.fn.init(1)]
// 第二种使用方式
$.each([111,222,333], function(index, obj){console.log(index, obj)})
VM265:1 0 111
VM265:1 1 222
VM265:1 2 333
(3) [111, 222, 333]
// 总结
// 有了 each 之后, 就无需自己写for循环了 用它更加的方便 

补充: data()

// 能够让标签帮我们存储数据 并且用户看不到
$('div').data('info', 'come back, i forgive you')
S.fn.init(5) [div, div, div, div, div, prevObject: S.fn.init(1)]
$('div').first().data('info')
'come back, i forgive you'
$('div').last().data('info')
'come back, i forgive you'
$('div').last().removeData('info')
S.fn.init [div, prevObject: S.fn.init(5)]
$('div').last().data('info')
undefined