jQuery的屬性及簡單的使用

一、屬性選擇器

1、title 獲取屬性

//在使用$( )函式時,如果是獲取標籤,必須使用" "(雙引號)引起來,如果是DOM或者變數都不需要使用" "
//title是屬性標籤
$("[title]");//獲取屬性是title屬性的標籤;
$("a[title]");//標籤選擇器和屬性選擇器的組合;獲取a標籤的title屬性;
$("[title!=img]")};//選中title屬性不是img這個值,也包括沒有title屬性的元素;

2、class選擇器

$("[class^=div]");//獲取class名為div開頭的
$("[class^='div']");//與上面相同的用途;

$("[class$="0"]");//class的值是以0結尾的元素;
$("[class|=lis]");//選中class的值是lis或者值是以lis起頭並且後面緊跟-的元素;(如:lis-1;lis-2;lis-8);
$("[class~=bn]");//選中class的類組中包含bn這個類的,也就是說這個類名可能前後有空格;(如:class="bn bn1";class="bn2 bn bn4")

$("[title]''[class][class!=lis]");//多項屬性選擇器;
 

二、篩選器

偽類選擇器其實就是篩選器

$("li:first").text("a");//第一個li的文字是"a";
$("li:last").text("a");//最後一個li;
$(".div0:fist");//獲取第一個class名是div0的屬性;
**//$(".div0:first-of-type");//first-of-child是不支援class名的;**
$("div:first");第一個div元素;
$("div:first-child");//這個必須存在父元素,表示div的第一個子元素;
$(".div0first-child");//這個支援的;表示class名為div0的第一個子元素;

//按奇偶選擇(從序列0開始計算)
$("li:even");//列表中偶數序列;
$("li:odd");//列表中奇數序列;

//按索引選擇
$("li:eq(1)");//列表中索引值所對應的元素;
$("li:gt(2)");//從列表中索引值是2的向下所有的元素;
$("li:lt(2)");//從列表中索引值是2的向上所有的元素;

$(":header");//h1-h6的元素;
$(":animated");//動畫選擇器;
$(":focus");//彙集焦距選擇器;

$("li").eq(0);// ==  $("li:eq(0)");
$("li").first()//  == $("li:first");
$("li").last();//  == $("li:last");
$("li").not(["[class~=div0]"]);// == $("li:not([class~=div0])")

//內容過濾器
$("div:empty");//過濾div是空元素;不含有子元素和內容元素div他的子項中有class是.div0;
$("div:has(.div0)");//找的是父元素,如果某個元素有div0這個class,就會找到他的所有父級元素與$("div:empty")相反;
$("div:parent");//過濾div中是不是空元素的,含有子元素和內容的元素;
$("div").has(".div0");// === $("div:has(.div0)");// 前者效率高;

$("sapn").parent();//僅找到當前選擇器的父元素;
$("span").parents();//找到所有父元素;
$("span"),parentsUntil("body");//找到父級元素到某個父元素的所有元素;

$("div:contains('2')");
$("div").contains("2");

//主要是針對display:none來使用
$("div:hidden");//隱藏的元素;
$("div:visible");//顯示的元素;
$("li:only-child");//當前項僅為父元素的唯一子項;
$("li:nth-child(2)");//有父元素的li列表中的第2個元素;
$("li:nth-child(even)");//從1開始的偶數項;
$("li:even");//這個是從0開始偶數項;
$("li:nth-child(odd)");//從1開始的奇數項;
$("li:nth-child(3n)");//三的倍數;
$("li:nth-child(2n-1)");//單數

$("li").is(".li0");//判斷列表中有沒有class是.li0的元素，返回結果是true/false;
$("li").is("#lis");//判斷列表中有沒有id是lis的元素;
$("li").hasClass("li0");//判斷當前列表中有沒有class是.li0，只能判斷class，函式中不使用.來說明class名;
$("li").slice(2,5);//從jQuery列表中擷取對應的元素
 

三、text、html、value

1、text

$("div").text("aaa");//給所有的jQuery物件都寫入aaa的字元;
$("div").text();//獲取所有的div中字元;

$("div").each(function (index,elem) {
          console.log(index,elem,this);
          //這裡的this是該DOM物件
      })

2、html

$("div").html("<a href='#'>內容</a>");
console.log($("div").html());//這裡僅獲取第一個html內容;

$.each(arr1,function (index,item) {
            $("div").eq(index).html("<a href='"+item.href+"'>"+item.name+"</a>")
        })//多個div中新增a標籤和陣列中的資料;
 

3、value

$("input").val("aaa");//輸入框中含有預設值"aaa"
console.log($("input").val());//獲取input的value;