jQuery的位置信息和事件
一.位置信息
?1.寬度和高度
獲取寬度:? ?.width()
為匹配的元素集合中獲取第一個元素的當前計算寬度值。這個方法不接受任何參數。.css(width)?和?.width()之間的區別是后者返回一個沒有單位的數值（例如，400），前者是返回帶有完整單位的字符串（例如，400px）。當一個元素的寬度需要數學計算的時候推薦使用.width()?方法 。
設置寬度:? ?.width(value)
給每個匹配的元素設置CSS寬度。
獲取高度:? ?.height()
獲取匹配元素集合中的第一個元素的當前計算高度值。
這個方法不接受任何參數。
設置高度: .height（value)
設置每一個匹配元素的高度值。
2.innerHeight()?和?innerWidth
獲取內部寬:? ? .innerWidth()
為匹配的元素集合中獲取第一個元素的當前計算寬度值,包括padding，但是不包括border。
這個方法不適用于window?和?document對象，對于這些對象可以使用.width()代替。
設置內部寬:? ?.innerWidth(value);
為匹配集合中的每個元素設置CSS內部寬度。如果這個“value”參數提供一個數字，jQuery會自動加上像素單位（px）
獲取內部高: .innerHeight()
為匹配的元素集合中獲取第一個元素的當前計算高度值,包括padding，但是不包括border。
這個方法不適用于window?和?document對象，對于這些對象可以使用.height()代替。
設置內部高:? ?.innerHeight(value);
為匹配集合中的每個元素設置CSS內部高度。如果這個“value”參數提供一個數字，jQuery會自動加上像素單位（px）
3.outerWidth?和?outerHeight()
獲取外部寬:? ? ?.outerWidth( [includeMargin] )
獲取匹配元素集合中第一個元素的當前計算外部寬度（包括padding，border和可選的margin）
includeMargin?(默認:?false)? ? ?類型：?Boolean??一個布爾值，表明是否在計算時包含元素的margin值。
這個方法不適用于window?和?document對象，可以使用.width()代替
設置外部寬:? ? outerWidth(?value )?
為匹配集合中的每個元素設置CSS外部寬度。
獲取外部高:? ?.outerHeight( [includeMargin ] )
獲取匹配元素集合中第一個元素的當前計算外部高度（包括padding，border和可選的margin）
includeMargin?(默認:?false)? ??類型：?Boolean
這個方法不適用于window?和?document對象，可以使用.width()代替
設置外部高:? ??.outerHeight( value )
?為匹配集合中的每個元素設置CSS外部高度。
4.偏移
獲取:? ? .offset()
返回值：Object?。.offset()返回一個包含top?和?left屬性的對象 。
在匹配的元素集合中，獲取的第一個元素的當前坐標，坐標相對于文檔。
設置:? ?.offset (?coordinates )
?設置匹配的元素集合中每一個元素的坐標， 坐標相對于文檔。
coordinates? ? ? ? ?類型:?Object 一個包含top?和?left屬性的對象，用整數指明元素的新頂部和左邊坐標。 $("p").offset({ top: 10, left: 30 });5.元素坐標
.position()
返回值：Object{top,left}
描述獲取匹配元素中第一個元素的當前坐標，相對于offset parent的坐標。(offset parent指離該元素最近的而且被定位過的祖先元素?)
當把一個新元素放在同一個容器里面另一個元素附近時，用.position()更好用。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}.father{width: 400px;height: 400px;background-color:yellow;position: relative;top: 20px;}.box{width: 200px;height: 200px;padding: 10px;border: 1px solid yellow;background-color: red;position: absolute;top:10px;left: 100px;}</style> </head> <body><div class="father"><div class="box"></div></div><ul><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li><li>11</li></ul><script src="jquery.js"></script><script>$(function () {//1.獲取內容寬和高// console.log($('.box').width());// console.log($('.box').height());//當2秒之后 讓div的盒子的寬度變成400// delay() 必須要結合動畫的方法// $('.box').delay(2000).hide(3000);// setTimeout(function (argument) {// // 設置寬// $('.box').width(400);// },2000);//2.innerWidth() innerHeight() 內部的寬和高 包含內容的寬+ padding 不包含border// console.log($('.box').innerWidth());// $('.box').innerWidth(400);// //3.outerWidth() outerHeight() 外部的寬和高 包含內容的寬+padding+border 整個盒模型的大小// console.log($('.box').outerWidth());// console.log($('.box').offset().top);// $(document).scroll(function(event) {// // console.log(1111);// console.log($(this).scrollTop());// }); });</script> </body> </html> 位置信息?
6.滾動距離
水平方向
獲取：
.scrollLeft()描述：獲取匹配的元素集合中第一個元素的當前水平滾動條的位置（頁面卷走的寬度）
設置：
.scrollLeft( value )描述：設置每個匹配元素的水平方向滾動條位置。
垂直方向
獲取：
.scrollTop()描述：獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置（頁面卷走的高度）
設置：
.scrollLeft( value )描述：設置每個匹配元素的垂直方向滾動條位置。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0;margin: 0;}.fixTop{position: fixed;bottom: 20px;right: 30px;width: 100px;height: 100px;line-height: 100px;text-align: center;color: #fff;background-color: #000;cursor: pointer;}</style> </head> <body><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul><div class="fixTop">回到頂部</div><script src="jquery.js"></script><script>$(function () {$('.fixTop').click(function(event) {$('html,body').animate({'scrollTop':0},1000)});});</script> </body> </html> 回到頂部二.js的事件流的概念
HTML中與javascript交互是通過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件
事件流的概念
1、DOM事件流
“DOM2級事件”規定的事件流包括三個階段：
① 事件捕獲階段；
② 處于目標階段；
③ 事件冒泡階段
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><button id="btn">按鈕</button><script> // document.getElementById('btn').addEventListener('click', function () {// alert(1);// },false);window.onload = function(){var oBtn = document.getElementById('btn');//1. document.addEventListener('click',function(){console.log('document處于事件捕獲階段');}, true);//2. document.documentElement.addEventListener('click',function(){console.log('html處于事件捕獲階段');}, true);//3 document.body.addEventListener('click',function(){console.log('body處于事件捕獲階段');}, true);//4. oBtn.addEventListener('click',function(){console.log('btn處于事件捕獲階段');}, true);// oBtn.addEventListener('click',function(){console.log('btn處于事件冒泡階段');}, false);//5 document.body.addEventListener('click',function(){console.log('body處于事件冒泡階段');}, false);//6 document.documentElement.addEventListener('click',function(){console.log('html處于事件冒泡階段');}, false);//7. document.addEventListener('click',function(){console.log('document處于事件冒泡階段');}, false); };</script> </body> </html>jQ的常用事件
1.事件冒泡
阻止事件冒泡
e.stopPropagation()方法 注意:? ?1.return false 在jQuery中是即阻止事件冒泡又阻止默認行為 ? ? ?2.jQuery不支持事件捕獲?阻止默認行為
e.preventDefault()方法 <!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);// 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> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0;margin: 0;}.fu{position: fixed;top:0;left: 0;width: 100%;height: 320px;background-color: red;display: none;}.up{cursor: pointer;}</style> </head> <body style="height: 2000px"><!-- <form action=""></form> --><a href='http://www.baidu.com' id="changeFu">換膚</a><div class="fu"><ul><li><a href="javascript:void(0)">女神降臨</a></li><li><a href="javascript:void(0)">明星</a></li><span class="up">收起</span></ul></div><script src="jquery.js"></script> <script>$(function () {$('#changeFu').click(function(e) {//阻止當前默認的事件// e.preventDefault();// //阻止冒泡// e.stopPropagation(); console.log(111);$('.fu').slideDown(1000);// 相當于即阻止了默認事件 又阻止冒泡return false;});$('body,.up').click(function(event) {$('.fu').slideUp(1000);});$('.fu ul li a').click(function(event) {event.stopPropagation();$(this).css('color','green').parent('li').siblings('li').find('a').css('color','blue');});$('.fu').click(function(event) {return false;});});</script> </body> </html> 換膚1.鼠標事件
| click | 鼠標單擊觸發事件，參數可選（data,fn） | ? |
| dblclick | 鼠標雙擊觸發事件，參數可選（data,fn） | ? |
| mousedown()/up() | 鼠標按下/彈起觸發事件 | ? |
| mousemove() | 鼠標移動事件 | ? |
| mouseover()/out() | 鼠標移入/移出觸發事件? | 鼠標指針穿過/離開被選元素或者當前元素的子元素，會觸發事件 |
| mouseenter()/leave() | 鼠標進入/離開觸發事件 | 鼠標指針只在穿過/離開被選元素觸發事件 |
| focus()/blur() | 鼠標聚焦/失去焦點觸發事件（不支持冒泡） | ? |
| keydown()/up() | 鍵盤按鍵按下/彈起觸發 | ? |
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><button>按鈕</button><script src="jquery.js"></script><script>$(function () {/*$('button').mouseenter(function(event) {});$('button').mouseleave(function(event) {});*/$('button').hover(function() {/* Stuff to do when the mouse enters the element */console.log('進入');}, function() {/* Stuff to do when the mouse leaves the element */console.log('離開');});})</script> </body> </html> 事件合成 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><button>按鈕</button><script src="jquery.js"></script><script>$(function () {// 單雙擊 的時間 間隔 是300ms// 如果解決 單雙擊沖突 當做作業 $('button').click(function(event) {console.log('單機了');// 定時器 300ms 一次性定時器 });$('button').dblclick(function(event) {console.log('雙機了');});})</script> </body> </html> 單雙擊事件 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><input type="text"><script src="jquery.js"></script><script>//加載頁面的時候 獲取到焦點// $('input[type=text]').focus();// $('input[type=text]').focus(function () {// console.log(1);// });// $('input[type=text]').keydown(function(event) {// console.log(1);/*console.log(event.keyCode);switch (expression) {case label_1:// statements_1break;case label_1:// statements_1break;case label_1:// statements_1break;case label_1:// statements_1break;default:// statements_defbreak;}*/// });// $('input[type=text]').change(function(event) {// console.log(1111);// });// $('input[type=text]').select(function(event) {// console.log(1111);// });</script> </body> </html> 聚焦和失焦2.表單事件
change()? ?表單元素發生改變時觸發事件
此事件僅限于<input>元素，<textarea>框和<select>元素 對于選擇框，復選框和單選按鈕，當用戶使用鼠標進行選擇時，會立即觸發事件，但對于其他元素類型，事件將延遲到元素失去焦點 select（）? 文本元素發生改變時觸發事件 此事件僅限于input type類型為text和textarea表單元素 此時可以調用 jquery的submit方法通過e.preventDefault()來阻止默認事件，這樣我們就能動態的跟服務端來發送數據了。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><!-- 交互 接收不到 后端返回回來的數據--><div><input type="text" name="user"><input type="submit"></div><script src="jquery.js"></script><script>//在公司 中 前后端分離的項目 分工明確 開發效率高// django 模板引擎 /*$('input[type=submit]').click(function(event) {var userName = $('input[type=text]').val();//發送ajax交互$.ajax({url:`http://127.0.0.1:8800/?user=${userName}`,type:'get',success:function(data){},error:function (err) {console.log(err)}});});*//*$('form').submit(function(event) {event.preventDefault();console.log(1111);// 發送ajax$.ajax({url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976`,type:'get',success:function (data) {console.log(data); },error:function (err) {console.log(err);}});});*/</script> </body> </html> 表單控件事件三.事件對象
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
? ? ? ? ?例如: 當用戶單擊某個元素的時候,我們給這個元素注冊的事件就會觸發,該事件的本質就是一個函數,而該函數的形參接收一個event對象
? ? ? ?2.事件通常與函數結合使用，函數不會在事件發生前被執行！
關于event對象
| altKey | 返回當事件被觸發時，”ALT” 是否被按下。 |
| button | 返回當事件被觸發時，哪個鼠標按鈕被點擊。 |
| clientX | 返回當事件被觸發時，鼠標指針的水平坐標。 |
| clientY | 返回當事件被觸發時，鼠標指針的垂直坐標。 |
| ctrlKey | 返回當事件被觸發時，”CTRL” 鍵是否被按下。 |
| metaKey | 返回當事件被觸發時，”meta” 鍵是否被按下。 |
| relatedTarget | 返回與事件的目標節點相關的節點。 |
| screenX | 返回當某個事件被觸發時，鼠標指針的水平坐標。 |
| screenY | 返回當某個事件被觸發時，鼠標指針的垂直坐標。 |
| shiftKey | 返回當事件被觸發時，”SHIFT” 鍵是否被按下 |
| cancelBubble | 如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設為 true。 |
| fromElement | 對于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。 |
| keyCode | 對于 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup |
| offsetX,offsetY | 發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標。 |
| returnValue | 如果設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置為 |
| srcElement | 對于生成事件的 Window 對象、Document 對象或 Element 對象的引用。 |
| toElement | 對于 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。 |
| x,y | 事件發生的位置的 x 坐標和 y 坐標，它們相對于用CSS動態定位的最內層包容元素。 |
標準Event屬性
| bubbles | 返回布爾值，指示事件是否是起泡事件類型。 |
| cancelable | 返回布爾值，指示事件是否可擁可取消的默認動作。 |
| currentTarget | 返回其事件監聽器觸發該事件的元素。 |
| eventPhase | 返回事件傳播的當前階段。 |
| target | 返回觸發此事件的元素（事件的目標節點）。 |
| timeStamp | 返回事件生成的日期和時間。 |
| type | 返回當前 Event 對象表示的事件的名稱。 |
| initEvent() | 初始化新創建的 Event 對象的屬性。 |
| preventDefault() | 通知瀏覽器不要執行與事件關聯的默認動作。 |
| stopPropagation() | 不再派發事件。 |
四.jQuery的事件綁定和解綁
1、綁定事件
語法：
bind(type,data,fn)描述：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。
參數解釋：
type?(String) : 事件類型
data?(Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
fn?( Function) : 綁定到每個匹配元素的事件上面的處理函數
示例：
當每個p標簽被點擊的時候，彈出其文本
$("p").bind("click", function(){alert( $(this).text() ); });你可以在事件處理之前傳遞一些附加的數據。
function handler(event) { //event.data 可以獲取bind()方法的第二個參數的數據alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)通過返回false來取消默認的行為并阻止事件起泡。
$("form").bind("submit", function() { return false; })通過使用 preventDefault() 方法只取消默認的行為。
$("form").bind("submit", function(event){event.preventDefault(); });2、解綁事件
語法：
unbind(type,fn);描述：
bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。如果沒有參數，則刪除所有綁定的事件。
如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。
參數解釋：
type?(String) : (可選) 事件類型
fn(Function) : (可選) 要從每個匹配元素的事件中反綁定的事件處理函數
示例：
把所有段落的所有事件取消綁定
$("p").unbind()將段落的click事件取消綁定
$("p").unbind( "click" )
刪除特定函數的綁定，將函數作為第二個參數傳入
var foo = function () {//綁定事件和解綁事件的事件處理函數 };$("p").bind("click mouseenter", foo); // 給p段落綁定click mouseenter事件$("p").unbind("click", foo); // 只解綁了p段落標簽的click事件3.自定義事件
其實事件的綁定和解綁，都是我為了自定義事件做準備（大家把jQuery的提供的事件熟記在心），以后對jquery熟了以后，可以玩一下自定義事件
語法：
trigger(type,data);描述：在每一個匹配的元素上觸發某類事件，它觸發的是由bind()注冊的自定義事件。
參數解釋：
type?(String) : 要觸發的事件類型
data?(Array) : (可選)傳遞給事件處理函數的附加參數
示例：
給一個按鈕添加自定義的事件
$('button').bind('myClick',function(ev,a,b){//給button按鈕添加的自定義事件myClick事件 })然后通過trigger()觸發自定義的事件
$('button').trigger('myClick',[1,2])4.補充 一次性事件
語法：
one(type,data,fn)描述：
為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。在每個對象上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同
參數解釋：
type?(String) : 事件類型
data?(Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
fn?(Function) : 綁定到每個匹配元素的事件上面的處理函數
示例：
當所有段落被第一次點擊的時候，顯示所有其文本。
?五.事件委托(事件代理)
1.概念
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
原理:?
利用冒泡的原理，把事件加到父級上，觸發執行效果。
作用:
性能要好
針對新創建的元素,直接可以擁有事件
事件源:
跟this作用一樣(他不用看指向問題，誰操作的就是誰),event對象下的
使用情景:
為DOM中的很多元素綁定相同事件；
為DOM中尚不存在的元素綁定事件；
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><ul><li class="item1"><a href="javascript:void(0);" id="a">alex</a></li><!-- <li>武sir</li> --></ul><script src="jquery.js"></script><script>$(function () { // 綁定事件 如果使用事件委托的方式 以后的頁面不會出現問題// 第二個參數 表示的是后代的選擇器// 事件委托（代理） 很重要 如果未來 出現 未來添加的元素 優先考慮事件委托 $('ul').on('click','#a',function () {alert(this.innerText);});// $('ul li').click(function () {// alert(this.innerText);// }); $('ul').append('<li><a href="javascript:void(0);">wusir</a></li>');})</script> </body> </html>語法:
on(type,selector,data,fn);在選定的元素上綁定一個或多個事件處理函數
events(?String) :?一個或多個空格分隔的事件類型 selector(?String) :?一個選擇器字符串，用于過濾出被選中的元素中能觸發事件的后代元素 data:?當一個事件被觸發時，要傳遞給事件處理函數的event.data。 fn:回調函數轉載于:https://www.cnblogs.com/chenxi67/p/9755667.html
總結
以上是生活随笔為你收集整理的jQuery的位置信息和事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cocoapos错误信息
- 下一篇： 题解-bzoj4221 JOI2012k