jQuery类库

jQuery类库

jQuery简介

jQuery是一个轻量级的、兼容多浏览器的JavaScript库

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的特点

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery版本

目前jQuery的版本建议选择3.x的版本，因为在目前主流的浏览器它都兼容（IE已经下葬了，勿念）

而jQuery3.x版本是官方现在还在维护更新的版本。

jQuery使用准备

如果想一个js文件能够识别jQuery代码就需要导入jQuery核心文件：

jQuery官网

jQuery中文学习网-含源码下载

CDN通道最新版本下载（推荐）

CDN是内容分发网络，为了能够从网络加载这个模块更加快，将一些项目运行的必须文件交给CDN

我们可以通过下载jQ引入本地或者直接引用网络的方式去使用jQuery库。

• 下载到本地可以在无网络时测试：<script src="jQuery3.6.js"></script>

• CDN网络资源下载，客户端用户可以每次访问网站时临时加载：

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

可以理解为两者分别是两个js中的不同类型的自定义对象，各自有着自己的方法。

在定义一个jQuery的变量时，我们约定在变量名前加一个$符，用以与DOM对象区分。

var $variable = jQuery对像
var variable = DOM对象
$variable[0]  //  jQuery对象可以转成DOM对象

js代码与jQuery代码区别

通过一个实例来尝试理解两者的区别：

let pEle = document.getElementsByTagName('p')[0]   // 拿到p标签
pEle.style.color = 'red'   // 将p标签的内容颜色改为红
pEle.nextElementSibling.style.color = 'green'  // 将p标签的下一个标签的颜色改为绿

$('p').first().css('color','yellow').next().css('color','blue')   // 将p标签的颜色改为黄，它的下一个标签改成蓝

通过上面的代码，我们可以瞥见jQuery代码的一些特点：

• 简洁：jQuery对象的方法关键字要短一些，如first、next、css等
• 链式：jQuery执行完方法后一定会返回一个jQuery对象，返回的对象可以继续使用句点的方式往后链式的传递和使用方法。

其代码的简洁和易读成为我们为什么使用jQuery库的重要原因。

jQuery查找标签

直接使用css标签选择器

jQuery支持直接$('css选择器')的方式查询标签

• 基本选择器 $('#d1')
• 组合选择器 $('#d1 img')
• 组合与嵌套 $('#d2,div.c3')
• 属性选择器 $('div[username="leethon"]')

可以查看CSS层叠样式表的选择器部分进行更具体的了解。

基本筛选器

对查找到的标签数组对象进行再次筛选。

基础用法：

$("div:first")  // 查找所有的div标签并选择第一个
$("div").first()   // 将first筛选封装了一下，如果是jq数组就可以通过first拿到jq对象

点击查看基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

表单筛选器

表单筛选器是将表单标签的筛选步骤进行了简化而设计的。

我们原本写一个text框的查找：$('input[type="text"]')
使用jQuery写：$(':text')

这是jq专门为表单标签设置的筛选语法

表单筛选器：

// input type属性
$(':text')
$(':password')
$(':file')
$(':radio')
$(':checkbox')

$(':submit')
$(':reset')
$(':button')

// 表单对象属性
:enabled
:disabled
:checked  // 小特性，不仅会查询到被checked的input还会查找到被selected的option标签
:selected  // 只查找被selected的option标签

筛选器方法

下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")  // 下面直到指定标签前的元素

上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：

$("#id").parent()
$("#id").parents()  // 结果的形式[div,body,html,document],即依次寻找父标签的父标签直到document节点
$('#d1').parentsUntil('html')  // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们

jQuery操作标签

与我们的DOM操作都很类似，只不过是通过jq对象的方法去操作我们的节点。

属性操作

类属性：

addClass();// 添加指定的类属性。
removeClass();// 移除指定的类属性。
hasClass();// 判断类属性存不存在
toggleClass();// 切换类属性，如果有就移除，如果没有就添加。

所有属性：

.attr(attrName)  // 返回第一个匹配元素的属性值
.attr(attrName, attrValue)  // 为所有匹配元素设置一个属性值
.attr({k1: v1, k2:v2})  // 为所有匹配元素设置多个属性值
.removeAttr()  // 从每一个匹配的元素中删除一个属性

