喵星之旅-成长的雏鹰-Web前端-8-jQuery中的事件与DOM操作

成长的雏鹰JavaWeb

jQuery中的事件

和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现.
jQuery事件是对JavaScript事件的封装.

基础事件

鼠标事件

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

Alt text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<body>
	<div class="top">
		<div class="wrap">
			<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
			<ul class="top-m right">
				<li><a href=""><i class="top-car left"></i>购物车</a></li>
				<li class="line"></li>
				<li><a href="">我的订单</a></li>
				<li class="line"></li>
				<li><a href="">当当自出版</a></li>
				<li class="line"></li>
				<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
				<li class="line"></li>
				<li>
					<a href="" class="menu-btn">我的当当</a>
				</li>
				<li class="line"></li>
				<li><a href="" class="menu-btn">企业采购</a></li>
				<li class="line"></li>
				<li><a href="" class="menu-btn">客户服务</a></li>
				<li class="line"></li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="wrap">
		<a href=""><img src="images/logo.jpg"/></a>
	</div>
	<div class="nav-box">
		<div class="wrap">
			<ul class="nav-ul">
				<li class="all"><a href="">全部商品详细分类</a></li>
				<li><a href="">尾品会</a></li>
				<li><a href="">图书</a></li>
				<li><a href="">电子书</a></li>
				<li><a href="">服装</a></li>
				<li><a href="">运动户外</a></li>
				<li><a href="">婴孕童</a></li>
				<li><a href="">家具</a></li>
				<li><a href="">当当优品</a></li>
				<li><a href="">电器城</a></li>
				<li><a href="">当当超市</a></li>
				<li><a href="">海外购</a></li>
				<div class="clearfix"></div>
			</ul>
		</div>
	</div>
    
 </body>


$(document).ready(function(){
	/**主菜单鼠标移上时背景颜色加深**/
	$(".nav-ul a").mouseover(function(){
		$(this).css("background-color","#f01e28");
	});
	$(".nav-ul a").mouseout(function(){
		$(this).css("background-color","#ff2832");
	});
});

键盘事件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<fieldset>
	<legend>会员登录</legend>
	<dl>
	    <dt>用户名：</dt>
	    <dd><input id="userName" type="text" /></dd>
	</dl>
	<dl>
	    <dt>密码：</dt>
	    <dd><input id="password" type="password" /></dd>
	</dl>
	<dl>
	    <dt></dt>
	    <dd><input type="submit" value="登 录" /> </dd>
	</dl>
	<span id="events"></span>
</fieldset>

<script>
	$(document).ready(function () {
		$("[type=password]").keyup(function () {
			$("#events").append("keyup");
		}).keydown(function (e) {
			$("#events").append(" keydown");
		}).keypress(function () {
			$("#events").append(" keypress");
		});

		$(document).keydown(function (event) {
			if (event.keyCode == "13") {//按回车键
				alert("确认要提交么？");
			}
		});
	});
</script>

绑定和移除事件

绑定事件

绑定单个事件
同时绑定多个事件

移除事件

移除事件使用unbind()方法
当unbind()不带参数时，表示移除所绑定的全部事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 <body>
	<div class="top">
		<div class="wrap">
			<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
			<ul class="top-m right">
				<li><a href=""><i class="top-car left"></i>购物车</a></li>
				<li class="line"></li>
				<li><a href="">我的订单</a></li>
				<li class="line"></li>
				<li><a href="">当当自出版</a></li>
				<li class="line"></li>
				<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
				<li class="line"></li>
				<li class="on">
					<a href="" class="menu-btn">我的当当</a>
					<ul class="topDown">
						<li><a href="">我的积分</a></li>
						<li><a href="">我的收藏</a></li>
						<li><a href="">我的余额</a></li>
						<li><a href="">我的评论</a></li>
						<li><a href="">电子书架</a></li>
					</ul>
				</li>
				<li class="line"></li>
				<li><a href="" class="menu-btn">企业采购</a></li>
				<li class="line"></li>
				<li><a href="" class="menu-btn">客户服务</a></li>
				<li class="line"></li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="wrap">
		<a href=""><img src="images/logo.jpg"/></a>
	</div>
	<div class="nav-box">
		<div class="wrap">
			<ul class="nav-ul">
				<li class="all"><a href="">全部商品详细分类</a></li>
				<li><a href="">尾品会</a></li>
				<li><a href="">图书</a></li>
				<li><a href="">电子书</a></li>
				<li><a href="">服装</a></li>
				<li><a href="">运动户外</a></li>
				<li><a href="">婴孕童</a></li>
				<li><a href="">家具</a></li>
				<li><a href="">当当优品</a></li>
				<li><a href="">电器城</a></li>
				<li><a href="">当当超市</a></li>
				<li><a href="">海外购</a></li>
				<div class="clearfix"></div>
			</ul>
		</div>
	</div>
    
 </body>


