jquery官网使用教程(jquery 官网) 收藏 0

了解jquery这一篇够了

使用javascript开发过程中，有许多的缺点：

1. 查找元素的方法单一，麻烦。
2. 遍历数组很麻烦，通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果，也很麻烦
5. 代码冗余。

jQuery的官网 http://jquery.com/jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

What is jQuery?

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

官网下载地址：http://jquery.com/download/jQuery版本有很多，分为1.x 2.x 3.x1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

大版本分类：

• 1.x版本：能够兼容IE678浏览器
• 2.x版本：不能兼容IE678浏览器
• 3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩版和未压缩版：

• jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
• jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

使用jQuery的三个步骤：

1. 引入jQuery文件
2. 入口函数
3. 功能实现

关于jQuery的入口函数：

jQuery入口函数与js入口函数的对比：

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组）
4. DOM对象与jQuery对象的方法不能混用。

DOM对象转换成jQuery对象：【联想记忆：花钱】

jQuery对象转换成DOM对象：

• jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
• jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。【查看jQuery文档】
• jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

总结：跟css的选择器用法一模一样。

总结：跟css的选择器用法一模一样。

总结：这类选择器都带冒号

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

【案例：下拉菜单】【案例：突出展示】【案例：手风琴】【案例：淘宝精品】

对应案例：案例-《tab切换》

对应案例：案例-《美女相册》

对应案例：案例-《表格全选》

对应案例：案例-《下拉菜单》

对应案例：案例-《轮播图》

对应案例：案例-《手风琴菜单》

对应案例：案例-《音乐导航》对应案例：案例-《工具栏》

【案例-《弹幕》】

val方法用于设置和获取表单元素的值，例如input、textarea的值

html方法相当于innerHTML text方法相当于innerText

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

设置或者获取高度

获取网页的可视区宽高

设置或者获取垂直滚动条的位置

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单事件注册

缺点：不能同时注册多个事件

bind方式注册事件

缺点：不支持动态事件绑定

delegate注册委托事件

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

on注册事件

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

on注册委托事件

on注册事件的语法：

unbind方式（不用）

undelegate方式（不用）

off方式（推荐）

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

【案例：五角星评分案例.html】

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

【案例：不同的透明度.html】

jQuery使用作为标示符，但是如果与其他框架中的作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

1. jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

1. jquery.lazyload.js

懒加载插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

使用jquery.ui.js手风琴菜单

原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。

更多内容：

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。

现在的「新人」依然可以学习 jQuery 的思想，因为以「新人」的水平，直接理解 Vue / React 的思想难度较大，jQuery 是一个很不错的中间过渡

jQuery 安装

本节我们学习 jQuery 的安装，我们在实际项目中，如果要使用 jQuery，则需要先下载 jQuery 库，然后把它引入到要使用的网页中。

jQuery 有下面几种使用方法：

• 从官网下载 jQuery 库，然后引入到页面中。
• 使用命令安装 jQuery，例如 npm、bower 命令。
• 从 CDN 中载入 jQuery， 比如从 Google 中加载 jQuery。

我们 可以在 jQuery 的官网下载 jQuery，下载地址为：https://jquery.com/download/。

有两个版本的 jQuery 可供下载：

• 生产版本：用于实际网站中，已被精简和压缩。
• 开发版本：用于测试和开发，未压缩，是可读代码。

我们根据需要下载相应的版本，例如我下载的是 jquery-3.5.1.min.js 文件，然后可以把下载好文件放到与网页相同的目录中，这样更方便使用。

接着就可以在页面中引入 jquery 文件啦，引入格式如下所示：

jQuery 在 npm 上注册为软件包，所以我们可以使用 npm CLI 命令安装最新版本的 jQuery：

或者使用 Yarn 命令安装也可以：

使用这两种方式安装 jQuery，我们可以在 node_modules/jquery/dist/ 中找到一个未压缩的发行版，一个压缩的发行版和一个映射文件。

除了 npm，jQuery 还通过 Bower 注册为软件包，所以我们也可以使用 bower 命令安装最新版本的 jQuery：

使用这种方式，会将 jQuery 安装到 Bower 的安装目录，默认为 bower_components。我们可以在 bower_components/jquery/dist/ 目录下找到一个未压缩的发行版，一个压缩的发行版和一个映射文件。

如果我们不希望下载并存放 jQuery 的话，我们也可以从 CDN（内容分发网络）引用它。

CDN 是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

比如谷歌和微软服务器都存有 jQuery，如果我们需要引用的话，可以像下面这样：

• Google 引用 jQuery：<script src=\”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\”></script>
• Microsoft 引用 jQuery：<script src=\”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js\”></script>

上面我们讲到了 jQuery 的几种安装方式，在后面的学习章节中，我们会采用直接在官网下载 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 库引入。使用如下语句：

<script type=\”text/javascript\” src=\”js/jquery-3.4.1.js\”></script>

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>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=\”text\”>

<input type=\”password\”>

<input type=\”radio\”>

<input type=\”checkbox\”>

<input type=\”button\”>

<input type=\”file\”>

<input type=\”submit\”>

<input type=\”reset\”>

$(\”: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 函数

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