jquery3
一.位置信息 1.width() height() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; height: 400px; position: relative; top: 20px; } .box{ width: 200px; height: 200px; background-color:yellow; position: absolute; top: 10px; left: 90px; border: 1px solid greenyellow; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> <script src="jQuery.js"></script> <script> $(function(){ //200 200 console.log($('.box').width()); console.log($('.box').height()); $('.box').width('230px'); $('.box').height('230px'); }) </script> </body> </html> 2.innerHeight() innerWidth() 包括padding，可是不包括border。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; height: 400px; background-color:red; position: relative; top: 20px; } .box{ width: 200px; height: 200px; background-color:yellow; position: absolute; top: 10px; left: 90px; border: 1px solid greenyellow; padding: 10px; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> <script src="jQuery.js"></script> <script> $(function(){ //220 220 console.log($('.box').innerWidth()); console.log($('.box').innerHeight()); //设置时改变 的是盒模型content的大小 不能改变padding console.log($('.box').innerWidth('250px')); console.log($('.box').innerHeight('250px')); }) </script> </body> </html> 3.outerWidth() outerHeight() 包括padding，border <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; height: 400px; background-color:red; position: relative; top: 20px; } .box{ width: 200px; height: 200px; background-color:yellow; position: absolute; top: 10px; left: 90px; border: 1px solid greenyellow; padding: 10px; margin: 10px; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> <script src="jQuery.js"></script> <script> $(function(){ //222 222 console.log($('.box').outerWidth()); console.log($('.box').outerHeight()); //设置时改变 的是盒模型content的大小 不能改变padding和margin console.log($('.box').outerWidth('250px')); console.log($('.box').outerHeight('250px')); }) </script> </body> </html> 4.offset() 偏移 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; height: 400px; background-color:red; position: relative; top: 20px; } .box{ width: 200px; height: 200px; background-color:yellow; position: absolute; top: 10px; left: 90px; border: 1px solid greenyellow; padding: 10px; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> <script src="jQuery.js"></script> <script> $(function(){ //获取距离 console.log($('.box').offset().top); console.log($('.box').offset().left); //设置距离 $('.box').offset({top:10,left:10}) }) </script> </body> </html> 5.scrollLeft() scrollTop() 滚动距离 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; height: 400px; background-color:red; position: relative; top: 20px; } .box{ width: 200px; height: 200px; background-color:yellow; position: absolute; top: 10px; left: 90px; border: 1px solid greenyellow; padding: 10px; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> <ul> <li>11</li> <li>11</li> <li>11</li> </ul> <script src="jQuery.js"></script> <script> $(function(){ //设置文档卷上去的距离 $(document).scrollTop(300); //获取文档卷上去的距离 $(document).scroll(function() { console.log($(this).scrollTop()); console.log($('this').scrollLeft()); }) }) </script> </body> </html>二.事件流的概念 1.事件:HTML中与javascript交互是经过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等， 能够向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在何时进行调用的，就须要了解一下“事件流”的概念。 2.预备知识 在解释输出结果为何是这样以前，还有几个知识点须要了解一下便可： (1)、addEventListener addEventListener 是DOM2 级事件新增的指定事件处理程序的操做，这个方法接收3个参数：要处理的事件名、做为事件处理程序的函数和 一个布尔值。最后这个布尔值参数若是是true，表示在捕获阶段调用事件处理程序；若是是false，表示在冒泡阶段调用事件处理程序。 (2)、document、documentElement和document.body三者之间的关系： document表明的是整个html页面； document.documentElement表明的是<html>标签； document.body表明的是<body>标签； 图片(事件流) 3.jquery的经常使用事件图片 4.例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .father{ width: 300px; height: 300px; background-color:red; } </style> </head> <body> <div class="father"> <button class="child">按钮</button> </div> <script src="jquery.js"></script> <script> $(function () { //每个事件都默认传过来 一个event $('.child').click(function(event) { console.log('按钮被点击了'); console.log(this); // currentTarget就等价于this // console.log(event.currentTarget); console.log(event.target); //阻止事件冒泡 // event.stopPropagation() }); $('.father').mouseenter(function(event) { console.log(event.type); console.log('父盒子被点击了'); console.log(this); // console.log(event.currentTarget); console.log(event.target); // event.stopPropagation() }); $('body').click(function(event) { console.log(this); // console.log(event.currentTarget); // event.target 若是没有阻止事件冒泡，指的点击的目标对象 console.log(event.target); console.log('body被点击了') }); }) </script> </body> </html>三.换肤()重点:设置点击body和向上按钮都能slidedown四.事件代理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>小明</li> </ul> <script src="jQuery.js"></script> <script> $(function(){ // $('ul li').click(function(){ // alert(this.innerText) // }); // //此时点击小亮是没有点击事件的 $('ul').append('<li>小亮</li>'); //此时不管点击小明仍是小亮,都会有点击事件 $('ul').on('click','li',function(){ alert(this.innerText) }) }) </script> </body> </html>五.合成事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>区域</button> <script src="jQuery.js"></script> <script> $(function(){ $('button').hover(function(){ console.log('鼠标进入') }, function(){ console.log('鼠标离开') }) }) </script> </body> </html>六.聚焦和失焦
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
