Jquery API Selector_jquery로 Jquery 배우기-JS 튜토리얼-php.cn

Jquery의 선택자를 사용하면 잘 먹고 기분도 좋아질 수 있습니다...
1. 기본
Jquery에서 가장 많이 사용하는 선택자가 바로 선택자라는 것을 알아봅시다. jqueryAPI에는 기본적으로 클래스, ID, 요소, * 및 다중 선택기의 5가지 상황이 있습니다. 여기에서는 CSS 스타일을 작성하는 방법에 대해 생각해 봅니다.
CSS 스타일에도 여러 가지 상황이 있습니다. 1. 클래스 스타일 2. ID 스타일 3 .Tag 스타일,
aa 클래스가 있는 경우 aa를 정의하는 스타일은 .aa로 작성되어야 합니다.{}
id가 bb인 경우 bb를 정의하는 스타일은 다음과 같아야 합니다. #bb{}
태그

가 있는 경우 우리가 정의하는 스타일은 div로 작성됩니다.{}
모든 태그 스타일을 정의하려면 이를 작성합니다. as *{} (물론 축약형은 아닙니다. Great)
여러 태그를 정의하려면 세미콜론을 사용하여 구분하세요. 예를 들어 .aa,#bb,div{}는 클래스를 다음과 같이 정의합니다. aa, id는 bb, 태그는 div로 지정합니다.
위의 5가지 ifs를 보고 jquery의 5가지 기본 선택기와 비교합니다
aa 클래스를 선택하려면 $(".aa")로 작성합니다.
The를 선택하려면 bb의 id는 $("#bb")로 씁니다.
div의 태그를 선택하려면 $("div")로 씁니다.
모두 선택하려면 $("*") 로 작성
여러 개체를 선택하려면 $ (".aa, #bb,div") 로 작성할 수 있습니다.
비교해 보면 기본 선택자가 완전히
2레벨
이제 위의 5개 선택자를 작성하는 방법을 알았으니, 레벨에 대한 선택자를 만드는 방법을 살펴보겠습니다.
먼저 레벨이 무엇인지 생각해보세요. DOM 구조는 레이어별로, 즉 XML의 구조 레벨로 구성됩니다.
그런 다음 jquery의 Api를 열고 레벨에 대한 4개의 선택기가 있음을 확인합니다.
결론적으로 보면 공백 b, a>b, a b, a~b 입니다. 물론 몇 마디만 아껴보려고 왔습니다.
예를 들어 다음과 같은 구조가 있습니다

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

 bb"> 
12 


3 

이제 다음을 사용하여 노드 아래의 모든 범위 노드를 선택하려고 합니다. id aa, $("#aaspan")을 사용하세요.
이제 aa 노드 아래 첫 번째 레이어의 ID가 있는 범위(텍스트 3과 4가 있는 범위)를 선택하려고 하므로 $( "#aa >span")
이제 우리는 클래스 bb 다음의 범위를 얻고 싶습니다. 범위에 텍스트 3이 있는 범위이므로 $(“.bb 범위”)를 사용하십시오.
이제 원하는 경우 bb 클래스 이후의 모든 범위를 가져오려면 $(“.bb~span”)을 사용하세요.
요약하자면: 첫 번째 것은 CSS 스타일과 같은 방식으로 작성되었으며, 공백을 사용하여 노드 아래의 요소를 나타냅니다.
두 번째는 >를 사용하여 하위 노드를 나타냅니다. 공백과의 차이점은 첫 번째에서만 작동한다는 것입니다.
의 세 번째 및 네 번째 레이어는 다음 노드를 나타내는 데 사용되지만 차이점은 기호를 사용하여 나타냅니다. 다음 노드와 ~는 다음 노드를 모두 나타내는 데 사용됩니다. (공백>~) 4개의 기호를 기억해야 합니다.

3 단순 기본 선택자와 계층적 선택자를 알고 있습니다.

코드 복사와 같이 여러 항목을 선택하는 경우도 있습니다. 코드는 다음과 같습니다.

< ;ul>

li>4

