前情提要（博主在复习前端知识，所以近几天没有更新博客。相关前端内容可见博主其他随笔）
JQurey
重点
- 事件
- 与JS的区别
- 选择器
思维导图
知识点
1. 定义
JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2. JQurey与JS的区别
1、js是网页脚本语言，而jquery是基于js语言封装出来的一个前端框架；
2、jquery对象比js对象多了“$()”；
3、js里面操作样式的关键字是style，而jquery里面操作样式的关键字是css。
3. 基础选择器
id选择器： $("#box")
元素，标签选择器： $("div")
class，类名选择器： $(".list")
通配选择器： $("*")
群组选择器： $("div1,div2,div3,...")
包含选择器： $("div span")
点击查看代码
<div class="box2">
<p>你好1</p>
</div>
<p>你好2</p>
<div class="box3"></div>
<p style="width: 100px; height: 40px; background: rgb(255, 0, 0);">你好3</p>
<script>
//匹配“.box3”后面的p标签
$('.box3~p').css({
width:'100px',
height:'40px',
background:'#f00'
})
</script>
4. 筛选条件
$('p').has('b') //包含b元素的p元素
$('p').hasClass('nihao') //选择类名是nihao的p元素，返回 Boolean 值。
$('.box').children('p') //只选择.box类名中的子元素，不含有孙元素
next() 下一个兄弟元素。
prev() 上一个兄弟元素。
siblings() 所有的兄弟元素。
parent() 一个父元素。
parents() 父元素集合。
addClass() //添加类名
removeClass() //删除类名
toggleClass() //有类名则添加，没有就不添加
find() 寻找子元素。
点击查看代码
<ul>
<li style="color: rgb(255, 0, 0);">index0</li>
<li>index1</li>
<li style="color: rgb(255, 0, 0);">index2</li>
<li>index3</li>
</ul>
<script>
//偶数行变色
$("li:even").css({
color:'#f00'
})
</script>
5. 事件
focus 得到焦点
blur 失去焦点
change 表单值发生改变并失去焦点时，只适应于 input标签的text属性， textarea 标签，select 三个标签。
click 单击
dblclick 双击
keydown 按下键盘
keyup 松开键盘
load 元素加载完毕
mosedown 按下鼠标
moseup 松开鼠标
mosemove 鼠标在元素内移动
moseover 鼠标进入
mouseout 鼠标离开
resize 浏览器窗口大小变化
scroll 滚动条位置变化
掌握程度
掌握的情况一般，使用没有问题，方法和条件选择记得不全，不够熟练 自我建议：反复使用，自我锻炼。
收获
学如逆水行舟，不进则退
学习效果展示
