Jquery中CSS選擇器用法分析_jquery

本文實例講述了Jquery中CSS選擇器用法。分享給大家供大家參考。具體如下：

jQuery使用了一套css選擇器，共有5種，即標籤選擇器，ID選擇器，類別選擇器，通用選擇器和群組選擇器，現分述如下：

1. 標籤選擇器

用於選擇HTML頁面中已有的標籤元素，又稱為元素選擇器，格式：$("element")，如$("div"),同getElementByTagName

2. ID選擇器

用來取得某個具有id屬性的元素，格式如下：$("id")，同getElementById

複製程式碼 程式碼如下:

$("#users").val();

3. 類別選擇器

用來取得某個具有class屬性的元素，格式:$("class")

複製程式碼 程式碼如下:

為這個文字方塊加上邊框樣式，首先這裡用class屬性來綁定文字方塊

複製程式碼 程式碼如下:

$(".t").css("border", "2px solid blue ");

4. 通用選擇器

通用選擇器(*)匹配所有元素，多用於結合上下文來搜索，也就是找到HTML頁面中的所有標籤, $("*")

5. 群組選擇器

又叫多元素選擇器，用來選擇所有指定的選擇器組合的結果，語法如下：

複製程式碼 程式碼如下:

$("selector1, seletor2, selector3")

如：

複製程式碼 程式碼如下:

$("div, span, p.styleClass"). css("border", "1px solid red");

   

綜合例子：

複製程式碼 程式碼如下:

 
 
 
 
 
 
 
    .one {邊框：1px實心#03F;浮動：向左；保證金：1em；填充：1.5em；寬度：106 像素； } 
    .two {背景顏色：#FC0; } 
    .三{背景顏色：#FCF; } 
風格> 
 
    $(文檔).ready(function() { 
       $("*").css("字體大小", "12px"); 
       $("div").addClass("one"); 
       $("#div1").addClass("二"); 
       $("#div2, #div3").addClass("三"); 
       $("h3, p").css("顏色", "紅色").attr("對齊", "中心"); 
$("#span1").html("本網頁同時應用一類的元素一共有" $(".one").length "" 個",同時應用一類和三類的元素共有" $( ".one.third").length "個"); 
        }); 
腳本> 
頭> 
 
 

這是標題中的文字

 
 

 
 

div元素：id屬性為div1.

; 
 

div元素：id屬性為div2.

; 
 

div元素：id屬性為div3.

; 
正文> 

效果圖如下：

希望本文對大家介紹的 jQuery 程式設計有所幫助。