1. 程式人生 > >jquery如何給物件動態新增屬性以及選擇器、事件的繫結

jquery如何給物件動態新增屬性以及選擇器、事件的繫結

在工作用要用到給jd物件動態新增屬性的要求,在網上找到了一種解決方式,例項如下:

1、demo

var aa="maker";
var bb=123;
var lists={};
eval("lists."+aa+"="+bb);
eval('('+"lists."+aa+"="+bb+')');
console.log(lists);
這種方式試過確實可以

2、專案中使用

$("#saveform").on("click",function(){
		var param={};
		//bz訂單號
		var bzorderid=$("#bzorderid").val();
		//獲取所有產品
		$("#allsk .sk td input").each(function(){
			var id=this.id;
			var name=this.name;
			var val=$("#"+id).val();
			//動態新增屬性、賦值
			eval("param."+name+"="+val)
		});
		}

遍歷input獲取值,js物件動態新增屬性和屬性值。

3、使用[] 獲取js物件的變數屬性值和給變數屬性賦值

success:function(data){
				var $data = data;
				var len = $data.length;
				for(var i=0;i<len;i++) {
					var $obj = $data[i];
					var date =$obj.dateStr;
					var times = $obj[date];//$obj物件的屬性是一個變數即date的值
					dateTime[date]=times; //給dateTime物件的變數屬性賦值
				}
				}
其中的$obj[date] 就是獲取$obj物件的date的值的屬性的值而date的值在這裡就是年份如:2017-03-30,所以可以使用[]來獲取動態的值和動態賦值!

jquery選擇器

一、基本選擇器

 基本選擇器是jquery中最常用的選擇器,也是最簡單的選擇器他是通過id、class和標籤名來查詢DOM中的元素的!

1、按照id進行選擇

$(“#ids”)其中的ids是一個標籤的id值而$(#ids“”)就是滿足條件的那個標籤!

2、按照class進行選擇

$(".myclass")其中的myclass就是class="myclass"的值,而$(".myclass")就是獲取類為myclass的所有標籤,有可能是一個標籤有可能是多個標籤即一個數組!

3、按照標籤名稱進行選擇

$("div") 就是選擇所有的div標籤。

這三個就是基本的選擇了,當然我們可以去組合他們實現複雜的選擇如:

$("div ul li.myclass")選擇div 下的ul下的li並且class=".myclass"的標籤

$("div.myclass ul li.myclass") 選擇div下的class=".myclass"下的ul下的li並且class=".myclass"

$("#one").css("background","#bbffaa"); 設定id為one的元素的標籤的背景顏色!

$("div.min").css("background","#bbffaa");設定所有class="min"的div標籤的顏色!

注意:在選擇器中有沒有空格是區別很大的所以要注意,如果兩個或多個之間是使用“”隔開的則說明是多個而如果是空格隔開的則說明是子集而如果沒有空格則說明是同一級的!

二、層次選擇器

如果想通過DOM元素之間的層次關係來獲取特定元素,列如後臺元素,子元素,相鄰元素和兄弟元素等,則通過層次選擇器就是一個很好的選擇!

1、$("div span"):選擇<div>中的所有<span>元素也就是隻要在div中的span則都會被選出來,比如span中套span的都會選出來!

2、$("div>span"):選擇<div>中的所有子<span>元素,這種選擇是隻選擇子集元素而不會向上面一樣吧所有的都選出來@

3、$("div + div"):選擇和當前div緊挨的下一個div元素即他們是兄弟元素!

4、$("div~div"):選擇當前div之後的所有兄弟元素!

三、簡單過濾選擇器

1、$("div :first"): 選擇所有<div>中的第一個<div>元素

2、$("div :last"): 選擇所有<div>中的最後一個<div>元素

3、$("div :not(select)");其中的select是一個選擇條件比如 $("div :not(.myclass)") 選擇所有class不是myclass的div元素!

4、$("input :even");選擇索引是偶數的

5、$("input :odd");選擇索引是基數的

6、$("input :eq(1)");選擇索引是1的input元素,注意這裡的索引和屬組集合一樣都是從o開始的!

7、$("input :gt(1)");選擇索引值大於1的input元素注意不包含1

8、$("input :lt(1)");選擇索引值小於1的input元素注意不包含1

四、內容過濾選擇器

1、$("div:contains('mytest')");選擇含有mytest的文字的div元素

2、$("div:empty");選擇不包含元素,文件的<div>元素

3、$("div:has(p)");選擇含有<p>標籤的<div>元素

4、$("div:parent");選擇含有子元素或者文字的元素

五、屬性過濾選擇器

以標籤的屬性為條件進行選擇,可以使用jquery提供的屬性過濾選擇器進行選擇!

1、$("div[id]"),$("div[title]")選擇擁有屬性id的元素,選擇擁有屬性title的元素!

2、$("div[title=mytitle]");選擇屬性title="mytitle"的div元素!

3、$("div[title !=mytitle]");選擇屬性title不是mytitle的的div元素!

4、$("div[title ^=mytitle]");選擇屬性title以mytitle開始的元素!

5、$("div[title $=mytitle]");選擇屬性title以mytitle結束的元素!

6、$("div[id=myid][title=mytitle][name=myname]");選取id為myid、title為mytitle和name=myname的div元素

7、$("div[title *=mytitle]");選取title中含有mytitle的div元素!

六、表單物件選擇器

1、$("input:checked");選取所有被選中的input元素;

2、$("select:selected");選取所有被選中的元素;

3、demo

(1)、var  $arr = $(input[name=myname]:checked);獲取名稱為myname的被選中的元素!

(2)、var $arr = $(input[name=myname:checkbox:checked]);獲取名稱為myname的多選框的被選中的元素!

(3)、var $arr = $(input[name=myname][type=checkbox]:checked);獲取名稱為myname的多選框的被選中的元素!

七、選擇器中的特殊字元

1、特殊字元有: ".","#","(","["等都是特殊字元需要使用轉義字元轉義即 \\#\myid 就是id="myid"的意思!

八、jquery的class的增刪查

1、attr()和addClass()的區別;

attr()給標籤新增類

$(p).attr("class","high");

$(p).attr("class","another");

最後的<p>標籤: <p class="another">text</p>

$(p).addClass("high");

$(p).addClass("another");

最後的<p>標籤:<p class="high another">text</p>

通過這個demo就知道attr() 和addClass的區別,attr()會把之前的替換掉而addClass是累加!

2、刪除class即removeClass();

$(p).removeClass("high").removeClass("another"); //把兩個元素刪除了!

3、判斷是否有這個class即hasClass()

$(p).hasClass("high");

九、jquery事件的繫結

1、bind(type,[data],fun);

其中的type就是繫結的型別,其中的type有:blur、focus、load、scroll、unload、click、dbclick、mousedown、mousedown、mouseup、change、select、keydown、keypress、keyup等……

第二個引數data就是event.data屬性值

第三個引數fun為半丁的處理函式

2、on()方法:

on()方法和bind相似,比如我們常用的有 $("#myid").on("click",function(){ })

3、unbind([type]) 取消繫結的事件

$("#myid").unbind("click");  //取消這個id上繫結的click事件

4、one(type,[data],fun);方法

one()方法和on()、bind()方法是一樣的,只是one()只有一次起作用的,也就相當於bind繫結後做了一件事後立馬取消繫結!