目录
一、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操作及事件】

推荐阅读

• 

  五味
• 

  激光能去除肥胖纹吗视频 激光能去除肥胖纹吗
• 

  原味烤肉制作方法 原味烤肉的制作方法
• 

  房间里面有老鼠怎么办
• 

  有没有好点收益高的副业项目？
• 

  年收入是指纯收入，年收入是什么意思
• 

  松下洗衣机烘干为什么出水,首先原因要搞清
• 

  读地图分析,如何读地图获取信息
• 

  3d|2千档高质价比手机推荐：骁龙870+三星屏+65W，真我真牛
• 

  刑事自诉案件的范围是什么
• 

  生理盐水洗鼻子可以预防新冠肺炎吗
• 

  胚芽燕麦粥
• 

  辰辉的寓意
• 

  健康工作远离疼痛现在要坐好
• 

  被子晒多久比较好
• 

  头孢料酒会有反应吗
• 

  鹌鹑鸟怎么养 鹌鹑鸟如何饲养
• 

  人成长分为哪些阶段
• 

  如何鉴别建兰国魂真假 如何鉴别建兰国魂真假
• 

  回归模型结果分析方法,ABC态度模型分析方法和运用

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