目录
一、Jquery的下载与安装
1.下载及其版本
2.安装
3.优点
二、Jquery核心
三、DOM对象与Jquery包装集对象
1.DOM对象
2.Jquery包装集对象
3.DOM对象转jQuery对象
4.jQuery对象转DOM对象
四、jQuery选择器
1.基础选择器
2.层次选择器
3.表单选择器
五、jQuery Dom操作
1.操作元素的属性
(1).获取属性?
(2).设置属性
(3).移除属性
2.操作元素的样式
3.操作元素的内容
4.创建元素
5.添加元素
(1).前追加子元素
(2).后追加子元素
(3).前追加同级元素
(4).后追加同级元素
6.删除元素
7.遍历元素
六、jQuery事件
1.ready()加载事件
2.bind()绑定事件
(1).绑定单个事件
(2).绑定多个事件

jQuery 是一套兼容多浏览器的 javascript 脚本库。核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼”。同时网络上丰富的 jQuery 插件也让我们的工作变成了“有了 jQuery，一切 so easy。”
jQuery 在 2006 年1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。


一、Jquery的下载与安装 1.下载及其版本 有两个版本的 jQuery 可供下载：

• Production version - 用于实际的网站中，已被精简和压缩。
• Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

2.安装 在页面中引入：

如果不想下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
谷歌和微软的服务器都存有 jQuery 。

或：

3.优点 (1).提供了强大的功能函数
(2).解决了浏览器兼容性问题
(3).实现丰富的UI和插件
(4).纠正错误的脚本知识

二、Jquery核心 $符号在jQuery中代表对jQuery对象的引用，“jQuery”是核心对象。
通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

三、DOM对象与Jquery包装集对象 原始的DOM对象只有DOM接口提供的方法和属性，通过JS代码获取的对象都是DOM对象。而通过jquery获取的对象是jquery包装集对象，简称jquery对象。只有jquery对象才能使用jquery提供的方法。
1.DOM对象 JavaScript中获取DOM对象，DOM对象只有有限的属性和方法：

let div = document.getElementById("testDiv") let div = document.getElementsByTagName("div")[0]

2.Jquery包装集对象 可以说是DOM对象的扩充。在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，比如获取一个包含元素的jQuery包装集：

let jqueryObject = $("#testDiv") let j = jqueryObject[0]

3.DOM对象转jQuery对象 DOM对象转为jQuery对象，只需要利用$()方法进行包装即可

let div = document.getElementById("testDiv") let jqueryDiv = $(div)

4.jQuery对象转DOM对象 jQuery对象转DOM对象，只需要取元素中的数组即可

//第一种方式 获取jQuery对象 let jqueryDiv = jQuery("#testDiv") //第二种方式 获取jQuery对象 jqueryDiv = $("testDiv")//将已经获取的jQuery对象转为DOM对象 let dom = jqueryDiv[0]

通过遍历jQuery对象数组得到的对象是DOM对象，可以通过$()转为jQuery对象

四、jQuery选择器 和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在iQuery中提供了简便的方式供我们查找定位元素，称为jQuery选择器，通俗的讲，Selector 选择器就是“一个表示特殊语意的字符串”。只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为“选择”和“过滤”。并且是配合使用的，具体分类如下。

1.基础选择器
文章图片

id选择器中，如果有多个同名id，以第一个为准

2.层次选择器
文章图片


3.表单选择器
文章图片


五、jQuery Dom操作 jQuery也提供了对HTML节点的操作，而且在原生JS的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作方式只适用于jQuery对象。

1.操作元素的属性 (1).获取属性
文章图片

属性的分类：

• 固有属性：元素本身就有的属性（id、name、class、style）
• 返回值是Boolean的属性：checked、selected、disabled
• 自定义属性：用户自己定义的属性

attr与prop的区别：

• 如果是固有属性，attr()和prop()方法均可获取
• 如果是自定义属性，attr()可获取，prop()不可获取
• 如果是返回值为Boolean类型的属性，若设置了属性，attr()返回具体的值，prop()返回true; 若未设置属性，attr()返回undefined，prop()返回false

aa bb

(2).设置属性
attr("属性名","属性值")
prop("属性名","属性值")

//固有属性 $("#aa").attr("value","1") $("#bb").attr("value","3") //返回值是Boolean的属性 $("#bb").attr("checked","checked") $("#bb").prop("checked",false) //自定义属性 $("#aa").attr("uname","admin") //$("#aa").prop("uage",18)//prop获取不到自定义属性

(3).移除属性
removeAttr("属性名")

$("#aa").removeAttr("checked")

2.操作元素的样式
文章图片

