jQuery重点知识整理

目录

jQuery简介

jQuery版本说明

选择器

DOM操作

事件处理

事件之绑定事件处理器

事件之鼠标事件

事件之表单事件

事件之键盘事件

事件之浏览器事件

事件对象

遍历

动画

---

jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提 供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和 操作、事件处理、动画操作更加简单。 jQuery最大的优点就是简化DOM操作。

jQuery版本说明

jQuery分为三个大版本：1.x 2.x 3.x

1.x版本

兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。 因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x版本 不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。 如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x版本 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官 方主要更新维护的版本。最新版本：3.6.0

jQuery重点知识点 1 选择器 2 DOM操作 3 CSS操作 4 事件处理 5 遍历 6 动画

选择器

1.类选择器：$(".类名")

2.元素选择器：$("元素标签")

3.ID选择器：$("#ID名")

4.子元素选择器：("parent > child")

5.后代元素选择器：("parent child")

6.属性选择器：

①Attribute Selector [name="value"]    选择指定属性是给定值的元素

②Attribute Selector [name|="value"]    选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后 跟一个连字符“-” ）的元素

③Attribute Selector [name*="value"]      选择指定属性具有包含一个给定的子字符串的元素。（选择给定的 属性是以包含某些值的元素）

④Attribute Selector [name~="value"]       选择指定属性用空格分隔的值中包含一个给定值的元素

⑤Attribute Selector [name$="value"]       选择指定属性是以给定值结尾的元素。这个比较是区分大小写的 

⑥Attribute Selector [name^="value"]      选择指定属性是以给定字符串开始的元素

7.jQuery扩展选择器：

① :eq(index) Selector 在匹配的集合中选择索引值为index的元素

温馨提示   index下标计算是从0开始的

② :even Selector 选择所引值为偶数的元素

特别注意  这是基于0的索引，所以 :even 选择器是选择第一个元素，第三个 元素，依此类推在匹配。

③ :odd Selector 选择索引值为奇数元素

特别注意 这是基于0的索引，所以 :odd 选择器是选择第二个元素，第四个 元素，依此类推在匹配。

④ :first Selector  选择第一个匹配的元素

⑤ :last Selector 选择最后一个匹配的元素

⑥ :gt(index) Selector  选择匹配集合中所有大于给定index（索引值）的元素

⑦ :lt(index) Selector 选择匹配集合中所有索引值小于给定index参数的元素

DOM操作

1.addClass()

给元素添加class，值得注意的是这个方法不会替换一个样式类名。 它只是简单的添加一个样式类名到元素上

2.removeClass()

移除元素中每个匹配元素上一个，多个或全部样式 通过class名字移除元素

3.toggleClass()

这是一个开关方法，如果class存在则删除，如果class不存在则添加

4.hasClass()

判断一个元素上是否具有某个class

5.html()

获取元素中的HTML内容

html()方法还可以设置元素的html内容

