jquery dom操作
1.append() $("div[id=myDiv]")append("<b>Langhua</b>");向div元素中增加<b>Langhua</b>,是在div里面内容的后面加 2.appendTo() $("div[id=myDiv]")appendTo("<b>Langhua</b>");和append()正好相反 3.prepend() 和append正好相反,把内容加到前面 4.prependTo() 和appendTo正好相反,也是要把内容加到前面 5.after() 在每个元素之后插入内容 6.before() 在每个元素之前插入内容 ================================ 记住append,after就行了,可以考虑下prepend和before,其它反过来都是一样的 删除节点(remove方法) 7.$("ul li:eq(1)").remove删除ul中li的第2个元素. 8.$("div span").remove("p[id=pid]") 选择性的删除 9.$("ul li").remove("li[title!=xxxxx]");选择的删除 empty方法,不是删除节点,而是清空里面的内容 10.$("div[id=langhua]").empty(); 复制节点clone $("div span[id=langhua9527]").click(function(){ $(this).clone().appendTo("div[id=langhua9528]"); //复制以后新元素不会有任何功能 //如想也有这样的功能就这样写 $(this).clone(true).appendTo("div[id=langhua9528]") }); 替换节点 11.$("p").replaceWith("<b>Langhua9527</b>"); 12.$("<b>Langhua9527</b>").replaceAll("p");只是和replaceWith交换了位置 13.如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件. 包裹节点 14.$("strong").wrap("<b></b>"); 原来<strong>LangHuA</strong> 包裹之后<b><strong>LangHuA</strong></b>; 将匹配的元素都包裹上,有多少个包裹多少个 15.$("strong").wrapAll("<b></b>"); 原来<strong>LangHuA1</strong><strong>LangHuA2</strong> 包裹之后<b><strong>LangHuA1</strong><strong>LangHuA2</strong></b>(无论多少个只包裹在一起) 16.$("strong").wrapInner("<b></b>"); 原来<strong>LangHuA1</strong><strong>LangHuA2</strong> 包裹之后<strong><b>LangHuA1</b></strong><strong><b>LangHuA2</b></strong>(包裹在里面) 属性操作 17.获得属性:$("p").attr("title"); 18.设置属性:$("p").attr("title","langhua‘s title"); 19.删除属必:$("p").removeAttr("title") 样式操作 20.获得样式:$("p").attr("class"); 21.设置样式:$("p").attr("class","topClass"); 22.追加样式:$("div span[id=langhua]").addClass("addNewClass");(如果有相同的属性,后者覆盖前者) 23.移除样式:$("#divIdName").removeClass("class1");移除多个样式:$("#xxxxx").removeClass("class1 class2"); 24.切换样式:$("#divId").toggleClass("aabbcc"); 25.判断是否有某个样式:$("#langhuaId").hasClass("topClass") html()方法 26.$("div[id=langhua]").html();//获得div中的内容 27.$("div[id=langhua]").html("<span>value</span>"); //向DIV里面设值 text()方法 28.$("div[class=className]").text(); //获得DIV里面的text内容 29.$("div[class=className]").text("xiaoLanghua"); //设置DIV里面的text内容 val()方法 30.$("input[name=username]").val(); //获得表单里面的value值 31.$("input[type=hidden][name=username]").val("9527"); //设置表单里面的value值 html方法是取出的是HTML代码,text只是取出的文字 <div>xiao<b>langhua</b></div> html()取的是xiao<b>langhua</b> text()取的是xiaolanghua val()是取表单里面的值 对select设值$("#selectId").val("value"); 对checkbox设值$("checkbox[name=myname]").value(["value1","value2"]); 对radio设值$("radio[name=myradio]").value(["value1"]);; 遍历节点 32.$("div").children(); //获得匹配元素所有的子元素 33.$("div[id=langhua]").next(); //获得匹配元素后面紧跟的同辈元素 34.$("div[id=langhua]").prev(); //获得匹配元素前面紧跟的同辈元素 css-dom方法 35.$("div[id=langhua]").css("color") //获得CSS属性 36.$("div[id=langhua]").css("color","red"); //设置CSS属性 37.$("div[id=langhua]").css({"color":"red","backgroudColor":"blue"}); //设置多个属性 38.$("p").css("opacity","0.5"); //设置透明度,ie,firefox都行的 39.$("div").height(); //获得高度或设置高度,这里面获得的高度和$("div").css("height")获得的不一样,css方法获得的可能是auto,10px等height()方法是元素在页面的实际高度 40.width()方法
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。