css():
设置单个样式：css("具体样式名","样式值")
设置多个样式：css("具体样式名":"样式值"; "具体样式名":"样式值")

3.操作元素的内容
文章图片

html()、html("html内容")、text()、text("text内容") 均操作非表单元素
html("html内容")可以在内容中设置样式；
使用text("text内容") 只能识别到文本内容，标签效果不识别
val()、val("值")操作表单元素

表单元素：
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
非表单元素：
div、span、h1~h6、table、tr、td、li、p等

4.创建元素 在jQuery中创建元素很简单，直接使用核心函数即可

文章图片

//创建元素 let p = "这是一个P标签
" console.log($(p));

5.添加元素
文章图片

(1).前追加子元素
指定元素.prepend(内容)在指定元素内部的最前面追加元素，内容可以是字符串、html元素或jQuery对象
$(内容).prependTo(指定元素)把内容追加到指定元素内容的最前面，内容可以是字符串、html元素或jQuery对象
(2).后追加子元素
指定元素.append(内容)在指定元素内部的最后面追加元素，内容可以是字符串、html元素或jQuery对象
$(内容).appendTo(指定元素)把内容追加到指定元素内容的最后面，内容可以是字符串、html元素或jQuery对象
(3).前追加同级元素
before()在指定元素的前面追加内容
(4).后追加同级元素
after()在指定元素的后面追加内容

注：
在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置
如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置

6.删除元素
文章图片

指定元素.remove(）
指定元素.empty()

7.遍历元素each()
$(selector).each(function(index,element))：遍历元素
参数 function 为遍历时的回调函数
index 为遍历元素的序列号，从0开始。
element是当前的元素，此时是dom元素

六、jQuery事件 1.ready()加载事件 ready()预加载事件，当页面的dom结构加载完毕后执行，类似于onLoad()事件
ready()可以写多个，按照顺序执行
语法：$(document).ready(function(){})
简写：$(function(){})

text


2.bind()绑定事件
文章图片

(1).绑定单个事件
bind绑定
$("元素").bind("事件类型",function(){})

点击查看名言

直接绑定
$("元素").事件名(function(){})

点击查看名言

1.确定为哪些元素绑定事件
获取元素
2.绑定声什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数

(2).绑定多个事件
bind绑定
1.同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型2 ...",function(){})

按钮1

2.为元素绑定多个事件，并设置对应的函数
指定元素.bind("事件类型",function(){
}).bind("事件类型",function(){
})

按钮2

3.为元素绑定多个事件，并设置对应的函数
指定元素.bind({
"事件类型":function(){},
"事件类型":function(){}
})

按钮3

直接绑定
指定元素.事件名(function(){
}).事件名(function(){
})

按钮4

【JavaScript|Jquery对象、Jquery选择器、Jquery Dom操作及事件】

推荐阅读

• 

  老年人保健 老人运动不宜憋气用力
• 

  n95口罩内层针刺棉透气吗
• 

  钻孔屏|OPPO新机来袭：双钻孔屏+8300万+骁龙855 OPPO这次真的是诚意满满
• 

  蒸秋葵要蒸几分钟
• 

  nerf|买不起手办就用AI渲染一个！用网上随便搜的图就能合成
• 

  长城壹叁贰13号香烟最新价格 长城132香烟价格
• 

  助学贷款12月20日还可以吗
• 

  西游之我们永远在路上
• 

  开封的小吃哪些比较有名呢
• 

  2015051是红米几
• 

  燃气灶点火一松开就熄火如何维修,先看看是什么意思吧
• 

  奢华是什么意思 奢华的名词解释
• 

  天津市老年人大学微信报名入口+流程 天津市老年人大学网络报名
• 

  胯下之辱是什么意思 胯下之辱的理解
• 

  圣诞的由来 圣诞怎么来的
• 

  下载高德地图手机版，怎样下高德地图
• 

  如何设置陕汽e家服务器？ 陕汽e家服务器怎么设置
• 

  it中文意思是什么 关于it的解释
• 

  如何设置随域服务器的更新？ 随域服务器怎么设置更新
• 

  你的一切习惯都是这样存在的

• 前端|ES6语法新特性
• 前端|ES6新特性总结
• JavaScript|JavaScript — 对象创建模式与继承模式
• JavaScript|JavaScript — 线程机制与事件机制
• javascript|ES6新特性（上）——let及const、解构赋值、模板字符串、Symbol
• JavaScript|ES6新特性总结（2）解构赋值、模板字符串、Symbol
• 运维|Zabbix 图形显示中文乱码解决方法
• JavaScript|JavaScript 自定义对象
• vue|Vue + Element UI 实现权限管理系统（页面权限控制（菜单 + 按钮））