jquery使用者自訂選取器及選取器進階用法實驗

jquery使用者自訂選取器及選取器進階用法實驗
//使用者自訂選取器

$(function(){
// Define custom filter by extending $.expr[":"]
$.expr[":"].greenbg = function(element) {
return $(element).css("background-color") === "rgb(0, 128, 0)";
};
var n = $(":greenbg").length;
console.log("There are " + n + " green divs");
});

 

 
 
 

 

 

------------------------------------------------------------jquery 選取器---------------------------------------------------

/屬性選取器
$("[attributeName='string2match']");
$("[attributeName^='str']");//匹配str開頭所有元素
$("[attributeName$='str']");//匹配str結尾所有元素
$("[attributeName*='str']");//包含str所有元素
$("[attributeName~='str']");//包含str所有元素(包含空格隔開的，如：xxx


str)
//複式屬性選取器
var n = $("form[name$='Office1']form[name^='admin']").length;


//位置選取器
$("li:even") //返回偶數成員值,0也是偶數
li:odd //奇數
li:first //第一個元素
li:last //最後一個
li:eq(3) //返回第四個
li:gt(2)//返回匹配集合索引大於2的所有元素
li:lt(3)//小於3


//過濾選取器
:animated //選擇當前正在執行動畫所有元素
:header //選擇所有標題元素 如：h1,h2,h3
:not //選擇與選取器不匹配元素




//過濾表單元素
$(function(){
var n1 = $("input").length;//xuaninput的所有元素
var n2 = $(":input").length;//包含dom


(input,textarea,select,button)所有元素
var n3 = $("form > *").length;//表單內所有元素
var n4 = $(":text").length;//屬性為text所有
var n5 = $("input[type='text']").length;//屬性為text所有
console.log(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5);
});

 

//可見度過濾器
jquery根據元素offsetWidth\offsetHeight屬性判斷一個元素是否可見
如果這個2個屬性都為0，jquery認為該元素是隱藏，
元素樣式為display:block,display:none jquery檢測這些
$(function(){
var numInv = $(":text:hidden").length; //所有隱藏
var numVis = $(":text:visible").length;//所有可見
console.log(numInv);//1
console.log(numVis);//1
});





//內容過濾器
:contains()
$(function(){
var jennies = $(" p:contains('jenny')").length;="" console.log(jennies);="" returns="" 2});

jenny smith

jennyjones

jim bob

//：has()
$(function(){
var jennies = $("p:contains('jenny')").length;
console.log(jennies); // returns 2
var hasdoemo = $("div:has('p')").attr("id");//在該元素的後代元素


中至少包含一個與指定的選取器匹配的元素
console.log(hasdoemo); //lt
});

jenny smith

jennyjones

jim bob

afdfd




//不包含任何內容 :empty()
$(function(){
var nothing = $("p:empty").length;
console.log(nothing); //returns 1
});
div>

 

something here

//:parent() 選擇具有子項目的元素

$(function(){
console.log($("div:parent").attr("id"));//gt
});

afdfd

jenny smith

jennyjones

jim bob

////根據關係進行過濾
<script>
$(function(){
console.log( $("div span:first-child") ) // 選擇每個父元素第一個
//[span#turkey, span#bear, span#martian]
console.log( $("div span:last-child") ) // 選擇每個父元素最後


一個
//[span#hawk, span#horse, span#martian]
console.log( $("div span:only-child") ) // 選擇每個父元素只有


唯一
//[span#martian]
console.log( $("div span:nth-child(2)") ) //每個父元素第n個
//[span#chicken, span#rabbit]
console.log( $("div span:nth-child(2n+1)") ) //n=0.....n
//[span#turkey, span#parrot, span#hawk, span#bear, span#fox, span#horse,


span#martian]
console.log( $("div span:nth-child(even)") )
//[span#chicken, span#pigeon, span#rabbit, span#monkey]
});
</script>



Turkey
Chicken
Parrot
Pigeon
Hawk

bear
rabbit
fox
monkey
horse

martian