前端基础之jQuery

Lucky-Hua / 2023-07-24 / 原文

jQuery介绍

　　jQuery是一个轻量级的、兼容多浏览器的JavaScript库。库就类似于是Python中的模块，简称为jq，就是js、css等的封装版本。

前端最大的问题就是兼容性问题，需要兼容各个浏览器，使用jQuery就不用担心兼容问题，其内部已经做好了。

　　它的宗旨就是：“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基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

jQuery内容

1. 选择器

2. 筛选器

3. 样式操作

4. 文本操作

5. 属性操作

6. 文档处理

7. 事件

8. 动画效果

9. 插件

10. each、data、Ajax

jQuery的使用：

官方网站：https://jquery.com/

中文文档：https://jquery.cuishifeng.cn/

jQuery版本

● 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，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

我们主要学习jQuery3.x版本，要想使用jQuery，必须在文档中先引入jQuery库文件：

　　https://www.bootcdn.cn/------>下载jquery、bootstrap、vue等文件

使用方式：

　　1. 直接引入外链的js库
　　2. 把jQuery文件直接下载到本地，通过本地引入, 推荐该方式

CDN：加快我们的加载文件的速度

jQuery对象

1. jQuery对象

　　jQuery对象就是通过jQuery包装DOM对象后产生的对象。如果一个对象是jQuery对象，那么它就使用jQuery提供的很多方法。

2. 标签对象

　　标签对象：直接就是通过各种选择器得到的标签，标签对象不能直接使用jQuery库提供的很多方法。

eg：

$("#i1").html(); // 拿到id为i1的文本内容，$的含义：$ 就相当于jQuery
jQuery("#i1").html(); // 和上面代码意思一样，jQuery === $

以后的代码里都使用$符号代替jQuery

jQuery基础语法

jQuery("selector").action();
$("selector").action();

jQuery的学习步骤：

1. 先学会如何查找标签
2. 找到标签之后再做相对于的操作

基本选择器

jQuery对象和标签对象之间的相互转换：

　　jQuery对象转为标签对象----------------->直接通过索引取值得到标签对象

　　标签对象转为jQuery对象----------------->$(document.getElementById('d1')) --->使用jQuery把DOM抱起来--------------->就可以使用jQuery提供的方法了

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

</head>
<body>
<div id="d1" class="c1"></div>
<script>
     // 在Js中通id查询
    // var div = document.getElementById('d1'); //结果：<div id="d1" class="c1"></div>标签
    // 当加上$,div就变成了jQuery对象
    var div = $(document.getElementById('d1'));
    console.log(div);
    //jq中的id选择器查询：
    var div1 = $("#d1"); //拿到的是一个jQuery对象，可以通过索引取值(结果如图1)
    console.log(div1);
</script>
</body>
</html>

结果：

图1：

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
 // 标签选择器
    var div = $('div');
    console.log(div);
</script>
</body>
</html>

结果：

class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
    // class选择器
    var div = document.getElementsByClassName('c1')[0]; // 在Js中
    console.log(div);
    var div1 = $('.c1'); // jQuery对象
    console.log(div1);
</script>
</body>
</html>

结果：

配合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
    //配合使用
   var div = $("div#d1");// 找到d1 id类的div标签
   console.log(div);
   var div1 = $("div.c1");// 找到有c1 class类的div标签
   console.log(div1);
</script>
</body>
</html>

结果：

通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>
<script>
    // 通用选择器
    var div = $("*"); //查询所有的选择器
    console.log(div);
</script>
</body>
</html>

结果：

组合选择器

$('#d1,.c1,p') ：并列+混用
$('div span')：后代
$('div>span')：儿子
$('div+span') ：毗邻
$('div~span') ：弟弟

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div id="d1">div
    <span>div>span</span>
    <p>
        <span></span>
    </p>
</div>
<span class="c1">span</span>
<p>pppp</p>
<script>
    var res = $("#d1, .c1, p").css('color', 'red'); // 并列+混用
    console.log(res);
     var res1 = $("div span").css('color', 'green'); // div的后代
</script>
</body>
</html>

结果如图：

基本筛选器

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

:first // 第一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li class="c1">5</li>
</ul>
<script>
    $("ul li:first").css('color','hotpink'); // 第一个
</script>
</body>
</html>

结果：

:last // 最后一个

 $("ul li:last").css('color','hotpink');

结果：

:eq(index) // 索引等于index的那个元素

$("ul li:eq(4)").css('color','hotpink');

结果：

