1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>14_元素的尺寸</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 150px; 11 background: red; 12 padding: 10px; 13 border: 10px #fbd850 solid; 14 margin: 10px; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div>div</div> 21 22 <!-- 23 1. 内容尺寸 24 height(): height 25 width(): width 26 2. 内部尺寸 27 innerHeight(): height+padding 28 innerWidth(): width+padding 29 3. 外部尺寸 30 outerHeight(false/true): height+padding+border 如果是true, 加上margin 31 outerWidth(false/true): width+padding+border 如果是true, 加上margin 32 --> 33 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 34 <script> 35 var $div = $(‘div‘) 36 // 1. 内容尺寸 37 console.log($div.width(), $div.height()) // 100 150 38 // 2. 内部尺寸 39 console.log($div.innerWidth(), $div.innerHeight()) //120 170 40 // 3. 外部尺寸 41 console.log($div.outerWidth(), $div.outerHeight()) //140 190 42 console.log($div.outerWidth(true), $div.outerHeight(true)) //160 210 43 44 </script> 45 </body> 46 47 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>15_筛选_过滤</title> 6 </head> 7 8 <body> 9 <ul> 10 <li>AAAAA</li> 11 <li title="hello" class="box2">BBBBB</li> 12 <li class="box">CCCCC</li> 13 <li title="hello">DDDDDD</li> 14 <li title="two"><span>BBBBB</span></li> 15 </ul> 16 <li>eeeee</li> 17 <li>EEEEE</li> 18 <br> 19 20 <!-- 21 在jQuery对象中的元素对象数组中过滤出一部分元素来 22 1. first() 23 2. last() 24 3. eq(index|-index) 25 4. filter(selector) //过滤属性 26 5. not(selector) 27 6. has(selector) //包含什么的元素 28 --> 29 30 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 31 <script type="text/javascript"> 32 /* 33 需求: 34 1. ul下li标签第一个 35 2. ul下li标签的最后一个 36 3. ul下li标签的第二个 37 4. ul下li标签中title属性为hello的 38 5. ul下li标签中title属性不为hello的 39 6. ul下li标签中有span子标签的 40 */ 41 var $lis = $(‘ul>li‘) 42 //1. ul下li标签第一个 43 // $lis.first().css(‘background‘, ‘red‘) //$lis.first()是jq对象 44 // $lis[0].style.background = ‘red‘ //$lis[0]是js对象 45 46 //2. ul下li标签的最后一个 47 // $lis.last().css(‘background‘, ‘red‘) 48 49 //3. ul下li标签的第二个 50 // $lis.eq(1).css(‘background‘, ‘red‘) 51 52 //4. ul下li标签中title属性为hello的 53 // $lis.filter(‘[title=hello]‘).css(‘background‘, ‘red‘) 54 55 //5. ul下li标签中title属性不为hello的 56 // $lis.not(‘[title=hello]‘).css(‘background‘, ‘red‘) 57 // $lis.filter(‘[title!=hello]‘).filter(‘[title]‘).css(‘background‘, ‘red‘)//两次过滤 58 59 //6. ul下li标签中有span子标签的 60 $lis.has(‘span‘).css(‘background‘, ‘red‘) 61 </script> 62 </body> 63 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>16_筛选_查找孩子-父母-兄弟标签</title> 6 </head> 7 <body> 8 <div id="div1" class="box" title="one">class为box的div1</div> 9 <div id="div2" class="box">class为box的div2</div> 10 <div id="div3">div3</div> 11 <span class="box">class为box的span</span> 12 <br/> 13 <div> 14 <ul> 15 <span>span文本1</span> 16 <li>AAAAA</li> 17 <li title="hello" class="box2">BBBBB</li> 18 <li class="box" id=‘cc‘>CCCCC</li> 19 <li title="hello">DDDDDD</li> 20 <li title="two"><span>span文本2</span></li> 21 <span>span文本3</span> 22 </ul> 23 <span>span文本444</span><br> 24 <li>eeeee</li> 25 <li>EEEEE</li> 26 <br> 27 </div> 28 29 <!-- 30 在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签 31 1. children(): 子标签中找 32 2. find() : 后代标签中找 33 3. parent() : 父标签 34 4. prevAll() : 前面所有的兄弟标签 35 5. nextAll() : 后面所有的兄弟标签 36 6. siblings() : 前后所有的兄弟标签 37 --> 38 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 39 <script type="text/javascript"> 40 /* 41 需求: 42 1. ul标签的第2个span子标签 43 2. ul标签的第2个span后代标签 44 3. ul标签的父标签 45 4. id为cc的li标签的前面的所有li标签 46 5. id为cc的li标签的所有兄弟li标签 47 */ 48 var $ul = $(‘ul‘) 49 //1. ul标签的第2个span子标签 50 //$ul.children(‘span:eq(1)‘).css(‘background‘, ‘red‘) 51 52 //2. ul标签的第2个span后代标签 53 // $ul.find(‘span:eq(1)‘).css(‘background‘, ‘red‘) 54 // $ul.find(‘span‘).eq(1).css(‘background‘, ‘red‘) 55 56 //3. ul标签的父标签 57 // $ul.parent().css(‘background‘, ‘red‘) 58 59 //4. id为cc的li标签的前面的所有li标签 60 var $li = $(‘#cc‘) 61 // $li.prevAll(‘li‘).css(‘background‘, ‘red‘) 62 63 //5. id为cc的li标签的所有兄弟li标签 64 $li.siblings(‘li‘).css(‘background‘, ‘red‘) 65 </script> 66 </body> 67 </html>
待续。。。
原文：https://www.cnblogs.com/fsg6/p/12927430.html