JQuery
jQuery
jQuery介绍
jQuery说明
-
jQuery内部封装了原生的JS代码（还额外添加了很多功能）
-
能让我们通过书写更少的代码来完成js操作
-
类似于Python里面的模块，在前端不叫模块，称为“类库”
-
兼容多个浏览器，在使用jQuery的时候不需要考虑浏览器兼容问题
-
jQuery的宗旨
- write less do more
- 让你用更少的代码完成更多的事
jQuery导入
- 下载到本地，借助pycharm的辅助功能完成自动添加
- 配置 --> 编辑 --> file and code template
-
直接引入jQuery提供的CDN服务（基于网络直接请求加载）
- CDN：内容分发网络
<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')
@选择器筛选器@
基本选择器
$("#d1") // id选择器 找到所有id为d1的标签
$('.c1') // 类选择器 找到所有类为c1的标签
$('div') // 标签选择器 找到所有的div标签
$('div.c1') // 配合使用 找到所有class为c1的div标签
$('div#d1') // 配合使用 找到所有id为d1的div标签
$('*') // 所有元素选择器 找到所有的标签
$('div, .c1, #d1') // 组合选择器 找到所有的的div标签，类为c1的，id为d1的标签
#一定要区分开(重点)
// jQuery对象如何变成标签对象
$('#d1')[0] // <div id="d1"></div>
document.getElementById('d1') // <div id="d1"></div>
// 标签对象如何转jQuery对象
$(document.getElementById('d1')) // w.fn.init [div#d1]
层级选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]
# 内置的属性
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
表单筛选器
$('input[type="text"]')
$('input[type="password"]')
$(':text') // 与第一个等价
$(':password') //与第二个等价
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
# 表单对象属性
:enabled // 找到可用的标签
:disabled
:checked
:selected // 找到所有被选中的option
# 特殊情况
$(':checked') // 它会将checked和selected都拿到
$(':selected') // 它不会 只拿selected
$('input:checked') // 自己加一个限制条件
筛选器方法
# 下一个
$("#d1").next() // 返回同级别下 d1 后面的一个标签
$("#d1").nextAll() // 返回同级别下 d1 后面所有的标签
$("#d1").nextUntil("#i2") // 返回同级别下 d1 之后，d2 之前的所有标签
# 上一个
$("#d1").prev() // 返回同级别下 d1 前面面的一个标签
$("#d1").prevAll() // 返回同级别下 d1 前面所有的标签)
$("#d1").prevUntil("#i2") // 返回同级别下 d1 之前，d2 之后的所有标签
# 父类
$("#d1").parent() // 查找 d1 的父元素（一个）
$("#d1").parents() // 查找 d1 的所有的父辈（祖先）元素
$("#d1").parentsUntil("#d2") // 返回介于 d1 与 d2 之间的所有祖先元素
# 子类和兄弟类
$("#id").children();// 儿子们(下面一个级别的所有，不包括下下级别的)
$("#id").siblings();// 兄弟们 同级别的所有，不包括自己
# 查找
$("div").find("p") //找到div内的所有p标签 等价于$("div p")
# 筛选
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，等价于 $("div.c1")
# 其他
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
# 下述两两等价
$('div span:first')
$('div span').first()
$('div span:last')
$('div span').last()
操作标签
样式操作
# 操作class
.addClass(); // 添加指定的类名
.removeClass(); // 移除类
.hasClass(); // 判断是否存在
.toggleClass(); // 有则删除，无责添加
# 操作css样式
.css('color',red) // 将文本颜色设置为红色 等同于js中的 .style.color='red'
位置操作
# 位置
.offset() //相对于浏览器窗口的位置
.position() //相对于父标签的位置
.scrollTop() //相对页面顶部的偏移，可用于添加返回顶部按钮上
.scrollLeft() // 相对于页面左侧的偏移
# 尺寸
.height() // 单单内容的高度
.width()
.innerHeight() // 内容 + padding
.innerWidth()
.outerHeight() // 内容 + padding + border
.outerWidth()
文本操作
# 文本内容
.text() // 传值代表设置，不传值代表获取
# 文本+标签
.heml()
# 值
.val()
属性操作
.attr(name) // 返回标签属性为name的值
.attr(name,value) // 为标签设置 name = value 一个属性值
.attr(k1:v1, k2:v2) // 为标签设置多个属性值
.removeAttr(name) //删除一个属性
# 用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
文档处理
# 内部尾部追加
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
# 内部首部追加
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
# 追加到后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
# 追加到前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
# 移除和清空
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
# 替换
replaceWith()
replaceAll()
事件
// 事件的两种书写方式
# 第一种
$('#d1').click(function(){
alert('点击')
});
# 第二种(功能更强大，还支持事件委托)
$('#d1').on('click',function*(){
alert('点击')
});
克隆事件
<!-- .clone() 将标签克隆一份 -->
<button id="d1" style="height: 50px;width: 70px">屠龙宝刀 点击就送</button>
<script>
$('#d1').on('click',function () {
// $(this).clone().insertAfter($(this)) // 默认不克隆事件，只克隆html和css
$(this).clone(true).insertAfter($(this))
});
</script>
左侧菜单
<!--编写说明：写一个将标签隐藏的类，点击菜单后将所有的子菜单添加上标签隐藏类，再将所点击的菜单的子菜单的标签隐藏属性删除-->
<script>
$('.title').click(function () {
// 先给所有的items加hide
$('.items').addClass('hide')
// 然后将被点击标签内部的hide移除
$(this).children().removeClass('hide')
});
</script>
返回顶部
<script>
$(window).scroll(function () {
if ($(window).scrollTop()>window.innerHeight){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
</script>
自定义登录校验
<p>username:<input type="text" id="username"><span style="color: red"></span></p>
<p>password:<input type="password" id="password"><span style="color: red"></span></p>
<button id="btn1">登录</button>
<script>
// 点击按钮时获取并判断输入的内容
$('#btn1').on('click',function () {
let username = $('#username').val()
let password = $('#password').val()
console.log(username)
console.log(password)
if (!username){
$('#username+span').text('密码不能为空')
}
if (!password){
$('#password+span').text('密码不能为空')
}
})
// 当输入框获得焦点时去除提示
$('input').focus(function (){
$(this).next().text('')
})
</script>
input内容实时监控
<input type="text" id="i1">
<script>
$('#i1').on('input',function () {
console.log(this.value)
})
</script>
hover事件
<input type="text" id="i1">
<script>
$('#i1').hover(function () {
console.log('悬浮')
},function () {
console.log('移走')
})
/*$('#i1').on('mouseenter mouseleave',function (e) {
if (e.type == 'mouseenter'){
console.log('悬浮')
}else if (e.type == 'mouseleave'){
console.log('移走')
}
});*/
</script>
监听键盘按键
<script>
$(window).keydown(function (event) {
console.log(event.keyCode) // 得到的是编码
if (event.keyCode === 16){
alert('你按了shift键')
}
})
</script>
阻止后续事件执行
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?')
// 阻止标签后续事件的执行 方式1
// return false
// 阻止标签后续事件的执行 方式2
// e.preventDefault()
})
</script>
### 阻止事件冒泡
```html
<!--事件冒泡：执行当前标签的点击事件后会查看父级标签是否也有点击事件，如果有就相当于同时点击了父标签-->
<div id="d1">div
<p id="d2">p
<span id="d3">span</span>
</p>
</div>
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
### 事件委托
```html
<button>是兄弟，就来砍我!!!</button>
<script>
// 给页面上所有的button标签绑定点击事件
// $('button').click(function () { // 无法影响到动态创建的标签
// alert(123)
// })
// 事件委托
$('body').on('click','button',function () {
alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
})
</script>
### 页面加载
```js
# 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
直接写在body内部最下方
动画效果
$('#d1').hide(5000)
$('#d1').show(5000)
$('#d1').slideUp(5000)
$('#d1').slideDown(5000)
$('#d1').fadeOut(5000)
$('#d1').fadeIn(5000)
$('#d1').fadeTo(5000,0.4)
each、data
# each() 建议版本的for循环，
# 第一个参数是索引，第二个参数是对应的对象
# 第一种用法
$('div').each(function(index){console.log(index)})
$('div').each(function(index,obj){console.log(index,obj)})
0 <div>1</div>
1 <div>2</div>
2 <div>3</div>
3 <div>4</div>
# 第二种用法
$.each([111,222,333],function(index,obj){console.log(index,obj)})
0 111
1 222
2 333
# data() 能让标签帮我们存储数据，在浏览器里看不见的数据
$('div').data('info','回来吧，我原谅你了!')
# 给前面的对象加上 'info'='回来吧，我原谅你了!'
$('div').first().data('info')
# 取出前面对象列表第一个的info对应的值
$('div').last().data('info')
# 取出最后一个的值
$('div').first().removeData('info')
# 删除第一个的info对应的值
浙公网安备 33010602011771号