Jquery API Selector_jquery로 Jquery 배우기
Jquery의 선택자를 사용하면 잘 먹고 기분도 좋아질 수 있습니다...
1. 기본
Jquery에서 가장 많이 사용하는 선택자가 바로 선택자라는 것을 알아봅시다. jqueryAPI에는 기본적으로 클래스, ID, 요소, * 및 다중 선택기의 5가지 상황이 있습니다. 여기에서는 CSS 스타일을 작성하는 방법에 대해 생각해 봅니다.
CSS 스타일에도 여러 가지 상황이 있습니다. 1. 클래스 스타일 2. ID 스타일 3 .Tag 스타일,
aa 클래스가 있는 경우 aa를 정의하는 스타일은 .aa로 작성되어야 합니다.{}
id가 bb인 경우 bb를 정의하는 스타일은 다음과 같아야 합니다. #bb{}
태그
모든 태그 스타일을 정의하려면 이를 작성합니다. 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 입니다. 물론 몇 마디만 아껴보려고 왔습니다.
예를 들어 다음과 같은 구조가 있습니다
12
3
이제 aa 노드 아래 첫 번째 레이어의 ID가 있는 범위(텍스트 3과 4가 있는 범위)를 선택하려고 하므로 $( "#aa >span")
이제 우리는 클래스 bb 다음의 범위를 얻고 싶습니다. 범위에 텍스트 3이 있는 범위이므로 $(“.bb 범위”)를 사용하십시오.
이제 원하는 경우 bb 클래스 이후의 모든 범위를 가져오려면 $(“.bb~span”)을 사용하세요.
요약하자면: 첫 번째 것은 CSS 스타일과 같은 방식으로 작성되었으며, 공백을 사용하여 노드 아래의 요소를 나타냅니다.
두 번째는 >를 사용하여 하위 노드를 나타냅니다. 공백과의 차이점은 첫 번째에서만 작동한다는 것입니다.
의 세 번째 및 네 번째 레이어는 다음 노드를 나타내는 데 사용되지만 차이점은 기호를 사용하여 나타냅니다. 다음 노드와 ~는 다음 노드를 모두 나타내는 데 사용됩니다. (공백>~) 4개의 기호를 기억해야 합니다.
3 단순 기본 선택자와 계층적 선택자를 알고 있습니다.
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 설명서를 읽어보세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7330
9
1627
14
1350
46
1262
25
1209
29
jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드
Feb 27, 2024 pm 06:45 PM
jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery는 웹 사이트 개발에 널리 사용되는 JavaScript 라이브러리로, JavaScript 프로그래밍을 단순화하고 개발자에게 풍부한 기능을 제공합니다. 이 기사에서는 jQuery의 참조 방법을 자세히 소개하고 독자가 빠르게 시작할 수 있도록 구체적인 코드 예제를 제공합니다. jQuery 소개 먼저 HTML 파일에 jQuery 라이브러리를 도입해야 합니다. CDN 링크를 통해 소개하거나 다운로드할 수 있습니다.
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까?
Feb 28, 2024 pm 03:12 PM
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.
jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까?
Feb 28, 2024 am 08:39 AM
jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.
jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.
Feb 28, 2024 pm 09:06 PM
제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <
jQuery를 사용하여 모든 태그의 텍스트 내용 수정
Feb 28, 2024 pm 05:42 PM
제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.
jQuery에서 eq의 역할 및 적용 시나리오 이해
Feb 28, 2024 pm 01:15 PM
jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s
jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요?
Feb 29, 2024 am 09:03 AM
jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인
PHP에서 일반적으로 사용되는 파일 작업 기능 요약
Apr 03, 2024 pm 02:52 PM
目录1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype( )11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：
