jquery 選擇相鄰元素 jQuery學習

2021-10-18 16:55:40 字數 2397 閱讀 3762

不甘於「本該如此」,「多選引數 」值得關注

選擇器名稱

描述返回

例項#id

id選擇器

根據給定的id匹配乙個元素。

單個元素

$("#box");選取id為box元素

element

元素選擇器

根據給定的元素名匹配所有元素

集合元素

$("span");選取所有元素

.class

類選擇器

根據給定的類匹配元素。

集合元素

$(".box");選取所有類名為box元素

*萬用字元選擇器

匹配所有元素

集合元素

$("*");選取所有元素

selector1, selector2, selectorn

並集選擇器

將每乙個選擇器匹配到的元素合併後一起返回。

集合元素

$("div,p,.box");選取所有元素,所有

元素和所有類名為box元素

選擇器名稱

描述返回

例項ancestor descendant

後代選擇器

在給定的祖先元素下匹配所有的後代元素

集合元素

$("form input");返回表單中所有的 input 元素

parent > child

子元素選擇器

在給定的父元素下匹配所有的子元素

集合元素

$("form > input");返回表單中所有的子級input元素。

prev + next

相鄰兄弟選擇器

匹配所有緊接在 prev 元素後的 next 元素

集合元素

$("label + input");返回所有跟在 label 後面的 input 元素

prev ~ siblings

通用兄弟選擇器

匹配 prev 元素之後的所有同輩 siblings 元素

集合元素

$("form ~ input");返回form 元素的所有同輩 input 元素

選擇器描述

返回:contains(text)

匹配包含給定文字的元素

集合元素

:empty

匹配所有不包含子元素或者文字的空元素

集合元素

:has(selector)

匹配含有選擇器所匹配的元素的元素

集合元素

:parent

匹配含有子元素或者文字的元素

集合元素

例項::contains(text)

jquery選擇器               $(function () )        });
多選引數two多選引數多選引數

:empty

jquery選擇器                $(function () );        });
syy多選引數:has(selector)

jquery選擇器                $(function () );        });
cxtsyy

多選引數

:parent

jquery選擇器                $(function () );        });
cxtsyy

jQuery元素選擇

1 查詢所有符合條件的元素 find 舉例 ul find li addclass tmpexample 查詢頁面中ul元素下的所有li元素,並為查詢到的li元素增加tmpexample樣式。2 查詢指定元素的兄弟節點 siblings 舉例 li tmpcarrot slblings addcla...

JQuery選擇元素

參考 jquery基礎教程 雖然我個人覺得這本書的講解順序毫無邏輯,瞎搞 1.基於列表項的級別新增樣式 selected plays li addclass horizontal 查詢id為selected plays的元素的子元素中所有的列表項 selected plays li not hori...

JQuery元素選擇

1.基本元素選擇器 p 選取元素 p.info 選取所有class info 的元素 p demo 選取id demo 的第乙個元素 分層選擇器 使用這種選擇器時,需要傳入多個值,並用空格或大於號分隔。例如 div input 選擇div下所有的input div input 選擇父元素 div 下...