首页 / JQUERY / jQuery操作DOM元素
jQuery操作DOM元素
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery操作DOM元素,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含8010字,纯文字阅读大概需要12分钟。
内容图文
查找节点
插入节点
<! DOCTYPE html > < html > < head > < script > var addItems = function (){ var number = parseInt(document.getElementById( " number " ).value); var div1 = document.getElementById( " div1 " ); div1.innerHTML = "" ; // clear div before append for ( var i = 0 ; i < number; ++ i){ var input = document.createElement( " input " ); input.setAttribute( " type " , " text " ); var br = document.createElement( " br " ) div1.appendChild(input); div1.appendChild(br); } } </ script > </ head > < body > < input type ="text" id ="number" /> < input type ="button" id ="btn" value ="Click" onclick ="addItems();" /> < div id ="div1" > </ div > </ body > </ html >
<! DOCTYPE html > < html > < head > < script src ="/jquery/jquery-1.11.1.min.js" > </ script > < script > var addItems = function (){ var number = parseInt($( " #number " ).val()); var div1 = $( " #div1 " ); div1.html( "" ); // clear div before append var string = "" ; for ( var i = 0 ; i < number; ++ i){ string += " <input type=‘text‘/><br/> " } div1.append(string); } </ script > </ head > < body > < input type ="text" id ="number" /> < input type ="button" id ="btn" value ="Click" onclick ="addItems();" /> < div id ="div1" > </ div > </ body > </ html >
<! DOCTYPE html > < html > < head > < script src ="/jquery/jquery-1.11.1.min.js" > </ script > < script > $(document).ready( function (){ $( " ul li:eq(0) " ).appendTo( " ul " ); }); </ script > </ head > < body > < ul > < li title ="li1" >1</li><li title="li2">2</li><li title="li3">3</li><li title="li4">4</li><li title="li5">5</li></ul></body></html>
删除节点
<! DOCTYPE html > < html > < head > < script src ="/jquery/jquery-1.11.1.min.js" > </ script > < script > $(document).ready( function (){ $( " ul li:eq(0) " ).appendTo( " ul " ); // move li method1 // move method2: var removeLi = $( " ul li:eq(0) " ).remove(); // delete li removeLi.appendTo($( " ul " )); // add removed li }); </ script > </ head > < body > < ul > < li title ="li1" >1</li><li title="li2">2</li><li title="li3">3</li><li title="li4">4</li><li title="li5">5</li></ul></body></html>
运行结果为:
// remove all li $("ul li").remove();
// remove some $("ul li").remove("li[title!=‘li2‘]");
// empty children $("ul").empty();
会删除<ul>中的所有子节点.
// empty content $("ul li:eq(3)").empty();
会得到这样的效果:
复制节点
<! DOCTYPE html > < html > < head > < script src ="/jquery/jquery-1.11.1.min.js" > </ script > < script > $(document).ready( function (){ $( " ul > li " ).click( function (){ $( this ).clone().appendTo( " ul " ); }); }); </ script > </ head > < body > < ul > < li title ="li1" >1</li><li title="li2">2</li><li title="li3">3</li><li title="li4">4</li><li title="li5">5</li></ul></body></html>
替换节点
< html > < head > < script type ="text/javascript" src ="/jquery/jquery.js" ></ script > < script type ="text/javascript" > $(document).ready( function (){ $( " #button1 " ).click( function (){ alert( " click event " ); $( " #button1 " ).replaceAll($( " div " )); }); }); </ script > < style > div { height : 20px ; background-color : yellow } </ style > </ head > < body > < p > This is paragraph: < div id ="div1" >This is a div 1</div><div id="div2">This is a div 2</div><p> This is button area: <br><button id="button1" class="btn1">Button1</button></body></html>
包裹节点
< html > < head > < script type ="text/javascript" src ="/jquery/jquery.js" ></ script > < script type ="text/javascript" > $(document).ready( function (){ $( " #button1 " ).click( function (){ $( " #div1 " ).wrap( " <a href=‘www.google.com‘>Google Wrap div1</a> " ); }); $( " #button2 " ).click( function (){ $( " div " ).wrapAll( " <a href=‘www.baidu.com‘>Baidu Wrap all div</a> " ); }); $( " #button3 " ).click( function (){ $( " div " ).wrapInner( " <a href=‘www.sogou.com‘>Sogou Wrap inner div</a> " ); }); }); </ script > < style > div { height : 20px ; background-color : yellow } </ style > </ head > < body > div1: < br />< div id ="div1" >This is a div 1</div> div2:<br/><div id="div2">This is a div 2</div> div3:<br/><div id="div3">This is a div 3</div> This is button area: <br/><button id="button1">Wrap</button><br/><button id="button2">Wrap All</button><br/><button id="button3">Wrap Inner</button></body></html>
相关杂项知识
参考资料
其他精彩文章
jQuery教程(29)-jQuery插件开发之为插件方法指定参数
jQuery教程(28)-jQuery插件开发之使用插件
jQuery教程(27)-jQueryajax操作之修改默认选项
jQuery教程(26)-ajax操作之使用JSONP加载远程数据
更多关于 android开发 文章
原文:http://blog.csdn.net/dyllove98/article/details/42871195
内容总结
以上是互联网集市为您收集整理的jQuery操作DOM元素全部内容,希望文章能够帮你解决jQuery操作DOM元素所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。