jQuery

$() 方法

• 在 jQuery 中，只有一个全局变量 $, 这是 jQuery的一大特点，避免了全局变量的污染。
• 也可以使用jQuery()方法，和$方法一样。

jQuery 对象

• $() 方法获取到的内容叫做 jQuery 对象。
• 内部封装了大量的属性和方法，比如 .css() 和 .html() 和 .animate() 等方法都是 jQuery 对象的方法。
• 通过 $()方法获取的元素是一组元素，进行操作时是批量操作。
• 代码示例：

// 批量获取 p 标签，并将背景颜色修改为 pink
$("p").css("background-color", "pink") 
// 批量获取 p 标签，并将内容修改成 hello
$("p").html("hello")
// 批量获取 p 标签，并添加动画效果
$("p").animate({"width": 300}, 1000)

jQuery对象和原生 js 对象的区别

• jQuery 对象得到后，只能使用 jQuery 对象的方法，不能使用原生 js 元素对象的方法。
• 原生 JS 对象也不能使用 jQuery 的方法。
• jQuery 对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的 jQuery的方法和属性。

jQuery 对象中原生 js 对象的个数

• 通过 JQ 对象打点调用 length 属性，获取jQuery 对象中原生 js 对象的个数。
  • $().length
• 通过JQ对象，打点调用size()方法，获取 JQ 对象中原生js对象的个数。
  • $().size()

JQ 对象和原生对象的转换

• jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象。因为通过$()方法获取到的数据是一个类数组，数组中存储的是 js 原生对象，所以通过下标获取到的对象，可以使用 js 原生对象的方法。
• 原生转 jQuery对象：将原生对象用$()方法包裹即可。

// 原生对象转 jQuery 对象
let oPs = document.getElementsByTagName("p")[0];
$(oPs).css("background-color", "pink")

筛选选择器

• 筛选选择器也叫过滤选择器，jQuery中新增的自己的选择器。
• 用法：在基础选择器后面添加一些筛选的单词，筛选出前面选择器的选中内容中一部分，或者可以作为高级选择器的一部分。
• 常用选择器：

选择器	说明
$(":first")	第一个
$(":last")	最后一个
$(":eq(index)")	下标为 index 的项
$(":gt(index)")	大于下标为 index 的项
$(":lt(index)")	小于下标为 index 的项
$(":odd")	下标为奇数的项
$(":even")	下标为偶数的项
$(":not(selector)")	去除所有与给定选择器匹配的元素

筛选方法

• 筛选方法也叫过滤方法，jQuery中除了用选择器选贼元素，还封装了一些对应的筛选方法。
• 常用方法：
  • $("p").first()
  • $("p").last()
  • $("p").eq(3)

html() 方法

• html()方法相当于原生js中的 innerHTML 属性，用来获取或者设置标签内部内容。
• 方法可以传递一个参数，自定义的字符串内容。如果不传递参数，表示获取标签内部的内容。获取的时候，只能获取第一个元素内部的文案。
• 获取文本和内部标签：
  • jQuery对象.html();
• 设置标签，标签会被渲染，如果内部的字符串包含了标签语法的字符串，会按照 html 语法进行加载。
  • jQuery对象.html("文本内容");

text() 方法

• text() 方法相当于原生 js 中的 innerText 属性，用来获取或设置标签内部文字。
• 获取：仅获取文本内容，所有的文字内容都会获取。
  • 语法：jQuery对象.text();
• 设置：若设置标签时，标签会被当做普通文本
  • 语法：jQuery对象.text("文本内容");

val() 方法

• val() 方法相当于原生 js 中的 value属性，用来获取或设置表单元素内容。
• 获取：表单元素的value
  • 语法：jQuery对象.val();
• 设置：表单元素的 value，设置的时候，是批量进行修改。针对不同的表单元素，设置的效果不同。
  • 语法：jQuery对象.val("文本内容")

attr() 方法

• attr()方法，全称是attribute，属性的意思，用来获取或者设置标签的属性值。可以设置和获取本身具有的属性值，也可以设置和获取自定义添加的属性。
• 设置标签的属性：
  • 语法：jQuery对象.attr(name, value);
• 获取标签属性值
  • 语法：jQuery对象.attr(name);

removeAttr() 方法

• 移除标签的属性
• 语法：jQuery对象.removeAttr(name);

prop() 方法

• 针对 selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同。
• 获取：返回的结果是 true或者false。
  • 语法：$("input").prop("属性名");
• 设置：传递的属性值是 true或者false。
  • 语法： $("input").prop("属性名", 属性值)

