jQuery
jQuery是一个js的库文件(免费),将一些插件集合到一起,形成一个全功能的大型插件就叫做库文件。
jQuery在库文件中属于小型化的库(精简)、extjs。
文档加载完成时
外部的js文件最好在body标签的内部的最后引入,但是,为了防止使用时在body之前引入,我们的js代码应该放在文档就绪事件中。
js的就绪事件load:
window.onload = cb;
window.addEventListener('load',cb);
jq:
$(window).ready(cb);
$(cb);
cb:callBack回调函数。
jq的ready事件是自己封装的(原生js没有)。jq的ready和js的load之间的区别:
load事件会等待文档及外部资源(图片、媒体)都加载完成才会触发。
ready事件只等待文档加载完毕就会触发。
如果两个同时存在,总是ready先触发。
jQuery的链式操作
原生js转jq元素结合:
const abc = document.querSelector('li');
$(abc)
任何形式的dom,用$()就可以转为jq元素集合
jq元素集合转原生js的dom:
多对多
jqArrLi.toArry()
将jq的元素集合转为数组形式的原生js的dom对象。
多对一:
jqArrLi.get(index);
jqArrLi[index];
jq的链式操作总是有一个jq的元素集合发起的。
选择器
jq的选择器:$(选择器)
jq的选择器支持所有的css的选择器
jq自己的选择器规则:
:first :last 脱离文档结构,在jq元素的集合中选择第一个和最后一个。
:odd :even 脱离文档结构,在jq元素的集合中选择索引值为奇数或偶数的元素。
:eq(index) 脱离文档结构,在jq元素的集合中选择索引值为index的元素。
:gt(index) :lt(index) 脱离文档结构,在jq元素的集合中选择索引值大于或者小于的所有元素。
:header 选择所有的h1、h2、.....h6
:input 所有的表单元素
:text :password .... type类型为text、password、...的input元素
:enabled :disabled 所有启用的、禁止的表单元素
:selected :checked 选中项
:root 选中根元素(html)
:empty :parent 选择所有的空元素、非空元素
:contains(字符串) 选择所有包含字符串的元素。
:has(选择器) 选择包含A选择的元素的元素。
筛选操作
jq的方法分为:改变元素集合、不改变元素集合
jq选择元素后,通常还需要做进一步筛选。
first() 选择元素集合中的第一个。
last() 选择元素集合中的最后一个。
eq(index) 选择元素集合中,指定索引值对应的元素。
slice(stratindex,endindex) 选择元素集合中,索引值处于开始和结束索引之间的所有元素。
filter(selector) 选择元素集合中,符合选择器的元素。
not(selector) 选择元素集合中,不符合选择器的元素。
add(selector | jq元素集合 | js的dom节点) 为元素集合新增元素。
end() 取消最后一次对jq元素集合所做的改变。
节点的操作
创建:
jq创建节点的方法是,直接使用$()包裹html代码(文本),或者$()包裹js dom 结构
const li = $('<li>');
const li = $('<li>sdsd</li>');
const li = $('<li><a href="sad">fdfsd</a></li>')
插入
插入到子节点最后(谁发起,链式操作就传递谁)
父元素.append(新的) 新的.appendTo(父元素)
插入到子节点最前(谁发起,链式操作就传递谁)
父元素.prepend(新的) 新的.prependTo(父元素)
插入到参照节点之前(谁发起,链式操作就传递谁)
参照节点.before(新的) 新的.insertBefore(参照节点)
插入到参照节点之后(谁发起,链式操作就传递谁)
参照节点.after(新的) 新的.insertAfter(参照节点)
移除
remove() 移除元素
empty() 将元素变为空元素
克隆
clone(WithDateAndEvents,deepWithDateAndEvents)
元素自身、属性、子孙节点是一定会被克隆的
参数1控制的是元素的数据(jq附加的数据)及事件(jq的事件)是否被克隆。
参数2控制的是子孙节点的数据(jq附加的数据)及事件(jq的事件)是否被克隆。
原生js的事件肯定不会被克隆的。
作为对比:
DOM的克隆,元素自身、属性一定会被克隆的,事件一定不会被克隆的。
参数控制的:子孙节点是否被克隆。
替换
旧的.replaceWith(新的)
新的.replaceAll(旧的)
节点的遍历
向上遍历
parent(selector) 选择所有的父级元素
parents(selector) 选择所有的祖先级元素
parentsUntil(selector) 选择所有的祖先元素,直到(不包含)选择器选择的祖先级元素为止。
同胞遍历
prev(selector) 选择前一个同胞元素
prevAll(selector) 选择之前所有同胞元素。
prevUntil(selector) 选择之前所有的同胞元素,直到selector元素为止(不包含)。
next(selector) 选择后一个同胞元素。
nextAll(selector) 选择之后所有的同胞元素。
nextUnti(selector) 选择之后所有同胞元素,直到selector元素为止(不包含)。
siblings(selector)选择所有的同胞元素(除了自身)。
向下遍历
children(selector) 选择所有的子元素
find(selector) 选择所有的符合selector条件的子孙元素(参数为空则什么也不选择)。
属性操作
通用属性操作
读取时,可以使用attr()方法:
$('h1').attr(属性操作)
返回首个元素的属性的值。
设置时:
$('h1').attr(属性名称,属性的值);
$('h1').attr({
属性名称1:值,
属性名称2:值,
})
$('h1').attr(属性名称,function(index.原有的属性值){
return 要设置的新的值
})
要移除属性时:
$('h1').removeAttr(属性名称);
表单
//读取
元素.val()
//设置时
元素.val(值);
prop()方法用法类似于attr,但是,读取或设置的是元素浏览器解析后的属性(类似于getComputedStyle());经常用来读取或设置表单元素的只读、禁用、选中、选定:
//读取
元素.prop('checked')
//设置
元素.prop('checked',true);
元素.prop({
'checked':true,
'readonly':true,
})
元素.prop('checked',function(index,oldAttr){
return 新的值
})
css样式
class属性操作
//添加
元素.addClass('aaa bbb');
//移除
元素.removeClass('aaa bbb');
//判断
元素.hasClass('aaa bbb');//判断元素是否同时具有aaa和bbb
//切换
元素.toggleClass('aaa bbb');//切换时,jq会依次判断每个需要切换的样式类。
//当切换时,先判断aaa,再判断bbb,如果没有则添加,如果有则移除。
css的方法读取的时(经过计算后的值)
数据
数据可以当作不在属性中显示的属性:
//读取
元素.data(名称);
//设置
元素.data(名称,值);
元素.data({});
//移除
元素.removeData(名称);
元素.removeData([名称1,名称2]);
数据的值可以时任何类型。
尺寸和位置
获取、设置元素尺寸的方法:
width() height() 读取或设置元素自身(不包括内边距、边框、外边距)的尺寸。
innerWidth() innerHeight() 读取或设置元素自身+内边距的尺寸。
outerWidth() outerHeight() 读取或设置元素自身+内边距+边框的尺寸。
outerWidth(true) outerHeight(true) 读取或设置元素自身+内边距+边框+外边距的尺寸。
位置(偏移值)
offset()可读可写,读取或设置元素相对于文档的偏移值。
元素.offset() //返回一个对象{left,top}
用来设置时,jq会为元素自动加入定位属性来移动元素:
元素.offset({left,top})
元素.offset(function(index,oldCoords){
return {
left,top
}
})
position() 只读,读取元素相对于定位参照元素的偏移值:
元素.position();//返回对象{left,top}
offsetParent() 返回对应定位参照元素的偏移值:
元素.position()相对 元素.offsetParent()的偏移值
元素.offsetParent() //返回当前元素的定位参照元素
滚动
取值:
原生js取浏览器的滚动位置:
let scrollTop = 0;
scrollTop = window.document.documentElement.scrollTop || window.document.body.scrollTop;
取元素
元素.scrollTop
元素.scrollLeft
设置:
window.document.documentElement.scrollTop = 400;
window.scrollTo(0, 400);
window.scrollBy(0, 400);
$(window).scrollTop(400);
$(window).scrollLeft(400);
可以读取和设置
内容
jq封装了html()和text()
在获取时,如果元素集合超过一个元素:
html()获取的是首个元素的内容。text()获取的是所有元素的文本。
html()和text()在设置时,都是设置所有元素的内容。
事件
on()、one()、off()
on方法用来绑定事件:
元素.on(事件名称,回调函数)
事件名称一次可以附加多个事件名称:
$('li').on('click mouseenter',a);
one()用法和on一致,只不过one附加的方法只触发一次就会移除自己。
要移除事件及处理哈桑农户使用off方法“
元素.off(事件名称,回调函数); //移除元素指定事件的指定处理函数
元素.off(事件名称) //移除元素指定事件的所有处理函数。
元素.off() //移除元素的所有事件的处理函数
jq的事件委托:
已存在的祖先元素.on(事件名称,选择器,callback);
$(':root').on('click', 'li', function () {
console.log(456);
})
上代码表示在根元素上附加事件click的委托,只有在根元素下的li才会触发这个事件。
$(':root').one('click', 'li', function () {
console.log(456);
})
使用one做事件委托时,是所有被委托的元素共享一次触发的机会。
要移除事件委托:
$(':root').off('click', 'li')
移除时,事件附加给哪个元素,移除也要从这个元素开始,参数保持和附加时一致。
jq主动触发事件:
元素.click()、元素.trigger('click') 真实触发(类似于dom的 元素.click())
元素.triggerHandler('click') 不真实触发,只执行于事件关联的默认动作(类似于dom的 元素.onclick())
原生的dom的事件jq也可以触发。
$('li').on('click',cb);
$('li').click(cb);
对于mouseenter和mouseleave事件,jq封装了一个hover方法:
$('li').mouseenter(function (e) {
$(e.target).css({ backgroundColor: 'yellow' })
})
$('li').mouseleave(function (e) {
$(e.target).css({ backgroundColor: 'transparent' })
})
//合并为
$('li').hover(function (e) {
$(e.target).css({ backgroundColor: 'yellow' })
}, function (e) {
$(e.target).css({ backgroundColor: 'transparent' })
})
事件补充:
resize事件,在浏览器窗口的尺寸发生改变时触发。
动画
所有的动画(除了show、hide)的默认执行时间:200(fast)、400(normal)、600(slow)
内置动画
显示/隐藏
show()、hide()、toggle()
默认动画的执行时间为0,可以用来直接隐藏或显示元素。
是改变尺寸和透明度。
卷动
slieDown()、slideUp()、slidetoggle()
淡入淡出
fadeIn()、fadeOut()、fadeToggle()
fadeTo(1000,5)让透明度直接变化到第二参数指定的值,同时会修改fade系列方法的透明度上限。
动画控制
jq的动画必须绑定一个元素才能执行。
jq的动画是以动画队列(数组)的方式来保存的。
stop(是否清除动画队列,是否立即跳转到动画结束状态)
是否清除动画队列:当执行stop方法的时候,当前执行片段已经不在队列当中了。
是否立即跳转到动画的结束状态:默认false,动画停止的时候会保持当前状态,true表示立即结束动画状态。
自定义动画
默认的,颜色动画不支持所有的单一区间都是支持的。
animate(css对象,动画执行的事件,动画速度曲线,回调函数);
delay(毫秒) 等待是一个动画片段,并不能代替js的settimeout的控制。
动画队列
除了默认队列之外,我们还可以自定义动画队列,自定义的动画队列默认不会自动执行,需要我们手动控制。
动画队列的本质是函数数组:
const 剧本=[
function(){},
function(){},
function(){},
]
剧本需要附加到元素之上才可以被控制:
$(':root').queue(剧本名称,剧本);
queue()作用很多:
queue(队列名称,函数数组) 表示将函数数组附加到元素之上,以动画队列的方式,队列名称是第一个参数。
queue(队列名称) 返回当前队列的内容
queue(队列名称,函数) 在当前队列中新增一个片段
queue(队列名称,数组) 用新的数组替换之前的队列数组
要让动画队列执行:
$(':root').dequeue(队列名称);
dequeue方法类似于数组的shift()(),从队列中的最开始位置移除一个片段并运行这个被移除的片段。
$(':root').clearQueue(队列名称);
clearQueue方法可以清除动画队列。