第一章
1:什么是jQuery?
它通过封装原生的 JavaScript 函数得到一整套定义好的方法。
2：jQuery的作用？
1.像 CSS 那样访问和操作 DOM
2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美
7.基于 jQuery 大量插件
8.自行扩展功能插件
3：jQuery的优点？
以更少的代码、实现更多的功能
4：jQuery的引入方式？
1：本地引入（外链接）
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
2：网址引入
百度：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
又拍云：
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
新浪：
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
Google 谷歌
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
5：$(function(){})类似window.onload,告诉浏览器先加载html和css在加载js代码
6：本地引入和网址的引入的区别：
本地引入的优缺点：
优点：
1：本地引入JQ加载的时候速度更快.
2：本地引入更加稳定。
缺点：
1：但是会增加项目的体积，本地引入的库或者框架或者插架太多让网站打开速度变慢。
网站引入的优缺点：
优点：
1：不必担心增加项目的体积。
缺点：
1：引入有时会不稳定。
7：拓展：
写法不同（参考4拓展html页面）
8：jq库的版本：
旧版本和新本版的问题。
旧版本更稳定，兼容性更好。
新版本只是增加了一些新的方法，最新版本不建议用，因为稳定性不好。
jq 2.0以上版本不在支持ie6/7/8浏览器。
（如果大家工作当中需要兼容ie6/7/8浏览器的话就需要引用jq2.0以下版本）
9：如果想了解学习jq，建议去jq官网自学API
10:('属性')
第二章
1：基础选择器
id #
class .
标签 div
* 通配符
群组 #box,p
css() 一个值的时候是找这个元素的值，两个值的时候是设置样式
举例 找元素的值：
alert(('#txt').css('color','red');
size()/length 返回的元素个数
举例：
alert(('p>span') 子选择器
('div+p') 同级下一个节点选择器
('input:checked')
第三章 选择器方法
find() 匹配当前元素的后代 == $('div p')后代选择器
children() 匹配当前元素的子元素 == $('div>p')子选择器
next() 匹配当前元素的下一个同级元素== $('div+p')下一个同级选择器
nextAll() 匹配当前元素的下的所有同级元素 == $('div~p')
prev() 匹配当前元素的前一个同级元素==
prevAll() 匹配当前元素的前的同级元素==
siblings() 匹配当前元素的所有同级元素
first() 选中第一个元素 == $('li:first')
last() 选中最后一个元素
not() 不想选中某个元素==$('li:not(.a)')
eq(数字) 选择当前的元素
index() 返回当前元素下标
html() 返回当前元素文本内容/修改当前元素文本内容(可以添加标签)
text() 返回当前元素文本内容/修改当前元素文本内容(不可以添加标签)
filter() 筛选出和属性匹配的元素
attr() 获取属性值/设置属性
val() 获取input框里面的值的方法
var u=$('<ul></ul>')//创建一个标签
append() 插入节点的方法
parent() 查找父节点
parents() 查找祖父节点（父节点以上的所有父节点）
第四章 dom对象
1：获取值的方法
html()
text()
val() 既可以获取input里面的值/也可以设置值
** 如果是下拉菜单 、单选、多选的情况下 val([''])方法 还可以将他们设置成默认选中
**prop('checked',true) 专属input默认选中方法
2：操作属性的方法
attr() 获取/设置元素属性的方法
** attr()还可以设置多个属性 设置多个属性采用对象的模式 attr({'k1':'v1','k2':'v2','k3':'v3'})
removeAttr() 移除属性方法
addClass() 只能向元素添加class值
removeClass() 删除属性方法
//toggleClass() 添加样式切换方法 （方法中不加 .）//如果有就删除 如果没有就添加
//hasClass()/is() 检查元素是否包含指定的类 （方法中不加 .）
3：遍历方法 ：
each() 元素的遍历方法
.each(arr,function(下标，内容){}) 比如遍历数组
4:节点内部插入
var box=$('<div id="box">你好</div>') 创建一个标签
append() 插入一个标签
appendTo() 插入到标签里面的后面
prepend('插入一对标签') 插入到标签里面的前面
prependTo() 插入到标签里面的后面
5：节点外部插入
after() 向指定元素后插入一个同级标签
before() 向指定元素前插入一个同级标签
insertAfter()将指定元素移入指定元素后面
insertBefore()将指定元素移入指定元素前面
6：包裹节点方法
wrap() 向指定元素包裹一层代码
wrap(element) 向指定标签包裹指定标签
unwrap() 移除指定元素上一层标签
wrapAll() 包裹所有的指定元素上
wrap()和wrapAll()的区别是：
wrap()方法是把指定标签看成独立体分别包裹
wrapAll()方法是把指定标签包裹成一个独立体
7：操作节点方法
clone(true/false) 克隆节点
** 如果克隆里面是false 那么他是不会克隆事件行为的，有true的话就会克隆事件行为
remove() 删除节点
detach() 删除节点
empty() 删除内容保留标签
replaceWith() 替换节点
replaceAll() 替换节点(先创建再删除)
8：其他css方法
width() 获取/设置元素的宽度
height() 获取/设置元素的高度
innerWidth() 获取元素的宽,包含内边距（padding）
innerHeight() 获取元素的高,包含内边距（padding）
outerWidth() 获取元素的宽,包含内边距（padding）+边框（border）
**outerWidth(true) 获取元素的宽,包含内边距（padding）+边框（border）+外边距（margin）
outerHeight() 获取元素的高,包含内边距（padding）+边框（border）
9：元素偏移方法
offset() 元素相对可视窗口的偏移位置
position() 元素相对父元素的偏移位置
scrollTop(val) 获取/设置垂直滚动条的值
scrollLeft(val) 获取/设置横滚动条的值
第五章 动画
show(秒数) 显示
hide(秒数) 隐藏
toggle() 切换显示/隐藏
slideUp() 上隐藏
slideDown() 下显示
slideToggle() 上下切换
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出
fadeTo(秒数，透明度)
animate() 自定义动画
stop() 停止 (只能停止当前的列队动画)
delay() 延迟
第六章 事件
1:绑定事件方法:
bind(事件，函数) 元素绑定事件
**绑定事件方法的优点就是可以绑定多个事件，可以同时处理
2:去除绑定方法： unbind()
3：其他事件方法：
------------------------------鼠标事件----------------------------------------------------------
click() 点击事件
dblclick() 双击
mousedown() 鼠标按下
mouseup() 鼠标弹起
mouseover() 鼠标移入 **他们俩个的区别在于：over和out事件碰到子元素也会触发事件，enter和leave不会
mouseout() 鼠标移出
mouseenter() 鼠标移入
mouseleave() 鼠标移出
mousemove() 鼠标移入移出
------------------------------滚动事件----------------------------------------------------------
scroll() 滚动
------------------------------表单事件----------------------------------------------------------
focus() 获取焦点
blur() 失去焦点
focusin() 获取焦点
focusout() 失去焦点
submit() 提交
select() 选中文本
change() 改变文本
------------------------------浏览器事件-------------------------------------------------------
resize() 缩放浏览器
------------------------------键盘事件----------------------------------------------------------
keydown() 键盘按下
keyup() 键盘弹起
keypress() 键盘简码
4：复合事件
hover(函数，函数)
举例：
hover(function(){},function(){})
事件中的第一个函数是移入是做的事情，后面函数里面是移出的时候做的事情
5:如果大家想要用废弃的方法在新版本里面，可以下载 jquery-migrate.js 文件，来向下兼容已被删除掉的方法
6:事件委托方法
on(事件，要委托的元素，函数)
one() 只能执行一次事件的方法
live() 事件委托（在1.9版本被删除）
die() 删除事件委托（在1.9版本被删除）
7：事件命名空间
举例：
$('li:eq(1)').bind('click.b',f2); function f2(){ alert('我是第2个li') }
$('li:eq(0)').unbind('click.a')
8：事件模拟操作
trigger(事件) 模拟事件方法(在页面刷新的时候模拟执行一次)
trigger()可以传参（字符串，对象，数组）
triggerHandler()
9:阻止事件冒泡和默认行为
event.stopPropagation(); 阻止事件冒泡方法
event.preventDefault(); 阻 止默 认 行为 ( 表 单提 交 )
return false 阻 止默 认 行为
10:事件对象 event
对象属性：
event.target 事件源 event.srcElement（IE事件源写法）
event.type 事件类型
event.pageX/Y 鼠标在页面上的坐标位置
event.clientX/Y 鼠标在可视窗口上的坐标位置
event.screenX/Y 鼠标在屏幕上的坐标位置
11：this和event.target的区别
this指向事件前对象
event.target指向事件源
网友评论