$(document).ready(function(){
	/**导航头部我的当当 显示二级菜单 绑定悬浮 bind一个事件*
    $(".on").bind("mouseover",function(){
		$(".topDown").show();
	});*/

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


    /**主菜单鼠标移上时背景颜色加深**/
    $(".nav-ul a").mouseover(function(){
        $(this).css("background-color","#f01e28");
    });
    $(".nav-ul a").mouseout(function(){
        $(this).css("background-color","#ff2832");
    });

});

Tab切换页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<body>
<section id="taskList">
    <ul id="nav"><li>日常任务</li><li>成长任务</li></ul>
    <div class="taskContent">
        <ul id="dayTask">
            <li>
                <div>
                    <h1>交口称赞</h1>
                    <p>为喜欢的回答送出一个赞</p>
                    <p>奖励：<span>财富值×10</span><span>经验之石（小）×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>每日答题</h1>
                    <p>前往回答一个问题</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×10</span><span>经验之石（小）×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>助人为乐</h1>
                    <p>当日获得1个采纳</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×10</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
        </ul>
        <ul id="growTask">
            <li>
                <div>
                    <h1>成长之路</h1>
                    <p>知道等级达到2级</p>
                    <p>奖励：<span>财富值×20</span><span>铜宝箱×1</span><span>准备入学微章×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>知识之路</h1>
                    <p>在知道获得1个采纳</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×20</span><span>经验之石（小）×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                </div>
                <div><input type="button" id="del" value="解除绑定"></div>
            </li>
        </ul>
    </div>
</section>
 
</body>


$(document).ready(function(){
    $("#nav li:first").bind("click",bg1=function(){
        $(".taskContent").css("background","#26a6e3");
    }).bind("click",content1=function(){
        $("#dayTask").show();
        $("#growTask").hide();
    });
    $("#nav li:last").bind("click",bg2=function(){
        $(".taskContent").css("background","#ff9400");
    }).bind("click",content2=function(){
        $("#dayTask").hide();
        $("#growTask").show();
    });
    /*$("#del").click(function(){
        $("#nav li:first").unbind("click", content1)
    });*/

    $("#del").click(function(){
        $("#nav li:first").unbind();
    });
})

复合事件

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

toggle( )方法
toggle()方法用于模拟鼠标连续click事件
toggle()方法不带参数，与show( )和hide( )方法作用一样

toggleClass( )可以对样式进行切换

toggle( )和toggleClass( )

toggle( fn1,fn2…)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景颜色变化</title>
    <style type="text/css">
        .red{
            font-size: 28px;
            color: red;
        }
    </style>
</head>
<body>
<input type="button" value="点我吧">
<p>我一会显示一会隐藏</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      /* $("input").toggle(function(){$("body").css("background","#ff0000");},
                function(){$("body").css("background","#00ff00");},
                function(){$("body").css("background","#0000ff");}
        )*/

    //$("input").click(function(){$("p").toggle();})

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


    })
</script>
</body>
</html>

使用jQuery操作DOM

DOM操作分为三类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color=”green”

JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

样式操作

css( )获取和设置样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
设置样式:
css(name,value) ;
或
css({name:value, name:value,name:value…}) ;

获取样式
css(name)


示例:
$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});


addClass( )追加样式

1
2
3
4
5
6
7
8
$(selector).addClass(class);
或   $(selector).addClass(class1 class2 … classN);

示例:
$("h2").mouseover(function() {
     $("p").addClass("content border");
});

removeClass( )移除样式

1
2
3
4
5
6
7
8
$(selector).removeClass("class") ;
或   $(selector).removeClass("class1 class2 … classN ") ;

示例:
$("h2").mouseout(function() {
        $("p").removeClass("text content");
});

toggleClass( )切换样式,模拟了addClass()与removeClass()实现样式切换的过程

1
2
$(selector).toggleClass(class) ;

使用hasClass( )方法来判断是否包含指定的样式

1
2
$(selector). hasClass(class);

内容操作

有参数为设置（赋值），没参数为获取。

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

1
2
3
4
5
6
获取
$("div.left").html();

设置
 $("div.left").html("<div class='content'>…</div>");

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

1
2
3
4
$("div.left").text();
或
 $("div.left").text("<div class='content'>…</div>");

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

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

1
2
3
4
$(this).val();
或     
$(this).val(value);

节点操作

创建节点元素

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

$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点 

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

插入节点

元素内部插入子节点
Alt text

元素外部插入同辈节点
Alt text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
	<script src="js/games.js"></script>
 </body>

$(document).ready(function(){
    //用过滤选择器给h2设置背景颜色和字体颜色
     $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});


    var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
    var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");
    $("ul").append($newNode1);
    $("ul").prepend($newNode2);
    var $newNode3=$("<li>北京冬残会筹备工作在京举行</li>");
    var $newNode4=$("<li>北京奥匹克塔奥运五环标志落成！</li>");
    $("ul").after($newNode3);
    $("ul").before($newNode4);

   // $(".gameList li:eq(1)").remove();
    $(".gameList li:eq(1)").empty();



    //li 最后一个 没有边框
    $(".gameList li:last").css("border","none");


});

删除节点

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

remove()：删除整个节点
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据

使用参考前面一个样例。

替换节点

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

1
2
3
4
5
6
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);


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

复制节点