css() 方法

• css()方法，用于调用css属性值或者更改css属性值。
• 语法：jQuery对象.css(name, value);
• 参数1：字符串格式的css样式属性名。
• 参数2：设置或更改的属性值。
• 注意：
  • 传递一个参数，表示调用css属性的值，得到的是某个元素的计算后样式，值为字符串格式。
  • 当传递两个参数的时候，表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果是带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
  • css() 方法的第一个参数，复合属性的单一属性写法，可以是驼峰命名法，也可以是横线写法。
  • 可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，传给 css() 的参数。

addClass() 添加类名

• 语法：jQuery对象.addClass("类名");
• 参数：字符串格式的类名。
• 只会操作指定的类名，不会影响其他类名。

removeClass() 移除类名

• 删除指定的类名，如果不传递参数，表示删除所有的类名。
• 语法：jQuery对象.removeClass("类名");
• 参数：字符串格式的类名。
• 只会操作指定的类名，不会影响其他类名。

taggleClass() 类名切换

• 若这个类名存在，则会移除该类名。否则添加该类名。
• 语法：jQuery对象.toggleClass("类名");
• 参数：字符串格式的类名。
• 优点：三个方法只操作参数部分的类名，不影响原有的其他类名。

hasClass 检测类名是否存在

• 检测类名是否存在
• 语法：jQuery对象.hasClass("类名");
• 返回值：true或false

jQuery 常用事件方法

• jQuery 对象封装了一系列的事件方法，事件方法与原生 js 事件方法名称类似，但是在方法名称之前不需要写 on。事件方法需要 jQuery 对象打点调用，小括号内的参数是视见函数。
• 例如点击事件：click() 方法。
  代码示例：

const $btn1 = $("#btn1");
$btn1.click(function() {
    console.log("点击事件")
    })

mouseenter 鼠标移入事件

• 鼠标移入元素，触发事件
• 语法：jQuery对象.mouseenter(function() {})
• 区别：和mouseover之间的区别是没有事件冒泡。

mouseleave 鼠标离开事件

• 鼠标离开元素，触发事件
• 语法：jQuery对象.mouseleave(function() {})
• 区别：和mouseout之间的区别是没有事件冒泡。

hover() 方法

• hover 事件相当于将 mouseoenter和 mouseleave 事件进行了合写。
• 语法：jQuery对象.hover(参数1，参数2)
• 参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行的事件函数。
• 示例代码：

const $btn1 = $("#btn1");
$btn1.hover(function() {
    console.log("鼠标移入")
    }, function() {
        console.log("鼠标移出")
    })

jQuery 节点关系查找

jQuery 中的this

• 在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery中，this的指向也是触发事件的事件源的原生js对象，将this关键字传递给$()方法，得到的就是指向自己的 jQuery 对象，就可以使用 jQuery 的方法。

parent() 父级方法

• jQuery对象都有一个parent()方法，得到的就是自己的父级。
• 父级得到的也是一个 jQuery 对象，直接继续打点调用 jQ方法和属性。
• 语法：jQuery对象.parent();

children() 子级

• jQuery对象内部有一个 children()方法，可以得到自己的所有子级元素组成的jQuery对象。得到的子级组成的jQuery对象可以继续调用JQ方法和属性。获得子级时，不限制标签类型。
• children()可以传递参数，参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择。
• • 语法：jQuery对象.children();

siblings() 兄弟

• jQuery对象通过调用siblings()方法可以得到除了自己以外的所有同级元素(兄弟元素)组成jQuery对象，找到的只能是亲兄弟。得到jQuery对象可以继续使用JQ的方法和属性。
• siblings()可以传递参数，参数是字符串格式的选择器，在选中所有兄弟节点的情况下，保留满足选择器的部分，进行了二次选择。

链式调用

• jQuery对象调用任何方法(除了节点关系方法)执行完后，方法都会有一个返回值，返回值就是jQuery对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用JQ的方法和属性。
• 可以使用 jQuery 对象进行连续打点调用。

find() 后代元素

• jQuery对象可以利用find()方法，传递一个参数，参数部分规定的选择器，查找范围是jQuery对象的所有后代。
• 参数是字符串格式的选择器。
• 语法：jQuery对象.find("查找元素")

next() 下一个兄弟元素

• 紧邻的兄弟元素查找，查找下一个兄弟元素。
• 语法：jQuery对象.next()

prev() 前一个兄弟元素

• 查找前一个兄弟元素
• 语法：jQuery对象.prev()

