文章目录
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