選取
$("p")
選取 <p> 元素。
$("p.intro")
選取所有 class="intro" 的 <p> 元素。
$("p#demo")
選取所有 id="demo" 的 <p> 元素。
$("p#demo > ul")
選取 id=“demo” 的 <p> 元素下的所有直接子集 ul 元素。
$("p#demo ul")
選擇 id=“demo” 的所有 ul 子元素。
$("[href]")
選取所有帶有 href 屬性的元素。
$("[href='#']")
選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']")
選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']")
選取所有 href 值以 ".jpg" 結(jié)尾的元素。
:first $("p:first") 第一個(gè) <p> 元素
:last $("p:last") 最后一個(gè) <p> 元素
:even $("tr:even") 所有偶數(shù) <tr> 元素
:odd $("tr:odd") 所有奇數(shù) <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四個(gè)元素(index 從 0 開(kāi)始)
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 無(wú)子(元素)節(jié)點(diǎn)的所有元素
:hidden $("p:hidden") 所有隱藏的 <p> 元素
:visible $("table:visible") 所有可見(jiàn)的表格
:not(selector) $("input:not(:empty)") 所有不為空的 input 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被選取的 input 元素
:checked $(":checked") 所有被選中的 input 元素
(一)返回 CSS 屬性
如需返回指定的 CSS 屬性的值,請(qǐng)使用如下語(yǔ)法:
css(“CSS屬性名稱(chēng)”);
例如:
$(“#item”).css(“background-color”); 返回 id 是 item 的元素的背景顏色值;
需要注意的是獲取 css 屬性的操作是得到的符合選擇器條件的第一個(gè)元素的 css屬性值。
(二)設(shè)定 CSS 屬性
(1)如需設(shè)置指定元素的 單個(gè)CSS 屬性的值,請(qǐng)使用如下語(yǔ)法:
css(“CSS屬性名稱(chēng)”, “值“);
例如:
$(“td”).css(“background-color”, “yellow”); 設(shè)定 td元素的背景色為黃色;
(2)如需設(shè)置指定元素的 多個(gè)CSS 屬性的值,請(qǐng)使用如下語(yǔ)法:
css( {“CSS屬性1”: “值“, ”CSS屬性2”:“值2”});
例如:
$(“td”).css( {“background-color”:“yellow”,“color”: “red”} ); 設(shè)定 td元素的背景色為黃色,文字為紅色;
需要注意的是設(shè)置 css 屬性的操作會(huì)更改所有符合選擇器條件的元素的 css 值,但不會(huì)覆蓋 !important 屬性。
(三)特定的 CSS 操作
css() 設(shè)置或返回匹配元素的樣式屬性。
height() 設(shè)置或返回匹配元素的高度。
offset() 返回第一個(gè)匹配元素相對(duì)于文檔的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一個(gè)匹配元素相對(duì)于父元素的位置。
scrollLeft() 設(shè)置或返回匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移。
scrollTop() 設(shè)置或返回匹配元素相對(duì)滾動(dòng)條頂部的偏移。
width() 設(shè)置或返回匹配元素的寬度。
使用方式與其他 jQuery 方法相同,不帶參數(shù)時(shí)返回指定屬性的值,帶參數(shù)時(shí)設(shè)定指定屬性的值;
這些操作不會(huì)覆蓋由 !important 標(biāo)記過(guò)的值;
(四)css 的 class 屬性操作方法
addClass() 給指定元素(組)的 class屬性增加一個(gè)新值(如果已有該 class,不會(huì)重復(fù)添加)。
removeClass() 移除指定元素(組)的 class屬性中指定的值(如果該值不存在則直接返回)。
hasClass() 測(cè)試指定元素(組)的 class屬性中是否包含某一特定的值。
toggleClass() 給指定元素(組)的class屬性增加或刪除某一個(gè)類(lèi)(存在時(shí)刪除,不存在時(shí)添加)
jQuery 的 attr() 方法設(shè)置或返回被選元素的指定屬性的值;
(一)返回屬性
如需返回指定屬性的值,請(qǐng)使用如下語(yǔ)法:
attr(“屬性名稱(chēng)”);
例如:
$(“#item”).attr(“href”); 返回 id 是 item 的元素的 href 屬性的值;
需要注意的是屬性獲取操作是得到的符合選擇器條件的第一個(gè)元素的屬性值。
(二)設(shè)定屬性
(1)如需設(shè)置指定元素的單個(gè)屬性的值,請(qǐng)使用如下語(yǔ)法(屬性存在時(shí)替換,不存在時(shí)添加):
attr(“屬性名稱(chēng)”, “值“);
例如:
$(“td”).attr(“data-cid”, “m1”); 設(shè)定 td元素的data-cid 屬性的值為 m1;
(2)如需設(shè)置指定元素的 多個(gè)屬性的值,請(qǐng)使用如下語(yǔ)法:
attr( {“屬性1”: “值“ , ”屬性2”:“值2”});
例如:
$(“td”).attr( {“id”:“td1”,“data-cid”: “red”}); 設(shè)定 td元素的 id 為 td1, data-cid屬性為 red;
jQuery 的 removeAttr() 方法用來(lái)移除被選元素的指定屬性;
語(yǔ)法:
removeAttr(“屬性名稱(chēng)”);
當(dāng)指定的屬性不存在時(shí)直接返回;
相關(guān)標(biāo)簽: