jQuery操作DOM
text()、html()是相对粗犷的方法,直接读取或设置元素的内容;
另外一些较为细致的操作是对某一个jQuery对象的增加、删除。
后面讲到的替换节点、包裹节点用到的比较少。
1、text(), html()
(1)使用html()方法读取或者设置元素的innerHTML
(2)使用text()方法读取或设置元素的innerText
2、动态创建和添加、删除DOM节点
2.1、创建DOM节点
使用$(html字符串)来创建DOM节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到DOM中。$()创建的就是一个jQuery对象,可以完全进行操作
创建radio,使用$('<input name=""/>');,而不要在创建好后通过attr('name','gender')//通过attr()设置name,在IE6下面有问题
2.2、添加和删除DOM节点
append 方法用来在元素的末尾追加元素(最后一个子节点)
prepend,在元素的开始添加元素(第一个子节点)
after 在元素之后添加元素
before 在元素之前添加元素
其他追加方法(将自己追加到某元素)
子元素.appendTo(父元素);
主动追加到最后一个
子元素.prependTo(父元素)
主动追加到第一个
A.insertBefore(B)
将A加到B前面,等同于B.before(A)
X.insertAfter(Y)
将X追加到Y的后面,等同于Y.after(X)
删除节点
empty() 清空某元素下的所有子节点
内部实现:while(ele.firstChild){ele.removeChild(ele.firstChild);}
remove(selector) 删除当前元素,返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下。
2.3、案例
示例:创建一个层
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>jQuery测试</title><scripttype="text/javascript"src="js/jquery-1.12.3.js"></script><scripttype="text/javascript">$(function(){$('#btn').click(function(){//创建一个层,并把该层添加到body中vardivObj=$('<divid="dv"></div>').appendTo($('body'));//divObj.css('width','300px').css('height','50px').css('border','solid1pxred').css('margin','5px');divObj.css({"width":"300px","height":"50px","border":"solid1pxred","margin":"5px"});});});</script></head><body><inputtype="button"id="btn"value="创建一个层"/></body></html>
效果图
示例:从json中取数据,动态创建表格
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>jQuery测试</title><scripttype="text/javascript"src="js/jquery-1.12.3.js"></script><scripttype="text/javascript">vardata={"百度":"http://www.baidu.com","新浪":"http://www.sina.com","谷歌":"http://www.google.com"};$(function(){$('#btn').click(function(){//创建tablevartableObj=$('<tableborder="1"></table>');for(varkeyindata){varvalue=data[key];//创建trvartrObj=$('<tr><td>'+key+'</td><td><ahref="'+value+'">'+key+'</a></td></tr>');//将tr添加到table内tableObj.append(trObj);}//将table添加到body当中$('body').append(tableObj);});});</script></head><body><inputtype="button"id="btn"value="按钮"/></body></html>
效果图
示例:无刷新评论
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>jQuery测试</title><scripttype="text/javascript"src="js/jquery-1.12.3.js"></script><scripttype="text/javascript">$(function(){$('#btn').click(function(){varuname=$('#txt').val();varumsg=$('#msg').val();vartrObj=$('<tr><td>'+uname+'</td><td>'+umsg+'</td></tr>');//$('#tb').append(trObj);//appendtrObj.appendTo($('#tb'));//appendTo});});</script></head><body><tableid="tb"border="1"><tr><td>小明</td><td>你好啊</td></tr></table><br/><inputtype="text"id="txt"/><br/><textareaid="msg"rows="5"cols="50"></textarea><br/><inputtype="button"id="btn"value="发表"/><br/></body></html>
效果图
示例:删除元素
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>jQuery测试</title><scripttype="text/javascript"src="js/jquery-1.12.3.js"></script><styletype="text/css">.cls{width:300px;height:200px;border:solid1pxred;}</style><scripttype="text/javascript">$(function(){$('#btn').click(function(){//$('#dv').empty();//清空层中的元素//$('#dv').remove();//层没了,相当于自杀$('input').remove('.mycls');//移除应用了cls样式的层});});</script></head><body><inputtype="button"id="btn"value="删除"/><divid="dv"class="cls"><inputtype="text"class="mycls"value="mycls"/><inputtype="text"value="没有样式"/></div></body></html>
效果图
示例:权限选择案例:一个下拉框中的选项放置另一个下拉列表框选项中
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>jQuery测试</title><scripttype="text/javascript"src="js/jquery-1.12.3.js"></script><scripttype="text/javascript">$(function(){$('#toRight').click(function(){$('#se1:selected').appendTo($('#se2'));$('selectoption').attr('selected',false);});$('#toLeft').click(function(){$('#se2:selected').appendTo($('#se1'));$('selectoption').attr('selected',false);});$('#toAllRight').click(function(){$('#se1option').appendTo($('#se2'));$('selectoption').attr('selected',false);});$('#toAllLeft').click(function(){$('#se2option').appendTo($('#se1'));$('selectoption').attr('selected',false);});});</script></head><body><div><selectmultiple="multiple"id="se1"><option>添加</option><option>删除</option><option>修改</option><option>查询</option><option>打印</option></select><div><inputtype="button"value=">"id="toRight"/><inputtype="button"value="<"id="toLeft"/><inputtype="button"value=">>"id="toAllRight"/><inputtype="button"value="<<"id="toAllLeft"/></div><selectmultiple="multiple"id="se2"></select></div></body></html>
效果图
3、替换节点和包裹节点
3.1、替换节点
$("br").replaceWith("<hr/>");
用<hr/>替换br
$('<br/>').replaceAll('hr');
用<br/>元素替换所有的hr
调用者也得是选择器选择到的元素
3.2、包裹节点
wrap()方法用来将所有元素逐个用指定标签包裹
wrapAll()
wrapInner()//在内部围绕
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。