ul li의 첫 번째(첫 번째), 마지막(마지막), 기본 행(홀수), 짝수 행(짝수)을 가져와 세 번째(eq(2))와 일치시키고 2개 이상의 행(gt)과 일치시키고 싶습니다. ( 1)), 세 번째 줄(lt(2))보다 적게 일치하며 여기에 언급된 7개가 있습니다. 따라서 첫 번째 $("ul li:first")와 일치하고 세 번째와 일치하는 등 이 선택기를 어떻게 작성합니까? $("ul li:eq(2)"), 나머지는 작성하지 않겠습니다.
여기서 CSS a:hover a:link에서 링크를 작성하는 여러 스타일에 대해 생각해 보겠습니다... 둘이 같은가요?
자, 여기서는 7가지 유형을 살펴보고 나머지 3가지 유형은 무엇인지 살펴보겠습니다.
1 :not은 지정된 선택기와 일치하는 모든 요소를 제거합니다. $(“ ul li:not( #aa)")는 ul li에서 ID가 aa인 요소를 제거한다는 의미입니다. $("ul li")를 사용하면 4개의 li을 얻을 수 있습니다. $("ul li:not(#aa)"를 사용하세요. ) 첫 번째 li에는 3개의
2:header만 있는데, 이는 단지 h1 h2 h3을 선택하는 데 사용됩니다... 이러한 제목
3:animated는 애니메이션을 실행하는 요소와 일치합니다
사실은 선택된 것들을 한꺼번에 선별하는 것입니다. 기초와 레이어를 기반으로 구축되었습니다.
4 텍스트 가시성
계속해서 API를 살펴보세요. 텍스트에는 4가지 기능이 있습니다. 물론 해당 기능은 선택한 콘텐츠를 다시 필터링하는 것입니다
위 내용은 다음과 같습니다. 필터, 이제 콘텐츠를 필터링해야 합니다.

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

xxiu

xxiu zhang

zhang

< /div>

지정된 텍스트 $("div:contains(xxiu)")를 포함합니다. 선택한 div의 텍스트에 xxiu
빈 텍스트와 일치 $(" div:empty") 네 번째 div 노드 아래에 아무것도 없으므로 일치합니다.
특정 노드가 포함된 요소와 일치합니다. $("div:has (a)")
일치 비어 있지 않은 텍스트는 2와 정반대입니다. $("div:parent")는 처음 세 개의 div와 일치합니다.
요약하면 텍스트 일치는 주로 텍스트(1)와 노드를 수행합니다. 일치(3)하고 일치하는 텍스트가 없습니다. 또는 노드(2)가 텍스트 노드(4)와 일치합니다. 두 문장: 텍스트나 노드가 있습니까, 어떤 텍스트와 노드가 있습니까?
그런 다음 가시성을 살펴봅니다. 는 이해하기 쉽습니다. Hidden은 보이는 노드를 선택하고, visible은 보이지 않는 노드를 선택하고, 말할 것도 없습니다.
5 속성 선택기
먼저 가장 기본적인 것을 살펴보겠습니다. 속성 선택기

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

zhang 
asdf

 xxiu

위의 노드처럼 ID가 포함된 노드를 선택하려고 합니다. 이전 방법을 사용하면 어떻게 해야 합니까? 
다중 선택 방법 $("#aa,#bb")을 사용하면 원하는 것을 얻었지만 N이 있으면 시간이 오래 걸리지 않을까요? 선택기 $("div[id]") 는 우리가 원하는 결과를 얻을 것입니다. name $("div[name]") 을 선택하십시오. 그러나 우리는 xxiu라는 이름만 얻으려면 $("div[ name = 'zhang']") 
zhang이 아닌 $("div[name !='zhang']")를 가져오고 zh로 시작하는 $("div[name ^='zh']")를 가져옵니다 
 xxiu로 끝나는 $("div[name $='zhang']"), ang을 포함하는 $("div[name *='ang']") 
또는 ID가 있고 xxiu를 포함하는 $(" div[id][name *='xxiu']") 
글쎄요, 위 내용을 읽고 나니 좀 어지러웠나봐요. 요약하자면 
1 [id]가 [id와 같은 것 ='aa']는 무엇과 같지 않습니다 [id!='aa'] 
2 무엇으로 시작합니까 ^= 무엇으로 끝나나요 $= 무엇과 일치합니까 *= (완전히 정규식의 구문입니까) 
3개의 다중 속성 선택 $("div[id][name *='xxiu']") 
6개의 하위 요소 
1은 첫 번째와 일치 $("ul li:first-child")는 마지막 하위 요소의 $("ul li:last-child") 
2는 하위 요소의 유일한 요소와 일치합니다. $("ul li:only-child") 
3은 $("ul li 요소와 일치합니다. :nth-child (2)")는 $("ul li:eq(1)")와 같습니다. 전자는 1부터 세기 시작하고, 후자는 0부터 세기 시작합니다
7 형식
보세요 그러면 입력의 숫자를 알 수 있습니다. 형식 종류 $(":text") 텍스트 형식 가져오기$(":checkbox") 확인 형식 가져오기 기다려서 무슨 일이 일어나고 있는지 API를 확인하세요
다음과 같이 작성할 수 있습니다. 이 $( 이전 선택 방법 "input[type='text']"를 사용) 하지만 많은 단어를 입력하는 것보다 적은 단어를 입력하는 것이 더 낫습니다. this?
8개의 양식 속성
1개 사용 가능 활성화 및 사용 불가능 비활성화 
 알아보기 
 2개 선택 및 선택 
 모든 API가 여기에서 처리된 것이 좋으며 선택기는 기본적으로 동일합니다. 유일한 차이점은 문장 코드를 직접 작성하는 것입니다. 이 기사에는 코드가 없으며 API 요약만 나와 있습니다. 코드를 보려면 Jquery 설명서를 읽어보세요.