当前位置：首页 > 编程日记 > 正文

【jQuery】jQuery知识点梳理（持续更新）

编程日记 2024-05-20 07:40:00

jQuery是什么：

由图标可知：

j：JavaScript

query：查询

所以可以分析得jQuery是一个JavaScript库，而且主要用来查询。

注意，下面的一行小字，write less do more 我们不仅可以看出jQuery以高效作为自己的目标，而且可以看出jQuery的野心不止查询。它可以使得我们对html文档遍历操作、事件处理、动画以及ajax变得更加简单

关于版本介绍：

首先我我们登陆jQuery的官网可以看到，有1.X 2.X 3.X，我们如何选择呢？此时不如去看看大公司开发用的都是什么版本的，接下来我们来看看京东的前端源代码，如下图：

可以看到，京东使用的是1.X版本，接下来我们看一下百度的前端代码：

可以看到百度使用的jQuery也是1.X版本

分析:为什么很多大公司的前端页面使用的都是1.x版本呢？

可能是考虑到了兼容的问题，因为自2.x开始，jQuery便开始不支持IE6、7、8了，但是1.x还是支持的，使用1.x可能便是为了照顾那些ie的钉子户把。

如何使用jQuery：

1、下载jQuery库：

这里需要说明一下，jQuery官网了有可能出现打不开的情况，这里提供官网和之前转发的一篇下载博客的网址，点开链接直接Ctrl + s保存即可。

官网下载：http://code.jquery.com/
下载博客：https://blog.csdn.net/tyrant_forever/article/details/107333046

注意：下载时有压缩版（名称中有min）和未压缩版，一半在开发过程中使用的是未压缩版，因为有缩进且命名规范，方便阅读。而上线后使用的是压缩版，因为压缩版会删除一些空格，简化命名从而达到提升网页响应速度的目的。

2、引入jQuery库：

代码实现:

<script src="js/jquery-1.6.4.js"></script>

3、编写jQuery代码

第一个jQueryhelloworld：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02-jQuery-HelloWorld</title><script src="js/jquery-1.6.4.js"></script>//jQuery固定格式<script>$(document).ready(function () {alert("hello jquery");})</script>
</head>
<body></body>
</html>

注：

jQuery只有按上述代码所示的固定格式来写，将来在function中才能拿到页面中所有的元素

入口函数：

原生js和jQuery入口函数的区别：

1、由于原生js和jQuery入口函数的加载模式不同，原生js会等到dom元素加载完毕，并且图片也加载完毕才会执行。jQuery会等到dom元素加载完毕，但不会等到图片也加载完毕就会执行。

2、原生js如果编写了多个入口函数，后面编写的会覆盖前面编写的，jQuery中编写多个入口函数，后面的不会覆盖前面的

jQuery入口函数的其他写法：

代码实现：

    <script>//1、第一种写法$(document).ready(function () {alert("method1");})//2、第二种写法jQuery(document).ready(function () {alert("method2");})//3、第三种写法$(function () {alert("method3");})//4、第四种写法jQuery(document)() {alert("method4");})</script>

推荐使用第三种，因为写得少。

jQuery冲突问题：

发生原因：

jQuery使用了$来简化我们的代码，但是其他js框架作者也可以使用$来简化代码，这就使得冲突产生。而且如果发生了冲突，后引入的就会覆盖前引入的。

解决方法：

在开头（至少是jQuery代码之前）加入如下一行代码

jQuery.noConflict();

表明jQuery放弃的对$的使用权，所以需要将jQuery中的$换成jQuery，但是如果你释放之后还想简单的使用，可以自定义一个访问符

代码实现：

    <script>var sl = jQuery.noConflict();sl(function () {alert("test");});</script>

核心函数：

什么是核心函数：

    <script>$();</script>

$()就代表调用jQuery的核心函数

核心函数可以接受的参数：

1、接受一个函数（如入口函数）

2、接受一个字符串

2.1 接受一个字符串选择器（会被包装成一个jQuery对象传给我们）

2.2 接受一个代码片段（会被包装成一个jQuery对象传给我们）

3、接受一个dom元素（会被包装成一个jQuery对象传给我们）

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>06-jQuery核心函数</title><script src="js/jquery-1.6.4.js"></script><script>//1、接受一个函数$(function () {alert("hello world!");//2、接受一个字符串//2.1、接受一个字符串选择器var $box1 = $(".box1");var $box2 = $("#box2");console.log($box1);console.log($box2);//2.2、接受一个字符串代码片段var $p = $("<p>我是p标签</p>");$box1.append($p);//3、接受一个dom元素var span = document.getElementsByTagName("span")[0];console.log(span);var $span = $(span);console.log($span);});</script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span标签</span>
</body>
</html>

jQuery对象：

什么是jQuery对象：

jQuery对象是一个伪数组

什么是伪数组：

有0到length-1个属性，并且有length属性

静态方法:

回顾：

静态方法：

直接添加到类上面，通过类名调用

实例方法：

