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)/ /속성 제거