JQuery重要知识点
jQuery基本选择器----包括ID选择器，标签选择器，类选择器，通配选择器和组选择器5种
a. ID选择器： $("#id")
b. 标签选择器：$("element")
c. 类选择器：$(".className")
d. 通配选择器：$("*") 匹配指定上下文中所有元素
e. 组选择器：$("selector1,selector2,selectorN") 特点：无数量限制，以逗号分隔 (逐个匹配，结果全部返回)
2.层级选择器:通过DOM的嵌套关系匹配元素
jQuery层级选择器----包含选择器、子选择器、相邻选择器、兄弟选择器4种
a.包含选择器：$("a b")在给定的祖先元素下匹配所有后代元素。 (不受层级限制)
b.子选择器：$("parent > child") 在给定的父元素下匹配所有子元素。
c.相邻选择器：$("prev + next") 匹配所有紧接在prev元素后的next元素。
d.兄弟选择器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。
3.常用伪类选择器:可以看作是一种特殊的类选择符
1)特定位置选择器
选择器 说明
:first 匹配找到的第1个元素
:last 匹配找到的最后一个元素
:eq 匹配一个给定索引值的元素
2)指定范围选择器
:even 匹配所有索引值为偶数的元素
:odd 匹配所有索引值为奇数的元素
:gt(index) 匹配所有大于给定索引值的元素 great than
:lt(index) 匹配所有小于给定索引值的元素 less than
3)排除选择器
:not 去除所有与给定选择器匹配的元素
2. 选择器优化：
使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中，ID选择器速度最快，其次是类型选择器。
a. 多用ID选择器
b. 少直接使用class选择器
c. 多用父子关系，少用嵌套关系
d. 缓存jQuery对象
例子：
for(i=0;i<10;i++){
var myList=$("myList");
myList.append(i);
}
var myList=$("myList");
for(i=0;i<10;i++){
myList.append(i);
}
3. 使用过滤器
jQuery提供了2种选择文档元素的方式：选择器和过滤器
a. 类过虑器：根据元素的类属性来进行过滤操作。
hasClass(className)：判断当前jQuery对象中的某个元素是否包含指定类名，包含返回true，不包含返回false
b. 下标过滤器：精确选出指定下标元素
eq(index)：获取第N个元素。index是整数值，下标从0开始
c. 表达式过滤器
filter(expr)/(fn)：筛选出与指定表达式/函数匹配的元素集合。
功能最强大的表达式过滤器，可接收函数参数，也可以是简单的选择器表达式
d. 映射 map(callback)：将一组元素转换成其他数组
e. 清洗 not(expr)：删除与指定表达式匹配的元素
f. 截取 slice(start,end)：选取一个匹配的子集
$("#menu li").slice(1,4).css("color","green");2,3,4是green
4. 查找
a. 向下查找后代元素
children():取得所有元素的所有子元素集合（子元素）
find():搜索所有与指定表达式匹配的元素(所有后代元素中查找)
e. 查找兄弟元素 siblings()查找当前元素的兄弟
一、创建节点
1.创建元素
语法：document.createElement(name);
var div = document.createElement("div");
document.body.appendChild(div);
$(html)：根据传递的标记字符串，创建DOM对象
2.创建文本
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
var $div = = $("<div>DOM</div>");
$(body).append($div);
3.设置属性
语法：e.setAttrbute(name,value)
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");
var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);
二、插入内容
1.内部插入
向元素最后面插入节点：
a. append():向每个匹配的元素内部追加内容
b. appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B") 等效 $("B").appendTo("A")
向元素最前面插入节点：
c. prepend（）：把每个匹配的元素内部前置内容
d. prependTo（）：把所有匹配的元素前置到另一个指定的元素集合中,$("A").prepend("B") 等效 $("B").prependTo("A")
2.外部插入
a. after():在每个匹配的元素之后插入内容
b. before()：在每个匹配想元素之前插入内容
c. insertAfter()：将所有匹配的元素插入到另一个指定的元素集合后面，$A.insert($B) 等效 $B.insertAfter($A);
d. insertBefore()：将所有匹配的元素插入到另一个指定的元素集合前面 $A.before($B) 等效 $B.insertBefore($A);
三、删除内容
1.移除
remove():从DOM中删除所有匹配元素
2.清空
empty():删除匹配的元素集合中所有子节点内容
四、克隆内容：创建指定节点副本
clone()
注意：若clone（true）则是包括克隆元素的属性，事件等
五、替换内容
a. replaceWith():将所有匹配的元素替换成指定的元素
b. replaceAll():用匹配的元素替换掉指定元素
注意：两者效果一致，只是语法不同 $A.replaceAll($B) 等效于 $B.replaceWhith($A);
======================================================================================================================
一. 介绍jQuery动画
JavaScript语言本身不支持动画设计，必须通过改变CSS来实现动画效果。
显隐
1. 显隐动画
show():显示
hide():隐藏
原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0
show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见
参数：
show()
show(speed,callback)
speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
callback: 动画完成时执行的方法
显示和隐藏式一对密不可分的动画形式。
2. 显隐切换
toggle():切换元素的可见状态
原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none
参数：
toggle(speed)
toggle(speed,callback)
toggle(boolean)
speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
easing： 使用哪个缓冲函数来过渡的字符串(linear/swing)
callback： 动画完成时执行的方法
boolean:true为显示 false为隐藏
滑动
1. 显隐滑动效果
slideDown():滑动隐藏
slidUp():滑动显示
参数:
slideDown(speed,callback)
slidUp(speed,callback)
2. 显隐切换滑动
slideToggle():显隐滑动切换
参数:
slidUp(speed,callback)
渐变：通过改变不透明度
1. 淡入淡出
fadeIn()
fadeOut()
参数：
fadeIn(speed,callback)
fadeOut(speed,callback)
2. 设置淡出透明效果
fadeTo()：以渐进的方式调整到指定透明度
参数：
fadeTo(speed,opacity,callback)
3.渐变切换:结合fadeIn和fadeOut
fadeToggle()
参数:
fadeOut(speed,callback)
自定义：
1. 自定义动画：animate()
用animate模拟show():
show: 表示由透明到不透明
toggle: 切换
hide:表示由显示到隐藏
2. Event属性：
type：获取事件类型名称
target:发生事件的节点
keyCode：只针对于keypress事件，获取键盘键数字 按下回车，13
pageX:光标对于页面原点的水平坐标 body
pageY：光标对于页面原点的垂直坐标
clientX：光标对于浏览器窗口的水平坐标 浏览器
clientY：光标对于浏览器窗口的垂直坐标
screenX：光标对于电脑屏幕的水平坐标 电脑屏幕
screenY：光标对于电脑屏幕的水平坐标
3. stopPropagation()：阻止冒泡
1. 从里到外
2. 嵌套关系
3. 相同事件
4. 其中的某一父类没有相同事件时,继续向上查找
4. bind();//绑定
为匹配元素绑定处理方法
需要给一个元素添加多个事件 ，事件执行一样时候
one()：//只执行一次
绑定特定事件类型方法：
blur() focus() mousedown() resize() change() keydown() mousemove() scroll()
click() keypress() mouseout() select() dblclick() keyup() mouseover() submit()
error() load() mouseup() unload()
