선택 이벤트를 사용하여 jquery 페이지를 로드할 때 사용할 내용

jQuery는 HTML 문서와 CSS 스타일을 빠르고 쉽게 조작할 수 있는 프런트 엔드 개발에서 매우 인기 있는 JavaScript 라이브러리입니다. jQuery에서 선택기는 매우 중요하고 일반적으로 사용되는 기능으로, 이를 통해 페이지의 요소를 선택한 다음 해당 요소에 대해 작업을 수행할 수 있습니다.

jQuery는 태그 이름, 클래스 이름, ID 값, 속성 값 등을 기반으로 요소를 선택할 수 있는 다양한 선택기를 제공합니다. 페이지가 로드되면 일반적으로 특정 요소를 표시하거나 숨기거나 이벤트를 바인딩하는 등 특정 요소에 대한 특수 처리를 수행합니다.

이 경우 jQuery의 선택기와 이벤트 바인딩을 사용할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 이벤트 및 선택기입니다.

1. 페이지 로딩 완료 이벤트

jQuery에서는 페이지 로딩 완료 이벤트를 DOM 로딩 직후에 실행되는 Ready() 메소드를 통해 바인딩할 수 있습니다. 샘플 코드는 다음과 같습니다.

$(document).ready(function() {
  // 页面加载完成后执行的代码
});

또한 Ready()가 일반적으로 사용되므로 jQuery에서는 단축 형식도 제공합니다.

$(function() {
  // 页面加载完成后执行的代码
});

이 두 형식은 완전히 동일하며 둘 다 페이지가 로드된 후 특정 작업을 수행할 수 있습니다.

2. 선택자

1. 기본 선택자

기본 선택자는 태그 이름, 클래스 이름 및 ID 값을 기준으로 요소를 선택할 수 있는 가장 간단한 형태입니다.

태그 이름을 기준으로 요소 선택:

$('p') // 选择所有<p>元素

클래스 이름을 기준으로 요소 선택:

$('.my-class') // 选择所有class属性值为my-class的元素

ID 값을 기준으로 요소 선택:

$('#my-id') // 选择ID值为my-id的元素

2. 속성 선택기

속성 선택기는 속성 값을 기준으로 요소를 선택할 수 있습니다. 가장 일반적으로 사용되는 것은 [class^="xxx"] 및 [class$="xxx"]입니다.

속성 이름과 속성 값을 기준으로 요소 선택:

$('input[type="text"]') // 选择所有type属性值为text的input元素

속성 값의 시작을 기준으로 요소 선택:

$('div[class^="my-"]') // 选择class属性值以my-开头的所有div元素

속성 값의 끝을 기준으로 요소 선택:

$('a[href$=".pdf"]') // 选择href属性值以.pdf结尾的所有a元素

3. 계층적 선택기

계층적 선택기는 요소 하위 요소, 상위 요소, 형제 요소 등을 선택할 수 있습니다.

요소의 하위 요소 선택:

$('ul li') // 选择所有ul元素下的li元素

요소의 상위 요소 선택:

$('li').parent() // 选择所有li元素的父元素

요소의 형제 요소 선택:

$('li').siblings() // 选择所有li元素的兄弟元素（不包括自己）

4. 양식 선택기

양식 선택기는 다음을 포함하여 양식 요소를 선택할 수 있습니다. 텍스트 상자, 체크 상자, 라디오 버튼, 드롭다운 상자 등

모든 텍스트 상자 요소 선택:

$('input[type="text"]') // 选择所有type属性值为text的input元素

모든 확인란 요소 선택:

$('input[type="checkbox"]') // 选择所有type属性值为checkbox的input元素

모든 라디오 버튼 요소 선택:

$('input[type="radio"]') // 选择所有type属性值为radio的input元素

모든 드롭다운 상자 요소 선택:

$('select') // 选择所有select元素

3. 이벤트 바인딩

1. 단일 클릭 이벤트

Click 이벤트는 가장 일반적으로 사용되는 이벤트 중 하나이며 click() 메서드를 통해 바인딩될 수 있습니다. 샘플 코드는 다음과 같습니다.

$('button').click(function() {
  // 单击了button按钮后执行的代码
});

2. 더블클릭 이벤트

더블클릭 이벤트는 요소를 빠르게 두 번 클릭하는 이벤트를 말하며, dblclick() 메소드를 통해 바인딩할 수 있습니다. 샘플 코드는 다음과 같습니다.

$('button').dblclick(function() {
  // 双击了button按钮后执行的代码
});

3. 키보드 이벤트

키보드 이벤트는 페이지에서 키보드 키를 누르거나 놓을 때 발생하는 이벤트를 말하며, keypress(), keydown(), 세 가지 메서드를 통해 바인딩될 수 있습니다. 키업().

4. 마우스 이벤트

마우스 이벤트는 페이지에서 마우스가 움직일 때, 클릭할 때, 더블 클릭할 때, 누르기, 놓을 때 등의 이벤트를 말합니다. mousemove(), mousedown(), mouseup()을 통해 사용할 수 있습니다. , mouseenter() , mouseleave(), hover() 및 바인딩할 기타 메서드입니다.

5. 페이지 스크롤 이벤트

스크롤 이벤트는 사용자가 페이지를 스크롤할 때 발생하는 이벤트를 말하며, scroll() 메소드를 통해 바인딩할 수 있습니다.

위는 페이지에서 요소를 빠르게 찾고 이벤트 바인딩을 수행하는 데 도움이 되는 일반적으로 사용되는 이벤트 및 선택기입니다. 물론 jQuery는 다른 많은 기능과 메서드도 제공하며 관심 있는 독자는 스스로 학습하고 탐색할 수 있습니다.

위 내용은 선택 이벤트를 사용하여 jquery 페이지를 로드할 때 사용할 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!