元素的尺寸
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>
文档增删改
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>17_文档_增删改</title> </head> <style type="text/css"> </style> <body> <ul id="ul1"> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">EEEEE</li> <li>FFFFF</li> </ul> <br> <br> <ul id="ul2"> <li class="re">aaa</li> <li title="hello">bbb</li> <li class="box">ccc</li> <li title="hello">ddd</li> <li title="two">eee</li> </ul> <!-- 1. 添加/替换元素 * append(content) 向当前匹配的所有元素内部的最后插入指定内容 * prepend(content) 向当前匹配的所有元素内部的最前面插入指定内容 * before(content) 将指定内容插入到当前所有匹配元素的前面 * after(content) 将指定内容插入到当前所有匹配元素的后面替换节点 * replaceWith(content) 用指定内容替换所有匹配的标签删除节点 2. 删除元素 * empty() 删除所有匹配元素的子元素 * remove() 删除所有匹配的元素 --> <script type="text/javascript" src="js/jquery-1.10.1.js"></script> <script type="text/javascript"> /* 需求: 1. 向id为ul1的ul下添加一个span(最后) 2. 向id为ul1的ul下添加一个span(最前) 3. 在id为ul1的ul下的li(title为hello)的前面添加span 4. 在id为ul1的ul下的li(title为hello)的后面添加span 5. 将在id为ul2的ul下的li(title为hello)全部替换为p 6. 移除id为ul2的ul下的所有li */ // 1. 向id为ul1的ul下添加一个span(最后) $('<span>我是appendTo新增的span</span><br>').appendTo('#ul1'); $('#ul1').append('<span>我是append新增的span</span><br>'); // <div class="wrap"> // <div class="item"> // <p></p> // <p></p> // <p></p> // </div> // </div> // <button></button> // $('<div class="item"></div>') // .append('<p></p>') // .append('<p></p>') // .append('<p></p>') // .appendTo('.wrap') // 2. 向id为ul1的ul下添加一个span(最前) $('<span>我是prependTo新增的span</span><br>').prependTo('#ul1'); $('#ul1').prepend('<span>我是prepend新增的span</span><br>') // 3. 在id为ul1的ul下的li(title为hello)的前面添加span $('#ul1 li[title=hello]').before('<span>我是before新增的span</span>') // 4. 在id为ul1的ul下的li(title为hello)的后面添加span $('#ul1 li[title=hello]').after('<span>我是after新增的span</span>') // 5. 将在id为ul2的ul下的li(title为hello)全部替换为p // $('#ul2 li[title=hello]').replaceWith('<p>我是replaceWith替换的标签</p>'); // 6. 移除id为ul2的ul下的所有li // remove 用于删除节点，包括父节点 // empty 是用于掏空节点 删除所有子元素 保留父元素 // $('#ul2').children().remove(); $('#ul2').empty(); </script> </body> </html>
事件绑定与解绑
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>18_事件绑定与解绑</title> 6 </head> 7 <style type="text/css"> 8 * { 9 margin: 0px; 10 } 11 12 .out { 13 position: absolute; 14 width: 200px; 15 height: 200px; 16 top: 20px; 17 left: 10px; 18 background: blue; 19 } 20 21 .inner { 22 position: absolute; 23 width: 100px; 24 height: 100px; 25 top: 50px; 26 background: red; 27 } 28 29 .divBtn { 30 position: absolute; 31 top: 250px; 32 } 33 34 </style> 35 36 <body style="height: 2000px;"> 37 38 <div class="out"> 39 外部DIV 40 <div class="inner">内部div</div> 41 </div> 42 43 <div class='divBtn'> 44 <button id="btn1">取消绑定所有事件</button> 45 <button id="btn2">取消绑定mouseover事件</button> 46 <button id="btn3">测试事件坐标</button> 47 <a href="http://www.baidu.com" id="test4">百度一下</a> 48 </div> 49 50 <!-- 51 1. 事件绑定(2种)： 52 * eventName(function(){}) 53 绑定对应事件名的监听, 例如：$('#div').click(function(){}); 54 * on(eventName, funcion(){}) 55 通用的绑定事件监听, 例如：$('#div').on('click', function(){}) 56 * 优缺点: 57 eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持 58 on: 编码不方便, 可以添加多个监听, 且更通用 59 2. 事件解绑： 60 * off(eventName) 61 3. 事件的坐标 62 * event.clientX, event.clientY 相对于视口的左上角 63 * event.pageX, event.pageY 相对于页面的左上角 64 * event.offsetX, event.offsetY 相对于事件元素左上角 65 4. 事件相关处理 66 * 停止事件冒泡 : event.stopPropagation() 67 * 阻止事件默认行为 : event.preventDefault() 68 --> 69 <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> 70 <script type="text/javascript"> 71 /* 72 需求： 73 1. 给.out绑定点击监听(用两种方法绑定) 74 2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定) 75 3. 点击btn1解除.inner上的所有事件监听 76 4. 点击btn2解除.inner上的mouseover事件 77 5. 点击btn3得到事件坐标 78 6. 点击.inner区域, 外部点击监听不响应 79 7. 点击链接, 如果当前时间是偶数不跳转 80 */ 81 //1. 给.out绑定点击监听(用两种方法绑定) 82 /*$('.out').click(function () { 83 console.log('click out') 84 })*/ 85 $('.out').on('click', function () { 86 console.log('on click out') 87 }) 88 89 //2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定) 90 /* 91 $('.inner') 92 .mouseenter(function () { // 进入 93 console.log('进入') 94 }) 95 .mouseleave(function () { // 离开 96 console.log('离开') 97 }) 98 */ 99 /* 100 $('.inner') 101 .on('mouseenter', function () { 102 console.log('进入2') 103 }) 104 .on('mouseleave', function () { 105 console.log('离开2') 106 }) 107 */ 108 $('.inner').hover(function () { 109 console.log('进入3') 110 }, function () { 111 console.log('离开3') 112 }) 113 114 115 //3. 点击btn1解除.inner上的所有事件监听 116 $('#btn1').click(function () { 117 $('.inner').off() 118 }) 119 120 //4. 点击btn2解除.inner上的mouseenter事件 121 $('#btn2').click(function () { 122 $('.inner').off('mouseenter') 123 }) 124 125 //5. 点击btn3得到事件坐标 126 $('#btn3').click(function (event) { // event事件对象 127 console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角 128 console.log(event.clientX, event.clientY) // 原点为窗口的左上角 129 console.log(event.pageX, event.pageY) // 原点为页面的左上角 130 }) 131 132 //6. 点击.inner区域, 外部点击监听不响应 133 $('.inner').click(function (event) { 134 console.log('click inner') 135 //停止事件冒泡 136 event.stopPropagation() 137 }) 138 139 //7. 点击链接, 如果当前时间是偶数不跳转 140 $('#test4').click(function (event) { 141 if(Date.now()%2===0) { 142 event.preventDefault() 143 } 144 }) 145 </script> 146 </body> 147 </html>
淡入淡出
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>21_淡入淡出</title> 6 </head> 7 <style type="text/css"> 8 * { 9 margin: 0px; 10 } 11 12 .div1 { 13 position: absolute; 14 width: 200px; 15 height: 200px; 16 top: 50px; 17 left: 10px; 18 background: red; 19 } 20 </style> 21 22 <body> 23 <button id="btn1">慢慢淡出</button> 24 <button id="btn2">慢慢淡入</button> 25 <button id="btn3">淡出/淡入切换</button> 26 27 <div class="div1"> 28 </div> 29 30 <!-- 31 淡入淡出: 不断改变元素的透明度来实现的 32 1. fadeIn(): 带动画的显示 33 2. fadeOut(): 带动画隐藏 34 3. fadeToggle(): 带动画切换显示/隐藏 35 --> 36 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 37 <script type="text/javascript"> 38 $('#btn1').click(function () { 39 $('.div1').fadeOut(2000); 40 }); 41 $('#btn2').click(function () { 42 $('.div1').fadeIn(2000); 43 }); 44 $('#btn3').click(function () { 45 $('.div1').fadeToggle(1000); 46 }) 47 </script> 48 </body> 49 </html>
滑动动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>22_滑动</title> 6 </head> 7 <style type="text/css"> 8 * { 9 margin: 0px; 10 } 11 12 .div1 { 13 position: absolute; 14 width: 200px; 15 height: 200px; 16 top: 50px; 17 left: 10px; 18 background: red; 19 } 20 </style> 21 <body> 22 <button id="btn1">慢慢收缩</button> 23 <button id="btn2">慢慢展开</button> 24 <button id="btn3">收缩/展开切换</button> 25 26 <div class="div1"> 27 </div> 28 29 <!-- 30 滑动动画 高度慢慢变化 31 1. slideDown(): 带动画的展开 32 2. slideUp(): 带动画的收缩 33 3. slideToggle(): 带动画的切换展开/收缩 34 --> 35 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 36 <script type="text/javascript"> 37 $('#btn1').click(function () { 38 $('.div1').slideUp(10000); 39 }); 40 $('#btn2').click(function () { 41 $('.div1').slideDown(2000) 42 }); 43 $('#btn3').click(function () { 44 $('.div1').slideToggle(2000) 45 }) 46 </script> 47 </body> 48 </html>
显示与影藏动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>23_显示与隐藏</title> 6 </head> 7 <style type="text/css"> 8 * { 9 margin: 0px; 10 } 11 12 .div1 { 13 position: absolute; 14 width: 200px; 15 height: 200px; 16 top: 50px; 17 left: 10px; 18 background: red; 19 display: none; 20 } 21 </style> 22 <body> 23 <button id="btn1">瞬间显示</button> 24 <button id="btn2">慢慢显示</button> 25 <button id="btn3">慢慢隐藏</button> 26 <button id="btn4">显示隐藏切换</button> 27 28 <div class="div1"> 29 </div> 30 31 <!-- 32 显示隐藏，默认没有动画 ， 高度和宽度，opcity慢慢变化 33 1. show(): (不)带动画的显示 34 2. hide(): (不)带动画的隐藏 35 3. toggle(): (不)带动画的切换显示/隐藏 36 --> 37 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 38 <script type="text/javascript"> 39 // show和hide方法 如果不传递时间 默认是没有任何过渡效果的 40 $('#btn1').click(function () { 41 $('.div1').show(); 42 }); 43 $('#btn2').click(function () { 44 $('.div1').show(2000) 45 }); 46 $('#btn3').click(function () { 47 $('.div1').hide(2000); 48 }); 49 $('#btn4').click(function () { 50 $('.div1').toggle(1000); 51 }) 52 53 </script> 54 </body> 55 </html>
animate()自定义动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>24_自定义动画</title> 6 <style type="text/css"> 7 * { 8 margin: 0px; 9 } 10 11 .div1 { 12 position: absolute; 13 width: 100px; 14 height: 100px; 15 top: 50px; 16 left: 300px; 17 background: red; 18 color: #fff; 19 } 20 </style> 21 </head> 22 <body> 23 <button id="btn1">逐渐扩大</button> 24 <button id="btn2">向右移动</button> 25 <button id="btn3">向左移动</button> 26 <button id="btn4">停止动画</button> 27 28 <div class="div1"> 29 爱在西元前，学在尚硅谷 30 </div> 31 <p>立即停止动画 直接到当前动画结束位置 不清空队列</p> 32 <!-- 33 jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的 34 1. animate(): 自定义动画效果的动画 35 2. stop(): 停止动画 36 37 --> 38 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 39 <script type="text/javascript"> 40 /* 41 需求： 42 1.逐渐扩大 43 1.宽度扩大 44 2.宽度和高度扩大 45 3.先宽度扩大后高度扩大 46 2.向右移动 47 1.向右移动 固定的200px 48 2.基于当前位置向右移动 200px 49 3.向左移动 50 1.向右移动 固定的200px 51 2.基于当前位置向右移动 200px 52 4.停止动画 53 1.停止所有的动画 54 2.停止当前动画，直接开始下一个动画 55 3.停止并结束当前动画，开始下一个动画 56 */ 57 // 1.逐渐扩大 58 // 1.宽度扩大 59 // 2.宽度和高度扩大 60 // 3.先宽度扩大后高度扩大 61 //animate 自定义动画方法 两个参数 参数1是一个对象 设置要过渡的样式 参数2 过度时间 单位毫秒 62 $('#btn1').click(function () { 63 $('.div1').animate({ //先宽度变化后高度变化 64 'width':'300px' 65 },1000).animate({ 66 'height':'300px' 67 },1000) 68 }); 69 70 $('#btn1').click(function () { 71 $('.div1').animate({ //宽高一起变化 72 'width':'300px', 73 'height':'300px' 74 },1000) 75 }); 76 // 2.向右移动 77 // 1.向右移动 固定的200px 78 // 2.基于当前位置向右移动 200px 79 $('#btn2').click(function () { 80 $('.div1').stop(false, true).animate({ //多次点击，立即停止上一次动画 直接到当前动画结束的位置 ，然后进行下一次的动画 81 'left':'+=300' 82 },3000) 83 }) 84 85 // $('#btn2').click(function () { 86 // $('.div1').animate({ //多次点击，上一次的动画没有立刻停止，当动画执行完后，然后进行下一次的动画 87 // 'left':'+=300' 88 // },3000) 89 // }) 90 // 3.向左移动 91 // 1.向右移动 固定的200px 92 // 2.基于当前位置向右移动 200px 93 $('#btn3').click(function () { 94 $('.div1').stop().animate({ 95 'left':'-=300' 96 },3000) 97 }) 98 // 停止动画 99 $('#btn4').click(function () { 100 // 参数1： 是否清空动画队列 第二个参数：当前动画是否执行完整 101 // $('.div1').stop(false,false);//默认状态 立即停止当前动画 在当前位置执行下一个动画 不清空动画队列 102 // $('.div1').stop(true,false);//立即停止当前动画 清空动画队列 之后的动画也不执行了 103 // $('.div1').stop(true,true);//立即停止动画 直接到当前动画结束的位置 清空动画队列 104 // $('.div1').stop(false,true);//立即停止动画 直接到当前动画结束位置 不清空队列 105 106 }) 107 </script> 108 </body> 109 </html>