jQuery Selector選擇器小結
2024-05-06 14:10:13
供稿：網友
//jQuery 選擇器 $
//$(expression,[context]) return jQuery
//Unit One
//expression 之 CSS 定義符 就是以CSS語法表示所要選擇的元素
// $("*"); // 表示頁面所有元素標簽
// $("th, td") // 表示所有<th><td>元素標簽
// $("a") // 表示所有<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).html( $(this).html() + " BAM! " + i );
// $(this).mouseover(function(){
// $(this).css("color","red");
// });
// $(this).mouseout(function(){
// $(this).css("color","#000");
// });
// });
//查找ol標簽且屬性 id=orderedlist的所有元素,這里有兩種寫法
//ol[@id='orderedlist'] 定位父元素 直接用each 迭代
//ol[@id='orderedlist']/* 所有父元素下的子元素 使用find('child- element').each()迭代
//Unit two
///$( html, [ownerDocument]) return jQuery
//這個函數允許傳入html元素文本,構造器會產生這個HTML文本所創造的jQuery對象,這個對象可以是原本沒有的,也可是原本頁面上存在的
//$('<p>hello</p>').appendTo("h2"); //生成一個標記文本 并追加到頁面h2標簽內