clone()用于复制某个节点

1
2
3
4
5
6
7
8
9
$(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( )获取和设置元素属性

removeAttr( )删除元素属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 <body>
	<div class="contain">
		<div><img src="images/winter.jpg" alt="奥运五环标志" width="320" height="198"></div>
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
	<script src="js/games.js"></script>
 </body>

 $(document).ready(function(){
    //用过滤选择器给h2设置背景颜色和字体颜色
     $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

    $(".contain img").click(function(){
        alert($(this).attr("alt"));
    })

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

    $(".contain img").removeAttr("alt");

    //li 最后一个 没有边框
    $(".gameList li:last").css("border","none");

});

节点遍历

遍历子元素：

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

遍历同辈元素

next( )

1
2
3
用于获取紧邻匹配元素之后的元素
$("li:eq(1)").next().addClass("orange");

prev( )

1
2
3
用于获取紧邻匹配元素之前的元素
$("li:eq(1)").prev().addClass("orange");

siblings( )

1
2
3
用于获取位于匹配元素前面和后面的所有同辈元素
$("li:eq(1)").siblings().addClass("orange");

遍历前辈元素

parent( )获取元素的父级元素
parents()：元素元素的祖先元素 

1
2
3
$("li:eq(1)").parent().addClass("orange");
 $("li:eq(1)").parents().addClass("orange");

其他遍历方法

each( )

1
2
3
4
5
6
7
8
9
10
11
规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element)) ;

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

end( )结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

1
2
3
4
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");

样例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>节点遍历</title>
<style type="text/css" >
 .hot{ color:#F00;}
a{	color:#000;
	text-decoration:none;
}
	.orange{
		background: #c3910b;
	}
 .orange a{
	 color: #ffffff;
 }
</style>

</head>
<body>
<section>
	<img src="images/ad.jpg" alt="美梦成真系列抽奖" />
	<ul>
		<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
		<li><a href="#">苹果iPad mini</a></li>
		<li><a href="#">三星GALAXY Ⅲ</a></li>
		<li><a href="#">苹果iPhone 5</a></li>
	</ul>
</section>
<script  src="js/jquery-1.12.4.js" ></script>
<script  src="js/node.js" ></script>
</body>
</html>


/**
 * Created by zongjuan.wang on 2016/7/1.
 */


$(document).ready(function(){
    //遍历子节点
    /* var $section =$("section").children();
    alert($section.length);*/


    //获取同辈节点
    $("li:eq(1)").next().addClass("orange");
    //$("li:eq(1)").prev().addClass("orange");
   // $("li:eq(1)").siblings().addClass("orange");

    //获取前辈节点
    //$("li:eq(1)").parent().addClass("orange");
    //$("li:eq(1)").parents().addClass("orange");
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<section>
	<img src="images/ad.jpg" alt="美梦成真系列抽奖" />
	<ul>
		<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
		<li><a href="#">苹果iPad mini</a></li>
		<li><a href="#">三星GALAXY Ⅲ</a></li>
		<li><a href="#">苹果iPhone 5</a></li>
	</ul>
</section>
<script  src="js/jquery-1.12.4.js" ></script>
<script  src="js/node.js" ></script>
</body>

$(document).ready(function(){
   $("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
	<script src="js/games.js"></script>
 </body>


 $(document).ready(function(){
    //用过滤选择器给h2设置背景颜色和字体颜色
     $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

    $(".gameList li").first().css("background","#b8e7f9").end().last().css("background","#d3f4b5");

    //li 最后一个 没有边框
    $(".gameList li:last").css("border","none");

});

CSS-DOM操作

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>随鼠标滚动的广告图片</title>
<style type="text/css">
#main{text-align:center; width: 1014px; margin: 0 auto;}
#adver{
	position:absolute;
	left:10px;
	top:30px;
	z-index:2;
}
</style>

</head>
<body>
<div id="adver"><img src="images/adv.jpg"/></div>
<div id="main"><img src="images/main1.jpg"/><img src="images/main2.jpg"/><img src="images/main3.jpg"/></div>

<script src="js/jquery-1.12.4.js"></script>
<script>
	$(document).ready(function(){
		var adverTop=parseInt($("#adver").css("top"));
		var adverLeft=parseInt($("#adver").css("left"));
		$(window).scroll(function(){
			var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离
			var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离
			$("#adver").offset({top:scrollTop+adverTop});
			$("#adver").offset({left:scrollLeft+adverLeft});
		});
	})
</script>
</body>
</html>

文章目录
  1. jQuery中的事件
    1. 基础事件
      1. 鼠标事件
      2. 键盘事件
    2. 绑定和移除事件
    3. 复合事件
  2. 使用jQuery操作DOM
    1. 样式操作
    2. 内容操作
  3. 节点操作
    1. 创建节点元素
    2. 插入节点
    3. 删除节点
    4. 替换节点
    5. 复制节点
  4. 属性操作
  5. 节点遍历
    1. 遍历子元素：
    2. 遍历同辈元素
    3. 遍历前辈元素
    4. 其他遍历方法
    5. 样例
    6. CSS-DOM操作
|