:even // 匹配所有索引值为偶数的元素，从 0 开始计数（：odd,匹配所以索引值为奇数的元素，从0开始）

$("ul li:even").css('color','hotpink');

结果：

:gt(index) // 匹配所有大于给定索引值的元素 # gt ---> greater than（:lt(index)，与之相反，lt----> less than）

$("ul li:gt(1)").css('color','hotpink');

结果：

:not(元素选择器) // 移除所有满足not条件的标签

 $("ul li:not('.c1')").css('color', 'hotpink');

结果：

属性选择器：

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

eg：

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

结果：

表单筛选器：

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

表单对象属性:

:enabled 可用的
:disabled 不可用的
:checked 被选中的
:selected 下拉框

eg：找到input标签

<input type="text">
<input type="password">
<input type="checkbox">
<input name="id" />
console.log($("input[type='checkbox']"));//找到所有的checkbox，相当于：$(":checkbox")
console.log($($(':password') ));
console.log($(":text"));

结果：

eg2：找到被选中的option

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女

<script>
    console.log($(":checked")) //它会将checked和selected都拿到
    console.log($(":selected")); // 找到所有被选中的option
    console.log($("input:checked")); //自己加一个限制条件
</script>
</body>
</html>

结果：

筛选器方法

下一个元素：

　　$("#id").next()

　　$("#id").nextAll()

　　$("#id").nextUntil("#i2")

上一个元素：

　　$("#i1").prev()

　　$("#i1").prevAll()

　　$("#i1").prevUntil("#i2")

父亲元素：

　　$(".ss1").parent().parent()

　　$(".ss1").parents()

　　$(".ss1").parentsUntil('#i1') : 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div class="c1">div
    <p>
        <span class="ss1"></span>
    </p>
</div>
<p class="p1">p</p>
<span class="s1" id="i1">span</span>
<span class="s1">span</span>
<span class="s1" id="i2">span</span>
<span class="s1">span</span>

<script>
    // 下一个元素：结果如图1所示
    console.log($(".c1").next()); //下一个元素
    console.log($(".c1").nextAll()); // 下面所有的元素
    console.log($(".c1").nextUntil('#i2')); // .c1 class类下面的元素到id为i2的截止，不包括i2
   
    // 父亲元素：结果如图2
    console.log($(".ss1").parent().parent()); //一个parent就是往上找一个父辈,结果是 div标签
    console.log($(".ss1").parents());//所有的父辈
    console.log($(".ss1").parentsUntil('#i1'));
</script>
</body>
</html>

图1：

图2：

儿子和兄弟元素：

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

查找(掌握)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")----------------->等价于$("div p")
$("div p").find("a")----------------->等价于$("div p a")
$("#d1 .c1").find("a")----------------->等价于$("#d1 .c1 a")

补充：

.first() // 获取匹配的第一个元素
      $('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素
      $('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
      $('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

操作标签

样式操作

样式类：

在js中：classList.add、remove、containes、toggle

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

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div class="c1" id="d1"> div </div>
<script>
    // document.getElementById('d1').classList.add("c2"); // 在js中添加
    $("#d1").addClass('c2');
    $("#d1").removeClass('c1');
    console.log($("#d1").hasClass('c1'));
    $("#d1").toggleClass('c1');
</script>
</body>
</html>

文本操作

在js中：innerText innerHtml

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

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

属性操作（重要）

用于ID等或自定义属性：

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

用于checkbox和radio：

　　prop()：获取属性

　　removeProp()：移除属性

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div class="c1" username="jack">div</div>

<input type="checkbox" value="1" checked="true" >
<input type="radio" value="2">
<script>
    // js：
    // console.log(document.getElementsByClassName('c1')[0].getAttribute('username'));
    // console.log(document.getElementsByClassName('c1')[0].setAttribute('password', '123'));
    // console.log(document.getElementsByClassName('c1')[0].removeAttribute('username'));

    console.log($(".c1").attr('username')); // 返回第一个匹配元素的属性值
    console.log($(".c1").attr('password', 123)); //为所有匹配元素设置一个属性值,如图2所示
    $(".c1").removeAttr('username'); //从每一个匹配的元素中删除一个属性
    console.log($(":checkbox[value='1']").prop("checked")); // 获取属性，有该属性就返回true,没有就返回false。
    $(":checkbox[value='1']").prop("checked", true); //和上面代码意思一样
    console.log($(":radio[value='2']").prop("checked"));// 获取属性，有该属性就返回true,没有就返回false。
</script>
</body>
</html>