68jQuery【jQuery操作DOM、事件】

jQuery

jQuery操作DOM

元素节点的增删改查

创建元素节点

使用$(html)函数动态创建节点元素

函数$(html)只完成DOM元素创建，加入到页面还需要通过元素节点的插入或追加操作；同时，在创建DOM元素时，要注意字符标记是否完全闭合，否则达不到预期效果。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;}</style><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn01").click(function(){var img = $("<img src='../img/星空一花.jpg'/>");//将图片添加到div里 -- 末尾//$("#manager").append(img);//$(img).appendTo($("#manager"));//将图片添加到div里 -- 首位//$("#manager").prepend(img);//$(img).prependTo($("#manager"));//将图片添加到div标签后面 -- 并列关系//$("#manager").after(img);//$(img).insertAfter($("#manager"));//将图片添加到div标签前面 -- 并列关系//$("#manager").before(img);$(img).insertBefore($("#manager"));})$("#btn02").click(function(){$("img:first").remove();})})</script></head><body><button id="btn01">添加节点</button><button id="btn02">删除节点</button><div id="manager"><img src="../img/樱井步.jpg"/></div></body>
</html>

添加节点

遍历

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;}</style><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//循环绑定单击事件$("img").each(function(){$(this).click(function(){$(this).attr("src","../img/星空一花.jpg");})})})</script></head><body><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /><img src="../img/樱井步.jpg" /></body>
</html>

操作节点2

其他操作

文档学习

节点案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//全选和单选关联$("#chkAll").click(function(){if($(this).attr("checked")){$("td>input").attr("checked","checked");}else{$("td>input").removeAttr("checked");}})//单选与全选关联$("td>input").each(function(){$(this).click(function(){if($("td>input").length == $("td>input:checked").length){$("#chkAll").attr("checked","checked");}else{$("#chkAll").removeAttr("checked");}})})//删除$("#btnDel").click(function(){$("td>input:checked").each(function(){var deleteId = $(this).val();$("tr[id=" + deleteId + "]").remove();})//删除后解除全选if($("td>input").length == 0){$("#chkAll").removeAttr("checked");}})})</script></head><body><table border="1"><tr><th>选项</th><th>编号</th><th>姓名</th><th>性别</th></tr><tr id="1"><td><input type="checkbox" value="1"/></td><td>1001</td><td>小明</td><td>男</td></tr><tr id="2"><td><input type="checkbox" value="2"/></td><td>1002</td><td>明明</td><td>女</td></tr><tr id="3"><td><input type="checkbox" value="3"/></td><td>1003</td><td>小红</td><td>女</td></tr><tr><td colspan="4"><span><input id="chkAll" type="checkbox" />全选</span><span><input id="btnDel" type="button" value="删除"/></span></td></tr></table></body>
</html>

节点案例

事件

事件在元素对象与功能代码中起着重要的桥梁作用

ps：页面在加载时，会触发Load事件。当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作。

事件机制

事件在触发后分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）

事件冒泡现象

但大多数浏览器并不是都支持捕获阶段，jQuery也不支持。

