爱站程序员基地jQuery框架
什么是jQuery
- jQuery框架是JS代码写出来的，本身就是一个JS文件
- 由第三方厂商做出来的，免费开源。
- 提供了大量的方法，以前需要编写多行代码的功能，现在一行代码就可以实现
- 程序员只需要编写一套代码 ，就可以无差异的运行在所有的浏览器上。
jQuery框架特点：
- 免费开源
- 轻量级框架：占用资源少，运行速度快
- 宗旨：write less do more
$(function())的作用
类似于window.onload
与window.onload的区别
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>与window.onload的区别</title><script src=\"js/jquery-3.3.1.js\"></script></head><body><script type=\"text/javascript\">/*** jQuery中每个入口函数都会依次执行*//*$(function () {alert(\"Hello jQuery1\");});$(function () {alert(\"Hello jQuery2\");});*/window.onload = function () {alert(\"Window 1\");}/*** 只会执行最后这一次，后面的覆盖前面的*/window.onload = function () {alert(\"Window 2\");}</script></body></html>
jQuery对象与js对象之间的转换
JS对象与jQuery对象的区别
-
JS对象：以前通过DOM中方法获得的元素都是JS对象，如：document.getElementById(“id”)
-
jQuery对象：通过jQuery选择器选中元素，就是jQuery对象
为什么要转换
注：JS对象无法使用JQ对象中方法，如果JS对象需要使用JQ对象中方法，必须将JS对象转成JQ对象，反之亦然。
转换语法
| 操作 | 方法 |
|---|---|
| 将JS对象–>jQuery对象 | $(JS对象) |
| 将jQuery对象–> JS对象 | JQ对象[0] 或 JQ对象.get(0) JQ对象本质上是JS的一个数组对象 |
选择器：基本选择器
目标
基本选择器的使用
选择器的作用
如果要操作网页中各种元素，首先要选中这些元素。jQuery中的选择器功能强大，选择方式灵活多样。
jQuery常用的选择器有如下：
- 基本选择器
- 层级选择器
- 过滤选择器
- 表单过滤选择器
选择器的语法
注：所有的选择器外面都要使用$(\”\”)，如：ID选择器 $(\”#ID\”)
| 基本选择器 | 语法 |
|---|---|
| ID选择器 | #ID |
| 类选择器 | .类名 |
| 标签选择器 | 标签名 |
选择器：层级选择器
目标
层级选择器的使用
语法
注：省略了$(\”\”)
| 层级选择器 | 语法 |
|---|---|
| 获取A元素内部所有B元素，B是A的子孙元素 | A B |
| 获得A元素下面的所有B子元素 | A>B |
| 获得A元素同级，下一个B元素。(B和A是兄弟关系，A是老二，B是老三) | A+B |
| 获取A元素后面所有同级B元素。(B是A后面所有的兄弟，得到一个集合) | A~B |
选择器：过滤选择器
目标
基本过滤选择器的使用
什么是过滤选择器
在现有已经选择的元素基础之上，再次进行过滤，得到剩下的元素。类似于CSS中伪类选择器语法
语法
| 基本过滤选择器 | 语法 |
|---|---|
| 获得选择的元素中的第一个元素 | :first |
| 获得选择的元素中的最后一个元素 | :last |
| 不包括指定内容的元素 | :not() |
| 偶数，从 0 开始计数 | :even |
| 奇数，从 0 开始计数 | :odd |
| 等于第几个 equals | :eq() |
| 大于第n个，不含第index个 | :gt() |
| 小于第n个，不含第index个 | :lt() |
选择器：表单过滤选择器
语法
- 注：表单过滤选择器用于表单中元素
| 表单属性选择器 | 语法 |
|---|---|
| 可用 | :enabled |
| 不可用 | :disabled |
| 选中（单选radio ，多选checkbox） | :checked |
| 选择（下列列表<select>中的<option>） | :selected |
DOM操作的方法：html()，text()，val()
目标
在JQ中如何操作innerHTML、innerText、value属性
jQuery的DOM操作方法
操作方法的特点：所有的方法既可以设置值(set)，又可以获取值(get)
语法
html() 类似于以前innerHTML，修改或获取元素内部的HTML的内容，标签是起作用的。text() 类似于以前的innerText，标签是不起作用的val() 类似于以前的value属性，设置或获取值。如：val(\"值\")设置值 val()获取值
DOM操作的方法：与属性有关的方法
目标
学习attr()、removeAttr()、prop()、removeProp()方法的使用
语法
attr() 修改，添加或获取元素的属性。attr(\"属性名\",\"值\") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改attr(\"属性名\") 一个参数就是获取属性的值prop() 修改，添加或获取元素的属性。prop(\"属性名\",\"值\") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改prop(\"属性名\") 一个参数就是获取属性的值removeAttr(),removeProp() 删除指定的属性jq对象.removeAttr(\"src\")jq对象.removeProp(\"href\")
什么时候使用attr()和prop()
如果属性值是true或false，建议使用prop()，编程更加方便
### 小结| 方法名 | 功能描述 || -------------------------- | -------------------- || attr() | 操作属性 || prop() | 操作布尔类型值的属性 || removeAttr() /removeProp() | 删除属性名和值 |## DOM操作的方法：与样式有关的方法在JS中操作CSS的方法：```javascript元素.style.样式名=样式值
元素.className=类名
相关的方法
| 方法名 | 功能 || --------------------- | ----------------- || addClass(类样式名) | 添加类样式 || removeClass(类样式名) | 移除类样式 || toggleClass(类样式名) | 上面2个方法的切换 || css(样式名) | 获取指定样式值 || css(样式名,样式值) | 设置指定的样式 |## DOM操作的方法：元素的创建和添加### 语法
$(“标签内容”) 创建一个元素
父元素.append(子元素) 添加到最后一个子元素，与js中appendChild()相同
父元素.prepend(子元素) 添加到第一个子元素
元素.before(元素) 添加到当前元素的前面，这两个元素是兄弟关系
元素.after(元素) 添加到当前元素的后面，这两个元素是兄弟关系
## DOM操作方法：删除元素### 目标与删除元素有关的方法### 语法
元素.remove() 删除本身
父元素.empty() 父元素清空所有的子元素，父元素还在
jQuery的事件的使用### 目标1. 一个元素同时使用多个事件2. 多个事件的链式写法### 事件处理函数的命名所有的事件处理函数前面都没有on### jQuery中常用的事件| 事件方法 | 功能 || ----------- | -------- || blur() | 失去焦点 || change() | 改变事件 || click() | 单击事件 || dblclick() | 双击事件 || focus() | 得到焦点 || keydown() | 键盘按下 || keyup() | 松开键盘 || mouseover() | 鼠标移上 || mouseout() | 鼠标移出 || submit() | 表单提交 |## **JQuery总结**- JS与JQ对象的转换| 操作 | 方法 || ---------------------- | -------------------------- || 将JS对象-->jQuery对象 | $(JS) || 将jQuery对象--> JS对象 | JQ对象[0] 或 JQ对象.get(0) |- 能够使用jQuery的基本选择器| 基本选择器 | 语法 || ---------- | ------ || ID选择器 | #ID || 类选择器 | .类名 || 标签选择器 | 标签名 |- 能够使用jQuery的层级选择器| 层级选择器 | 语法 || -------------------------- | ---- || 获取A元素内部所有B元素 | A B || 获得A元素下面的所有B子元素 | A>B || 获得A元素同级，下一个B元素 | A+B || 获取A元素后面所有同级B元素 | A~B |- 能够使用jQuery的DOM操作的方法| jQuery中的方法 | 作用 || --------------- | ---------------------- || html() | 相当于innerHTML || text() | 相当于innerText || val() | 相当于value || attr() | 操作属性 || prop() | 操作属性，布尔类型的值 || addClass() | 添加类样式 || removeClass() | 删除类样式 || $(标签全部内容) | 创建一个元素 || append() | 追加到最后一个子元素 || before() | 添加到当前元素的前面 || after() | 添加到当前元素的后面 || remove() | 删除自己 |
