jQuery事件与DOM操作

1.jQuery中的事件
基础事件
        鼠标事件、键盘事件、window事件、表单事件
复合事件
        鼠标光标悬停
鼠标连续点击

2.鼠标事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

方法	相同点	不同点
mouseover( )	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter
mouseenter( )
mouseout( )	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时： 触发mouseout 不触发mouseleave
mouseleave( )

3.键盘事件

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

 4.绑定事件
bind(type,[data],fn)
type事件类型，click等或者自定义事件
data可选函数
fn处理函数
        绑定单个事件
 $(document).ready(function(){
    $(".on").bind("mouseover",function(){
        $(".topDown").show();
    });
});

        绑定多个事件$(".top-m .on").bind({
    mouseover:function(){
        $(".topDown").show();
    },
    mouseout:function(){
        $(".topDown").hide();
    }
});

5.移除事件
unbind（[type],[fn]）
当unbind（）不带参数时，表示移除所绑定的全部事件 6.复合事件
hover（）方法
hover()方法相当于mouseover与mouseout事件的组合
hover(enter,leave);
toggle（）方法
toggle(fn1,fn2,…,fnN)方法用于模拟鼠标连续click事件
toggle(fn1,fn2,...,fnN)
toggle()方法不带参数，与show( )和hide( )方法作用一样
toggleClass（）方法
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换。
toggleClass(className);

7.jQuery的DOM操作

8.内容操作
HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
标签内容操作
text()可以获取或设置元素的文本内容

9.html（）和text ()区别

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

10.属性值操作
val（）可以获取或设置元素的value属性值
$(this).val();        或     $(this).val(value);

11.jQuery中节点操作
查找节点
创建节点
插入节点
删除节点
替换节点
复制节点

12.创建节点元素
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

13.元素内部插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul");

14.元素外部插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");

15.删除节点
remove()：删除整个节点
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据（了解即可）

16.替换节点
replaceWith()和replaceAll()用于替换某个节点

17.复制节点
clone（）；

18.属性操作
获取与设置元素属性
删除元素属性
//记忆：一个参数表示取值，两个参数表示赋值

19.获取与设置元素属性
attr()用来获取与设置元素属性
$(selector).attr([name]) ;//获取属性值
//设置多个属性的值
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

20.删除元素属性
removeAttr()用来删除元素的属性

21.遍历节点
遍历子元素
遍历同辈元素
遍历前辈元素
其他遍历方法

22.遍历子元素
children（）；

23.遍历同辈元素

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange");
prev([expr])	用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange");

24.遍历前辈元素
parent()：获取元素的父级元素
parents()：元素元素的祖先元素

25.其它遍历方法
each( ) ：规定为每个匹配元素规定运行的函数