因此在事件触发后，往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{width: 200px;height: 200px;border: orange 1px solid;}</style><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){/*** 冒泡现象：子元素的事件向上传递给了父级元素*/$("#manager").click(function(){alert("div被点击了");})$("#btn").click(function(event){alert("按钮被点击了");//阻止冒泡现象 -- 解决方案一//event.stopPropagation();//阻止冒泡现象 -- 解决方案二return false;})})</script></head><body><div id="manager"><input id="btn" type="button" value="普通按钮" /></div></body>
</html>

页面加载事件

其实一直在用，才学习JQuery时就在使用

绑定事件/解绑事件

		<script type="text/javascript">//(1)$(function(){//绑定事件[通过映射方式绑定事件]	$("img").bind({"click":function(){console.log("图片被点击了");},"mouseout":function(){console.log("鼠标移出图片了");}})})//(2)绑定解绑$(function(){//绑定事件			$("img").bind("click mouseout",function(){console.log("触发事件了");})//为按钮绑定点击事件[直接绑定事件]$("#btn").click(function(){//解绑所有的事件//$("img").unbind();//解绑指定的事件$("img").unbind("click");})})</script><body><button id="btn">解绑事件</button><br /><img src="../img/波多野结衣.jpg" width="100px" height="100px" /></body>

切换事件

hover()方法

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态

toggle()方法

在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//(1)$(function(){//切换事件：鼠标移入、移出事件来回切换$("img").hover(function(){console.log("aaa");},function(){console.log("bbb");})})//(2)$(function(){//切换事件：鼠标单击事件循环切换$("img").toggle(function(){console.log("aaa");},function(){console.log("bbb");},function(){console.log("ccc");})})</script></head><body><img src="../img/波多野结衣.jpg" width="100px" height="100px" /></body>
</html>

切换事件

事件循环切换

事件应用案例

选择器案例升级

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>选择</title><style type="text/css">body{font-size:13px}#all{border:solid 1px #666;width:320px;overflow:hidden}#all #head{background-color:#eee;padding:8px;height:18px;cursor:hand}#all #head h3{padding:0px;margin:0px;float:left}#all #head span{float:right;margin-top:3px}#all #content{padding:8px}#all #content ul {list-style-type:none;margin:0px;padding:0px}#all #content ul li{ float:left;width:95px;height:23px;line-height:23px}#all #btn{float:right;padding-top:5px;padding-bottom:5px}</style><script type="text/javascript" src="../js/jquery-1.8.2.js"></script><script type="text/javascript">$(function(){//采用div绑定切换事件循环切换$("#head").toggle(function(){$("img").attr("src","../img/down.bmp");$("#content").css("display","none");},function(){$("img").attr("src","../img/up.bmp");$("#content").css("display","block");})$("#btn>a").click(function(){if($(this).text() == "简化"){$(this).text("更多");$("ul>li:gt(5):not(:last)").css("display","none");}else if($(this).text() == "更多"){$(this).text("简化");$("ul>li:gt(5):not(:last)").css("display","block");}})})</script></head><body><div id="all"><div id="head"><h3>学科分类</h3><span><img src="../img/up.bmp"/></span></div><div id="content"><ul><li><a href="#">JavaEE</a><i> (1110) </i></li><li><a href="#">PHP</a><i> (230) </i></li><li><a href="#">BIG</a><i> (1430) </i></li><li><a href="#">Android</a><i> (1560) </i></li><li><a href="#">IOS</a><i> (870) </i></li><li><a href="#">H5</a><i> (1460) </i></li><li><a href="#">VR</a><i> (1450) </i></li><li><a href="#">小程序</a><i> (1780) </i></li><li><a href="#">演讲</a><i> (930) </i></li><li><a href="#">PPT</a><i> (3450) </i></li><li><a href="#">Word</a><i> (980) </i></li><li><a href="#">其他</a><i> (3230) </i></li></ul><div id="btn"><a href="#">简化</a></div></div></div></body>
</html>

表单验证

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span{color: red;}</style><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var bool = true;$("#username").blur(function(){if($.trim($(this).val()) == ""){$("#username+span").text("账号不能为空");bool = false;}else{$("#username+span").text("");}})$("#password").blur(function(){if($.trim($(this).val()) == ""){$("#password+span").text("密码不能为空");bool = false;}else{$("#password+span").text("");}})$("#repassword").blur(function(){if($.trim($(this).val()) == ""){$("#repassword+span").text("确认密码不能为空");bool = false;}else if($.trim($(this).val()) != $.trim($("#password").val())){$("#repassword+span").text("确认密码与密码不一致");bool = false;}else{$("#repassword+span").text("");}})$("form").submit(function(){bool = true;//触发username、password、repassword的失去焦点事件$("#username").trigger("blur");$("#password").trigger("blur");$("#repassword").trigger("blur");return bool;})})</script></head><body><form action="#" method="post">账号：<input type="text" id="username" name="username" /><span></span><br/>密码：<input type="password" id="password" name="password" /><span></span><br/>确认密码：<input type="password" id="repassword" name="repassword" /><span></span><br/><input type="submit" value="提交" /></form></body>
</html>

表单验证

选项卡

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">ul{margin: 0;padding: 0;list-style: none;}#tab li {text-align: center;float: left;padding: 5px;margin-right: 2px;width: 50px;cursor: pointer}#tab li.tabFocus {width: 50px;font-weight: bold;background-color: powderblue;border: solid 1px #666;border-bottom: 0;z-index: 100;position: relative}#content {width: 260px;height: 80px;padding: 10px;background-color: powderblue;clear: left;border: solid 1px #666;position: relative;top: -1px}#content li {display: none}#content li.contentFocus {display: block}</style><script type="text/javascript" src="../js/jquery-1.8.2.js"></script><script type="text/javascript">$(function() {$("#tab>li").each(function(index){$(this).click(function(){$("#tab>li[class='tabFocus']").removeClass("tabFocus");$(this).addClass("tabFocus");$("#content>li[class='contentFocus']").removeClass("contentFocus");$("#content>li:eq(" + index + ")").addClass("contentFocus");})})})</script></head><body><ul id="tab"><li class="tabFocus">javaee</li><li>php</li><li>.NET</li></ul><ul id="content"><li class="contentFocus">企业级应用占据领导地位</li><li>中小型网站首选</li><li>微软出品</li></ul></body></html>