jquery基础属性

shamusoft · 发表于 2013-2-7 20:00:23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style>  </head> <body> <ul id="city">  <li id="bj" name="beijing">北京</li> </ul></body><script language="JavaScript">//在city下增加<li id="tj" name="tianjin">天津</li>节点  var $liEle = $("<li></li>");  $liEle.attr("id","tj");  $liEle.attr("name","tianjing");  $liEle.text("天津");  $("#city").append($liEle); </script> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> .one{ width: 200px; height: 140px; margin: 40px; background: red; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;} div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;} </style>  </head> <body> <input type="button" value="保存"  class="mini" name="ok"  class="mini" /> <input type="button" value="采用属性增加样式"  id="b1"/> <input type="button" value=" addClass"  id="b2"/> <input type="button" value="removeClass"  id="b3"/> <input type="button" value=" 切换样式"  id="b4"/> <input type="button" value=" hasClass"  id="b5"/>  <h1>天气冷了</h1> <h2>天气又冷了</h2>    <div id="one">    id为one ***********    </div> <div id="two" class="mini" >    id为two class是 mini       <div  class="mini" >class是 mini</div></div> <div>    class是 one       <div  class="mini" >class是 mini</div> <div  class="mini" >class是 mini</div> </div> <div class="one" > class是 one       <div  class="mini01" >class是 mini01</div> <div  class="mini" >class是 mini</div></div><br><div id="mover" > 动画</div><br><span class="spanone"> span</span></body><script language="JavaScript">//<input type="button" value="采用属性增加样式"  id="b1"/>$("#b1").click(function(){$("#one").attr("class","one");});//<input type="button" value=" addClass"  id="b2"/>$("#b2").click(function(){$("#one").addClass('one');});//<input type="button" value="removeClass"  id="b3"/>$("#b3").click(function(){$("#one").removeClass('one');});//<input type="button" value=" 切换样式"  id="b4"/>$("#b4").click(function(){$("#one").toggleClass("one");});//<input type="button" value=" hasClass"  id="b5"/>$("#b5").click(function(){/** * 判断是否有class这个属性 */alert($("#one").hasClass("one"));});</script> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style> </head><body><button>保存</button><br><br><br> <p>段落</p></body> <script language="JavaScript">       //button增加事件 $("button").click(function(){ alert("按钮事件"); }); //克隆button 追加到p上 ,但事件不克隆    // $("button").clone().appendTo("p");    //克隆button 追加到p上 ,但事件也克隆 $("button").clone(true).appendTo("p"); </script> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style>  </head> <body> <ul id="city">  <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <ul id="love">  <li id="fk" name="fankong">反恐</li> <li id="xj" name="xingji">星际</li> </ul><div id="foo1">Hello1</div>       </body><script language="JavaScript">//append(content) :向每个匹配的元素的内部的结尾处追加内容//  $("#city").append($("#fk"));  $("#city").append("<li>））））</li>");//appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处  //prepend(content):向每个匹配的元素的内部的开始处插入内容  $("#city").prepend("<li>前面插入</li>");//prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处$("#xj").prependTo($("#city")); </script> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style>  </head> <body> <ul id="city">  <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <p  id="p3">I would like to say: p3</p>  <p  id="p2">I would like to say: p2</p> <p  id="p1">I would like to say: p1</p>    </body><script language="JavaScript">//*  after(content) :在每个匹配的元素之后插入内容// $("#city").after($("#p1"));//*  before(content):在每个匹配的元素之前插入内容    //$("#cq").before($("#p1"));//*  insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面    $("#p1").insertAfter($("#city")); //*  insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 $("#p1").insertBefore($("#city")); </script> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style>  </head> <body> <ul id="city">  <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul><p class="hello">Hello</p> how are <p>you?</p> </body><script language="JavaScript"> //删除<li id="bj" name="beijing">北京</li>$("#bj").remove(); //删除所有的子节点清空元素中的所有后代节点(不包含属性节点). $("#city").empty();    //测试alert($("#bj").value);</script> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style> </head><body><button>保存</button><br><br><br> <p>段落</p><p>段落</p><p>段落</p></body><script language="JavaScript"> //$("button")用 <p>tttttttt</P>替换       //$("p").replaceWith("<button>保存</button>"); // p 用  <button>保存</button>  替换$("<button>保存</button>").replaceAll($("p"));</script> </html>

		自动登录	找回密码
密码			立即注册