添加到类的原型上，通过实例调用

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>08-静态方法和实例方法</title><script src="js/jquery-1.6.4.js"></script><script>//定义一个类function AClass() {}//添加一个静态方法AClass.staticMethod = function () {alert("staticMethod");}//调用静态方法AClass.staticMethod();//添加一个实例方法AClass.prototype.instanceMethod = function () {alert("instanceMethod");}//创建一个实例var class1 = new AClass();//调用实例函数class1.instanceMethod();</script>
</head>
<body></body>
</html>

常用静态方法：

1、each

each方法可以遍历数组和伪数组，至于什么是伪数组，前文已经说过了，这里不再赘述。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>09-静态方法each</title><script src="js/jquery-1.6.4.js"></script><script>//数组var array1 = [1, 3, 5, 7, 9];//伪数组var object1 = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};$.each(array1,function (index, value) {console.log(index, value);});$.each(object1,function (index,value) {console.log(index, value);})</script>
</head>
<body></body>
</html>

2、map

map于each一样可以遍历数组和伪数组

代码实现：

    <script>//数组var array1 = [1, 3, 5, 7, 9];//伪数组var object1 = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};$.map(array1,function (value,index) {console.log(index, value);})$.map(object1,function (value,index) {console.log(index, value);})</script>

问题来了，each和map有什么区别？

我们来看如下代码：

    <script>//数组var array1 = [1, 3, 5, 7, 9];//伪数组var object1 = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};// $.map(array1,function (value,index) {//     console.log(index, value);// })var res1 = $.map(object1,function (value,index) {console.log(index, value);});var res2 = $.each(object1,function (index,value) {console.log(index, value);});var res3 = $.map(object1,function (value,index) {console.log(index, value);return index + value;});var res4 = $.each(object1,function (index,value) {console.log(index, value);return index + value;});console.log(res1);console.log(res2);console.log(res3);console.log(res4);</script>

运行结果：

得出结论：

（1）each遍历谁默认返回值就是谁，map的默认返回值是一个空数组。

（2）each不支持在回调函数中对遍历的数组进行处理，map可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回。

3、trim

作用：去除字符串两端空格

使用方法;

    <script>var str = "   test   ";str = $.trim(str);console.log("====" + str + "====");</script>

注：如果直接调用trim方法的话不会有影响，需要使用的一个变量接受trim函数的返回值

4、isWindow

作用：判断是否为window

代码实现：

    <script>var array1 = [1, 3, 5, 7, 9];var win = window;var res1 = $.isWindow(array1);var res2 = $.isWindow(win);console.log(res1);console.log(res2);</script>

运行结果：

5、isArray

作用:判断是否为真数组

代码实现：

    <script>var array1 = [1, 3, 5, 7, 9];var win = window;var res1 = $.isArray(array1);var res2 = $.isArray(win);console.log(res1);console.log(res2);</script>

运行结果;

6、isFunction

作用：判断是否为function

    <script>var array1 = [1, 3, 5, 7, 9];var fun = function () {};var res1 = $.isFunction(array1);var res2 = $.isFunction(fun);console.log(res1);console.log(res2);</script>

运行结果：

注意：jQuery本身就是一个函数

7、holdReady

作用：暂停和恢复ready事件，企业开发中可能出现一种情况是你希望一些事件执行完毕后在执行入口函数，此时可以使用到此函数。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>12-静态方法holdReady</title><script src="js/jquery-1.6.4.js"></script><script>$.holdReady(true);$(document).ready(function () {alert("ready");})</script>
</head>
<body>
<button>恢复ready事件</button>
<script>var btn = document.getElementsByTagName("button")[0];btn.onclick = function () {$.holdReady(false);}
</script>
</body>
</html>

分析：

上述代码在一开始暂停了ready事件，并使用了原生的js为按钮添加了一个事件，当点击按钮时恢复ready事件。

常用选择器：

注：这里说的选择器不包括像类选择器、ID选择器等属于css选择器范畴的选择器，因此主要讲解内容选择器。

1、empty

作用：找到既没有文本内容也没有子元素的指定元素。

2、parent

作用：找到有文本内容或有子元素的指定元素。

3、contains

作用：找到包含制定文本内容的指定元素，注意是包含不是等于。

4、has

作用：找到包含指定子元素的指定元素。

属性和属性节点：

什么是属性：

对象身上保存的变量

