jQuery中的時間和動畫

時間 2020-01-05

標籤 jquery 時間動畫欄目 JQuery 简体版

原文原文鏈接

一、加載DOM：以瀏覽器加載文檔爲例，在頁面加載完成後，瀏覽器會經過JavaScript爲DOM事件添加事件，在jQuery紅使用$(document).ready()方法；javascript

二、執行時機：jQuery中的$(document).ready()方法註冊的事件處理程序在DOM徹底就緒時就能夠被調用；html

三、jQuery中的$(document).ready()方法註冊的事件，只要DOM徹底就緒時就會被調用；java

四、避免方法：爲onload事件綁定一個處理函數瀏覽器

$(window).load(function() {
    //編寫代碼
}

五、屢次使用：app

function one() {
    alert("one");
}
function two() {
    alert("two");
}

$(document).ready(function() {
    one();
})
$(document).ready(function() {
    two();
}

六、簡寫方式：$(doxument)能夠簡寫成$()。由於當$()沒有參數時，默認參數就是「document」；ide

七、事件綁定：在文檔加載完成後，若是打算爲元素綁定事件來完成某些操做，可使用bind()方法來對匹配元素來進行特定事件的綁定；函數

八、bind()有3個參數：（1）事件類型，可使自定義名稱；（2）可選參數，做爲event.data屬性值傳遞給事件對象的額外數據對象；（3）用來綁定的處理函數；this

九、基本效果：spa

HTML代碼：
<div id="panel">
    <h5 class="head">什麼是jQuery？</h5>
    <div class="content">
      jQuery是一個優秀的JavaScript庫。
    </div>
</div>


javascript代碼：
$(function() {
    $("#panel h5.head").bind("click", function() {
         $(this).next().show();
    })
})

十、增強效果：code

$(function() {
   $("#panel h5.head").bind("click", function() {
       var $content = $(this).next();
       if($content.is(":visible")) {
           $content.hide();
       } else {
            $content.show();
       }
   })
})

十一、改變綁定事件的類型：

$(function() {
    $("#panel h5.head").bind("mouseover", function() {
        $(this).next().show();
    }).bind("mouseover", function() {
        $(this).next().hide();
    })
})

十二、簡寫綁定時間：

$(function() {
    $("#panel h5.head").mouseover(function() {
        $(this).next().show();
    }).mouseover(function() {
        $(this).next().hide();
    })
})

1三、合成事件：有兩個，hover()方法和toggle()方法；

1四、hover()方法：

$(function() {
    $("#panel h5.head").hover(function() {
        $(this).next().show();
    }.function() {
        $(this).next().hide();
    })
})

1五、toogle方法：

$(function() {
    $("#panel h5.head").toggle(function() {
       $(this).next().show();
    }.function() {
       $(this).next().hide();
    })
});

1六、再次增強事件：

$(function() {
$("#panel h5.head").toggle(function() {
$(this).addClass("highligt");
$(this).next().show();
}.function() {
$(this).removeClass("highhligt");
$(this).next().hide();
});
});

1七、事件冒泡：在頁面上能夠有多個事件，也能夠多個元素響應通一個事件：

HTML代碼：
<body>
<div id="content">
外層div元素
<span>內層span元素</span>
外層div元素
</div>
<div id="msg"></div>
</body>




JavaScript代碼：
$(function() {
	$('span').bind("click", function() {
		var txt = $('#msg').html() + "<p>內層span元素被單擊.</p>";
		$('#msg').html(txt);
	})
    $('#content').bind("click", function() {
		var txt = $('#msg').html() + "<p>外層div元素被單擊.</p>";
		$('#msg').html(txt);
	})
	$("body").bind("click", function() {
		var txt = $('#msg').html() + "<p>body元素被單擊</p>.";
		$('#msg').html(txt);
	});
})

1八、事件冒泡引起的問題：原本只想觸發最內層元素的click事件，而後這個元素外層的元素也會被觸發；

1九、觸發自定義事件：

爲元素綁定一個「myClick」事件：
$('#btn').bind("myClick", function() {
$(‘#test’).append("<p>個人自定義事件.</p>");
})


想要觸發：
$('#btn').trigger("myClick")

20、hide()方法：爲一個元素調用hide()方法，會將該元素的display樣式改成"none"；

2一、當調用show()方法時，就會根據hide()方法記住display屬性值來顯示元素；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。