|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章將分享的是有關jQuery中事件綁定的方法bind(),有一定的參考價值,希望對大家學習有所幫助jQuery處理事件最重要的兩種方法就是事件綁定bind()方法和事件移除unbind()方法,就是將代碼添加到一組元素上的一個或者多個事件中,今天將詳細的介紹bind()方法的使用 bind()方法 bind() 方法就是為被選元素添加一個或多個事件處理程序,并規定事件發生時運行的函數。 $(selector).bind(event,data,function) event :規定添加到元素的一個或多個事件,可用空格分隔多個事件而且必須是有效的事件。 data :指傳遞到函數的額外數據。 function :指當事件發生時運行的函數 例 <a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){//入口函數
$("a").bind("click", function() {
alert($(this).text());
});
});結果
當點擊a鏈接時,由于a鏈接綁定了事件click,所以點擊時會彈出一個框顯示內容,jQuery會自動將單擊的元素分配給匿名函數內的“this”關鍵字,允許訪問激活元素的元素,同時可以觸發多個事件 <div id="div" style="background-color:pink;width:100px;height:100px;"></div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$("#div").bind("mousemove", function(event){
$(this).text(event.pageX + "," + event.pageY);});結果
我們創建一個長和寬都為100px,粉色的一個div元素。對于這個div,我們使用帶有名為“event”的參數的匿名函數綁定mousemove事件,當鼠標滑過時我們可以訪問到pageX和pageY屬性,告訴我們鼠標光標當前在頁面的哪個位置,顯示在盒子的左上角。將光標移動到div元素不同的地方上,將可以看到不同的值更新顯示 bind()方法還可以通過data傳入自己的數據并讓事件對象訪問它,也可以在綁定事件時設置值,并且能夠在調用事件時讀取此值 <a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
var text = "Hello, world!";
$(function(){
$("a").bind("click", {message:text},function(event) {
text = "hello";
console.log(event.data.message);
});});
</script>
</script>結果
我們將值作為bind()方法的輔助參數傳遞,作為鍵和值的映射,通過用逗號分隔它們來傳遞多個值。我們使用事件對象的data屬性。此屬性包含已傳遞的每個值的子屬性,這意味著您可以使用event.data.message訪問message參數的值。 雖然在事件處理程序中更改了“text”變量的值,但程序運行結果還是“Hello,world!” 總結:以上就是本篇文章的內容了,希望對大家學習jQuery事件綁定有所幫助。 以上就是jQuery中bind()方法如何使用的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!