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