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 입니다. 물론 몇 마디만 아껴보려고 왔습니다. 예를 들어 다음과 같은 구조가 있습니다
이제 다음을 사용하여 노드 아래의 모든 범위 노드를 선택하려고 합니다. id aa, $("#aaspan")을 사용하세요. 이제 aa 노드 아래 첫 번째 레이어의 ID가 있는 범위(텍스트 3과 4가 있는 범위)를 선택하려고 하므로 $( "#aa >span") 이제 우리는 클래스 bb 다음의 범위를 얻고 싶습니다. 범위에 텍스트 3이 있는 범위이므로 $(“.bb 범위”)를 사용하십시오. 이제 원하는 경우 bb 클래스 이후의 모든 범위를 가져오려면 $(“.bb~span”)을 사용하세요. 요약하자면: 첫 번째 것은 CSS 스타일과 같은 방식으로 작성되었으며, 공백을 사용하여 노드 아래의 요소를 나타냅니다. 두 번째는 >를 사용하여 하위 노드를 나타냅니다. 공백과의 차이점은 첫 번째에서만 작동한다는 것입니다. 의 세 번째 및 네 번째 레이어는 다음 노드를 나타내는 데 사용되지만 차이점은 기호를 사용하여 나타냅니다. 다음 노드와 ~는 다음 노드를 모두 나타내는 데 사용됩니다. (공백>~) 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가지 기능이 있습니다. 물론 해당 기능은 선택한 콘텐츠를 다시 필터링하는 것입니다 위 내용은 다음과 같습니다. 필터, 이제 콘텐츠를 필터링해야 합니다.
지정된 텍스트 $("div:contains(xxiu)")를 포함합니다. 선택한 div의 텍스트에 xxiu 빈 텍스트와 일치 $(" div:empty") 네 번째 div 노드 아래에 아무것도 없으므로 일치합니다. 특정 노드가 포함된 요소와 일치합니다. $("div:has (a)") 일치 비어 있지 않은 텍스트는 2와 정반대입니다. $("div:parent")는 처음 세 개의 div와 일치합니다. 요약하면 텍스트 일치는 주로 텍스트(1)와 노드를 수행합니다. 일치(3)하고 일치하는 텍스트가 없습니다. 또는 노드(2)가 텍스트 노드(4)와 일치합니다. 두 문장: 텍스트나 노드가 있습니까, 어떤 텍스트와 노드가 있습니까? 그런 다음 가시성을 살펴봅니다. 는 이해하기 쉽습니다. Hidden은 보이는 노드를 선택하고, visible은 보이지 않는 노드를 선택하고, 말할 것도 없습니다. 5 속성 선택기 먼저 가장 기본적인 것을 살펴보겠습니다. 속성 선택기
위의 노드처럼 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 설명서를 읽어보세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
