jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选
Posted 672530440
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> 一些变量 $.fn.extend({ find √ has √ not √ filter √ is √ closest √ index √ add √ addBack √ }); function sibling(){} jQuery.each({ parent √ parents √ parentsUntil √ next √ prev √ nextAll √ prevAll √ nextUntil √ prevUntil √ siblings √ children √ contents √ }); jQuery.extend({ filter dir sibling }); function winnow(){} 一些变量 jQuery.fn.extend({ text √ append √ prepend √ before √ after √ remove √ empty √ clone √ html √ replaceWith √ detach √ domManip √ }); jQuery.each({ appendTo: "append", √ prependTo: "prepend", √ insertBefore: "before", √ insertAfter: "after", √ replaceAll: "replaceWith" √ }); jQuery.extend({ clone buildFragment cleanData _evalUrl }); function manipulationTarget(){} function disableScript(){} function restoreScript(){} function setGlobalEval(){} function cloneCopyEvent(){} function getAll(){} function fixInput(){} jQuery.fn.extend({ wrapAll √ wrapInner √ wrap √ unwrap √ }); </script> </head> <body> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> $(function(){ //filter() not() $(‘div‘).filter(‘.box‘).css(‘border‘,‘1px red solid‘);//CLASS=BOX的div $(‘div‘).not(‘.box‘).css(‘border‘,‘1px red solid‘);//相反 $(‘div‘).has(‘.box‘).css(‘border‘,‘1px red solid‘);//div子元素项有class=box的元素 $(‘div‘).has(‘span‘).css(‘border‘,‘1px red solid‘);//div子元素项有span元素的 isSimple = /^.[^:#\[\.,]*$/ 匹配成功 : .box div #div1 :odd ul li 匹配不成功 : div:odd ul #li ul[title="hello"] div.box ul,ol ------------------------------------------------------------------- $(‘div‘).filter(function(i,elem){ return elem.className == ‘box‘; }).css(‘border‘,‘1px red solid‘); var oBox = document.getElementsByClassName(‘box‘)[0]; $(‘div‘).filter(oBox).css(‘border‘,‘1px red solid‘); $(‘div‘).has(‘span‘).css(‘border‘,‘1px red solid‘); }); </script> </head> <body> <div class="box">div1<span class="box">span</span></div> <div>div2</div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> $(function(){ $(‘ul‘).find( $(‘li‘) ).css(‘background‘,‘red‘);//ul下面的li $(‘ul‘).find(‘li‘).css(‘background‘,‘red‘);//ul下面的li $(‘div‘).is(‘.box‘)//多个div有一个class=box就返回true,都没有就返回false console.log( $(‘div:last‘).is(‘.box‘) ); console.log( $(‘div:first‘).is(‘div:last‘) ); ------------------------------------------------------------------- console.log( $(‘#div1‘).index() );//1,这个元素在所有兄弟节点的排名 console.log( $(‘#span1‘).index() );//0,这个元素在所有兄弟节点的排名 console.log( $(‘#span1‘).index(‘span‘) );//span1在所有span中的排名 console.log( $(‘span‘).index( $(‘#span1‘) ) );//span1在所有span中的排名，同上。 $(‘#div2‘).closest(‘.box‘).css(‘border‘,‘1px red solid‘);//closest找父节点，爷爷节点，祖先节点，都有时找最近的。 $(‘#div2‘).closest(‘.box‘).css(‘border‘,‘1px red solid‘); //限制在body之内，不再往上去找 $(‘#div2‘).closest(‘.box‘, $(‘body‘).get(0) ).css(‘border‘,‘1px red solid‘); }); </script> </head> <body class="box"> <ul> <li> <ul> <li></li> <li></li> <li></li> </ul> </li> <li></li> <li></li> </ul> <ol> <li></li> <li></li> <li></li> </ol> <div class="box">div1</div> <div>div2</div> <div>div<span>span</span></div> <div id="div1">div<span id="span1">span</span></div> <div>div<span>span</span></div> <div id="div1" class="box">aaaaa <div id="div2">bbbbb</div> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> $(function(){ $(‘div ,span‘).add(‘span‘).css(‘border‘,‘1px red solid‘); $(‘div‘).add(‘span‘).css(‘border‘,‘1px red solid‘);//一样的 //addBack() //end() $(‘div‘).find(‘span‘).css(‘color‘,‘red‘).addBack(‘.box‘).css(‘border‘,‘1px red solid‘);//addBack回到栈的下一层，并且当前层和下一层进行操作。 $(‘span‘).parent().css(‘border‘,‘1px red solid‘);//span的氟元素 (‘span‘).parent(‘div‘).css(‘border‘,‘1px red solid‘);//span的氟元素必须是div $(‘span‘).parents().css(‘border‘,‘1px red solid‘);//span所有各层级父父父节点 $(‘span‘).parents(‘body‘).css(‘border‘,‘1px red solid‘);//父节点必须是body $(‘span‘).parentsUntil(‘body‘).css(‘border‘,‘1px red solid‘);//span开始找，截至到body，再上层就不找了。 $(‘span‘).parentsUntil(‘body‘,‘div‘).css(‘border‘,‘1px red solid‘);//span父节点必须是div,并且最高找到body，body之上就不要找了 $(‘span‘).parent().css(‘border‘,‘1px red solid‘); $(‘span‘).next().css(‘border‘,‘1px red solid‘); }); </script> </head> <body> <!--<div>div<span>span</span></div> <div class="box">div<span>span</span></div> <div>div<span>span</span></div> <div>div<span>span</span></div>--> <!--<div>div<p>p<span>span</span></p></div> <p>p<span>span</span></p> --> <div> <span>span</span> ssssss <p>p</p> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> $(function(){ $(‘p‘).parentsUntil(‘body‘).css(‘border‘,‘1px red solid‘); $(‘span‘).siblings().css(‘background‘,‘red‘); $(‘body‘).children().css(‘background‘,‘red‘); console.log( $(‘body‘).children() ); console.log( $(‘body‘).contents() ); console.log( $(‘iframe‘).contents().body.style.background = ‘red‘ ); }); </script> </head> <body> <!--<div>div <span>span <p>p</p> </span> </div>--> <div>div</div> <span>span</span> <p>p</p> <h1>h1</h1> <iframe src="a.html"></iframe> </body> </html>
以上是关于jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选的主要内容，如果未能解决你的问题，请参考以下文章
jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选
前端用jquery如何去获取一个dom未渲染的标签添加点击事件