nextAll() 后面所有兄弟元素

• 查找后面所有的兄弟元素
• 语法：jQuery对象.nextAll()
• 参数：可以传递参数进行二次选择，参数是字符串格式的选择器。

prevAll() 前面所有兄弟元素

• 查找前面所有的兄弟元素
• 语法：jQuery对象.prevAll()
• 参数：可以传递参数进行二次选择，参数是字符串格式的选择器。

parents() 祖先级

• parents()得到的是指定对象的包含 body 在内的所有祖先级元素组成的 jQuery 对象。
• 语法：jQuery对象.parents()
• 参数：通过传递参数进行二次选择，参数位置是字符串格式的选择器。

jQuery 排序

eq() 大排序

• jQuery中获得的对象，内部包含选择的一组原生js对象，在jQuery对象中会进行一个大的排序，对通过$()方法获取到的元素进行排序，这个排序与原来的HTML结构没有关系。
• eq()方法在jQuery对象中通过下标获取某个对象，表示jQuery对象中的大的排序的下标。
• 语法：jQuery对象.eq(index)
• 参数表示要获取的jQuery对象中的下标。

index() 方法

• jQuery对象调用index()方法时，得到的是它自己在HTML结构中的兄弟中的下标位置。与jQuery大排序没有关系。
• index()方法获取下标时，排序跟新生成的 jQuery 对象没有关系，它依赖于自身元素在父级中同级元素之间的位置。
• 语法：jQuery对象.index()
• 返回值：返回在父级中同级元素之间的下标位置。

each() 遍历

• 参数是一个函数
• 作用：就是对jQuery对象中的元素，每一个都执行函数内部的操作。
• each方法的基本原理就是for循环，从对象的下标为0的项一直遍历到最后一项，然后对每一项进行操作。
• 语法：jQuery对象.each(function() {});
• each的函数内部，也有一个this，指向的是进来遍历的每一次的元素。
• each的函数可以传递一个参数i，i记录的是这一次遍历时当前元素在 jQuery 对象中大排序的位置。
• 应用场景：对某一个元素的子级或者后代进行操作的时候，可以使用each遍历。对每一个jQuery对象进行操作的时候，可以使用each方法。
• 代码示例：

jQuery入口函数

• 语法1：
  • $(document).ready(function() {...});
• 语法2：
  • $(function() {...})
• 原理：
  • window.onload 事件在加载时，指的是页面中多有用的资源（DOM树，音频，视频，图片等）加载完毕后，才能触发。
  • jQuery中的入口函数，仅仅需要等待页面中的 DOM 树加载完毕后就可以执行了。在一个页面中，可以书写多个 jQuery 入喉函数，执行顺序按照前后加载顺序执行。

jQuery 切换效果方法

hide()和show()方法

• hide()：元素隐藏，隐藏的前提必须是元素display:block;在使用这个方法的时候，给display设置成了none；
• show()：元素显示，显示的前提条件必须是元素display:none;
• toggle()：在元素隐藏和显示之间进行切换。
• 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。
• 参数：
  • 如果不传递参数，直接显示和隐藏，没有过渡动画。
  • 如果传递参数：
    • 单词格式："slow(慢速)", "normal(正常)", "fast(快速)"
    • 数字格式的时间，单位是毫秒，在规定的时间之内会出现显示或隐藏的动画。
  • 过渡时间内，伴随着宽度和高度以及透明度的变化。
• 语法：jQuery对象.hide()/jQuery对象.show()/jQuery对象.toggle()

slideDown()和slideUp()方法

• slideDown()：滑动显示（方向不一定）
• slideUp()：滑动隐藏
• slideToggle()：滑动切换
• 让元素在display属性的block和none之间进行切换。
• 参数：
  • 如果不传递参数，默认的过渡时间为400毫秒。
  • 如果传递参数：
    • 单词格式："slow(慢速)", "normal(正常)", "fast(快速)"
    • 数字格式的时间，单位是毫秒，在规定的时间之内会出现显示或隐藏的动画。
• 注意：
  • 如果滑动的元素没有设置宽高，则没有滑动的效果。
  • 如果元素设置了高度和宽度，会进行上下垂直方向的滑动。
  • 动画的效果：高度属性在0到设置值之间的变化，没有透明度变化。
  • 如果元素设置了定位，偏移量方向如果是bottom参与了，滑动方向会发生变化。

fadeIn()和fadeOut() 淡入淡出方法

