1. 程式人生 > >web前端基礎筆記5JQuery(下)

web前端基礎筆記5JQuery(下)

屬性的操作:val、text、html

方法名描述

val()獲得表單元素value屬性的值。

val("設定的值")給表單元素的value屬性設定值。

html()獲得元素的html程式碼,如果有標籤,一併獲得。

html("設定的值")設定元素的html程式碼,如果有標籤,將進行解析。

text()獲得元素的文字,如果有標籤,忽略。

text("設定的值")設定文字,如果含有標籤,不進行解析。原樣輸出。

遍歷函式:each

原始方式遍歷

跟普通JS迴圈一樣,使用普通的for迴圈,因為每個JQ物件都有一個length屬性或者size()方法。

語法結構:

for (var i = 0; i < $ele.length或者size(); i++) {

使用獲取的標籤[索引]操作標籤的時候,這裡獲取的標籤[索引]屬於原生dom,

還不能直接使用jQuery中的方法,要想使用,必須使用$()包起來。

}

JQ物件的方法 (重點)

此方式是jquery特有的遍歷方式,使用JQ物件呼叫each方法即可遍歷。

語法結構:

$ele.each(function(index,element) {

this

});

each方法接收一個回撥函式

回撥函式引數:

index  :  遍歷的索引(下標)

element:  遍歷的當前的物件

文件的處理:內部插入

方法名例子

A.append(B)<A>

A.prepend(B)....

用法:<B></B>

A裡面最後面放B

</A>

A.prepend(B)<A>

B.prependTo(A) <B></B>

用法:....

A裡面最前面放B</A>

文件的處理:外部插入

方法名例子

A.after(B)<A></A>

A.insertBefore(B)<B></B>

用法:

A後面放B

A.before(B)<B></B>

A.insertAfter(B)<A></A>

用法:

B後面放A

jQuery其它的方法

元素的建立

語法結構:

$('完整的標籤');

例如: $('<li>…</li>');

樣式的操作:css

語法結構:

$ele.css(樣式名);          獲取指定標籤的指定樣式 

$ele.css(樣式名,樣式值);   給指定標籤設定一個樣式 

$ele.css({樣式名1:值1,樣式名2:值2}); 給指定標籤設定多個樣式 

元素的刪除、清空: remove、empty

語法結構:

$ele.remove(); 刪除指定的元素

$ele.empty();   清空指定元素的內容,標籤保留

常見的事件

語法格式:

$ele.事件名(function() {

});

注意:事件名需要把原生JS的事件的“on”去掉

例如:oDiv.onclick = function() {…};  ->  $div.click(function(){…});

事件的繫結與解繫結

原生JS裡面的方法繫結與解繫結:

oBtn.onclick = function() {

console.log('綁定了方法');

};

// 將按鈕的點選事件解除

oBtn.onclick = null;

</script>

</body>

jQuery裡面另一種的方式的事件的繫結與解繫結:

事件的繫結

語法結構:

jQuery物件.bind(事件型別,響應函式);

例如:

繫結一個事件:

$("btn").bind("click", function(){ … });

繫結多個事件:

$("btn").bind({

click:function(){ … },

mouseover:function(){ … }, 

mouseout:function(){ … } 

});

說明:繫結多個事件使用json格式進行繫結。

事件的解繫結

語法結構:

jQuery物件.unbind([事件型別]);中括號表示可寫可不寫。不寫表示解綁所有的事件。書寫就是解除某個事件。

例如:

解綁所有事件:

$("btn").unbind();

解綁指定事件:

$("btn").unbind(“click”);或者   $("btn").unbind(“click mouseout”);

解除多個繫結事件格式:jq物件.unbind("事件1 事件2 ....");

校驗外掛

語法格式:

$("form表單的選擇器").validate({

rules : {

   表單項name值:{

校驗規則

例如:

"username":{

required:true

  }

},

   表單項name值:{

校驗規則

},

... ...

},

messages : {

   表單項name值:{

錯誤提示資訊

例如:

"username":{

required:"使用者名稱不能是空"

  }

},

   表單項name值:{

錯誤提示資訊

},

... ...

}

});

說明:

jQuery Validate需要手動的宣告對哪個表單進行校驗,即需要手動呼叫validate()方法。

rules: 配置驗證規則(JSON結構)

裡面是具體的驗證規則(JSON結構),key是被驗證表單元素的name屬性的值,value是驗證規則 (也是json格式)

messages: 配置通過驗證規則不通過要顯示的提示資訊(JSON結構)

裡面是具體的錯誤資訊(JSON結構),key是被驗證表單元素的name屬性的值,value是提示資訊 (也是json格式)

高階:自定義校驗

如果預定義的校驗規則尚不能滿足需求的話可以進行自定義校驗規則,使用jQuery Validate 提供的方法$.validator.addMethod來完成自定義校驗規則。

語法結構:

$.validator.addMethod(“name” , method , [message]);

引數1:name,  校驗規則的名稱。例如:required,pwdFormat等

引數2:method,執行校驗時使用的處理函式。該函式返回true表示校驗通過,返回false表示校驗未通過。

function(value , element , params ){} ,處理函式被呼叫時,可以獲得3個引數。

引數value:   表單項的value值。例如:<input value="aaa">

引數element:被校驗的表單項物件。

引數params: 使用當前校驗規則傳遞的值。例如:rules : { username : {required : true} },這裡params接收的就是true這個值。

引數3:message,校驗未通過時的提示的資訊。注意:引數可以不用寫,不寫可以在messages裡面配置![]表示可寫可不寫