jQuery相关知识

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方法可以清除动画队列。