Jquery学习
来源：互联网 发布：金珠优化就是染色吗 编辑：程序博客网 时间：2024/05/05 04:11
JQuery事例事例1：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!-- 导入 jQuery 库 --><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#checkedAll_2").click(function(){var flag = this.checked;$(":checkbox[name='items']").attr("checked", flag);});$(":checkbox[name='items']").click(function(){$("#checkedAll_2").attr("checked", $(":checkbox[name='items']").length == $(":checkbox[name='items']:checked").length)});})</script></head><body><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 <br /> <inputtype="checkbox" name="items" value="足球" />足球 <input type="checkbox"name="items" value="篮球" />篮球 <input type="checkbox" name="items"value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球</form></body></html>事例2<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!-- 导入 jQuery 库 --><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">//$(function(){}) 相当于 window.onload, 代码卸载 {} 之间$(function(){//1. 选取 button: $("button")//2. 为 button 添加 onclick 响应函数: $("button").click(function(){})//代码编写在 function 的 {} 中. $("button").click(function(){//3. 弹出 helloworldalert("helloworld");alert($(this).text());//jQuery 和 DOM 对象//1. 由 jQuery 对象转为 DOM 对象//1). 获取一个 jQuery 对象var $btn = $("button");//2). jQuery 对象是一个数组. //alert($btn.length);//3). 可以通过数组的下标转为 DOM 对象//alert($btn[1].firstChild.nodeValue);//2. 由 DOM 对象转为 jQuery 对象//1). 选取一个 DOM 对象var btn = document.getElementById("btn");//2). 把 DOM 对象转为一个 jQuery 对象: 使用 $() 进行包装alert("--" + $(btn).text())});})</script></head><body><button id="btn">ClickMe</button><br><br><button>ClickMe2</button></body></html>事例3----选择器visible匹配所有的可见元素<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){$("div:visible").css("background", "#ffbbaa");});$("#btn2").click(function(){//alert($("div:hidden").length);//show(time): 可以使不可见的元素变为可见, time 表示时间, 以//毫秒为单位//jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该//方法的 jQuery 对象: 可以继续调用该对象的其他方法. $("div:hidden").show(2000).css("background", "#ffbbaa");});$("#btn3").click(function(){//val() 方法可以返回某一个表单元素的 value 属性值. alert($("input:hidden").val());});});</script></head><body><input type="button" value="选取所有可见的 div 元素" id="btn1"><input type="button" value="选择所有不可见的 div 元素" id="btn2" /><input type="button" value="选择所有不可见的 input 元素" id="btn3" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789000" size="8"></div><div id="mover">正在执行动画的div元素.</div></body></html>Attrbutefilterselector<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("div[title]").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div[title='test']").css("background", "#ffbbaa");});$("#btn3").click(function(){//选取的元素中包含没有 title 的 div 元素. $("div[title!='test']").css("background", "#ffbbaa");});$("#btn4").click(function(){$("div[title^='te']").css("background", "#ffbbaa");});$("#btn5").click(function(){$("div[title$='est']").css("background", "#ffbbaa");});$("#btn6").click(function(){$("div[title*='es']").css("background", "#ffbbaa");});$("#btn7").click(function(){$("div[id][title*='es']").css("background", "#ffbbaa");});$("#btn8").click(function(){$("div[title][title!='test']").css("background", "#ffbbaa");});})</script></head><body><input type="button" value="选取含有 属性title 的div元素." id="btn1"/><input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/><input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/><input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/><input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/><input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/><input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/><input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"></div><div id="mover">正在执行动画的div元素.</div></body></html>basicfilterselector<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();$("#btn1").click(function(){$("div:first").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div:last").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div:not(.one)").css("background", "#ffbbaa");});$("#btn4").click(function(){$("div:even").css("background", "#ffbbaa");});$("#btn5").click(function(){$("div:odd").css("background", "#ffbbaa");});$("#btn6").click(function(){$("div:gt(3)").css("background", "#ffbbaa");});$("#btn7").click(function(){$("div:eq(3)").css("background", "#ffbbaa");});$("#btn8").click(function(){$("div:lt(3)").css("background", "#ffbbaa");});$("#btn9").click(function(){$(":header").css("background", "#ffbbaa");});$("#btn10").click(function(){$(":animated").css("background", "#ffbbaa");});$("#btn11").click(function(){$("#two").nextAll("span:first").css("background", "#ffbbaa");});});</script></head><body><input type="button" value="选择第一个 div 元素" id="btn1" /><input type="button" value="选择最后一个 div 元素" id="btn2" /><input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" /><input type="button" value="选择索引值为偶数的 div 元素" id="btn4" /><input type="button" value="选择索引值为奇数的 div 元素" id="btn5" /><input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" /><input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" /><input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" /><input type="button" value="选择所有的标题元素" id="btn9" /><input type="button" value="选择当前正在执行动画的所有元素" id="btn10" /><input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" /><h3>基本选择器.</h3><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素 111^^</span><span id="span">^^span元素 222^^</span><div id="mover">正在执行动画的div元素.</div></body></html>basicselector_<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><!-- 导入 jQuery 库 --><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")//2. 为选择的 jQuery 对象添加 onclick 响应函数: // $("#btn1").click(function(){}), 响应函数的代码//写在 function(){} 的中括号中.$("#btn1").click(function(){$("#one").css("background", "#ffbbaa");});$("#btn2").click(function(){$(".mini").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div").css("background", "#ffbbaa");});$("#btn4").click(function(){$("*").css("background", "#ffbbaa");});$("#btn5").click(function(){$("span,#two").css("background", "#ffbbaa");});})</script></head><body><input type="button" value="选择 id 为 one 的元素" id="btn1" /><input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /><input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /><input type="button" value="选择 所有的元素" id="btn4" /><input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span></body></html>childfilterselector_<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){//选取子元素, 需要在选择器前添加一个空格. $("div.one :nth-child(2)").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div.one :first-child").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div.one :last-child").css("background", "#ffbbaa");});$("#btn4").click(function(){$("div.one :only-child").css("background", "#ffbbaa");});});</script></head><body><input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/><input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/><input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/><input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"></div><div id="mover">正在执行动画的div元素.</div></body></html>contentfilterselector_<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){$("div:contains('di')").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div:empty").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div:has(.mini)").css("background", "#ffbbaa");});$("#btn4").click(function(){$("div:parent").css("background", "#ffbbaa");//$("div:not(:empty)").css("background", "#ffbbaa");});});</script></head><body><input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /><input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /><input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /><input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在执行动画的div元素.</div></body></html>formattributeselector_<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){//使所有的可用的单行文本框的 value 值变为 尚硅谷alert($(":text:enabled").val());$(":text:enabled").val("尚硅谷");});$("#btn2").click(function(){$(":text:disabled").val("www.atguigu.com");});$("#btn3").click(function(){var num = $(":checkbox[name='newsletter']:checked").length;alert(num);});$("#btn5").click(function(){//实际被选择的不是 select, 而是 select 的 option 子节点//所以要加一个 空格. //var len = $("select :selected").length//alert(len);//因为 $("select :selected") 选择的是一个数组//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. //alert($("select :selected").val());//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在//得到的 DOM 对象, 而不是一个 jQuery 对象$("select :selected").each(function(){alert(this.value);});});$("#btn4").click(function(){$(":checkbox[name='newsletter']:checked").each(function(){alert(this.value);});});})</script></head><body><h3>表单对象属性过滤选择器</h3> <button id="btn1">对表单内 可用input 赋值操作.</button> <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /> <button id="btn3">获取多选框选中的个数.</button> <button id="btn4">获取多选框选中的内容.</button><br /><br /> <button id="btn5">获取下拉框选中的内容.</button><br /><br /> <form id="form1" action="#">可用元素: <input name="add" value="可用文本框1"/><br>不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>可用元素: <input name="che" value="可用文本框2"/><br>不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br><br>多选框: <br><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<br><br>下拉列表1: <br><select name="test" multiple="multiple" style="height: 100px"><option>浙江</option><option selected="selected">辽宁</option><option>北京</option><option selected="selected">天津</option><option>广州</option><option>湖北</option></select><br><br>下拉列表2: <br><select name="test2"><option>浙江</option><option>辽宁</option><option selected="selected">北京</option><option>天津</option><option>广州</option><option>湖北</option></select><textarea rows="" cols=""></textarea></form></body></html>gradationselector_<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("body div").css("background", "#ffbbaa");});$("#btn2").click(function(){$("body > div").css("background", "#ffbbaa");});$("#btn3").click(function(){$("#one + div").css("background", "#ffbbaa");});$("#btn4").click(function(){$("#two ~ div").css("background", "#ffbbaa");});$("#btn5").click(function(){$("#two").siblings("div").css("background", "#ffbbaa");});$("#btn6").click(function(){//以下选择器选择的是近邻 #one 的 span 元素, 若该span//和 #one 不相邻, 选择器无效. //$("#one + span").css("background", "#ffbbaa");$("#one").nextAll("span:first").css("background", "#ffbbaa");});$("#btn7").click(function(){$("#two").prevAll("div").css("background", "#ffbbaa");});})</script></head><body><input type="button" value="选择 body 内的所有 div 元素" id="btn1" /><input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" /><input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /><input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /><input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" /><input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" /><input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span><span id="span">--span元素--</span></body></html>1. 对 jQuery 调用调用 each() 方法, 可以在 each() 方法中加入 index, 得到正在遍历的那个对象对应的索引.$("li").each(function(index){//打印出正在遍历的 li 节点在所有 li 组成的数组中的索引. alert(index);}2. 使用 jQuery 对象和 jQuery 对象提供的 replaceWith(replaceAll) 在进行元素替换时,事件和属性不能很好的进行复制. Dom<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 jQuery 操作文本节点, 属性节点. //及查找元素节点$(function(){//1. 操作文本节点: 通过 jQuery 对象的 text() 方法alert($("#bj").text());$("#bj").text("尚硅谷");//2. 操作属性节点: 通过 jQuery 对象的 attr() 方法. //注: 直接操作 value 属性值可以使用更便捷的 val() 方法. alert($(":text[name='username']").attr("value"));$(":text[name='username']").attr("value", "尚硅谷");})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>================================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 jQuery 创建节点并插入节点到指定的节点中/*1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽返回对应节点的 jQuery 对象:$("<li id='atguigu'>尚硅谷</li>")2. 添加节点:1). appendTo 和 append: 主语和宾语的位置不同: $("<li id='atguigu'>尚硅谷</li>").appendTo($("#city"));$("#city").append("<li id='atguigu'>[尚硅谷]</li>");2). prependTo 和 prepend: 主语和宾语的位置不同: $("<li id='atguigu'>尚硅谷</li>").prependTo($("#city"));$("#city").prepend("<li id='atguigu'>[尚硅谷]</li>");*/$(function(){//1. 创建一个 <li id="atguigu">尚硅谷</li>//2. 并把其加入到 #city 的子节点//$("<li id='atguigu'>尚硅谷</li>").appendTo($("#city"));//$("#city").append("<li id='atguigu'>[尚硅谷]</li>");//$("<li id='atguigu'>尚硅谷</li>").prependTo($("#city"));$("#city").prepend("<li id='atguigu'>[尚硅谷]</li>");alert($("#atguigu").text());})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>=======================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 jQuery 插入节点$(function(){//1. 创建一个 <li id="atguigu">尚硅谷</li>//2. 并把其加入到 #bj 的后面//$("<li id='atguigu'>尚硅谷</li>").insertAfter($("#bj"));//$("#bj").after("<li id='atguigu'>[尚硅谷]</li>");//$("<li id='atguigu'>尚硅谷</li>").insertBefore($("#bj"));$("#bj").before("<li id='atguigu'>[尚硅谷]</li>");})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>====================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 jQuery 删除节点$(function(){//1. 为 #city 的每一个 li 添加 click 响应函数: 点击时, li 被删除//$("#city li").click(function(){//$(this).remove();//});//jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的//DOM 节点直接删除. $("#bj").remove();//2. 清空 #game 节点//jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的 //DOM 对象的所有的子节点. alert("要清空了!");$("#game").empty();})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>=================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 jQuery clone 方法: 复制节点$(function(){$("li").click(function(){alert($(this).text());});//复制 #bj 节点, 并添加到 #rl 节点的后面/*1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.2. clone(true): 在克隆节点的同时, 克隆节点包含的事件. */$("#bj").clone(true) .attr("id", "bj2") .insertAfter($("#rl"));})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>======================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 jQuery replaceWith (replaceAll) 方法: 替换节点/*1. replaceWith , replaceAll 一对方法, 可以完成一件事. 就是主语宾语哪个在前面的问题. 2. 以上的两个方法还有移动节点的功能3. 节点互换需要先克隆节点. 4. var $rl = $("#rl").replaceWith($bj2);*/$(function(){//1. 创建一个 <li>尚硅谷</li> 节点, 替换 #city 的最后一个 li 子节点$("<li>尚硅谷</li>").replaceAll($("#city li:last"));//2. 创建一个 <li>[尚硅谷]</li> 节点, //替换 #city 的第二个 li 子节点$("#city li:eq(1)").replaceWith($("<li>[尚硅谷]</li>"));//3. 互换以下两个节点: #rl 和 #bj. 还有移动的功能.//$("#bj").replaceWith($("#rl"));//节点互换需要先克隆节点. alert(1);var $bj2 = $("#bj").clone(true);var $rl = $("#rl").replaceWith($bj2);alert(2);$("#bj").replaceWith($rl);})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>=======================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 jQuery wrap, wrapAll, wrapInner$(function(){//包装 li 本身$("#game li").wrap("<font color='red'></font>");//包装所有的 li$("#city li").wrapAll("<font color='red'></font>");//包装 li 里边的文字. $("#language li").wrapInner("<font color='red'></font>");})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种开发语言?</p><ul id="language"><li>C</li><li>Java</li><li>.NET</li><li>PHP</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>====================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 html() 方法. $(function(){alert($("#city").html());$("#city").html("<li id='atguigu'>尚硅谷</li>");})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种开发语言?</p><ul id="language"><li>C</li><li>Java</li><li>.NET</li><li>PHP</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>=======================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//1. 点击所有的 p 节点, 能够弹出其对应的文本内容/*1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 DOM 对象的数组2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val())*/$("p").click(function(){alert($(this).text());$(this).text("^^" + $(this).text());//alert(this.firstChild.nodeValue);});//2. 使第一个 table 隔行变色$("table:first tr:even").css("background", "#ffaacc");//3. 点击 button, 弹出 checkbox 被选中的个数$("button").click(function(){alert($(":checkbox:checked").length);});});</script></head><body><p>段落1</p><p>段落2</p><p>段落3</p><table><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr></table><br><hr><br><table><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr></table><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><button>您选中的个数</button></body></html>===============================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数$(":text").focus(function(){//2. 当获取焦点时, 若 #address 中是默认值//(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""var val = $(this).val();if(val == this.defaultValue){$(this).val("");}}).blur(function(){//3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""//则为其恢复默认值. var val = this.value;if($.trim(val) == ""){this.value = this.defaultValue;}});//2. $(":button:eq(1)").click(function(){$("#single").val("选择3号");});$(":button:eq(2)").click(function(){$("#multiple").val(["选择2号", "选择4号"]);});$(":button:eq(3)").click(function(){$(":checkbox[name='c']").val(["check2", "check4"]);});$(":button:eq(4)").click(function(){//即便是为一组 radio 赋值, val 参数中也应该使用数组. //使用一个值不起作用。 $(":radio[name='r']").val(["radio2"]);});$(":button:eq(5)").click(function(){//val() 可以直接获取 select 的被选择的值. alert($("#single").val());alert($("#multiple").val());//val 不能直接获取 checkbox 被选择的值//若直接获取, 只能得到第一个被选择的值. //因为 $(":checkbox[name='c']:checked") 得到的是一个//数组. 而使用 val() 方法只能获取数组元素的第一个值//若希望打印被选择的所有制, 需要使用 each 遍历. //alert($(":checkbox[name='c']:checked").val());$(":checkbox[name='c']:checked").each(function(){alert(this.value);});//而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. alert($(":radio[name='r']:checked").val());});})</script></head><body><input type="text" id="address" value="请输入邮箱地址"><br><input type="text" id="password" value="请输入邮箱密码"><br><input type="button" value="登录"><br><br><br><input type="button" value="使单选下拉框的'选择3号'被选中"/><input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br><input type="button" value="使多选框的'多选2'和'多选4'被选中"/><input type="button" value="使单选框的'单选2'被选中"/><br><input type="button" value="打印已经被选中的值"><br> <br/><select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option></select><select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option></select><br/><br/><input type="checkbox" name="c" value="check1"/> 多选1<input type="checkbox" name="c" value="check2"/> 多选2<input type="checkbox" name="c" value="check3"/> 多选3<input type="checkbox" name="c" value="check4"/> 多选4<br/><input type="radio" name="r" value="radio1"/> 单选1<input type="radio" name="r" value="radio2"/> 单选2<input type="radio" name="r" value="radio3"/> 单选3</body></html>======================================================================================<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. $(function(){function showContent(li){alert($(li).text());}$("li").click(function(){showContent(this);});//1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false, //可以取消指定元素的默认行为. 比如 submit, a 等//2. val() 方法, 相当于 attr("value"), 获取表单元素的 value 属性值. //3. $.trim(str): 可以去除 str 的前后空格.//4. jQuery 对象的方法的连缀: 调用一个方法的返回值还是调用的对象, 于是可以//在调用方法的后面依然调用先前的那个对象的其他方法. $(":submit").click(function(){var $type = $(":radio[name='type']:checked");if($type.length == 0){alert("请选择类型.");return false;}var type = $type.val();var $name = $(":text[name='name']");var name = $name.val();//$.trim(str): 可以去除 str 的前后空格.name = $.trim(name);$name.val(name);if(name == ""){alert("请输入内容");return false;}$("<li>" + name + "</li>").appendTo($("#" + type)) .click(function(){ showContent(this); });//取消 submit 的默认行为return false;});})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><form action="dom-7.html" name="myform"><input type="radio" name="type" value="city">城市<input type="radio" name="type" value="game">游戏name: <input type="text" name="name"/><input type="submit" value="Submit" id="submit"/></form></body></html>=====================================================================================<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//自定义互换两个节点的函数function replaceEach(aNode, bNode){//1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性var aParent = aNode.parentNode;var bParent = bNode.parentNode;if(aParent && bParent){//2. 克隆 aNode 或 bNodevar aNode2 = aNode.cloneNode(true);//克隆 aNode 的同时, 把 onclick 事件也复制. aNode2.onclick = aNode.onclick;//克隆 aNode 的同时, 把 onclick 事件也复制. aNode2.index = aNode.index;//3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()//方法实现节点的互换bParent.replaceChild(aNode2, bNode);aParent.replaceChild(bNode, aNode);}}$("li").each(function(index){this.index = index;$(this).click(function(){var targetIndex = 0;if(this.index < 4){targetIndex = this.index + 4;}else{targetIndex = this.index - 4;}var targetNode = $("li")[targetIndex];/*var $temp = $(this).clone(true);$temp[0].index = this.index;//index 属性也实现互换$(targetNode).replaceWith($temp);$temp[0].index = targetNode.index;*/alert(this.index);alert(targetIndex);var tempIndex = this.index;this.index = $("li")[targetIndex].index;$("li")[targetIndex].index = tempIndexreplaceEach(this, $("li")[targetIndex]);});});})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><form action="dom-7.html" name="myform"><input type="radio" name="type" value="city">城市<input type="radio" name="type" value="game">游戏name: <input type="text" name="name"/><input type="submit" value="Submit" id="submit"/></form></body></html>=====================================================================================<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript"> $(function(){ //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话 //那么这个对象一定是一个 jQuery 对象 //2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象 function removeTr(aNoe){ //获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象 var $trNode = $(aNoe).parent().parent(); var textContent = $trNode.find("td:first").text(); textContent = $.trim(textContent); var flag = confirm("确定要删除" + textContent + "的信息吗?"); if(flag){ $trNode.remove(); } return false; } $("#employeetable a").click(function(){ return removeTr(this); }); $("#addEmpButton").click(function(){ $("<tr></tr>").append("<td>" + $("#name").val() + "</td>") .append("<td>" + $("#email").val() + "</td>") .append("<td>" + $("#salary").val() + "</td>") .append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>") .appendTo("#employeetable tbody") .find("a") .click(function(){ return removeTr(this) }); }); }) </script></head><body><center><br> <br> 添加新员工 <br> <br> name: <input type="text"name="name" id="name" /> email: <input type="text"name="email" id="email" /> salary: <input type="text"name="salary" id="salary" /> <br> <br><button id="addEmpButton" value="abc">Submit</button><br> <br><hr><br> <br><table id="employeetable" border="1" cellpadding="5" cellspacing=0><tbody><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></tbody></table></center></body></html>=======================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 children() 方法获取子节点/*1. 获取的是指定元素的直接子节点2. 不是非常的实用. 3. 更实用的是选择器. */$(function(){var $eles = $("body").children();$eles.each(function(){alert(this.nodeName);});var $ul = $("body > ul");})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种开发语言?</p><ul id="language"><li>C</li><li>Java</li><li>.NET</li><li>PHP</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>====================================================================================动画<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//演示动画效果: show() 和 hide() 方法中传入毫秒数以达到动画的效果/*$(function(){ $(".head").toggle(function(){$(".content").show(1000);}, function(){$(".content").hide(1000);});})*///只改变高度/*$(function(){ $(".head").toggle(function(){$(".content").slideDown(500);}, function(){$(".content").slideUp(500);});})*///只改变透明度/*$(function(){ $(".head").toggle(function(){$(".content").fadeIn(1000);}, function(){$(".content").fadeOut(1000);});})*///toggle() 可以切换元素的可见状态. //slideToggle(): 通过高度变化来切换匹配元素的可见性//fadeToggle(): 通过透明度来切换元素的可见性.//fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间). $(function(){ $(".content").show();var i = 1; $(".head").click(function(){//$(".content").toggle();//$(".content").slideToggle();//$(".content").fadeToggle();$(".content").fadeTo("slow", i);i = i - 0.1;});})</script></head><body><div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。</div></div></body></html>=======================================================================================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">*{ margin:0; padding:0;}body {font-size:12px;text-align:center;}a { color:#04D; text-decoration:none;}a:hover { color:#F50; text-decoration:underline;}.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}.SubCategoryBox ul { list-style:none;}.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}.showmore { clear:both; text-align:center;padding-top:10px;}.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}.promoted a { color:#F50;}</style><script type="text/javascript" src="scripts/jquery-1.3.1.js"></script><script type="text/javascript">$(function(){//测试 jQuery 样式相关的方法. //1. hasClass(): 某元素是否有指定的样式alert($("div:first").hasClass("SubCategoryBox")); //true//2. 移除样式$("div:first").removeClass("SubCategoryBox");alert($("div:first").hasClass("SubCategoryBox"));//3. 添加样式$("div:first").addClass("SubCategoryBox");//4. 切换样式: 存在, 则去除; 没有, 则添加. $(".showmore").click(function(){$("div:first").toggleClass("SubCategoryBox");return false;});//5. 获取和设置元素透明度: opacity 属性alert($("div:first").css("opacity"));$("div:first").css("opacity", 0.5);//6. width 和 heightalert($("div:first").width());alert($("div:first").height());$("div:first").width(400);$("div:first").height(80);//7. 获取元素在当前视窗中的相对位移: offset(). //其返回对象包含了两个属性: top, left. 该方法只对可见元素有效alert($("div:first").offset().top);alert($("div:first").offset().left);});</script></head><body><div class="SubCategoryBox"><ul><li ><a href="#">佳能</a><i>(30440) </i></li><li ><a href="#">索尼</a><i>(27220) </i></li><li ><a href="#">三星</a><i>(20808) </i></li><li ><a href="#">尼康</a><i>(17821) </i></li><li ><a href="#">松下</a><i>(12289) </i></li><li ><a href="#">卡西欧</a><i>(8242) </i></li><li ><a href="#">富士</a><i>(14894) </i></li><li ><a href="#">柯达</a><i>(9520) </i></li><li ><a href="#">宾得</a><i>(2195) </i></li><li ><a href="#">理光</a><i>(4114) </i></li><li ><a href="#">奥林巴斯</a><i>(12205) </i></li><li ><a href="#">明基</a><i>(1466) </i></li><li ><a href="#">爱国者</a><i>(3091) </i></li><li ><a href="#">其它品牌相机</a><i>(7275) </i></li></ul><div class="showmore"><a href="more.html"><span>显示全部品牌</span></a></div></div></body></html>======================================================================================事件<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//为 .head 添加 Onclick 响应函数: 若 .content 隐藏则显示, 若 .content 显示, 则隐藏$(function(){/*$(".head").click(function(){//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定//的选择器. var flag = $(".content").is(":hidden");if(flag){//show() 方法: 使隐藏的变为显示$(".content").show();}else{$(".content").hide();}});*///bind: 为某 jQuery 对象绑定事件. /*$(".head").bind("click", function(){//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定//的选择器. var flag = $(".content").is(":hidden");if(flag){//show() 方法: 使隐藏的变为显示$(".content").show();}else{$(".content").hide();}});*///mouseover: 鼠标移上去//mouseout: 鼠标移出. /*$(".head").mouseover(function(){$(".content").show();}).mouseout(function(){$(".content").hide();});*///合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数. /*$(".head").hover(function(){$(".content").show();}, function(){$(".content").hide();});*///合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个//函数 ... 循环执行. $(".head").toggle(function(){$(".content").show();}, function(){$(".content").hide();});})</script></head><body><div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。</div></div></body></html>==================================================================================事件冒泡<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 13px;line-height: 130%;padding: 60px;}#content{width: 220px;border: 1px solid #0050D0;background: #96E555;}span{width: 200px;margin: 10px;background: #666666;cursor: pointer;color: white;display: block;}p{width: 200px;background: #888;color: white;height: 16px;}</style><script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//事件的冒泡: 什么是事件的冒泡$("body").click(function(){alert("body click");});$("#content").click(function(){alert("div click");});$("span").click(function(){alert("span click");//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡. return false;});})</script></head><body><div id="content">外层div元素<span>内层span元素</span>外层div元素</div><div id="msg"></div><br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a></body></html>=======================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 13px;line-height: 130%;padding: 60px;}#content{width: 220px;border: 1px solid #0050D0;background: #96E555;}span{width: 200px;margin: 10px;background: #666666;cursor: pointer;color: white;display: block;}p{width: 200px;background: #888;color: white;height: 16px;}</style><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">/*1. 事件: 当鼠标移动时, 就会触发 mousemove 事件. 2. 如何得到事件对象: 在响应函数中添加一个参数就可以. 3. 事件对象的两个属性: pageX,pageY*/$(function(){//事件的 pageX, pageY 属性$("body").mousemove(function(obj){$("#msg").text("x: " + obj.pageX + ", y: " + obj.pageY);});})</script></head><body><div id="content">外层div元素<span>内层span元素</span>外层div元素</div><div id="msg"></div><br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a></body></html>====================================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//测试移除事件: 使用 unbind 移除事件. //one(): 只为某一个元素添加一次事件, 事件函数响应后, 将不再被触发响应. $(function(){$("#rl").one("click", function(){alert("红色警戒. ");});$("li:not(#rl)").click(function(){alert(this.firstChild.nodeValue);//对于 #bj 节点, 点击一次后, 就没有 click 响应函数了if(this.id == "bj")$("#bj").unbind("click");});})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种开发语言?</p><ul id="language"><li>C</li><li>Java</li><li>.NET</li><li>PHP</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html> 0 0
- 学习jquery-Jquery基础知识
- jquery学习--jQuery安装
- jQuery学习--jQuery选择器
- 学习JQuery
- jquery 学习
- JQuery 学习
- jquery 学习
- jQuery学习
- 学习JQuery
- jquery 学习
- jquery学习
- 学习jquery
- Jquery 学习
- JQuery 学习
- Jquery学习
- jquery 学习
- JQuery 学习
- jquery 学习
- Ruby 操作二进制文件，wav与pcm文件转换
- Power of Cryptography（double可以表示到10的-307次方到10的308次方）
- xcode插件使用
- BC#47
- 用LambdaProbe监控Tomcat
- Jquery学习
- iOS：使用MVC模式帮ViewController瘦身
- 正则表达式重复(贪婪)与非贪婪的重复
- hibernate注解
- Hadoop 2.7.1在centos 6.3下配置变量环境并安装配置伪分布式集群
- 数组排序问题的两种方法：插入排序算法和递归(分治)算法
- 用C写的航空客运订票系统
- LintCode Remove Duplicates from Sorted Array II 删除排序数组中的重复数字 II
- [leetcode-88]Merge Sorted Array(C语言)