• fadeIn()：淡入，透明度逐渐增大最终显示
• fadeOut()：淡出，透明度逐渐降低最终隐藏。
• fadeToggle()：切换效果。
• fadeTo()：淡入或淡出到某个指定的透明度。
• 动画效果，执行的是透明度动画。也是在display属性的block和node之间切换。
• 参数：
  • 如果不传递参数，默认的过渡时间为400毫秒。
  • 如果传递参数：
    • 单词格式："slow(慢速)", "normal(正常)", "fast(快速)"
    • 数字格式的时间，单位是毫秒，在规定的时间之内会出现显示或隐藏的动画。
• 注意：
  • 在使用fadeTo()方法的时候第一个参数是传递的时间，第二个参数才是传递的透明度。jQuery对象.fadeTo(500, 0.5)

animate() 动画方法

• 作用：执行css属性集的自定义动画。
• 语法：$(selector).animate(styles, speed, easing,callback)
• 参数1：css的属性名和运动结束位置的属性值的集合，是一个对象格式。
• 参数2：可选，规定动画的速度，默认是"normal"。可以是"slow"、"mormal"、"fase"，如果是数字格式的话，单位是毫秒。
• 参数3：可选，规定在不同的动画中，设置动画速度的easing函数，值包含swing和linear。
• 参数4：可选，animate函数执行完之后，要执行的函数。
• 注意：其他的运动方法，比如slideUp()等，也有参数3和参数4。

动画排队

• 同一个元素对象身上，如果定义了多个动画，动画就会排队等待执行。
• 如果是不同的元素对象都有动画，不会出现排队机制。
• 如果是其他非运动的代码，关于同一个元素对象的，也不会排队。
• 其他的运动方法，如果设置给同一个元素，也会发生排队。
• 对同一个元素的动画效果，可以使用链式调用，动画也会发生排队效果。

动画排队问题

• 如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了对个动画，会进行动画排队。当事件结束后，动画可能还没有结束，还在进行动画排队。
• 需要清除排队的动画，进行防骚扰操作。
• 方法一：
  • 利用stop()方法
  • 在每一个运动函数之前都增加一个stop(true),表示在运动执行之前，会将前面排队的动画清空，然后停止在当前的位置。

• 方法二：
  • 利用函数节流方法，如果元素在运动，直接return，不要执行后面的运动代码。
  • 每个jQuery对象，都能调用一个is()方法，作用是显示元素对象的某中状态。
  • 如果参数位置是is(":animated")，返回值是布尔值，true表示正在运动，false表示没有运动。

// 方法2
const $box = $(".box");
$box.mouseenter(function() {
    if ($(this).children().is(":animated")) {
        return;
    };
    $(this).children().slideUp(1000)
});
$box.mouseleave(function() {
    if ($(this).children().is(":animated")) {
        return;
    };
    $(this).children().slideDown(1000)
})

delay() 动画延迟

• delay():将delay()设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果。
• 参数：时间的数值，表示延迟的时间。
• 除了animate方法之外，其他的运动方法也有延迟效果。
• 语法：jQuery对象.delay(1000).animate()

stop() 停止动画

• stop()作用：设置元素对象身上的排队的动画以什么方式进行停止。
• 有两个参数，都是布尔值。
• 参数1：设置是否清空后面的动画排队，如果是true，表示清空，如果是false，表示不清空，只停止当前的一个动画。
• 参数2：设置当前动画是否立即完成，如果是true，表示立即完成，对象会立刻走到结束位置，如果是false，表示不完成当前动画，立即停止在当前位置。
• 语法：jQuery对象.stop(参数1，参数2)
• 在实际工作中，一般会清空后面的动画，并且动画要停止在当前的位置。默认情况下，两个参数默认值都是false。

jQuery 节点操作

创建元素

