1. #id用法
定義:根據給定的ID匹配一個元素。
返回值:Element
參數:id (String) : 用于搜索的,通過元素的 id 屬性中給定的值
實例:將ID為"div_red"的DIV的邊框改為紅色
代碼:$("#div_red").css("border","red 2px solid"); //點擊按鈕一將執行這句代碼
擴展:#id中的id可以是頁面任何元素的id,如input,btuuon,div,table,span等等
2. element用法
定義:根據給定的元素名匹配所有元素。
返回值:Array<Element>
參數:element (String) : 一個用于搜索的元素。指向 DOM 節點的標簽名。
實例:將頁面<P>標記內的文字顏色改為紅色
代碼:$("p").css("color","red"); //點擊按鈕二將執行這句代碼
P標記1 ID="p1"
P標記2 無ID
擴展:參數值可以是頁面任何元素,如div,button,div,table,tr,td,p,h1,span,input
3. .class用法
定義:根據給定的類(樣式名稱)匹配元素。
返回值:Array<Element>
參數:class (String) 一個用以搜索的類(樣式名稱)。一個元素可以有多個類(樣式名稱),只要有一個符合就能被匹配到。
實例:將頁面所有引用了".red_test"樣式的元素背景顏色改為藍色
代碼:$(".red_test").css("background-color","blue"); //點擊按鈕三將執行這句代碼
SPAN ID="span_red_1" calss="red_test"
擴展:可以看一下jQuery官網上Selectors/.class的實例。
4. *用法
定義:匹配所有元素 多用于結合上下文來搜索。
返回值:Array<Element>
實例:查看頁所有元素的數量
代碼:$("*").length; //點擊按鈕四將執行這句代碼
擴展:可以看一下jQuery官網上Selectors/*的實例。
5. selector1,selector2,selectorN用法
定義:將每一個選擇器匹配到的元素合并后一起返回。你可以指定任意多個選擇器,并將匹配到的元素合并到一個結果內。
返回值:Array<Element>
參數:selector1 (Selector) : 一個有效的選擇器 selector2 (Selector) : 另一個有效的選擇器 selectorN (Selector) : (可選) 任意多個有效選擇器
實例:將頁面上所有引用名稱為"li_test"樣式的<Li>元素和ID為"li_red"的<Li>元素的邊框改為綠色,寬度為5px
代碼:$(".red_test,#btn_5").css("border","5px solid Green"); //點擊按鈕五將執行這句代碼