jQuery

j就是 JavaScript；Query 查询； 意思就是查询js，把js中的DOM操作做了封装

版本介绍

1x ：兼容 IE 678 等低版本浏览器， 官网不再更新

2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新

3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本

基本操作

入口函数

$(function () {
    ....
});

不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码

window.onload 和 $(function) 区别

• window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
• $(function)可以定义多次的。

jQuery中的顶级对象$

$是 jQuery 的别称，在代码中可以使用 jQuery 代替

$是jQuery的顶级对象，相当于原生JavaScript中的 window

1. 用原生 JS 获取来的对象就是 DOM 对象

2. jQuery 方法获取的元素就是 jQuery 对象。

3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）

4. jq对象 -- > dom对象 : jq对象[索引] 或者 jq对象.get(索引)

var domObject1 = $('div')[0]
var domObject2 = $('div').get(0)

• dom对象 -- > jq对象 : $(js对象)

var jQueryObject = $(box);

事件绑定

$("div").click(function () {
    alert("click");
});

选择器

类型	语法	作用

•        | 基础选择器                | -
  

标签选择器（元素选择器） | $("html标签名") | 获得所有匹配标签名称的元素 ID选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素 并集选择器 | $("选择器1,选择器2....") | 获取多个选择器选中的所有元素 交集选择器 | $("li.current") | 交集元素

•        | 层级选择器                | -
  

后代选择器 | $("A B ") | 选择A元素内部的所有B元素 子选择器 | $("A > B") | 选择A元素内部的所有B子元素

•        | 属性选择器                | -
  

属性名称选择器 | $("A[属性名]") | 包含指定属性的选择器 属性选择器 | $("A[属性名='值']") | 包含指定属性等于指定值的选择器 符合属性选择器 | $("A[属性名='值'][]...") | 包含多个属性条件的选择器

•        | 筛选选择器                | -
  

过滤选择器 | :first | 获得选择的元素中的第一个元素 尾选择器 | :last | 获得选择的元素中的最后一个元素 非元素选择器 | :not(selector) | 不包括指定内容的元素 偶数选择器 | :even | 偶数，从 0 开始计数 奇数选择器 | :odd | 奇数，从 0 开始计数 等于索引选择器 | :eq(index) | 指定索引元素 大于索引选择器 | :gt(index) | 大于指定索引元素 小于索引选择器 | :lt(index) | 小于指定索引元素 标题选择器 | :header | 获得标题（h1~h6）元素，固定写法 可用元素选择器 | :enabled | 获得可用元素 不可用元素选择器 | :disabled | 获得不可用元素 选中选择器 | :checked | 获得单选/复选框选中的元素 选中选择器 | :selected | 获得下拉框选中的元素

一些节点选择的辅助方法：

• 隐式迭代

$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

样式控制

• 修改简单元素样式

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");
// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

• 设置类样式

原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");

DOM操作

内容操作

• html(): 获取/设置元素的标签体内容

<a><font>内容</font></a>

$("a").html(); // <font>内容</font>

• text(): 获取/设置元素的标签体纯文本内容

<a><font>内容</font></a>

$("a").text(); // 内容

• val()： 获取/设置元素的value属性值

属性操作

• attr(): 获取/设置元素的属性(只能操作自定义属性)

var link = $("div").prop('index'); // 获取自定义属性
$("div").prop('index','xx'); // 设置自定义属性

• removeAttr():删除属性，如果操作的是元素自定义的属性，则建议使用attr
• prop():获取/设置元素的属性（只能操作固有属性）

var link = $("div").prop('href'); // 获取属性
$("div").prop('href','xx'); // 设置属性

• removeProp():删除自定义属性
• 数据缓存 data()，可以在指定的元素上存取数据，并不会修改 DOM 元素结构

$("div").data("key","value") //向元素添加数据
$("div").data("key") //获取添加的数据

节点操作

• append():父元素将子元素追加到末尾

  • 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾

• prepend():父元素将子元素追加到开头

  • 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头

• after():添加在目标元素后面

• before():添加在目标元素前面

• appendTo():

  • 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾

• prependTo():

  • 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

• after():添加元素到元素后边

  • 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系

• before():添加元素到元素前边

  • 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

• insertAfter()

  • 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

• insertBefore()

  • 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

• remove():移除元素（自身）

• empty():清空元素的所有后代元素

动画

参数：

• speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)

• easing：用来指定切换效果，默认是"swing"，可用参数"linear"

  • swing：动画执行时效果是 先慢，中间快，最后又慢
  • linear：动画执行时速度是匀速的

• fn：在动画完成时执行的函数，每个元素执行一次。

显示隐藏

• show([speed,[easing],[fn]]) 显示
• hide([speed,[easing],[fn]]) 引擎
• toggle([speed],[easing],[fn]) 切换

滑入滑出

• slideDown([speed],[easing],[fn]) 下拉
• slideUp([speed,[easing],[fn]]) 上拉
• slideToggle([speed],[easing],[fn]) 切换

淡入淡出

• fadeIn([speed],[easing],[fn])
• fadeOut([speed],[easing],[fn])
• fadeToggle([speed,[easing],[fn]])
• fadeTo([speed],opacity,[easing],[fn])

自定义动画

• animate(params,[speed],[easing],[fn])

params代表要变化的css样式

$("div").animate({height:200})

动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

• stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画

元素操作

遍历

• jq对象.each(callback)

$("div").each(function (index,element) {
    console.table(index,element);
});

回调方法传入的element是dom元素

如果当前function返回为false，则结束循环(break)。

如果当前function返回为true，则结束本次循环，继续下次循环(continue)

• $.each(object, [callback])

$.each($("div"),function (i, e) {
    console.table(i,e);
})

• for..of

ES6语法

for (let i of $("div")){
  console.log(i);
}

事件

事件绑定

标准绑定

jq对象.事件方法(回调函数)，如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。

on绑定

jq对象.on("事件名称",回调函数)

或者

  jq对象.on({
  事件1:处理函数,
  事件2:处理函数
})

// 事件触发一次后失效
jq对象.one('click',fn)

事件委托

$("div").on("click","p",function(){
  // 将子元素发生的事件委托给父元素，这样就可以实现给动态创建的元素创建点击事件
  alert('p元素触发');
})

事件解绑

// 解绑某个事件
jq对象.off("事件名称")
// 解绑所有事件
jq对象.off()
// 解绑事件委托
jq对象.off('click','a')

事件触发

jq对象.trigger("click")
// 不会触发元素的默认行为（比如input focus之后会光标闪烁，使用这个方法光标就不会闪烁）
jq对象.triggerHandler("click")

事件对象

与DOM中的event基本一致

对象拷贝

$.extend([deep],target,sourceObject,[sourceObjectN])

多库共存

// 让jquery 释放对$ 控制权 让用自己决定
var $x = jQuery.noConflict();

尺寸和位置操作

• 尺寸

// width height 获取或者设置
$("div").width();
// innerWidth innerHeight 包含padding
$("div").outerWidth();
// outerWidth outerHeight 包含padding、border,加上参数true就包含margin
$("div").outerWidth();

• 位置

// 绝对定位的偏移
$("div").offset()
// 设置
$("div").offset({
  top:0,
  left:0
})

// 获取相对于父级定位盒子的偏移,只能获取不能设置
$("div").position()

// 设置或者获取被卷去的头部
$("div").scrollTop()
// 设置或者获取被卷去的左部
$("div").scrollLeft()