jquery教程视频【jquery 教程】

手把手带你快速入门jQuery（建议收藏！！！）

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

搭配视频效果更佳哦~~~

https://www.ixigua.com/6846624275877593611

jQuery 是一款跨主流浏览器的JavaScript 库，封装了JavaScript 相关方法调用，简化JavaScript 对HTML DOM 操作

官网地址： https://jquery.com/

官网首页jQuery 介绍：

原文翻译：

jQuery 是一个快速，小巧，功能丰富的JavaScript 库。它通过易于使用的API 在大量浏览器中运行，使得HTML 文档遍历和操作，事件处理，动画和Ajax 变得更加简单。通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写JavaScript 的方式。

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和FireFox， Google 浏览器处理 AJAX，创建异步对象是不同的，而jQuery 能够使用一种方式在不同的浏览器创建AJAX 异步对象。

其他优点：

（1）写少代码,做多事情【write less do more】

（2）免费，开源且轻量级的js 库，容量很小

（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX 功能

（5）文档手册很全，很详细

（6）成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7）出错后，有一定的提示信息

（8）不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用JavaScript 定位DOM 对象常用的三种方式：

（1）通过ID 属性：document.getElementById()

（2）通过 class 属性：getElementsByClassName()

（3）通过标签名：document.getElementsByTagName()

上面代码可以看出JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

官网下载地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

编写jQuery 的工具很多，能编写HTML 的工具都支持jQuery. 例如记事本，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库使用，可以轻量的开发工具，例如EditPlus ,HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载html 页面 DOM 后,显示一个提示信息框

实现步骤：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jQuery.js 文件到目录

4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

5. $(document)，将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

6. 完整代码

DOM 对象是用JavaScript 语法创建的对象，也看做是 js 对象。

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象，转换为jQuery 对象才可以使用jQuery 中的提供的方法，操作DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

2. 转换 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建html 文件 jQueryToDom.html

1. 页面添加 text ，button

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

选择器: 就是定位条件；通知jquery 函数定位满足条件的DOM 对象

根据ID，class 属性，标签类型名定位HTML 元素，转为jQuery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有DOM 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

$(\”:tr\”): 不能用，tr 不是input 标签语法： $(\”:type 属性值\”)

例如：

$(\”:text\”)选取所有的单行文本框

$(\”:password\”)选取所有的密码框

$(\”:radio\”)选取所有的单选框

$(\”:checkbox\”)选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(\”div\”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

1. 选择第一个first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

语法：$(\”选择器:last\”)

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

语法：$(“选择器:gt(数组索引)”)

1.定义样式

2. 页面加入div

3. 定义js 函数

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterForm.html 页面：

js 函数

jQuery入门看这一篇就够了！超详细！（二）

“这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

先变成自己喜欢的模样，

再去遇见无需取悦的人。

– 2023.06.12 –

上期给大家讲解了jQuery的基础概念和核心函数中选择器的使用，并且举了非常多的例子来说明各种选择器的使用，大家有没有跟着一起练习呢?今天小编将继续给大家讲解jQuery的相关内容。

1、工具

$.each方法

方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length – 1，其他对象通过其属性名进行迭代。

需求描述：给定一个数组，使用$.each方法进行遍历输出

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];

$.each(arr, function (index, element) {

console.log(index, element);

});

需求描述：给定一个对象，使用$.each方法进行遍历输出

var obj = {

name: \’Tom\’,

age: 28,

speak: function () {}

};

$.each(obj, function (key, value) {

console.log(key, value);

});

方法描述：去掉字符串起始和结尾的空格。

需求描述：给定一个字符串，去掉该字符串的前后空格

var str = \’ hello \’;

console.log($.trim(str));

方法描述：确定JavaScript 对象的类型。

需求描述：给定一个对象，输出该对象的类型

var str = \’ hello \’;

console.log($.type(str));

$.isArray方法

