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()