动态属性（状态）：

// 以下可以用于获取表单中radio和checkbox的选中状态
.prop() // 获取属性
.removeProp() // 移除属性

位置操作

.offset()  // 获取匹配元素在当前窗口的相对偏移或设置元素位置 --- 相对document
.position()  // 获取匹配元素相对父元素的偏移  --- 相对父节点
.scrollTop()  // 获取匹配元素相对滚动条顶部的偏移
.scrollLeft()  // 获取匹配元素相对滚动条左侧的偏移

文本操作

HTML代码：

.html()// 取得第一个匹配元素的html内容
.html(val)// 设置所有匹配元素的html内容

文本值：

.text()// 取得所有匹配元素的内容
.text(val)// 设置所有匹配元素的内容

值：

.val()// 取得第一个匹配元素的当前值
.val(val)// 设置所有匹配元素的值
.val([val1, val2])// 设置多选的checkbox、多选select的值

示例：

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

文档处理

创建标签：

let $aEle = $('<a>')  // 创建a标签,当双标签只有一边时会自动补全
let $aEle = $('<a src="URL">')  // 可以顺带添加一些属性
let $aEle = $('<a src="URL">标签内</a>')  // 也可以将完整的标签写进去

添加标签到指定位置：

// 添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

// 添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

// 添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

// 添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

// 例子
$('div').append('<p>hehehe</p>')  // 前是选择器，后是创建语法
$('<p>hehehe</p>').appendto('div')  // 前是创建语法，后是选择器

关于以上的A和B说明：如果是创建的标签，A或者B可以是创建标签中的引号内容如<a>
如果是被追加的标签，那么这个括号中的A或者B就是选择器。

移除和清空元素

remove(选择器)// 从DOM中删除所有匹配的元素。
empty(选择器)// 清空匹配的元素集合中所有的子节点。

替换：

.replaceWith(选择器)
.replaceAll(选择器)

克隆：.clone(true)

如果是true则为完全克隆，如果没有true则只复制样式。

克隆的例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

jQuery事件

绑定事件的两种方式

jQuery对象.事件名(function(){})  // 一般都适用
--
jQuery对象.on('事件名称',function(){})  // 但偶尔事件名中含空格就得用第二种

• 第一种方式的事件名都是jq定义的，像hover就只能用第一种方式
• 第二种方式的事件名都是从dom操作移植过来的，有些dom独有就要用第二种

常用事件

click(function(){...})     // 点击
hover(function(){...})    // 悬停
blur(function(){...})    // 失去焦点
focus(function(){...})    // 获得焦点
change(function(){...})    // 阈的值变化
keyup(function(){...})    // 键盘输入

事件绑定的函数的函数体可以编写js原生代码，也可以编写jq代码，而且依然会自动传入this（触发事件的标签）这一参数，this是dom节点对象，我们可以转换为jq对象。

$(this)  // dom对象 -->jQuery对象
$('#d1')[0]  //  jQuery对象 --> dom对象

阻止后续事件执行

在函数体中编写return false可以阻断后续的事件执行，这常用于阻止用户提交表单。

比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <input type="submit" id="b1">提交</input>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123); // 我们这里还可以直接写一些逻辑判断，让其在某些情况下不提交
        //return false;
        e.preventDefault();  // 后续就不会提交表单了
    });
</script>
</body>
</html>

阻止事件冒泡

当多个嵌套的标签绑定了同种类型的事件，当子标签触发事件，父标签一定也会触发事件，这种现象就称作事件冒泡。

解决事件冒泡也可以在函数体代码最后添加return false，因为这会阻断子标签触发事件后向父标签报告的过程，从而防止父标签也触发事件。

等待网页加载

$(function(){})		// 缩略写法
$(document).ready(function(){})  // 完整写法
相当于
window.onload = function(){}

在执行效率上：

• window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
• jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

主要应用于动态添加的标签可以自动绑定已有的事件方法。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})
// 这句代码后，当动态地在表中加载一个拥有delete类属性的标签时，就也会绑定这个事件。

jQuery动态效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

自定义动画示例：

点赞动效演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>