内容概要
前端类库之jQueryjQuery查找标签jQuery操作节点jQuery绑定 时间jQuery知识补充
内容详细
jQuery简介
宗旨:Write less, do more.
内部封装了js代码 使编程更加简单并且兼容所有的主流浏览器
版本:1.x 2.x 3.x # 可以使用3.x最新版
第三方类库:使用它需要提前导入 # 很容易遗忘
jQuery下载
压缩之后的版本将很多变量名全部使用英文字母代替了
本地导入
缺点:在于需要提前下载文件
优点:在于不会收到网络的影响
CDN导入
# CDN:内容分发网络
网站:bootcdn jQuery最好使用3.4.1版本
基本使用
很多时候jQuery都是一行代码搞定所有
"""
使用jQuery需要有关键字声明
jQuery === $
"""
基本选择器
"""
如何通过变量名来区分指代的是何种对象
eg:
如果是原生的js对象
var pEle = ...
如果是jQuery的对象
var $pEle = ...
"""
$('#d1') # document.getElementById('d1')
$('.c1') # document.getElementsByClassName('c1')
$('p') # document.getElementsByTagName('p')
$('div.c1') # 查找class含有c1的div标签
$("#d1, .c1, p") # 并列查找
$("x y") // x所有的后代y(子子孙孙)
$("x > y") // x所有的儿子y(儿子)
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
基本筛选器
: first // 第一个
: last // 最后一个
:eq(index) //索引等于index的那个元素
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:ge(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 溢出所有满足not条件的标签
:has(元素选择器) // 选取所有保安一个或多个标签在内的标签(指的是从后代元素找)
属性选择器
$('[name]') # 查找包含name属性的
$('[name = "jason"]') # 查找包含name属性的并且为jason的
$('input[name = "jason"]') # 查找input中包含name属性的并且为jason的
例:
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
$(':text') # 查找属性值是text的form表单内的标签
$(':checked') # 会连同option默认的selected一起找到
筛选器方法
"""
使用原生js代码批量查找到标签之后 结果是一个数组
需要索引取值之后才可以调用标签的一些方法
使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
不需要索引取值 就可以直接调用封装的方法
两者对象的转换
js对象转jQuery对象
$(js对象)
jQuery对象转js对象
jQuery对象索引取值
"""
下一个元素:
.next()
.nextAll()
.nextUntil()
例:$("#id").next()
上一个元素:
.prev()
.prevAll()
.prevUntil()
例:$("#id").prev()
父亲元素:
.parent()
.parents() // 查找当前元素的所有的父辈元素
.parentsUntil() // 查找当前元素的所有父辈元素,直到遇到匹配的那个元素为止
例:$("#id").parent()
儿子和兄弟元素:
.children() // 儿子们
.siblings() // 兄弟们
例:$("#id").children()
查找:
$("div").find("p") // 搜索所有与指定表达式匹配的元素
节点操作
# 样式类操作
addClass() # classList.add() // 添加指定的CSS类名
removeClass() # classList.remove // 移除指定的CSS类名
hasClass() # classList.contains() // 判断样式是否存在
toggleClass() # classList.toggle() // 切换CSS类名,如果有就移除,如果没有就添加
# 样式操作
css('属性名','属性值')
# 回顶部
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
# 文本操作
text() # innerText 例:$('body').text
html() # innerHTML 例:$('body').html
val() # value
jQuery对象先转js对象之后.files
'''括号内不写参数就是获取值 写参数就是设置值'''
# 属性操作
attr # setAttribute()
'''适用于属性为静态的情况(不经常修改动态变化的)'''
prop()
$($(':checkbox')[0]).prop('checked',true) # 通过代码选择属性
"""适用于动态变化的情况 尤其是选择类标签"""
# 文档处理
append() # 内部的尾部追加元素
例:$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
prepend() # 内部的头部追加元素
例:$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
after() # 同级别下面添加元素
例:$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
before() # 同级别上面添加元素
例:$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
remove() # 移除当前元素
例:remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
empty() # 清空当前元素内部所有的数据
clone() # 克隆标签 括号内可以加布尔值来明确是否克隆事件
事件
绑定事件的两种方式
方式1
jQuery对象.事件名(function(){})
$('#d1').click(function(){alert(123)})
方式2
jQuery对象.on('事件名',function(){})
$('d1').on('click',function(){alert(123)})
"""
有时候绑定事件可能没有效果 这个时候可以考虑切换绑定方式
方式1不行就方式2
方式2不行就方式1
"""
click(function(){...}) # 单机
hover(function(){...}) # 悬浮
blur(function(){...}) # 移除
focus(function(){...}) # 聚焦
change(function(){...}) # 文本域
keyup(function(){...}) # 某个按键抬起
keydown(function(){...}) # 某个按键按下