方法描述：用来测试指定对象是否为一个数组。

需求描述：给定一个对象，输出该对象是不是数组类型

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];

console.log($.isArray(arr));

方法描述：用来测试指定对象是否为一个函数。

需求描述：给定一个对象，输出该对象是不是函数类型

var fun = function () {

console.log(\”hello\”);

};

console.log($.isFunction(fun));

方法描述：执行一个异步的HTTP的请求。

需求描述：执行一个异步的HTTP GET请求，从服务器加载数据。

$.ajax({

url: \’/user/login\’,

type: \’get\’,

data: {

username: \’zhangsan\’,

password: \’123456\’

dataType: \’text\’,

success: function (response) {

alert(response);

error: function (response) {

alert(response);

}

});

需求描述：执行一个异步的HTTP POST请求，从服务器加载数据。

$.ajax({

url: \’/user/login\’,

type: \’post\’,

data: {

username: \’zhangsan\’,

password: \’123456\’

dataType: \’text\’,

success: function (response) {

alert(response);

error: function (response) {

alert(response);

}

});

方法描述：使用一个HTTP GET请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

$.get(\’/user/login\’, {username: \’zhangsan\’, password: \’123456\’}, function (response) {

alert(response);

});

方法描述：使用一个HTTP POST请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

$.post(\’/user/login\’, {username: \’zhangsan\’, password: \’123456\’}, function (response) {

alert(response);

});

方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

需求描述：设置p标签的title属性为”我是attr修改后的段落标题“

$(\’#content\’).attr(\’title\’, \’我是attr修改后的段落标题\’);

需求描述：读取p标签的title属性并输出

console.log($(\’#content\’).attr(\’title\’));

方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

需求描述：设置复选框的状态为选中状态

<input type=\”checkbox\”>复选框

$(\’:checkbox\’).prop(\’checked\’, \’true\’);

<input type=\”checkbox\” checked>复选框

console.log($(\’:checkbox\’).prop(\’checked\’));

方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

需求描述：设置文本框的值为”123456“

$(\’:text\’).val(\’123456\’);

需求描述：读取文本框的值并输出

console.log($(\’:text\’).val());

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

需求描述：设置div的背景颜色为红色，字体颜色为白色

<div>我是div</div>

$(\’div\’).css({

\’background\’: \’red\’,

\’color\’: \’white\’

});

需求描述：获取div的背景颜色和字体颜色并输出

<div style=\”background: red;color: white\”>我是div</div>

console.log($(\’div\’).css(\’background\’));

console.log($(\’div\’).css(\’color\’));

方法描述：为每个匹配的元素添加指定的样式类名。

需求描述：为所有的li添加样式”beauty“

.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

<ul>

</ul>

$(\’li\’).addClass(\’beauty\’);

方法描述：移除集合中每个匹配元素上一个，多个或全部样式。

需求描述：为所有的li移除样式”beauty“

.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

<ul>

</ul>

$(\’li\’).removeClass(\’beauty\’);

方法描述：确定任何一个匹配元素是否有被分配给定的样式类。

需求描述：判断p标签是否包含”beauty“的样式

.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

<p></p>

console.log($(\’p\’).hasClass(\’beauty\’));

方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。

注意：如果存在（不存在）就删除（添加）一个样式类

需求描述：当单击按钮的时候，隐藏div，再次单击按钮的时候，显示div

.hide {

width: 100px;

height: 100px;

display: none;

}

<div>我是div</div>

$(\’button\’).click(function () {

$(\’div\’).toggleClass(\’hide\’);

});

3、尺寸

width()

方法描述：获取内容元素width的值。

height()

方法描述：获取内容元素height的值。

innerWidth()

方法描述：获取内容元素width+padding的值。

innerHeight()

方法描述：获取内容元素height+padding的值。

outerWidth()

方法描述：outerWidth(false/true)，获取内容元素width+padding+border的值，如果是true再加上margin的值。

outerHeight()

方法描述：outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值。

综合演示

需求描述：创建按一个div，获取以上六种值

.box {

margin: 30px;

padding: 20px;

border: 10px;

width: 100px;

height: 100px;

background: coral;

}

var $box = $(\’.box\’);

console.log($box.width(), $box.height());// 100 100

console.log($box.innerWidth(), $box.innerHeight());// 140 140

console.log($box.outerWidth(), $box.outerHeight());// 160 160

console.log($box.outerWidth(true), $box.outerHeight(true));// 220 220

方法描述：相对页面左上角的坐标。

需求描述：获取div相对页面左上角的坐标。

.box {

width: 100px;

height: 100px;

background: coral;

}

var offset = $(\’.box\’).offset();

console.log(offset.left, offset.top);

方法描述：相对于父元素左上角的坐标。

需求描述：获取div相对于父元素左上角的坐标

.box-container {

width: 300px;

height: 300px;

background: pink;

position: absolute;

left: 20px;

top: 20px;

}

.box {

width: 100px;

height: 100px;

background: coral;

position: absolute;

left: 20px;

top: 20px;

}

</div>

var offset = $(\’.box\’).position();

console.log(offset.left, offset.top);

scrollLeft()

方法描述：读取/设置滚动条的X坐标，该方法读写合一。

读取页面滚动条的Y坐标(兼容chrome和IE)

var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();

设置页面滚动条滚动到指定位置(兼容chrome和IE)

$(\’body,html\’).scrollLeft(60);

需求描述：设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器

$(\’body\’).css(\’width\’, \’2000px\’);

$(\’html,body\’).scrollLeft(300);

方法描述：读取/设置滚动条的Y坐标，该方法读写合一。

读取页面滚动条的Y坐标(兼容chrome和IE)

var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();

设置页面滚动条滚动到指定位置(兼容chrome和IE)

$(\’body,html\’).scrollTop(60);

需求描述：设置页面的高度为2000px，设置滚动条的Y轴坐标为300px，要求兼容各种浏览器

$(\’body\’).css(\’height\’, \’2000px\’);

$(\’html,body\’).scrollTop(300);

方法描述：设置/获取元素的文本内容，该方法读写合一。

需求描述：设置p段落标签的内容为“我是段落”

<p></p>

$(\’p\’).text(\’我是段落\’);

需求描述：获取p段落标签的内容并输出

console.log($(\’p\’).text());

方法描述：设置/获取元素的html内容，该方法读写合一。

需求描述：设置ul列表标签的li列表项

var li = \'<li>我是列表项</li>\’;

$(\’ul\’).html(li);

需求描述：获取ul列表中的列表项并输出

<ul><li>我是列表项</li></ul>

console.log($(\’ul\’).html());

方法描述：向当前匹配的所有元素内部的最后面插入指定内容。

需求描述：为当前的ul向后添加一个列表项

<ul>

<li>我是列表项1</li>

<li>我是列表项2</li>

</ul>

var last = \'<li>我是最后一个列表项</li>\’;

$(\’ul\’).append(last);

方法描述：将指定的内容追加到当前匹配的所有元素的最后面。

需求描述：为当前的ul向后添加一个列表项

<ul>

<li>我是列表项1</li>

<li>我是列表项2</li>

</ul>

var last = \'<li>我是最后一个列表项</li>\’;

$(last).appendTo($(\’ul\’));

方法描述：向当前匹配的所有元素内部的最前面插入指定内容。

需求描述：为当前的ul向前添加一个列表项

<ul>

<li>我是列表项1</li>

<li>我是列表项2</li>

</ul>

var first = \'<li>我是第一个列表项</li>\’;

$(\’ul\’).prepend(first);

方法描述：将指定的内容追加到当前匹配的所有元素的最前面。

需求描述：为当前的ul向前添加一个列表项

<ul>

<li>我是列表项1</li>

<li>我是列表项2</li>

</ul>

var first = \'<li>我是第一个列表项</li>\’;

$(first).prependTo($(\’ul\’));

方法描述：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

需求描述：在div的后边插入一个段落

<div>我是div</div>

var after = \'<p>我是段落</p>\’;

$(\’div\’).after(after);

方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。

需求描述：在div的前边插入一个段落

<div>我是div</div>

var before = \'<p>我是段落</p>\’;

$(\’div\’).before(before);

insertAfter()

方法描述：.after()和.insertAfter() 实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。对于 .after()，选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter()，刚好相反，内容在方法前面，它将被放在参数里元素的后面。

需求描述：在div的后边插入一个段落

<div>我是div</div>

var content = \'<p>我是段落</p>\’;

$(content).insertAfter($(\’div\’));

insertBefore()

方法描述：.before()和.insertBefore()实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。对于 .before()，选择表达式在函数前面，参数是将要插入的内容。对于 .insertBefore()，刚好相反，内容在方法前面，它将被放在参数里元素的前面。

需求描述：在div的前边插入一个段落

<div>我是div</div>

var content = \'<p>我是段落</p>\’;

$(content).insertBefore($(\’div\’));

方法描述：删除所有匹配元素的子元素。

需求描述：将ul列表下所有的子节点全部移除

<ul>

</ul>

$(\’ul\’).empty();

方法描述：删除所有匹配的元素。

注意：同时移除元素上的事件及 jQuery 数据

需求描述：将ul列表下所有的p子节点全部移除

<ul>

</ul>

$(\’ul>p\’).remove();

方法介绍：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

需求描述：将ul下的所有li替换为p标签

<ul>

</ul>

$(\’ul>li\’).replaceWith(\'<p>我是段落</p>\’);

方法介绍：.replaceAll()和.replaceWith()功能类似，但是目标和源相反。

需求描述：将ul下的所有li替换为p标签

<ul>

</ul>

$(\'<p>我是段落</p>\’).replaceAll($(\’ul>li\’));

方法描述：创建一个匹配的元素集合的深度拷贝副本。如果传入一个true，则表示是否会复制元素上的事件处理函数，从jQuery 1.4开始，元素数据也会被复制。

需求描述：为ul列表创建一个深克隆并追加到body后

<ul>

</ul>

var ul = $(\’#ul\’).clone();

$(\’body\’).append(ul);

方法描述：获取集合中每个匹配元素的父元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出id为two的li的父元素

<ul>

</ul>

console.log($(\’#two\’).parent()[0]);

方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出ul下的所有子元素

<ul>

</ul>

var childrens = $(\’ul\’).children();

for (var i = 0; i < childrens.length; i++) {

console.log(childrens[i]);

}

方法描述：获取集合中每个匹配元素紧邻的前一个兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的前一个兄弟元素并输出

<ul>

</ul>

console.log($(\’#two\’).prev()[0]);

方法描述：获得集合中每个匹配元素的所有前面的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的前边所有的兄弟元素并输出

<ul>

</ul>

var prevs = $(\’#two\’).prevAll();

for (var i = 0; i < prevs.length; i++) {

console.log(prevs[i]);

}

方法描述：获取集合中每个匹配元素紧邻的后一个兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的后一个兄弟元素并输出

<ul>

</ul>

console.log($(\’#two\’).next()[0]);

方法描述：获得集合中每个匹配元素的所有后面的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的后边所有的兄弟元素并输出

<ul>

</ul>

var nexts = $(\’#two\’).nextAll();

for (var i = 0; i < nexts.length; i++) {

console.log(nexts[i]);

}

方法描述：获得集合中每个匹配元素的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的所有兄弟元素并输出

<ul>

</ul>

var siblings = $(\’#two\’).siblings();

for (var i = 0; i < siblings.length; i++) {

console.log(siblings[i]);

}

以上jQuery核心函数中工具和Ajax方法以及jQuery核心对象的属性和基本的操作的相关内容，内容比较多，下期接着更新遍历、事件和动画等内容，敬请期待哦！

今天就先讲到这里了，更多Java基础知识持续更新中，欢迎一起学Java！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

jQuery 简介

本教程我们来学习 JQuery 的基础入门知识。JQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库。jQuery 极大的简化了 JavaScript 编程，例如以前要一大段 JavaScript 代码才能实现的功能，使用 jQuery 很轻松就能完成。

轻量级，jQuery 的体积较小，压缩之后，大约只有 100KB。
强大的选择器，jQuery 支持几乎所有的 CSS 选择器，以及 jQuery 自定义的特有选择器。
出色的 DOM 封装，jQuery 封装了大量常用的 DOM 操作，使开发者在编写 DOM 操作相关程序的时候能够更加得心应手。
浏览器兼容性，jQuery 消除了浏览器兼容问题。
可靠的事件处理机制，jQuery 的事件处理机制吸收了 JavaScript 中的事件处理函数的精华，使得 jQuery 在处理事件绑定时非常可靠。
提供了丰富多彩的页面动态效果。
与 Ajax 技术的完美结合，极大地方便了程序的开发，增强了页面交互，提升了用户体验。
有丰富的插件支持，目前已经有成百上千的官方插件支持，而且不断有新插件面世。

HTML 元素选取
HTML/DOM 操作
CSS 操作
JavaScript 效果和动画
HTML DOM 遍历和修改
AJAX
Utilities

除此之外，jQuery 还提供了一些插件供我们使用，对于代码的实现方便且快捷。

原生 JavaScript 的 API 名字太长，不容易记住，jQuery 的 API 名字容易记住。
原生 JavaScript 有的代码冗余，jQuery 的代码简洁。
原生 JavaScript 中的属性或者方法有些浏览器无法兼容，jQuery 帮我们解决了浏览器兼容问题。
原生 JavaScript 容错率比较低，前面的代码出现问题，后面的代码执行不到。jQuery 容错率比较高，前面的代码出现问题，不影响后面的代码。
原生 JavaScript 不能添加多个入口函数，如果添加了多个，后面的会把前面的覆盖掉。jQuery 可以写多个入口函数。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG

全部

行业动态

C4D教程

C4D百科

jquery教程视频【jquery 教程】收藏 0

2025-02-04 01:35 作者：中望小编来源：互联网点击：0

手把手带你快速入门jQuery（建议收藏！！！）

jQuery入门看这一篇就够了！超详细！（二）

jQuery 简介

继续阅读本文相关话题

C4D百科

3Dmax和C4D有什么区别？

上一篇

C4D百科

jquery教程第四版【jquery教程 csdn】

下一篇

中望小编

C4D百科

jquery插件库怎么用 jquery插件下载下来怎么用

中望小编

C4D百科

jquery插件怎么下载【jquery插件免费下载】

中望小编

C4D百科

jquery插件怎么使用-如何使用jquery插件

中望小编

C4D百科

jquery插件怎么写(jquery.js插件)

中望小编

C4D百科

jquery插件怎么用,jquery插件库有哪些

jquery教程视频【jquery 教程】 收藏 0

2025-02-04 01:35 作者： 中望小编 来源：互联网 点击：0

手把手带你快速入门jQuery（建议收藏！！！）

jQuery入门看这一篇就够了！超详细！（二）

jQuery 简介

继续阅读本文相关话题

C4D百科

3Dmax和C4D有什么区别？

上一篇

C4D百科

jquery教程第四版【jquery教程 csdn】

下一篇

中望小编

中望小编

中望小编

中望小编

中望小编

jquery教程视频【jquery 教程】收藏 0

2025-02-04 01:35 作者：中望小编来源：互联网点击：0