$('div.demo-container').html('
All new content. You bet!
');

6.val()

用于获取标签中的内容

也可以设置标签内容

$(".input").val("username")

7.attr()

获取匹配的元素的属性的值 或 设置匹配元素的一个或多个属性

8.removeAttr()

为匹配的元素集合中的每个元素中移除一个属性（attribute）

9. .wrap() 在每个匹配的元素外层包上一个html元素

10. .unwrap() 将匹配元素集合的父级元素删除，保留自身在原来的位置

11. .wrapAll() 在所有匹配元素外面包一层HTML结构

12. .wrapInner() 在匹配元素里的内容外包一层结构

13. .append() 在每个匹配元素里面的末尾处插入参数内容

14. .prepend() 将参数内容插入到每个匹配元素的前面（元素内部）

15. .after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其 兄弟节点

16. .before() 根据参数设定，在匹配元素的前面插入内容，作为其兄弟节点

17. empty() 从DOM中移除集合中匹配元素的所有子节点

18. .remove() 将匹配元素集合从DOM中删除

19. .replaceAll() 用集合的匹配元素替换每个目标元素

20. .replaceWith() 用提供的内容替换集合中所有匹配的元素

CSS操作

1. .css() 获取和设置匹配元素的样式

2. .height()，.width() 获取元素的当前高度值宽度值或设置元素的高度值宽度值

3. .innerHeight()，.innerWidth() 为元素的当前计算高度值和宽度值,包括padding，但是不包括 border

4. .outerHeight()，.outerWidth() 获取元素的当前宽度值和高度值,包括padding，border和选择性的 margin

5. .offset() 获取元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档

6. .position() 获取元素的当前坐标，相对于 offset parent 的坐标

温馨提示

.position() 方法可以取得元素相对于父元素的偏移位置。与 .offset() 不同, .offset() 是获得该元素相对于 documet 的当前坐标 当把一个新 元素放在同一个容器里面另一个元素附近时，用 .position() 更好 用。

 7. .scrollLeft(), .scrollTop() 获取元素的当前水平和垂直滚动条的位置。设置每个匹配元素的水 平和垂直滚动条位置

事件处理

事件之绑定事件处理器

1. .on() 在选定的元素上绑定一个或多个事件处理函数

$("#button").on("click", function(event){
    console.log("事件处理器")
});

事件委托

$("#ul").on("click", "li", function(event){
  console.log($(this).text());
});

2. .one() 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型 最多执行一次

$("#btn").one("click", function() {
  console.log("这是一个只能触发一次的事件.");
});

3. .off() 移除一个事件处理函数，移除on事件处理器

事件之鼠标事件

4. .click() 为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 "click" 事件

$("#btn").click(function() {
  alert("点击事件");
});

5. .hover() 将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元 素时被执行

$("li").hover(
  // 滑入
  function () {
    console.log("滑入")
 },
  // 滑出
  function () {
    console.log("滑出")
 }
);

6. .mouseenter() 鼠标进入事件

$("div").mouseenter(function(){
    console.log("鼠标进入事件");
})

7. .mouseleave() 鼠标离开事件

8. .mousemove() 鼠标滑动事件

9. .mouseover() 鼠标进入事件（注：支持事件冒泡）

10. .mouseout() 鼠标离开事件（注：支持事件冒泡）

事件之表单事件

11. .focus() 为 JavaScript 的 "focus" 事件绑定一个获取焦点处理函数，或者触 发元素上的 "focus" 事件

12. .blur() 为 "blur" 事件绑定一个失去焦点处理函数

13. .change() 为JavaScript 的 "change" 事件绑定一个表单改变处理函数

14. .submit() 当用户提交表单时，就会在这个表单元素上触发submit事件。它只 能绑定在

元素上

事件之键盘事件

15. .keydown() 添加键盘按下事件

16. .keypress() 添加键盘事件

17. .keyup() 添加键盘抬起事件

事件之浏览器事件

18. .resize() 添加浏览器窗口发生变化触发事件

19. .scroll() 浏览器滚动事件

事件对象

20.event.type 获取事件类型

$("#btn").click("click",function(e){
    console.log(e.type);
})

21.event.target 获取当前元素对象

22.event.currentTarget 获取当前元素对象

23.event.currentTarget 获取当前元素对象

温馨提示

target：指向触发事件元素

currentTarget：指向添加事件的元素

24.event.preventDefault() 如果调用这个方法，默认事件行为将不再触发。 

25.event.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件 处理函数

遍历

1. .map() 通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery 对象

2. .each() 遍历一个jQuery对象，为每个匹配元素执行一个函数

温馨提示

each和map的返回值不同，map返回一个新的数组，each返回 原始数组

3. .get() 通过jQuery对象获取一个对应的DOM元素 

4. .children() 获得子元素，可以传递一个选择器参数

5. .find() 寻找后代元素

温馨提示

.find() 和 .children() 方法是相似的，但后者只是再DOM树中向下遍历 一个层级（注：就是只查找子元素，而不是后代元素）。

 6. .next() 取得元素紧邻的后面同辈元素

7. .parent() 取得元素的父元素

8. .siblings() 获得元素的兄弟元素，可以传递一个选择器参数

动画

1. .show() 执行显示动画

2. .hide() 执行隐藏动画

3. .fadeIn() 通过淡入的方式显示匹配元素

$("button").click(function () {
  $("div").fadeIn(1000);
});

4. .fadeOut() 通过淡出的方式显示匹配元素

5. .slideDown() 用滑动动画显示一个元素

6. .slideUp() 用滑动动画隐藏一个元素

7. .animate() 执行自定义动画

$("button").click(function () {
    $("div").animate({
        width: "200px",
        opacity: 0.5
   }, 1500);
});

最后，汇总整理