jquery常用語句總結

一.jquery中text val html attr的使用區別

html和innerHTMl是一樣的，可以獲得和設定指定元素如<p>中的html標籤和文字
如：
設定值：

$("p").html("<span style='font-size:13px;color:red'>HTML標籤+文字</span>");

獲得值：

$("p").html();

text和innerText是一樣的，可以獲得和設定文字
如：
設定值：

$("p").text("HTML標籤+文字");

獲得值：

$("p").text();

val和value在使用上有一定的區別，通常在獲取和設定文字框的值時，推薦使用val，比如文字框
如：

$("input").val("這是設定文字框的值");
$("input").val();//獲取文字框的值


//attr用來設定元素的各種屬性，比如
$("input").attr("value","admin");//給value屬性賦值，value通常是預定義值
$("input").attr("disable","true");//禁用文字框

注意value 屬性為 input 元素設定值。

對於不同的輸入型別，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文字
type="text", "password", "hidden" - 定義輸入欄位的初始值，對於設定或獲取文字框上的動態值，請使用$(xxx).val()和$(xxx).val(xxxx)方法
type="checkbox", "radio", "image" - 定義與輸入相關聯的值

注意<input type="checkbox"> 和 <input type="radio"> 中必須設定 value 屬性。

同時需要說明的是value 屬性無法與 <input type="file"> 一同使用。

二.獲取jquery物件的標籤型別

//jquery 物件

$("#"+控制元件id)[0]

//檢視控制元件型別
 $("#"+控制元件id)[0].type

例項1：
< select id="ddl" >
  < option >1< /option >
   < option >2< /option >
< / select>

$("#ddl")[0].type;// select-one

例項2：
< input type="text" id="txt" />
$("#txt")[0].type;//text

三.jQuery外掛開發

jQuery為開發外掛提拱了兩個方法，分別是：

jQuery.fn.extend(object); 給jQuery物件新增方法。
jQuery.extend(object); 為擴充套件jQuery類本身.為類新增新的方法。

1 jQuery.fn.extend(object);

fn 是什麼東西呢。檢視jQuery程式碼，就不難發現。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {//....　

//......

};

原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。雖然 javascript　沒有明確的類的概念，但是用類來理解它，會更方便。jQuery便是一個封裝得非常好的類，比如我們用語句　$("#btn1") 會生成一個 jQuery類的例項。

jQuery.fn.extend(object); 對jQuery.prototype進得擴充套件，就是為jQuery類新增“成員函式”。jQuery類的例項可以使用這個“成員函式”。

比如我們要開發一個外掛，做一個特殊的編輯框，當它被點選時，便alert 當前編輯框裡的內容。可以這麼做：

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());

});

});

$("#input1").alertWhileClick(); //頁面上為：<input id="input1" type="text"/>

$("#input1")　為一個jQuery例項，當它呼叫成員方法 alertWhileClick後，便實現了擴充套件，每次被點選時它會先彈出目前編輯裡的內容。

2 jQuery.extend(object);　

為jQuery類新增新增類方法，可以理解為新增靜態方法。如：

$.extend({

add:function(a,b){return a+b;}

});

便為jQuery新增一個為 add的“靜態方法”，之後便可以在引入jQuery的地方，使用這個方法了，如 $.add(3,4); //return 7

 四.jquery中繫結change事件方法：

//方法1.html標籤中像使用onClick()方法一樣使用onchange()方法

//方法2
$("#tagId").change(function(){
//...
});

//方法3
$("#tagId").on("change",function(){
//...
});

//觸發change事件
$("#tagId").trigger("change");

五.利用jquery的selector獲取標籤並移除

$("small[attr1=remote][attr2=cnNm]:first").remove();

如上程式碼，small為html標籤。含義為選取屬性鍵值為attr1=remote且attr2=cnNm的所有small標籤的第一個，將其remove掉。

六.編寫jquery外掛實現在js指令碼中獲取URL中的引數，類似於後臺request.getParameter("xxx")

(function ($) {
      $.getUrlParam = function (name) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if (r != null) return unescape(r[2]); return null;
      }
     })(jQuery);

使用示例：

var urlParam=$.getUrlParam('userName');

jquery常用語句總結

相關文章