jQuery事件与DOM操作

jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类

基础事件

鼠标事件

键盘事件

window事件

表单事件

复合事件

鼠标光标悬停

鼠标连续点击

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

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

例题：

制作当当导航页面

以mouseover( ) 与mouseout( )方法为例，实现导航菜单

$(".nav-ul a").mouseover(function(){
    $(this).css("background-color","#f01e28");
});
$(".nav-ul a").mouseout(function(){
    $(this).css("background-color","#ff2832");
});

鼠标事件方法的区别

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

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件

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

绑定事件

语法：bind(type,[data],fn);

type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件

data：可选函数

fn：处理函数

绑定单个事件

同时绑定多个事件

绑定单个事件

使用绑定实现鼠标移至“我的当当”显示二级菜单

$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});

使用绑定多个事件实现“我的当当” 二级菜单的显示和隐藏

$(".top-m .on").bind({
    mouseover:function(){
        $(".topDown").show();
    },
    mouseout:function(){
        $(".topDown").hide();
    }
});

移除事件

移除事件使用unbind()方法

语法：unbind([type],[fn])

type：事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件

fn：处理函数

提示：当unbind()不带参数时，表示移除所绑定的全部事件

复合事件

hover()方法

hover()方法相当于mouseover与mouseout事件的组合

语法：hover(enter,leave);

示例：$(".top-m .on").hover(function(){
    $(".topDown").show();
          },
         function(){
     $(".topDown").hide();
         }
);

toggle()方法

toggle(fn1,fn2,…,fnN)方法用于模拟鼠标连续click事件

语法：toggle(fn1,fn2,...,fnN);

示例：
$("input").toggle(
        function(){$("body").css("background","#ff0000");},
        function(){$("body").css("background","#00ff00");},
        function(){$("body").css("background","#0000ff");}
    )

toggle()方法不带参数，与show( )和hide( )方法作用一样

语法：toggle();

示例：$("input").click(function(){$("p").toggle();})

toggleClass()方法

toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换。

语法：toggleClass(className);

示例：$("input").click(function(){$("p").toggleClass("red");})

DOM

DOM：Document Object Model（文档对象模型）

jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

样式操作

内容及Value值操作

节点操作

节点属性操作

节点遍历

CSS-DOM操作

设置和获取样式值

语法：
css("属性","属性值") ;  //设置一个css属性
css({"属性1":"属性值1","属性2":"属性值2"...}) ;//设置多个css属性

示例：$(this).css({"background":"#c81623"});

追加和移除样式

追加样式：addClass

语法：$(selector).addClass(class);
或   $(selector).addClass(class1 class2 … classN);

移除样式：removeClass()

语法：$(selector).removeClass("class") ;
或   $(selector).removeClass("class1 class2 … classN ") ;

内容操作

HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

语法：$(“div.left”).html(); //获取元素的HTML代码
 //设置元素的HTML代码
 $("div.left").html("<div class='content'>…</div>");

标签内容操作

text()可以获取或设置元素的文本内容

语法:$("div.left").text();
或
 $("div.left").text("<div class='content'>…</div>");

html( ) 和text( )方法的区别

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

属性值操作

val()可以获取或设置元素的value属性值

语法：$(this).val();
或     $(this).val(value);

节点操作

jQuery中节点操作

查找节点

创建节点

插入节点

删除节点

替换节点

复制节点

创建节点元素

工厂函数$()用于获取或创建节点

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点

示例：var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

插入节点

元素内部插入子节点

语法	功能
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");

删除节点

jQuery提供了三种删除节点的方法

remove()：删除整个节点

empty()：清空节点内容

detach()：删除整个节点，保留元素的绑定事件、附加的数据（了解即可）

替换节点

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

示例：var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);

$($newNode1).replaceAll(".gameList li:eq(2)");

复制节点

clone()用于复制某个节点

语法：$(selector).clone([includeEvents]) ;

示例：$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })

属性操作

获取与设置元素属性

attr()用来获取与设置元素属性

语法：$(selector).attr([name]) ;//获取属性值
//设置多个属性的值
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

示例：$(".contain img").attr({width:"200",height:"80"});

删除元素属性

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

语法：$(selector).removeAttr(name) ;
示例：$(".contain img").removeAttr("alt");

节点遍历

遍历子元素

children()方法可以用来获取元素的所有子元素

语法：$(selector).children([expr]);

示例:var $section =$("section").children();
alert($section.length);

遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

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

遍历前辈元素

jQuery中可以遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

示例：$("li:eq(1)").parent().addClass("orange");
 $("li:eq(1)").parents().addClass("orange");

其他遍历方法

each( ) ：规定为每个匹配元素规定运行的函数

语法：$(selector).each(function(index,element)) ;

示例：$("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });

CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