jquery的經常使用操做（操做html頁面的Dom對象的元素）

時間 2019-12-01

標籤 jquery 經常使用 html 頁面 dom 對象元素欄目 JQuery 简体版

原文原文鏈接

一：頁面加載完成時，會執行jquery的方法（不須要等待圖片加載完成，只要dom結構加載完成，就執行該方法）html

//第一種寫法：
$(document).ready(function() {

   // 執行體

});



//第二種寫法

$(function() {

    //執行體
});

View Code

二：用jquery獲取dom對象，判斷該對象是否有內容的兩種方法（有返回true，沒有返回false）java

jqObj.text().trim()

var jqObj = $(this);
if(jqObj.text().trim()){ //trim()方法是去空格，$.trim()函數刪除提供字符串的全部換行符,空格（包括非中斷空格），開始和結束tab。若是這些空白字符在字符串中間發生時，它們將被保留。
jqObj.hide();
} 


//判斷獲取的dom元素對象下是否有某個元素

var jqObj = $(this);
if(!jqObj.has('li').length){
jqObj.hide();
}

View Code

三事件機制jquery

 1 事件機制
 2 　　我大量使用的事件可能就是button的onclick了。之前習慣在input 元素上寫onclick = "fn()",使用jquery能夠使javascrīpt代碼與html代碼分離，保持HTML的清潔，還能夠很輕鬆地綁定事件，甚至你能夠不知道「事件」這個名詞。
 3 　　代碼
 4 　　$(document).ready(function(){
 5 　　$("#clear").click(
 6 　　function(){
 7 　　alert("i am about to clear the table");
 8 　　}
 9 　　);
10 　　$("form[12]").submit(validate);
11 　　});
12 　　function validate(){
13 　　//do some form validation
14 　　}

View Code

三代替body標籤的onload事件dom

代替body標籤的onload
　　這個慣例，也許是除了$()以外，用得最多的地方了。下面一段代碼：
　　代碼
　　$(document).ready(function(){
　　alert("hello");
　　});(1)
　　<body onload="alert('hello');">（2）

　　上面兩段代碼是等價的。但代碼1的好處是作到表現和邏輯分離。而且能夠在不一樣的js文件中作相同的操做，即$(document).ready (fn)能夠在一個頁面中重複出現，而不會衝突。

基本上Jquery的不少plugin都是利用這個特性，正由於這個特性，多個plugin共同使用起來，在初始化時不會發生衝突。
　　無論怎麼說，這個慣例能夠分離javascrīpt與HTML。推薦使用。
　　別誤導，上面兩段代碼不是等價的。
　　<body onload="alert('hello');">這裏的alert('hello');要等到頁面所有加載完畢才執行，注意是所有加載，包括dom,圖片等其它資源。
　　而$(document).ready(function(){
　　alert("hello");
　　});(1)
　　當dom加載完就能夠執行了。

View Code