jquery dom 操作

nullpoint · 发表于 2013-2-7 23:27:13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <style>.bg1{background-color:green;}.txt{color:blue;} </style> <script src="jquery-1.4.4.js" type="text/javascript"></script> </HEAD> <BODY><div><a href='aa.html' title="alink">link</a></div><hr/><div><ul><li id="apple" title='click change to apple'>苹果</li></ul></div><div id="sel" style="border:1px"></div><hr/><i>点击我会被strong标签包裹</i>&nbsp;中间<i id="i2" title="click test wrap">&nbsp;另一个i</i><hr/><button id="b1" >交替变换样式</button><button id="b2" class="txt" >点击移除样式</button><hr/><font>css<font> </BODY><script language="javascript" >//alert($("a").attr("href")); //attr() 获取某个节点的属性$("a").attr("title","link"); //设置属性$("a").removeAttr("href"); //移除属性//创建节点 $(html)var $d1 = $("<li>香蕉</li>");var $d2 = $("<li>橘子</li>");var $d3 = $("<li title='梨'>梨</>");var $d4 = $("<p>before1</p>");var $d5 = $("<p>before2</p>");var $d6 = $("<p>after1</p>");var $d7 = $("<p>after2</p>");var $d8 = $("<li>西瓜</li>");var $d9 = $("<li>葡萄</li>");//将节点追加到ul,在最后$("ul").append($d1).append($d2);$d3.appendTo($("ul"));//在ul节点前节点$("ul").before($d4);$d5.insertBefore($("ul"));//在ul节点后添加节点$("ul").after($d6);$d7.insertAfter($("ul"));//在ul节点的内部最前面添加节点$("ul").prepend($d8);$d9.prependTo($("ul"));//绑定click事件$("ul li").click(function(){//当点击li时,将当前li copy到id为sel的元素下//如果要想把li所关联的事件行为一并复杂，给clone()方法传递参数true$(this).clone(true).appendTo("#sel"); });$("#sel").click(function(){//当点击id为sel的div时，将当前元素移除（本身也移除），//remove()方法返回结果是当前被移除元素var $rm = $(this).remove(); //将被移除的元素添加到body下$("body").append($rm); })$("#apple").click(function (){//点击当前元素会被<li id='apple'>apple</li>所替换$(this).replaceWith("<li id='apple'>apple</li>");})$("i").click(function(){//将当前元素用<strong>标签包裹$(this).wrap("<strong></strong>"); })$("#i2").click(function(){//将当前元素用font标签包裹$(this).wrapAll("<font color='red'></font>"); //将当前元素内的内容用span包裹$(this).wrapInner("<span style='background-color:#000000'></span>");})$("#b1").click(function(){//交替样式显示，判断当前元素是否有该样式，有remove，没有add$(this).toggleClass("bg1");})$("#b2").click(function(){//移除当前元素制定的样式，如果不加参数，移除所有$(this).removeClass("txt"); })//获取样式 $().attr("class")//添加：(1)$().addClass("xx")添加制定的元素 ||// (2)$().attr("class","xx")// (1)是追加，（2）如果原来有是替换//判断是否含有某样式 $().hasClass("xx");/*$().html() 等同于js的innerHTML$().text() 等同于js的innerText$().val() 等同于js的value属性*//* $().children() 当前元素的所有子元素 $().next() 下一个紧邻兄弟元素 $().prev() 上一个紧邻的兄弟元素 $().siblings() 所有的兄弟元素 //最近的匹配元素,搜先test itself，不会查找兄弟节点，逐级查找父节点 $().closest() --alert($("li").closest("div").html()); *//*$().css()和attr()方法一样使用$().css("color"); //获取$().css("color","red")//设置*///一次设置多个css值$("font").css({"fontSize":"30px","backgroundColor":"yellow","width":"100px"});alert($("font").height()+" "+$("font").width());//高，宽</script></HTML>

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

jquery dom 操作

浏览过的版块