jQuery

补充:

*$obj.eq(i)等价于$($obj[i]) 返回的是jQuery对象

*$(function(){});==windos.onload=function(){};

写多次onload 后者会覆盖前者 $(function(){})则不会

1.jQuery是一个轻量级(低耦合度)的JS库,是一个优秀的JS框架

2.jQuery使用步骤:

*引入jQuery文件

*使用选择器选中节点

*调用API操作节点

3.*jQuery对象本质上是DOM数组(类数组,假数组)

*jQuery对象只能调用jQuery的API

*jQuery对象可以转换成DOM对象

4.大致规律

*选择器选中的是jQuery对象

*jQuery的API若返回的是节点,是jQuery对象(有例外)

*jQuery的API若返回的是值,通常是String

5.jQuery选择器

1)基本选择器

*元素选择器:$("标签名")

*类选择器:$(".class属性名")

*id选择器:$("#id")

*选择器组:$("#id,.importent")

2)层次选择器

*子孙元素:$("元素1 元素2")

*子元素:$("元素1>元素2")

*下一个弟弟:$("元素1+元素2")

*所有弟弟:$("元素1~元素2")

3)过滤选择器

*基本过滤(重点):

:first 第一个元素 :last 最后一个元素 :even 偶数行 :odd 奇数行

:not(过滤选择器 ) 选择指定选择器外的所有元素

:eq(index) 下标等于index的元素 :gt(index) 下标大于index的元素 :lt(index)下标小于index的元素

*内容过滤:根据文本内容定位

:contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含文本或子元素的空元素

*可见性过滤:根据可见性定位

:hidden 匹配所有不可见的元素或者type为hidden的 :visible 匹配所有的可见元素

*属性过滤:根据属性定位

[属性] 匹配具有给定属性的元素 [属性=value ] 匹配具有给定属性 并且值等于value的元素

[属性!=value ] 匹配具有给定属性 并且值不等于value的元素

*状态过滤:根据状态定位

:enabled 匹配所有可用的元素 :disabled 匹配所有不可用的元素 :checked 匹配所有选中的checkbox :selected 匹配选中的option

4)表单选择器 根据input的type来定位元素

:text , :password , :checkbox , :radio , :submit , :reset , :button , :file , :hidden

6.jQuery操作DOM

1)读写节点:

*obj.html/obj.html("..."); 读/写节点的HTML内容

*obj.text()/obj.text("..."); 读/写节点的文本内容

*obj.val()/obj.val("..."); 读/写节点的value属性值

*obj.attr("属性名")/obj.attr("属性名","属性值"); 读/写节点的属性值

2)增删节点

*创建节点:$("节点内容");

*插入节点: 父元素.append(obj); 做为最后一个节点添加 父元素.prepend(obj); 做为第一个节点添加

兄弟元素.after(obj); 做为下一个兄弟节点添加 兄弟元素.before(obj); 做为上一个兄弟节点添加

*删除节点: obj.remove(); 删除节点 obj.empty(); 清空节点

3)样式操作

*addClass("");追加指定样式

*removeClass("");移除指定样式

*removeClass();移除所有样式

*toggleClass("");切换样式

*hasClass("");判断是否有某个样式

*css("");读取css的值

*css("","");设置多个样式

4)遍历节点

*children()/children(选择器); 所有的子节点

*next()/next(选择器); 下一个兄弟节点

*prev()/prev(选择器); 上一个兄弟节点

*siblings()/siblings(选择器); 所有兄弟

*find(选择器); 查询满足选择器的所有后代

*parent();父节点

7.事件处理

1)事件后绑定:$obj.bind("事件类型",事件处理函数) 简写:$obj.事件类型(函数)

2)获取event对象:浏览器会自动传入event,为事件处理函数传个参接收即可

3)获取事件源:e.target

4)event对象常用属性:e.pageX/e.pageY

8.取消事件冒泡: e.stopPropagation();

9.合成事件:

*hover(mouseenter,mouseleave) 模拟光标悬停 设置的时候传入两个事件处理函数

*toggle(); 在多个事件响应中切换(在显示和隐藏之间切换)

10.模拟操作(电脑代替人的行为触发某些事件)

*$obj.trigger("事件类型") 简写形式:$obj.事件类型();

11.jQuery动画

1)显示,隐藏的动画效果(逐渐虚化)

*$obj.show(动画的执行时间,动画执行完后要执行的函数) $obj.hide()

2)上下滑动(无虚化的显示隐藏)

*slideDown() / slideUp() 用法同显示,隐藏

3)淡入淡出

*fadeIn() / fadeOut() 用法同显示,隐藏

4)自定义动画

*动画基于定位,通常都采用相对定位,永远以原始位置为目标设置偏移量

*animate(动画移动路径,动画执行时间,动画执行完后要执行的函数)