JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）
JQuery特点： 1. 轻量级 2. 富应用 3. DOM操作 4. 事件处理 5. 运动动画 6. AJAX 7. 跨浏览器（不再考虑浏览器兼容） 8. 链式调用 9. 隐式迭代 10. 丰富的插件库 ......
一，jQuery引用和语法
1.jQuery引用
下载JQuery的js文件，在本地进行引用(推荐) 官网地址：https://jquery.com/
下载之后复制到项目的js文件夹下，使用引用注入
2.语法
1 基础语法
$(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
$(selector).action()
jQuery 的 action() 执行对元素的操作 比如：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 元素
$("p.test").hide() - 隐藏所有 class="test" 的 元素
$("#test").hide() - 隐藏 id="test" 的元素
2 文档就绪事件
//通过选择器选择documen内置对象，当document对象ready也就是加载完成的时候，调用方法。（类似于原生js的
window.onload）
$(document).ready(function(){
// 开始写 jQuery 代码...
});
//或者
$().ready(function(){
// 开始写 jQuery 代码...
});
//或者
$(funtion(){
// 开始写 jQuery 代码...
});
推荐使用最后一种，简洁
二，jQuery选择器
JQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS选 择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
1.标签选择器
段落1
段落2
段落3
2.id选择器
页面中元素的 id 应该是唯一的
aa
span1
3.class选择器
同id选择器一样，只不过是将id标签换为class标签
4.层次选择器
通过DOM元素间的层次关系来获取元素，主要层次关系包括父子、后代、相邻、兄弟关系
这是一个段落
5.简单过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；
简单过滤是使用最广泛的一种。
- 列表项1
- 列表项2
- 列表项3
6 .属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以"["开始，以"]"结束。
7.子元素过滤选择器
获取所有父元素中指定的某个元素
first-child:获取每个父元素下的第一个子元素 first:获取第一个父元素下的第一个子元素 last-child：获取每个父元素下的最后一个子元素 last：获取最后一个父元素下的最后一个子元素
- 列表项1
- 列表项2
- 列表项3
- 列表项4
- 列表项5
- 列表项6
8.表单对象属性过滤选择器
篮球
足球
9.表单选择器
篮球
足球
三，JQuery事件
常见事件
1.ready()
该方法允许我们在文档完全加载完后执行函数
简化版：$(function(){ })
2.click()和dbclick()
click:鼠标单击事件
dbclick:鼠标双击事件
篮球
足球
3.mouseenter(),mouseleave(),mousedown(),mouseup()
mouseenter() :当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave():当鼠标指针离开元素时，会发生 mouseleave 事件
mousedown():当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseup():当在元素上松开鼠标按钮时，会发生 mouseup 事件
使用方法同click()相同
4.hover()
hover():方法用于模拟光标悬停事件 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函 数(mouseleave),包含2个函数
格式：
hover(function(){},function(){});
| 名称 | 单价 | 数量 | 小计 |
|---|---|---|---|
| java | 100 | 34 | 444 |
| c++ | 211 | 22 | 44 |
5.焦点事件
focus():当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
blur():当元素失去焦点时，发生 blur 事件。
使用方法同click()
四，DOM操作元素
1.获得DOM节点
1 获取元素节点
通过选择器获得
2 获得文本节点
text()：设置或返回所选元素的文本内容
text()只输出标签内的文本内容，和js的innerText方法一样
html()：设置或返回所选元素的内容（包括 HTML 标记）
打印当前标签内的文本内容，如果有子标签，则把子标签本身和子标签内的文本一起打印 这个和js的innerHTML差不多
val()：设置或返回表单字段的值 元素的值是通过 value 属性设置的。
该方法大多用于 input 元素。
在text中插入新子标签时，会将标签当做文本打印
aa
3.获得属性节点
利用JQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。
attr()方法的参数可以 是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字
当参数是两个时，第一个参数是属性的类型，第二个参数是属性的值
aa
4.获得父亲，兄弟，子节点
$().parent(selector)：获取父节点
$().parents(selector)：获取祖先元素
$().previousSibling()：获取上一个兄弟节点
$().prevAll()：获取之前所有的兄弟节点
$().nextSibling()：获取下一个兄弟节点
$().nextAll()：获取之后所有的兄弟节点
$().siblings()：获取所有的兄弟节点
aqa
aa
affa
aaaffa
aaaffaaaa
$().children()：获取所有直接子节点
aqa
aa
affa
aaaffa
aaa
111
2:新增DOM节点
插入节点方法
append()：向每个匹配的元素内部末尾插入内容
appendTo()：将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操 作，即不是将B追加到A中，而是将A追加到B中
prepend()：向每个匹配的元素内部头部插入内容
prependTo()：将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操 作，即不是将B前置到A中，而是将A前置到B中
after()：在每个匹配的元索之后插入内容
insertAfter()：将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操 作，即不是将B插入到A后面，而是将A插入到B后面：
before()：在每个匹配的元素之前插入内容
insertBefore()：将所有匹配的元素插入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B) 的操作，即不是将B插入到A前面，而是将A插入到B前面
pp
3.更新DOM节点
修改DOM节点内容
使用.attr()方法时，传入两个参数来进行更改，html()方法中加入参数修改节点的值
即获取DOM节点时，添加要修改的内容作为参数来更改
复制节点
复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为,使用clone()方法
- 列表项1
- 列表项2
替换节点
replaceWith()：将所有匹配的元素都替换成指定的HTML或者DOM 元素
replaceAll():与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作
- 列表项1
- 列表项2
4.删除节点
remove()： 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach()： 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
empty()： 该方法可以清空元素中的所有的后代节点
- dd
- hh
5.更改css
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
aa
toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性
五，jQuery动画
hide():隐藏
show():元素显示
toggle():元素隐藏和现实的切换
fadeOut():淡出
fadeIn():淡入
fadeToggle():淡出淡入切换
slideUp():方法用于向上滑动元素
slideDown():方法用于向下滑动元素
slideToggle():向上向下滑动元素切换
animate():自定义动画
可在括号中设置时间，调整动画效果，单位为毫秒
最后的练习
创建表单页面，在控制台打印出输入的内容
位置：首页 -> 表单
注册信息
相关文章
您阅读本篇文章共花了：
发表评论