jQuery Selector選擇器小結

2021-09-02 03:36:45 字數 4854 閱讀 7319

//jquery 選擇器 $

//$(expression,[context]) return jquery

//unit one

//expression 之 css 定義符 就是以css語法表示所要選擇的元素

// $("*"); // 表示頁面所有元素標籤

// $("th, td") // 表示所有元素標籤

// $("a") // 表示所有元素標籤

// $("div#onlydiv"); // 表示css選擇中id=onlyidv的元素 $("#id")為全文件匹配

// $("#rating"); // 表示id=rating的元素

// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素

// $("#orderedlist li:last"); // 表示id=orderedlist 中li最後乙個元素

// $("#orderedlist li:first"); // 表示id=orderedlist 中li第乙個元素

// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(n)個元素 n為陣列下標

// $("button:only-child"); //表示 css選擇中的它為父容器唯一的元素

// $(".stuff:empty"); // 表示css選擇中的空元素

// $(".buttons:enabled"); // 表示css選擇中的正常啟用的元素

// $(".buttons:disabled"); // 表示css選擇中的非啟用元素

// $("input:checked"); // 表示css選擇中的選中的元素

// $("button:not(.not)"); // 表示css選擇中的去除not()中的元素

// $("button.not"); // 表示css選擇中的class=not的元素 $(".clss")為全文件匹配

// $("#orderedlist2 li"); // 表示id=orderedlist 所有子元素且包括所有子元素的子元素

// //alert($("#orderedlist ~ li").length);

// $("#orderedlist,.buttons,li"); //匹配 css選擇符的元素

//expression 之 根據元素屬性選擇

// alert($("button[@class]").length); // 表示有class屬性的元素

// alert($("button[@class=not").length); // 表示有class屬性且值等於not的元素

// alert($('button[@class^=not').length); // 表示有class屬性且值開頭匹配not的元素

// alert($('button[@class$=not').length); // 表示有class屬性且值結尾匹配not的元素

// alert($('button[@class*=not').length); // 表示有class屬性且值中匹配not的元素

//expression 之 xpath 過濾器 xpath語法來表示需要選擇的頁面元素

//$("ol[@id^='orderedlist']").find("li:contains('first')").each(function(i) );

// $(this).mouseout(function());

// });

//查詢ol標籤且屬性 id=orderedlist的所有元素,這裡有兩種寫法

//ol[@id='orderedlist'] 定位父元素 直接用each 迭代

//ol[@id='orderedlist']/* 所有父元素下的子元素 使用find('child- element').each()迭代

//unit two

///$( html, [ownerdocument]) return jquery

//這個函式允許傳入html元素文字,構造器會產生這個html文字所創造的jquery物件,這個物件可以是原本沒有的,也可是原本頁面上存在的

//也可以 將原本頁面元素取出追加

///$(elements) return jquery

//這個函式允許直接傳入dom

//$(callback) return jquery

//以下是selector一些說明

