Jquery는 지정된 tag_jquery의 객체와 속성을 설정하고 제거합니다.

1. 먼저 JQuery의 개념에 대해 이야기해 보겠습니다. JQuery는 미국의 John Resig라는 사람이 처음 만들었습니다. 이후 많은 JS 전문가도 팀에 합류했습니다. 실제로 JQuery는 JavaScript 클래스 라이브러리입니다. 이 클래스 라이브러리는 많은 기능적 메서드를 통합합니다. 클래스 라이브러리를 사용하면 몇 가지 간단한 코드를 사용하여 복잡한 JS 효과를 얻을 수 있습니다.

2. JQuery는 코드 분리를 실현하므로 웹 페이지에서 함수를 호출하기 위해 JQuery 클래스 라이브러리와 직접 작성한 JQuery 코드를 직접 도입할 수 있습니다. 🎜> 예:

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

$(function( ){
$ ("요소").click{
function(){ Alert("클릭하세요!")
}
}


위 코드에서 요소가 정의되어 있는 한 이 요소 뒤의 클릭은
경고("Click on me!") 동작입니다. 물론 실행될 수도 있습니다.

여기서 $ 기호는 클래스 라이브러리에 대한 참조인 JQuery를 나타냅니다. . . 이것이 제가 이해한 방식입니다.

3. JQuery의 핵심 메서드

each(callback) '루프와 같습니다.

$("Element").length ; ' 요소의 개수는 속성입니다

$(“Element”).size() '요소의 개수이기도 하지만 괄호는 메소드입니다

$( “Element”).get (); '배열 형식으로 저장된 페이지 요소 모음

$("Element").get(index) '함수는 다음과 같습니다. 위에서 index는 요소를 의미하며, 배열의 Index

$(“Element”).get().reverse() '얻어진 배열의 방향을 변경합니다

$(“Element1 ″).index($(“Element2 ″)); '요소 1의 요소 2의 인덱스 값은 다음과 같습니다. . .

4. 기본 객체 획득

$(“*”) ‘모든 객체 획득을 의미

$(“#element”) ‘CSS와 동일한 ID 번호 획득

$(".abc") '.abc 스타일을 사용하는 모든 요소

$("div") '태그 선택기는 모든 div 요소를 선택합니다

$( "# a,.b,span") 'ID가 a인 요소, 클래스 스타일 b를 사용하는 요소 및 모든 스팬 요소를 가져오는 것을 나타냅니다.

$("#a .b p") 'ID 번호는 a이고 다음을 사용합니다. b 스타일의 모든 p 요소

5. 계층적 요소 얻기

$("Element1 Element2 Element3 ....") '앞의 부모 뒤에 하위 집합이 옵니다

$("div > p") 'div 아래의 모든 p 요소 가져오기

$("div p") 'div 요소 다음의 첫 번째 p 요소

$("div ~ p") 'div 뒤의 모든 p 요소

6. 단순 객체 획득

$("Element:first") 'HTML 페이지에 있는 특정 유형의 요소의 첫 번째 요소 element

$("Element:last") 'HTML 페이지에 있는 특정 유형의 요소의 마지막 요소

$("Element:not(selector)") '모든 요소 제거 다음과 같이 선택기와 일치하는 요소를 지정합니다. $("input:not(:checked)")는 선택되지 않은 모든 확인란을 선택하는 것을 의미합니다.

$("Element:even") '짝수 행 가져오기

$("Element:odd") '홀수 행 가져오기

$("Element:eq(index)") '주어진 인덱스 값 가져오기

$(" Element:gt(index)") '주어진 인덱스 값을 가진 요소 뒤의 모든 요소 가져오기

$("Element:lt(index)") '주어진 인덱스 값을 가진 요소 앞의 모든 요소 가져오기

. . .

7. 콘텐츠 객체 획득 및 객체 가시성

$("Element:contains(text)") '요소에 텍스트 콘텐츠가 포함되어 있는지 여부

$(' 요소: 비어 있음") '

$("Element:partnt") 가져오기 '

$("Element:has (선택기)") 가져오기 '다음과 같은 특정 요소가 포함되어 있는지 여부 : $("p:has(span)")는 범위 요소를 포함하는 모든 p 요소를 의미

$("Element:hidden") '모든 표시 요소 선택

$(“요소:visible ”) '보이지 않는 요소 모두 선택

8. 기타 객체 획득 방법

$(“Element[id]“) ' ID 속성이 있는 모든 요소

$("Element [attribute = youlika ]" 'youlika 속성을 가진 모든 요소 가져오기

$("Element[attribute != youlika ]" 'youlika가 아닌 특정 속성을 가진 모든 요소 가져오기

$("Element[attribute ^= youlika]" 'youlika가 아닌 특정 속성으로 시작하는 모든 요소를 ​​가져옵니다

$(" Element[attribute $= youlika ]" '다음을 포함하는 모든 요소 가져오기 youlika로 끝나지 않는 속성

$("Element[attribute *= youlika ]" 'youlika로 시작하는 속성이 있는 모든 요소 가져오기

$("Element[selector1][ selector2][....]") ' $("input[id][name][value=youlika]")와 같은 속성 선택기를 준수한다는 것은 ID, 이름 및 값이 있는 입력 요소를 얻는 것을 의미합니다.

9. 자식 요소 얻기

$("Element:nth-child(index)") 'n번째 요소 아래에 있는 것을 선택하세요

$(" Element:nth-child(even)") '부모 아래의 짝수 선택

$("Element:nth-child(odd)") ' 부모 아래의 홀수 선택

$(“Element:nth-child(3n 1)”) 'Expression

$(“Element:first-child”) '부모 아래의 홀수 선택 첫 번째 자식 요소

$("Element:last-child") '상위 요소 아래의 마지막 하위 요소를 선택합니다.

$("Element:only-child") '상위 아래의 유일한 하위 요소와 일치합니다(예: dt). dl 목록에 있는 유일한 항목인 경우 dt

10. 양식 개체 가져오기

$(:input)//모든 입력 요소 찾기, 물론 드롭다운 목록 포함 텍스트 필드, 라디오 버튼, 체크박스 등

$(:text)//모든 한 줄 텍스트 상자 일치

$(:password)//모든 비밀번호 상자 일치

$(:radio)// 모든 라디오 버튼 일치

$(:checkbox)//모든 체크박스 일치

$(:submit)//모든 제출 버튼 일치

$(:image)/ /와 같은 모든 이미지 필드 일치

$(:reset)//모든 재설정 버튼 일치

$ (:button)//일치 모든 버튼

$(:file)//모든 파일 업로드 도메인 일치

$(:hidden)//모든 보이지 않는 요소 또는 유형 일치 숨겨진 요소의 경우

$( :enabled)//사용 가능한 모든 입력 요소와 일치합니다. 예를 들어 radio:enabled는 사용 가능한 모든 라디오 버튼과 일치한다는 의미입니다.

$(:disabled)//match 사용할 수 없는 모든 입력 요소는 위와 반대 효과를 갖습니다

$(:checked)//선택한 모든 체크박스 요소 일치

$(:selected)//모든 드롭다운 목록 일치

11. 요소 속성 설정 및 제거

$("Element").attr(name) '$("img")와 같이 첫 번째로 일치하는 속성 값을 가져옵니다. attr(“src”)

$(“Element”.attr (key,value)”) '특정 요소에 대한 속성 설정

$(“Element”.attr({key:value ,key1:value,….})) '다음에 요소에 대한 여러 속성 설정 한 번

$(“Element”).attr(key,function) '일치하는 모든 요소에 대해 계산된 속성을 설정합니다.

$(“Element”).removeAttr(name)/ /속성 제거