1. 웹페이지 요소 선택
jQuery의 기본 디자인과 주요 사용법은 "웹페이지 요소를 선택하고 이에 대한 작업을 수행하는 것"입니다. 이는 다른 함수 라이브러리와 구별되는 기본 기능입니다.
jQuery를 사용하는 첫 번째 단계는 선택 표현식을 생성자 jQuery()(약어로 $)에 넣은 다음 선택한 요소를 가져오는 것입니다.
선택 표현식은 CSS 선택자가 될 수 있습니다.
$(document)//전체 문서 개체 선택
$('#myId')//ID가 myId인 웹 페이지 요소 선택
$('div.myClass')//선택 myClass
$('input[name=first]')//name 속성이 first
인 입력 요소를 선택하는 div 요소는 jQuery 관련 표현식일 수도 있습니다.
$('a:first')// 웹 페이지에서 첫 번째 a 요소 선택
$(' tr:odd')//테이블의 홀수 행 선택
$('#myForm :input')//양식에서 입력 요소 선택
$('div:visible') //표시된 div 요소 선택
$('div:gt(2)')//처음 세 개를 제외한 모든 div 요소 선택
$('div:animated') //현재 애니메이션 상태인 div 요소 선택
2. 결과 집합 변경
여러 요소를 선택한 경우 jQuery는 결과 집합을 좁힐 수 있는 필터를 제공합니다.
$('div').has('p') ; //p 요소를 포함하는 div 요소 선택
$(' div').not('.myClass') //클래스가 myClass와 같지 않은 div 요소 선택
$('div') .filter('.myClass'); //클래스가 myClass
$('div').first() //첫 번째 div 요소 선택
$('div'); .eq(5); //6번째 div 요소 선택
때로는 결과 집합에서 시작하여 근처의 관련 요소로 이동해야 합니다. jQuery는 DOM 트리에서 이동 메서드도 제공합니다.
$('div').next('p') ; //div 요소 다음의 첫 번째 p 요소를 선택합니다.
$(' div').parent() //div 요소의 상위 요소를 선택합니다.
$('div').closest('form '); //div에 가장 가까운 양식 상위 요소 선택
$(' div').children() //div의 모든 하위 요소 선택
$('div').siblings(); //div의 형제 요소 선택
3. 체인 작업
웹 페이지 요소를 선택한 후 특정 작업을 수행할 수 있습니다.
jQuery를 사용하면 모든 작업을 함께 연결하고 다음과 같은 체인 형태로 작성할 수 있습니다.
$('div').find('h3').eq(2).html('Hello');
압축을 풀 수 있습니다. 이렇게, 즉, 다음과 같습니다
$('div')//div 요소 찾기
.find('h3')//h3 요소 선택
.eq(2)//세 번째 h3 요소 선택
.html( 'Hello'); //선택 내용이 Hello로 변경됩니다
이는 jQuery의 가장 훌륭하고 편리한 기능입니다. 그 원칙은 각 jQuery 작업이 jQuery 개체를 반환하므로 다양한 작업이 함께 연결될 수 있다는 것입니다.
jQuery는 결과 집합을 한 단계 뒤로 이동할 수 있는 .end() 메서드도 제공합니다.
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end()/ /h3 요소를 모두 선택하는 단계로 돌아갑니다.
.eq(0)//첫 번째 h3 요소를 선택합니다.
.html('World') //컨텐츠를 World로 변경합니다.
4. 요소 작업: 값 획득 및 할당
웹 페이지 요소를 작동할 때 가장 일반적인 요구 사항은 해당 값을 얻거나 값을 할당하는 것입니다.
jQuery는 동일한 함수를 사용하여 값(getter)과 할당(setter)을 완료합니다. 값을 가져올지 아니면 값을 할당할지 여부는 함수의 매개변수에 따라 결정됩니다.
$('h1').html(); //html()에는 매개변수가 없습니다. 즉, h1의 값을 가져옵니다. $('h1').html('Hello') //html() Hello라는 매개변수가 있습니다. h1에 값을 할당한다는 의미입니다.
공통 값과 할당 기능은 다음과 같습니다.
.html() html 콘텐츠 가져오기 또는 설정
.text() 텍스트 콘텐츠 가져오기 또는 설정
.attr() 값 가져오기 또는 설정 속성
.width() 요소의 너비를 가져오거나 설정합니다
.height() 요소의 높이를 가져오거나 설정합니다
.val() 양식 요소의 값을 가져옵니다
결과 집합에 여러 요소가 포함되어 값을 할당할 때 모든 요소가 할당되고 첫 번째 요소의 값만 제거된다는 점에 유의해야 합니다. .text(), 모든 요소의 텍스트 내용을 가져옵니다) .
5. 요소 조작 : 이동
선택한 요소를 이동하려면 두 가지 방법이 있습니다. 하나는 요소를 직접 이동하는 것이고, 다른 하나는 다른 요소를 이동하여 target 요소 우리가 원하는 위치를 얻으세요.
div 요소를 선택하고 이를 p 요소 뒤로 이동해야 한다고 가정해 보겠습니다.
첫 번째 방법은 .insertAfter()를 사용하여 div 요소를 p 요소 뒤로 이동하는 것입니다.
$('div').insertAfter('p');
두 번째 방법은 .after()를 사용하여 p 요소를 추가하는 것입니다. div 요소 앞:
$('p').after('div' );
표면적으로는 이 두 가지 방법의 효과는 동일하며, 유일한 차이점은 운영 관점의 차이인 것 같습니다. 그러나 실제로는 큰 차이점이 있습니다. 즉, 반환되는 요소가 다릅니다. 첫 번째 메서드는 div 요소를 반환하고 두 번째 메서드는 p 요소를 반환합니다. 필요에 따라 사용할 방법을 선택할 수 있습니다.
이 작동 모드를 사용하면
.insertAfter() 및 .after(): 기존 요소 외부의 뒤에서 요소 삽입
.insertBefore() 및 .before(): 기존 요소 외부의 전면에서 요소 삽입
. 및 .append(): 기존 요소 내부에 뒤쪽 요소 삽입
.prependTo() 및 .prepend(): 기존 요소 내부에 앞쪽 요소 삽입
6. 요소 작업: 복사, 삭제 및 생성
.clone()을 사용하여 요소를 복사합니다.
요소를 삭제하려면 .remove() 및 .detach()를 사용하세요. 둘의 차이점은 전자는 삭제된 요소의 이벤트를 유지하지 않는 반면, 후자는 유지하므로 문서를 다시 삽입할 때 활용하기 유리합니다.
요소의 내용을 지우려면(요소를 삭제하지는 않음) .empty()를 사용하세요.
새 요소를 생성하는 방법은 매우 간단합니다. 새 요소를 jQuery 생성자에 직접 전달하면 됩니다.
$('
안녕하세요
');
$('
새 목록 항목
')
$('ul').append('
목록 항목
');
7. 유틸리티 메소드
jQuery는 선택한 요소에 대한 작업 외에도 요소를 선택하지 않고 직접 사용할 수 있는 몇 가지 도구 메소드(유틸리티)도 제공합니다.
Javascript 언어의 상속 원리를 이해하면 도구 메소드의 본질을 이해할 수 있습니다. jQuery 생성자, 즉 jQuery.method()에 정의된 메소드이므로 직접 사용할 수 있다. 이러한 요소 조작 메소드는 생성자의 프로토타입 객체, 즉 jQuery.prototype.method()에 정의된 메소드이므로 사용하기 전에 인스턴스를 생성(즉, 요소 선택)해야 합니다. 이 차이점을 이해하지 못한다면 큰 문제는 아닙니다. 도구 메서드는 네이티브 JavaScript 함수처럼 직접 사용할 수 있는 메서드로 이해하면 됩니다.
일반적으로 사용되는 도구 방법은 다음과 같습니다.
$.trim()은 문자열 양쪽 끝의 공백을 제거합니다.
$.each()는 배열이나 객체를 순회합니다.
$.inArray()는 배열에 있는 값의 인덱스 위치를 반환합니다. 값이 배열에 없으면 -1이 반환됩니다.
$.grep()은 특정 기준을 충족하는 배열의 요소를 반환합니다.
$.extend() 여러 개체를 첫 번째 개체로 병합합니다.
$.makeArray() 객체를 배열로 변환합니다.
$.type()은 객체의 유형(함수 객체, 날짜 객체, 배열 객체, 일반 객체 등)을 결정합니다.
$.isArray()는 매개변수가 배열인지 여부를 결정합니다.
$.isEmptyObject()는 객체가 비어 있는지(속성을 포함하지 않음) 여부를 결정합니다.
$.isFunction()은 매개변수가 함수인지 여부를 결정합니다.
$.isPlainObject()는 매개변수가 "{}" 또는 "새 개체"로 생성된 개체인지 여부를 결정합니다.
$.support() 브라우저가 특정 기능을 지원하는지 여부를 결정합니다.
8. 이벤트 작업
jQuery는 이벤트를 웹 페이지 요소에 바인딩할 수 있습니다. 다양한 이벤트에 따라 해당 기능을 실행합니다.
$('p').click( function() {
Alert('Hello');
});
현재 jQuery는 주로 다음 이벤트를 지원합니다.
.blur() 양식 요소가 포커스를 잃습니다.
.change() 양식 요소의 값이 변경됩니다.
.click() 마우스 클릭
.dblclick() 마우스 더블 클릭
.focus() 양식 요소가 포커스를 받습니다
. focusin() 하위 요소가 포커스를 얻습니다
.focusout() 하위 요소가 포커스를 잃습니다
.hover() 동시에 mouseenter 및 mouseleave 이벤트에 대한 핸들러 함수를 지정합니다
.keydown() 키보드 누르기 (키를 길게 누르면 하나의 이벤트만 반환됨 )
.keypress() 키보드 누르기 (키를 길게 누르면 여러 이벤트가 반환됨)
.keyup() 키보드를 놓습니다
. load() 요소가 로드되었습니다.
.mousedown() 마우스를 아래로 누르세요
.mouseenter() 마우스가 들어갑니다(하위 요소를 입력할 때 트리거되지 않습니다)
.mouseleave() 마우스가 떠납니다(다음이 될 때 트리거되지 않습니다). 하위 요소 종료)
.mousemove() 마우스가
요소 내부에서 이동합니다. mouseout() 마우스 이탈(하위 요소 종료 시 트리거)
.mouseover() 마우스 입력(하위 요소 입력 시 트리거)
.mouseup() 마우스 해제
.ready() DOM 로딩 완료
.resize() 브라우저 창 크기 변경
.scroll() 스크롤 막대 위치 변경
. select() 사용자가 텍스트 상자의 내용을 선택합니다
.submit() 사용자가 양식을 제출합니다
.toggle() 마우스 클릭 횟수에 따라 여러 기능을 순차적으로 실행합니다
.unload() 사용자가 페이지를 떠난다
위의 이벤트는 모두 jQuery 내부에서 .bind()를 사용하는 편리한 방법입니다. .bind()를 사용하면 동일한 함수를 여러 이벤트에 바인딩하는 등 이벤트를 보다 유연하게 제어할 수 있습니다.
$('input').bind('clickchange', //클릭과 변경 이벤트를 동시에 바인딩
function(){
Alert('Hello' ) ;
}
);
이벤트를 한 번만 실행하려면 .one() 메서드를 사용하면 됩니다.
$("p").one( "click" , function(){
alert("Hello"); //한 번만 실행되고 이후 클릭은 실행되지 않습니다.
});
.unbind()는 바인딩을 해제하는 데 사용됩니다. 이벤트.
$('p').unbind( 'click' );
모든 이벤트 처리 함수는 이벤트 개체를 다음 예의 e와 같은 매개변수로 허용할 수 있습니다.
$("p").click(function(e){
alert(e.type); //" "
})를 클릭하세요.
이 이벤트 개체에는 몇 가지 유용한 속성과 메서드가 있습니다.
event.pageX 이벤트 발생 시 마우스와 웹페이지 좌측 상단 사이의 수평 거리
event.pageY 이벤트 발생 시 마우스와 웹페이지 좌측 상단 사이의 수직 거리 웹페이지
event.type 이벤트 유형(예: 클릭)
event. which 키를 눌렀을 때
event.data 이벤트 개체에 데이터를 바인딩한 다음 이벤트 핸들러 함수에 전달합니다.
event.target 이벤트의 대상이 되는 웹 요소
event.preventDefault() 이벤트의 기본 동작을 차단합니다(예: 링크를 클릭하면 자동으로 새 페이지가 열립니다)
event.stopPropagation()은 이벤트를 중지합니다. 버블링부터 상위 요소까지
이벤트 처리 함수에서 this 키워드를 사용하여 이벤트의 대상이 되는 DOM 요소를 반환할 수 있습니다.
$('a').click(function(){
if ($(this).attr('href').match('evil ')){// 유해한 링크로 확인된 경우
e.preventDefault(); //열림 방지
$(this).addClass('evil') //유해한 클래스 추가
}
}) ;
이벤트를 자동으로 실행하는 방법에는 두 가지가 있습니다. 하나는 이벤트 함수를 직접 사용하는 것이고, 다른 하나는 .trigger()나 .triggerHandler()를 사용하는 것입니다.
$('a').click( );
$('a').trigger('click');
9. 특수 효과
jQuery를 사용하면 객체가 특정 특수 효과를 나타낼 수 있습니다.
$('h1').show(); //h1 제목 표시
일반적으로 사용되는 특수 효과는 다음과 같습니다.
.fadeIn() Fade in
.fadeOut() Fade out
.fadeTo() 투명도를 조정합니다
. hide() 요소 숨기기
.show() 표시 요소
.slideDown() 아래로 확장
.slideUp() 롤업
.slideToggle() 요소를 순차적으로 확장 또는 롤업
.toggle() 순차적으로 요소 표시 또는 숨기기
.show() 및 .hide()를 제외하고 다른 모든 특수 효과의 기본 실행 시간은 400ms(밀리초)이지만 변경할 수 있습니다. 이 설정.
$('h1').fadeIn( 300); // 300밀리초 이내에 페이드 인
$('h1').fadeOut('slow') // 천천히 페이드 아웃
특수효과가 끝난 후 실행할 기능을 지정할 수 있습니다.
$('p').fadeOut( 300, 함수(){$(this).remove() });
.animate()를 사용하면 더 복잡한 특수 효과를 사용자 정의할 수 있습니다.
$('div').animate(
{
left : " =50", // 오른쪽으로 계속 이동
opacity : 0.2 // 투명도 지정
},
300, // 지속 시간
function(){ 경고 (' 완료!') }//콜백 함수
);
.stop() 및 .delay()는 특수 효과 실행을 중지하거나 지연하는 데 사용됩니다.
$.fx.off true로 설정하면 모든 웹페이지 효과가 꺼집니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