如何操作属性：

    <script>$(function () {function Person(){}var per = new Person();//修改属性方法一per.name = "rend";console.log(per.name);console.log("---------------");//修改属性方法二per["age"] = "20";console.log(per["age"]);});</script>

什么是属性节点：

在编写html代码时，在html标签中添加的属性就是属性节点

如何操作属性节点：

代码实现：

            //设置属性节点的值的方法var span1 = document.getElementsByTagName("span")[0];span1.setAttribute("name","tyratForever");//获取属性节点的值的方法console.log(span1.getAttribute("name"));

属性和属性节点有什么区别：

任何对象都有属性，只有dom对象才有属性节点

jQuery操作属性和属性节点的方法：

操作属性节点的方法：

1、attr：

作用：获取或者设置属性节点的值。

注意：

（1）可以传递一个参数，也可传递两个参数，如果传递一个参数，代表获取一个属性节点的值，如果传递两个参数，代表设置属性节点的值。

（2）如果是获取，无论找到多少个元素，都会只返回第一个元素的制定节点的值。

（3）如果是设置，找到多少个元素就会设置多少个元素。

（4）如果是设置，如果设置的属性节点不存在，系统会自动新增。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>16-jQuery的attr方法</title><script src="js/jquery-1.12.4.js"></script><script>$(function () {//获取属性节点的值console.log($("span").attr("class"));//设置属性节点的值$("span").attr("class", "box");})</script>
</head>
<body>
<span class="span1" name="rend"></span>
<span class="span2" name="tyrantForever"></span>
</body>
</html>

2、removeAttr:

作用：删除属性节点

注意:

（1）会删除所有找到元素指定的属性节点

（2）jQuery1.6.4不支持该方法

代码实现（借用上面的框架）：

 //删除属性节点$("span").removeAttr("class name");

操作属性的方法：

1、prop

特点和attr一致

2、removeProp

特点和removeProp一致

注：因为原理大差不差的，这里就不在赘述了，想要查看节点的话可以看看这篇博客：

https://blog.csdn.net/tyrant_forever/article/details/107400872

代码实现;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>17-jQuery的prop方法</title><script src="js/jquery-1.12.4.js"></script><script>$(function () {//设置属性的值$("span").eq(0).prop("demo", "rend");$("span").eq(1).prop("demo", "tyratForever");//获取属性的值console.log($("span").prop("demo"));//删除节点$("span").removeProp("demo");})</script>
</head>
<body>
<span class="span1" name="rend"></span>
<span class="span2" name="tyrantForever"></span>
</body>
</html>

重点：prop可以操作属性节点

那么问题来了，开发过程中使用什么操作属性节点？

官方推荐：

具有true和false的属性节点如checked selected 或者disableed使用prop（），其他使用attr

类相关操作方法：

1、addClass

作用：添加类如果要添加多个，多个类名之间用空格隔开

2、removeClass

作用：删除类如果需要删除多个，多个类名之间用空格隔开

3、toggleClass

作用：切换类（有的话删除，没有的话添加）

代码实现;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>19-jQuery操作类相关的方法</title><style>*{margin: 0;padding: 0;}.class1{width: 100px;height: 100px;background: red;}.class2{border: 10px solid #000;}</style><script src="js/jquery-1.12.4.js"></script><script>$(function () {var btn = document.getElementsByTagName("button");btn[0].onclick = function () {$("div").addClass("class1 class2");}btn[1].onclick = function () {$("div").removeClass("class1 class2");}btn[2].onclick = function () {$("div").toggleClass("class1 class2");}})</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>

HTML代码/文本/值相关操作方法：

1、html([val|fn])

2、text([val|fn])

3、val([val|fn|arr])

这里真没什么好说的了，和js里面一模一样

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>20-jQuery文本值相关的方法</title><script src="js/jquery-1.12.4.js"></script><script>$(function () {var btns = document.getElementsByTagName("button");btns[0].onclick = function () {$("div").html("<p>我是段落<span>我是span</span></p>");}btns[1].onclick = function () {console.log($("div").html());}btns[2].onclick = function () {$("div").text("<p>我是段落<span>我是span</span></p>");}btns[3].onclick = function () {console.log($("div").text());}btns[4].onclick = function () {$("input").val("请输入内容");}btns[5].onclick = function () {console.log($("input").val());}})</script><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;border: 1px solid #000;}</style>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>

操作CSS样式的方法：

1、逐个设置

2、链式编程

3、批量编程

4、获取元素css属性值

不必多言，一切尽在代码中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>21-jQuery操作css样式的方法</title><script src="js/jquery-1.12.4.js"></script><script>$(function () {//1、逐个设置$("div").css("width","100px");$("div").css("height", "100px");$("div").css("background","red");//2、链式编程$("div").css("width","100px").css("height", "100px").css("background","blue");//3、批量编程$("div").css({width:"100px",height:"100px",background:"yellow"});//获取元素的属性值console.log($("div").css("background"));});</script>
</head>
<body>
<div></div>
</body>
</html>

https://www.dkcj.cn/info/7040.html

jQuery是什么：

关于版本介绍：

如何使用jQuery：

第一个jQueryhelloworld：

入口函数：

原生js和jQuery入口函数的区别：

jQuery入口函数的其他写法：

jQuery冲突问题：

核心函数：

什么是核心函数：

核心函数可以接受的参数：

jQuery对象：

什么是jQuery对象：

什么是伪数组：

静态方法:

回顾：

常用静态方法：

常用选择器：

属性和属性节点：

什么是属性：

如何操作属性：

什么是属性节点：

如何操作属性节点：

属性和属性节点有什么区别：

jQuery操作属性和属性节点的方法：

操作属性节点的方法：

操作属性的方法：

类相关操作方法：

HTML代码/文本/值 相关操作方法：

操作CSS样式的方法：

相关文章：

HTML代码/文本/值相关操作方法：