• 直接将标签传递到$()方法中。
• 语法：const $li = $("
");

追加元素一

• 向父元素最后追加
  • 语法：父元素jQuery对象.append(新创建的jQuery对象)
  • 语法：新创建的jQuery对象.appendTo("父元素选择器" 或 "父元素jQuery对象")
• 向父元素最前面追加
  • 语法：父元素jQuery对象.prepend(新创建的jQuery对象);
  • 语法：新创建的jQuery对象.prependTo("父元素选择器" 或 "父元素jQuery对象")

追加元素二

• 向元素后面追加新的兄弟
  • 语法：jQuery对象.after(新创建的jQuery对象)
  • 语法：新创建jQuery对象.insertAfter("选择器"或 jQuery对象)
• 向元素前面追加新的兄弟
  • 语法：jQuery对象.before("新创建的jQuery对象")
  • 语法：新创建jQuery对象.insertBefore("选择器"或 jQuery对象)

删除元素

• 语法：jQuery对象.remove();
• 想要删除哪个元素就调用这个remove()这个方法。

清空方法

• 清空方式1：jQuery对象.empty();推荐使用，清空内部的所有元素及元素相关的事件
• 清空方式2：jQuery对象.html(""); 仅清空内部的元素，不清理内存中的元素的事件。

克隆元素

• 语法：jQuery对象.clone(布尔值); 返回克隆好的元素
• 参数：默认是false，表示仅仅克隆内容。true表示克隆内容和事件。

jQuery 操作元素的尺寸

width() 和 height() 方法

• 操作的大小仅仅是内容部分
• 设置：
  • 语法：jQuery对象.width(数字)
• 获取：
  • 语法：jQuery对象.width()
  • 返回：数字类型的数据。

innerWidth() 和 innerHeight() 方法

• 操作的大小是内容部分 + padding
• 设置：
  • 语法：jQuery对象.innerWidth(数字);
  • 设置：将增加或者减少的值设置给了width属性。
• 获取：
  • 语法：jQuery对象.innerWidth()

outerWidth() 和 outerHeight() 方法

• 操作的大小是内容部分 + padding + border
• 设置：
  • 语法：jQuery对象.outerWidth(数字);
  • 设置：将增加或者减少的值设置给了width属性。
• 获取：
  • 语法：jQuery对象.outerWidth();

jQuery 操作元素的位置

offset() 获取元素距离文档的位置

• 语法：jQuery对象.offset();
• 返回一个对象，对象中包含了元素的位置（left、top）。
• 注意：offset() 方法获取的元素的位置，永远参照文档，和定位没有关系。

position() 距离上级定位参考元素的位置

• 语法：jQuery对象.position();
• 返回一个对象，对象中包含了元素的位置。
• 注意：position() 方法获取的元素的位置，参照最近的定位元素（和定位有关系）

scrollTop() 操作卷去的页面间距

• 获取
  • 语法：jQuery对象.scrollTop();
  • 返回：返回数字。
• 设置：
  • 语法：jQuery对象.scrollTop(数字);
• 注意：
  • 当设置html文档以运动的方式返回顶部的时候，document文档有一个scrollTop属性，可以将这个属性设置为0，但是需要注意的是，设置的文档应该是"html"或者"body"元素，而不应该直接设置document文档。
  • $("html,body").animate({"scrollTop": 0}, 500)

注册事件

on 方法注册事件

• 注册简单时间语法：jQuery对象.on("事件名", "事件处理程序");
• 事件委托的实现：jQuery对象.on("事件名", "选择器", 事件处理程序)
• 选择器：子孙元素
• 注意：
  • 在事件处理程序中，this代表的是子孙元素（）
  • on() 方法的封装底层实际是addEventlistener() 可以给同一个元素同一个事件绑定多次。

off() 事件移除

• 解绑简单的事件：jQuery对象.off("事件名称", 事件处理程序名称)
• 解绑事件委托注册的事件：jQuery对象.off("事件名称", "选择器", 事件处理程序名称)

触发事件

• 自动触发事件
• 语法：jQuery对象.trigger("事件名")

事件对象

• 事件处理程序的第一个形参 e，不用考虑兼容性。

鼠标事件对象相关属性

• 事件对象.clientX/Y 参照浏览器
• 事件对象.pageX/Y 参照文档
• 事件对象.offsetX/Y 参照元素

键盘事件对象相关属性

• 事件对象.keyCode 返回键盘数字
• 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值，检测是否按下（true）。

公共的属性或方法

• 属性
  • 事件对象.target 最初触发事件的DOM元素
  • 事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
• 方法
  • 事件对象.preventDefault(); 阻止默认行为
  • 事件对象.stopPropagaton(); 阻止事件冒泡

多库共存的情况

• 在代码中引入多个js文件的时候，后引入的文件可能会覆盖掉之前引入的js中的方法。造成多库共存的问题。
• 解决方法1：
  • 在使用$()方法的时候，可以使用jQuery()标识符进行调用
• 解决方法2：
  • 使用 jQuery.noConflict() 方法，释放jQuery中的$方法，把方法的函数，可以用其他的变量接收，然后调用。

const $1 = jQuery.noConflict();
const value = $1("div");

jQuery 插件

• jQuery 插件库之家: http://www.htmleaf.com
• 放大镜插件：http://www.jacklmoore.com/zoom/