jQuery

JavaScript 库

用于开发软件的子程序集合。库和可执行文件的区别是，库不是独立程序，他们是向其他程序提供服务的代码库链接。

JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。

简单理解：就是一个 JS文件，里面对我们原生 JS代码进行了封装，存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。

对于第三方库，除了下载使用，还可以通过CDN在线使用，CDN称之为内容分发网络，简单来说，就是提供很多的服务器，用户访问时，自动就近选择服务器给用户提供资源

国内使用广泛的免费CDN站点：https://www.bootcdn.cn/

jQuery介绍

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（ 或 JavaScript 框架 ）。 jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。

jQuery = javascript Query（查询）。意思是查询 js，把 js 中的 DOM 操作做了封装，我们可以快速的查询使用里面的功能。

它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

一句话，jQuery让操作DOM更简便。

jQuery函数

  • $是 jQuery 的别称，在代码中可以使用 jQuery 代替$，但为了方便，通常都使用$。

jQuery 的入口函数

  • Js 入口函数会在 DOM 元素加载完毕并且图片也加载完毕之后再执行

  • jQuery 入口函数会等到 DOM 元素加载完毕，但不会等到图片加载完毕再执行

1
2
3
4
// 简化方式，推荐
$(function () {
    alert("hi jquery");
})

冲突——多库共存

原因：随着jQuery的流行，采用jQuery和$符为命名空间的 js 库越来越多，当然 jQuery 的$符也是参照的 Prototype库的，所以当多个库同时以$符或者 jQuery 为命名空间时，那么此时，就会产生冲突。

解决方法：

1.释放使用权

1
2
3
jQuery.noConflict();
//1.释放操作在其他函数之前
//2.释放后不能用$符

2.修改访问符号

1
2
var suiBian = jQuery.noConflict();
//此时suiBian为新的访问符号

DOM对象 和 jQuery 对象

DOM 对象：用原生 js 获取过来的对象就是 DOM 对象。

jQuery 对象：用 jQuery 方式获取过来的对象就是 jQuery 对象。本质：通过 $ 把 DOM 元素进行了封装（伪数组形式存储）。

jQuery 对象只能使用 jQuery 方法，反之亦然。

相互转换

  • DOM –> jQuery
1
$('DOM对象');

  • jQuery –> DOM（两种方式）

    1
    2
    $('DOM对象')[index]; // index 是索引号
    $('DOM对象').get(index);

jQuery 常用 API

查询https://jquery.cuishifeng.cn/toggle.html文档

jQuery思路

排他思想

1
2
3
4
5
6
$(function() {
  $("button").click(function(){
      $(this).css();  // 对自己设置变化
      $(this).siblings("button").css();  // 给其他兄弟去掉变化
  })
})

链式编程

1
2
3
4
5
$(function() {
  $("button").click(function(){
   	$(this).css().siblings("button").css();  // 对自己设置变化,给其他兄弟去掉变化
  })
})

属性操作

① 获取属性语法

1
prop("属性")

② 设置属性语法

1
prop("属性","属性值")

设置或获取元素自定义属性值 attr()

自定义属性就是用户自己给元素添加的属性。比如给li添加index="1"。

① 获取属性语法

1
2
attr("属性")
1

② 设置属性语法

1
attr("属性","属性值")

jQuery 内容文本值

普通元素内容 html()

相当于原生 js 中的 innerHTML

1
2
html()  // 获取元素的内容
html("内容")  // 设置元素的内容

普通元素文本内容 text()

相当于原生 js 中的 innerText

1
2
text()  // 获取元素的内容
text("内容")  // 设置元素的内容

表单值 val()

相当于原生 js 中的 value

1
2
val()  // 获取元素的内容
val("内容")  // 设置元素的内容

遍历元素

隐式迭代：对同一类元素做相同操作。如果做不同操作，需要使用遍历：

1
2
3
4
5
$("div").each(function (index, domEle) {xxx;})

// 也可以写成
$.each($("div"),function (index, domEle) {xxx;}))
// 主要用于处理数据

创建元素

① 内部添加

1
2
$("ul").append(li);//放到最后面，类似原生 appendChild
1

② 外部添加

1
2
el.before(内容);  // 把内容放到目标元素前面
el.after(内容);  // 把内容放到目标元素后面

删除元素

1
2
3
el.remove()  // 删除匹配节点（本身）
el.empty()  // 删除匹配节点的子节点
el.html("")  // 相当于 empty()

jQuery 事件

事件注册

单个事件注册

1
2
element.事件(function);
$("div").click(function(){ 事件处理程序 })  // 其他事件和原生事件基本一致

事件处理

事件处理 on() 绑定事件

  • 语法规范
1
on(events,[selector],[data],fn)

  • 概述

    • 在选择元素上绑定一个或多个事件的事件处理函数。

    • on() 方法绑定事件处理程序到当前选定的 jQuery 对象中的元素。

  • 显示参数

    • events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。

    • selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

    • data:当一个事件被触发时要传递event.data给事件处理函数。

    • fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

  • 优势1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 同一对象不同操作不同回调
$("div").on({
  mouseenter:function() {
    $(this).css("color", "red");
  },
  mouseleave:function() {
    $(this).css("color", "black");
  }
})

// 同一对象不同操作相同回调
$("div").on("mouseenter mouseleave", function(){
  $(this).toggleClass("current");
})

  • 优势2

可以事件委派操作。事件委派的定义是：把原来子元素身上的事件绑定到父元素上，就是把事件委派给父元素。

1
2
3
$("ul").on("click", "li", function(){
  alert("clicked li");
});
  • 优势3
1
2
3
4
5
6
7
8
动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成元素绑定事件。

$("ul").on("click", "li", function(){
  alert("clicked li");
});
let li = $("<li>click</li>");
$("ul").append(li);

事件处理 off() 解绑事件

  • 语法规范
1
off(events,[selector],[fn])

  • 概述

    • 在选择元素上移除一个或多个事件的事件处理函数。

    • off() 方法移除用 on() 绑定的事件处理程序。

  • 显示参数

    • events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如”click”, “keydown.myPlugin”, 或者 “.myPlugin”。

    • selector:一个最初传递到 .on() 事件处理程序附加的选择器。

    • fn:事件处理程序函数以前附加事件上，或特殊值 false。

事件处理 one() 绑定一次性事件

  • 语法规范
1
one(type,[data],fn)
  • 概述
    • 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
  • 显示参数
    • type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
    • data:将要传递给事件处理函数的数据映射。
    • fn:每当事件触发时执行的函数。

事件对象

事件被触发，就会有事件对象的产生。

1
2
3
4
on(events,[selector],function(even) { })
even.preventDefault()  // 阻止默认行为 或者用 return false
even.stopPropagation()  // 阻止冒泡