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>六.聚焦和失焦
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