/* 基礎:

#id:根據物件的id屬性獲取物件。

element:匹配某一html標籤的所有物件

.class:根據物件的class屬性獲取物件

*:獲取所有的物件

selector1, selector2, selectorn:獲取多個選擇符的合集,不剔出重複項

層級選擇符:

ancestor descendant:這個選擇符就是空格,表示先找到第乙個選擇符的所有物件,然後在他的子孫節點中找到所有符合第二個選擇符的物件。

parent > child:這個選擇符就是大於號,表示先找到第乙個選擇符的所有物件,然後在他的子節點(不能是孫節點)中找到所有符合第二個選擇符的物件。

prev ~ siblings:這個選擇符就是~號,表示先找到第乙個選擇符的所有物件,然後找和他同級的以後所有節點裡面同時符合第二個選擇符的物件。

基礎過濾符:

:first:匹配多個物件中的第乙個物件

:last:匹配多個物件中的最後乙個物件

:not(selector):匹配去除了not後面選擇符中內容的項

:even:匹配所有物件中的第偶數個

:odd:匹配所有物件中的第奇數個

:eq(index):匹配某一下表的單獨某元素

:gt(index):匹配大於某一下標的所有元素

:lt(index):匹配小於某一下標的所有元素

:header:匹配所有的header元素,例如 h1,h2,h3,h4,h5,h6

:animated:匹配所有有動畫效果的元素

文字過濾符:

:contains(text):匹配內部擁有該文字元素的物件,包含間接有用的情況

:empty:匹配所有沒有子元素的物件

:has(selector):匹配所有至少含有乙個子選擇符的物件

:parent:匹配所有的父物件,父物件包含那些只含有文字的物件

可見性過濾符:

:hidden:匹配所有隱藏物件,或者input中的hidden型別

:visible:匹配所有可見的物件

屬性過濾符:

[attribute]:匹配擁有某一屬性的所有物件

[attribute=value]:匹配擁有某一屬性和值的物件

[attribute!=value]:匹配擁有某一屬性,且不是某一值的物件

[attribute^=value]:匹配擁有某一屬性,且以某一值開頭的物件

[attribute$=value]:匹配擁有某一屬性,且以某一值結尾的物件

[attribute*=value]:匹配擁有某一屬性,且包含某一值的物件

[selector1] [selector2][selectorn]:匹配同時符合多個屬性選擇符的物件

子過濾符:

:nth- child(index/even/odd/equation):匹配子元素中的某一下標/偶數/奇數/等式的物件,:eq(index)只能匹配某單一物件的子元素特徵,而這個方法可以匹配多個物件的某一子元素共同特徵

:first-child:匹配第乙個子元素

:last- child:匹配最後乙個子元素

這兩個匹配符也可以對多個父物件的所有子元素進行匹配操作

:only-child:如果乙個父元素只有乙個子元素,就匹配這個子元素

表單過濾符

name type

:input returns: array

匹配表單內input元素

:text returns: array

匹配表單內 input type為text的元素

:password returns: array

匹配表單內input type為password的元素

:radio returns: array

匹配表單內input type為radio的元素

:checkbox returns: array

匹配表單內input type為checkbox的元素

:submit returns: array

匹配表單內input type為submit的元素

:image returns: array

匹配表單內image的元素

:reset returns: array

匹配表單內 input type為reset的元素

:button returns: array

匹配表單內input type為button的元素

:file returns: array

匹配表單內input type為file的元素.

:hidden returns: array

匹配表單內input type為hidden的元素或者hidden區域

:enabled returns: array

匹配所有啟用元素

:disabled returns: array

匹配所有非啟用元素

:checked returns: array

匹配所有選中元素

:selected returns: array

匹配所有下拉列表選中元素

選羊選車問題

有三個門,兩個羊乙個車。嘉賓選擇乙個門後,主持人開啟另外兩個門中的乙個,門裡是羊。嘉賓改選或者不改選。門後有車就中大獎。否則什麼都沒有。記得當年做這個題目的時候就與小李子和瘋子爭論的不休。當時時至今日仍然不能完全確定這是個概率問題。其實這個不完全是概率問題 因為概率中只是考慮了出現結果的可能性。但是...

九選六 九選三

駕照考試的一種方法,九選六 九個科目必須選六個科目參加考試。九選三 九個科目必須選三個科目參加考試 1 百公尺加減擋 考試目的 考核駕駛人對車輛擋位的熟練掌握。考試要求 車輛由百公尺起點線處起步,在百公尺內完成從最低擋逐級到最高擋的加速,以及再從最高擋逐級到二擋的減速過程。2 起伏路駕駛 考試目的 ...

TYVJ1579(選選位址)

演算法 最短路 其實這道題就是一道簡單的最短路 列舉,用floyd求出每兩個點之間的距離,最後列舉一遍設定城市的點,選乙個最小值即可。不知道當時考試的時候為什麼錯了 難道是沒開無向圖?program p1579 const maxn 200 var n,min,p longint a array 0...