您好,登錄后才能下訂單哦!
本篇內容介紹了“jQuery中的事件、動畫、表單的應用方式”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
頁面對不同訪問者的響應叫做事件。事件處理程序指的是當 HTML 中發(fā)生某些事件時所調用的方法。在事件中經(jīng)常使用術語 " 觸發(fā) " (或 " 激發(fā) " )常用click()方法觸發(fā)
$(document).ready() 方法與 window.onload () 方法的區(qū)別:
使用bind()方法為每個匹配元素的特定事件綁定事件處理函數(shù)。bind() 方法的調用格式: bind(type,[data], fn )
? type: 含有一個或多個事件類型的字符串,由空格分隔多個事件。比如 "click" 或 "submit" ,還可以是自定義事件名。
? data: 作為 event.data 屬性值傳遞給事件對象的額外數(shù)據(jù)對象
? fn : 綁定到每個匹配元素的事件上面的處理函數(shù)
實例:
//事件綁定 $("#btn1").bind("click",function(){ alert("點我觸發(fā)bind函數(shù)"); }) <button id="btn1">點我觸發(fā)bind函數(shù)</button>
使用 jQuery 的 is()方法判斷元素是否可見,使用is()方法:
alert($("button").parent().is("body")); /* * $("#b1").is(":visible") 判斷id為d1的元素是否可見 * 可見返回true,不可見就返回false * * next($("#b1").is(":visible")); */ alert("#btn2").is(":visible"); $("#btn2").click(function(){ if($("#b1").is(":visible")){ //$(this).next().css(); $(this).next().hide(); }else{ $(this).next().show(); } })
合成事件-hover()
hover()模擬光標懸停事件. 當光標移動到元素上時, 會觸發(fā)指定的第一個函數(shù), 當光標移出這個元素時, 會觸發(fā)指定的第二個函數(shù)。
hover() 方法語法結構為: hover([over,]out)
? over: 鼠標移到元素上要觸發(fā)的函數(shù)
? out: 鼠標移出元素要觸發(fā)的函數(shù)
實例:
web前端開發(fā)學習Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享學習的方法和需要注意的小細節(jié),不停更新最新的教程和學習方法(詳細的前端項目實戰(zhàn)教學視頻) $(function(){ /* * 合成事件hover()方法的語法結構: * hover(enter,leave); * * */ $("#btn2").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }) }) <button id="btn1">點我觸發(fā)bind函數(shù)</button> <button id="btn2">隱藏或者顯示</button> <div id="b1" > <img src="img/log.jpg"/> </div>
合成事件-toggle(): 用于模擬鼠標連續(xù)單擊事件. 第一次單擊元素, 觸發(fā)指定的第一個函數(shù), 當再一次單擊同一個元素時, 則觸發(fā)指定的第二個函數(shù), 如果有更多個函數(shù), 則依次觸發(fā), 直到最后一個。
$(function(){ /* * 合成事件toggle()方法的語法結構: * toggle(f1,f2,f3,f4....); * * 有倆個功能: * 1:模擬連續(xù)點擊(自動點擊,不是你手動點擊); * 2.如果元素本身可見,則會自動隱藏,如果本身是隱藏的,則會自動顯示 * */ /* $("#btn1").toggle(function(){ alert("觸發(fā)toggle函數(shù)"); });*/ //帶倆個參數(shù)的toggle方法 $("#btn1").toggle(function(){ $("#btn1").css("color","turquoise"); //alert("觸發(fā)toggle函數(shù)"); },function(){ //alert("觸發(fā)toggle2函數(shù)") $("#btn1").css("background-color","deepskyblue"); }) })
在頁面上可以有多個事件,也可以多個元素響應同一個事件。
假設網(wǎng)頁上有兩個元素,其中一個嵌套在另一個元素里,并且都被綁定了 click 事件,同時 body 元素上也綁定了 click事件。
事件會按照 DOM 層次結構像水泡一樣不斷向上直至頂端
<style type="text/css"> #body1{ background-color: deepskyblue; } #div1{ background-color: white; } #span1{ background-color: yellow; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* *演示事件冒泡 * 當一個元素的本身和父類都綁定了相同事件時,它本身觸發(fā)該事件,則父類也會觸發(fā)該事件 * 解決方法:停止冒泡 * 方法1:本身return false; * 方法2:stopPropagation(); [event是事件對象] */ $("#body1").click(function(){ alert("body的click方法"); }) $("#div1").click(function(){ alert("div的click方法"); }) $("#span1").click(function(){ alert("span的click方法"); // return false; event.stopPropagation(); }) }) </script> </head> <body id="body1"> body <div id="div1"> div <span id="span1"> span </span> </div> </body> </html>
網(wǎng)頁中的元素有自己默認的行為,例如,單擊超鏈接后會跳轉、單擊提交按鈕后表單會提交,有時需要阻止元素的默認行為。
在 jQuery 中,提供了 preventDefault () 方法來阻止元素的默認行為。
實例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //阻止點擊之后跳轉 $("#a1").click(function(){ alert("你正在阻止a標簽的默認行為"); //return false; //方法一 event.preventDefault(); //方法二 }) /* * 寫一個登錄表單,設置如果用戶名不滿足正則表達式的要求,阻止請求服務 * 正則判斷是否滿足符合規(guī)則 * */ $(":submit").click(function(){ var na=$("#na").val(); var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; if(!uPattern.test(na)){ alert("你正在阻止a標簽的默認行為"); return false; } }) }) </script> </head> <body> <a href="http://baidu.com" id="a1">跳轉百度</a> <form action="http://baidu.com" method="post"> 用戶名<input type="text" id="na"/><br/> 密碼<input type="password" id="pa" /><br/> <button type="submit">登錄</button> </form> </body> </html>
事件對象: 當觸發(fā)事件時, 事件對象就被創(chuàng)建了. 在程序中使用事件只需要為函數(shù)添加一個參數(shù)
event.type : 獲取事件的類型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* * 事件對象:對事件對象的常用屬性進行封裝 * 1.event.type獲取事件的類型(也就是事件名稱) * 2\. event.preventDefault(); 阻止默認的事件行為 (在IE中無效) * 3\. event.stopPropagation() 阻止事件冒泡 * 4.event.target 獲取觸發(fā)事件的元素(獲取觸發(fā)的目標) * 5.event.pageX / event.pageY 獲取事件光標的X和Y的坐標 * 6.event.which 獲取鼠標的按鍵(左鍵返回1,中鍵返回2,右鍵返回3) */ $("#a1").click(function(){ //alert(event.pageX+","+event.pageY); alert(event.which); return false; }) }) </script> </head> <body> <a href="http://baidu.com" id="a1">查看事件對象的屬性</a> </body> </html>
在綁定事件的過程中,不僅可以為同一個元素綁定多個事件,也可以為多個元素綁定同一個事件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#btn1").one("click", function() { $("#test").append("<p>我的綁定函數(shù)1</p>"); }).one("click", function() { $("#test").append("<p>我的綁定函數(shù)2</p>"); }).one("click", function() { $("#test").append("<p>我的綁定函數(shù)3</p>"); }) }) </script> </head> <body> <button id="btn1">綁定函數(shù)</button> <div id="test"> </div> </body> </html>
one(): 該方法可以為元素綁定處理函數(shù). 當處理函數(shù)觸發(fā)一次后, 立即被刪除. 即在每個對象上, 事件處理函數(shù)只會被執(zhí)行一次.
on()與bind()的差別
jQuery從1.7+版本開始,提供了on()和off()進行事件處理函數(shù)的綁定和取消。
兩者的區(qū)別就在于是否支持selector這個參數(shù)值。如果使用on的時候,不設置selector,那么on與bind就沒有區(qū)別了。
隱藏和顯示元素-show()方法和hide()方法
hide(): 在HTML文檔中,為一個元素調用hide()方法會將該元素的display樣式改為 none,代碼功能同css("display", "none")。
show(): 把元素隱藏后,可以使用show ()方法將元素的 display 樣式改為先前的顯示狀態(tài)("block"或"inline"或其他除了"none"之外的值)。
$(function(){ $("div").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }) }) </script>
淡入和淡出-fadeIn()方法和fadeout()方法
fadeIn(), fadeOut(): 只改變元素的透明度. fadeOut()會在指定的一段時間內降低元素的不透明度,直到元素完全消失(“display:none”),fadeIn()則相反。
滑上和滑下-slideUp()方法和slideDown()方法
slideDown(),slideUp():只會改變元素的高度,如果一個元素的display屬性為 none,當調用slideDown()方法時,這個元素將由上至下延伸顯示,slideUp()方法正好相反,元素由下至上縮短隱藏。
使用animate()方法來自定義動畫,其語法結構為:
animate(params,[speed],[fn]) ?params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合,比如{property1:”value1”, property2:”value2”,..}
?speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如:1000)
fn:在動畫完成時執(zhí)行的函數(shù),每個元素執(zhí)行一次
toggle()方法可以切換元素的可見狀態(tài)。如果元素是可見的, 則切換為隱藏; 如果元素時隱藏的, 則切換為可見的。
toggle()會同時改變元素的高度、寬度和透明度
slideToggle()方法
slideToggle()方法通過高度變化來切換匹配元素的可見性。這個動畫效果只調整元素的高度。
fadeTo()方法
fadeTo()方法可以把元素的不透明度以漸近的方式調整到指定的值(0–1之間)。這個動畫只調整元素的不透明度,即匹配的元素的高度和寬度不會發(fā)生變化。
fadeToggle()方法
fadeToggle()方法通過不透明度變化來切換匹配元素的可見性。這個動畫效果只調整元素的不透明度
動畫方法說明:
屬性自定義動畫的方法,以上各種動畫方法實質內部都調用了animate()方法。此外,直接使用animate()方法還能自定義其他的樣式屬性,例如:“l(fā)eft”、”marginLeft”,”scrollTop”等
一個表單有3個基本組成部分:
?表單標簽:包含處理表單數(shù)據(jù)所用的服務器程序URL以及數(shù)據(jù)提交到服務器的方法。
?表單域:包含文本框、密碼框、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
?表單按鈕:包括提交按鈕、復位按鈕和一般按鈕,用于將數(shù)據(jù)傳送到服務器上或者取消傳送,還可以用來控制其他定義了處理腳本的處理工作。
attr()和prop()方法區(qū)別:
attr的返回值要么是checked要么是undefined,prop的返回值只有true和false。
prop()**函數(shù)的結果**:
1.如果有相應的屬性,返回指定屬性值。 2.如果沒有相應的屬性,返回值是空字符串。
attr**()函數(shù)的結果:**
1.如果有相應的屬性,返回指定屬性值。 2.如果沒有相應的屬性,返回值是undefined。
對于HTML元素本身就帶有的固有屬性,在處理時,使用prop方法。
對于HTML元素我們自己自定義的DOM屬性,在處理時,使用attr方法。
具有 true 和 false 兩個屬性的屬性,如 checked, selected 或者 disabled 使用prop()
“jQuery中的事件、動畫、表單的應用方式”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。