Jquery_jquery의 CSS 선택기 사용 분석

이 문서의 예에서는 Jquery의 CSS 선택기 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

jQuery에서는 CSS 선택기 세트를 사용하며 태그 선택기, ID 선택기, 클래스 선택기, 범용 선택기, 그룹 선택기 등 총 5가지 유형이 있으며 이에 대한 설명은 다음과 같습니다.

1. 태그 선택기

는 요소 선택기라고도 알려진 HTML 페이지의 기존 태그 요소를 선택하는 데 사용됩니다. 형식: $("element"), 예: $("div"), getElementByTagName

과 동일

2. 아이디 선택기

은 id 속성이 있는 요소를 얻는 데 사용됩니다. 형식은 $("id")이며 getElementById
와 동일합니다.

코드 복사 코드는 다음과 같습니다.

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

3. 클래스 선택

은 클래스 속성이 있는 요소를 얻는 데 사용됩니다. 형식: $("class")

코드 복사 코드는 다음과 같습니다.

이 텍스트 상자에 테두리 스타일을 추가합니다. 먼저 클래스 속성을 사용하여 텍스트 상자를 바인딩합니다.

코드 복사 코드는 다음과 같습니다.

$(".t").css("border", " 2px 단색 파란색 ");

4. 범용 선택기

범용 선택기(*)는 모든 요소와 일치하며 대부분 문맥 검색, 즉 HTML 페이지 $("*")에서 모든 태그를 찾는 데 사용됩니다.

5. 그룹 선택기

은 다중 요소 선택기라고도 하며 지정된 모든 선택기 조합의 결과를 선택하는 데 사용됩니다. 구문은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("selector1, seletor2, selector3")

예:

코드 복사 코드는 다음과 같습니다.

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

종합예:

코드 복사 코드는 다음과 같습니다.

 
 
<머리> 
 
 
 
<스타일 유형="텍스트/css"> 
    .one {테두리: 1px 솔리드 #03F; 플로트: 왼쪽; 마진: 1em; 패딩: 1.5em; 너비: 106px; } 
    .two {배경색: #FC0; } 
    .3 {배경색: #FCF; } 
 
<스크립트 유형="텍스트/자바스크립트"> 
    $(document).ready(function() { 
       $("*").css("글꼴 크기", "12px"); 
       $("div").addClass("하나"); 
       $("#div1").addClass("two"); 
       $("#div2, #div3").addClass("세"); 
       $("h3, p").css("color", "red").attr("align", "center"); 
       $("#span1").html("本网页中同时应用one类的页一共有" $(".one").length "个" ",同时应用one类 and three类的題共有" $( ".one.two").length "个"); 
        }); 
 
 
<본문> 
 

这是标题中文本

 
 

 
 

div元素：id属性为div1.

 
 

div元素：id属性为div2.

 
 

div元素：id属性为div3.