一、什么是jQuery
框架：半成品软件
Jquery就是封装好的js 本质上还是js
jQuery是一个快速、简洁的JavaScript**框架**，是继Prototype之后又一个优秀的**JavaScript代码库**（*或JavaScript框架*）。
JQuery:封装好的代码库。有一些大牛（官方）嫌弃js用着不好，很多具有特殊功能的代码的集合。就把这些代码写在一个js文件中，名字就叫 jquery.js。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的**JavaScript设计模式**，优化HTML文档操作、事件处理、动画设计和**Ajax交互**。
优点：选择器强大 优秀的DOM操作 动画 链式编程（一 . 到底）
二、jQuery的使用
(一) 基础语法：
1. $('选择器').action()
2. 获取DOM元素
$('选择器')
获取 单个 和 多个 DOM元素都是用这个语法！
3. 注意：
通过$('选择器')获取的DOM元素 被称为 jquery 元素(被jquery二次处理过)
通过 原生js获取的DOM元素 就是标准的DOM元素
jquery DOM对象 只能调用jquery内部提供的方法
原生js DOM对象 只能调用原生js内部的方法
(二) jsDOM对象与 JqueryDOM对象的互相转换
js对象---》jquery对象 $(js对象)
jquery对象-》js对象
jquery对象[下标]
- jquery对象.get(下标)
- jquery对象的遍历
- 普通for循环
- $('选择器').each(function(index,item){ });
- $.each('要遍历的对象/数组',function(index,item){ })
//内置方法 each
$('p').each(function(index,item){
console.log(item,index);})
三、jQuery的属性操作
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- hide()--隐藏 ===》display:none;
- show()--显示 ===》display:block/inline;
- length--长度
-
四、jQuery操作CSS样式
| js | jq |
| 对象.style.属性 = “属性值” | css({"属性":"属性值"，"属性":"属性值"})//多属性 |
| css("属性名","属性值");//单个属性 |
五、jQuery的事件绑定
(一) 绑定方法：
六、jQuery事件委托的解决办法
也可以直接这样写，把标签名放中间
七、jQuery的DOM 操作
(一) jQuery的事件
| jquery事件 | 说明 |
| ready( fn) | 页面加载完毕时发生的事件 |
| blur( [ [data], fn ] ) | 元素失去焦点时发生的事件 |
| change([ [data], fn ] ] ) | 元素的值发生改变时发生的事件 |
| click( [ [data], fn ] ) | 单击鼠标时发生的事件 |
| dblclick( [ [data], fn ] ) | 双击鼠标时发生的事件 |
| focus( [ [data],fn ] ] ) | 元素获得焦点是发生的事件 |
| keydown( [ [data], fn ] ] ) | 按下键盘时发生的事件 |
| keyup( [ [data],fn ] ]) | 松开键盘时发生的事件 |
| keypress( [ [data] , fn ] ） | 按下并松开键盘时发生的事件 |
| mousedown([[[data],fn ]]) | 按下鼠标按钮时发生的事件 |
| mousemove([[[data],fn ]]) | 鼠标移动时发生的事件 |
| mouseout([[data],fn ]]) | 鼠标离开某元素时发生的事件 |
| mouseover([[data],fn ]]) | 鼠标悬浮到某元素上时发生的事件 |
| mouseup([[data],fn ]) | 松开鼠标按钮时发生的事件 |
| scroll([[data], fn ]) | 页面滚动时发生的事件 |
| select([[data],fn ]]) | input元素的选取事件 |
| submit([[data] , fn ]) | 表单提交事件 |
| unload([[data],fn ]]) | 页面卸载时发生的事件 |
(二) jQuery事件对象event/e属性
| type | 获取事件类型 |
| target | 获取触发事件的元素 |
| result | 获取上一个事件处理函数返回的值 |
| which | 获取在鼠标单击事件中获取鼠标的按键，值 |
| pagex/y | 获取事件发生时相对于页面的坐标 |
| keycode | 获取在键盘事件中键盘对应的键值 |
| screenx/y | 获取事件发生时相对于屏幕的坐标 |
| data | 事件发生时传递的参数的信息都保持在该属性中 |
事件对象：e<===>window.event 表示事件对象，其中包含事件发生时周围的各种信息。
(三) 事件绑定
$("选择器").click(function(){ })；常用
$("父选择器").on("事件类型1 事件类型2。。。 "，"子元素" , function(){});常用动态 绑定 如果想给某个父元素中的子元素绑定事件，但是 这个子元素 不存在不是我们自己写的，而是通过js代码动态添加的时候，此时绑定事件用。
八、DOM操作
一、创建节点：
| 创建节点 | |
| $（“<标签名 属性>内容</标签名>”） | $（“<标签名>”） |
二、添加节点
| append() | 在被选元素的（内）结尾追加元素 （儿子） |
| prepend() | 在被选元素的开头插入内容（儿子） |
| after() | 在被选元素之后插入内容（加的是兄弟） |
| before() | 在被选元素之前插入内容（加的是兄弟） |
三、删除节点
| remove() | 删除被选元素（及其子元素） |
| empty() | 从被选元素删除子元素/清空子元素 |
四、复制节点
| clone(includeEvents) | 生成被选元素的副本，包含子节点、文本和属性。 |
| includeEvents： | 可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。 |
九、节点属性方法
| 方法名 | 含义 |
| parent() | 返回被选元素的直接父元素。---》parentNode |
| parents() | 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 () |
| children() | 返回被选元素的所有直接子元素---》children |
| find() | 方法返回被选元素的后代元素，一路向下直到最后一个后代 |
| contents() | 返回被选元素的所有直接子元素（包含文本和注释节点） |
| next() | 返回被选元素的下一个同胞元素。---->nextElementSibling |
| nextAll() | 返回被选元素的所有跟随的同胞元素。 |
| prev() | 返回被选元素的上一个同胞元素---》previousElementSibling |
| prevAll() | 返回被选元素的所有上边的同胞元素 |
| siblings() | 返回被选元素的所有同胞元素。 |
| first() | 返回被选元素的首个元素。 |
| last() | 返回被选元素的最后一个元素。 |
| eq() | 返回被选元素中带有指定索引号的元素。 |
十、工具函数:
| 方法 | 含义 |
| $. type( ) | 用来测试数据的类型 |
| $.isNumeric() | 用来测试数据是否为数字 |
| $.trim() | 用来去除字符串两端的空格 |
| $.parseJSON() | 用来把字符串解析成JSON对象 |
对象和json
对象的数据格式：
键值对 HashMap
var/let 对象名 = {
key1:value1,
key2:value2,
key3:value3,
...
}
//对象的取值：
//方法一：
//alert(person1.name)
//方法二：
alert(person1["name"]);
