Jquery 기본 지식 포인트에 대한 자세한 설명

이번에는 jquery의 기본 지식 포인트에 대해 자세히 설명하겠습니다. jquery의 기본 지식 포인트를 사용할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

jQuery는 CSS3 및 다양한 브라우저(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+), jQuery2.0 및 후속 버전과 호환되는 훌륭하고 가벼운 js 라이브러리입니다. 이 버전은 더 이상 IE6을 지원하지 않습니다. /7/8 브라우저. jQuery를 사용하면 사용자는 HTML(Standard Universal Markup Language의 응용 프로그램), 이벤트를 더 쉽게 처리하고, 애니메이션 효과를 구현하고, 웹 사이트에 AJAX 상호 작용을 쉽게 제공할 수 있습니다. jQuery의 또 다른 큰 장점은 문서가 매우 완벽하고 다양한 응용 프로그램도 자세히 설명되어 있다는 것입니다. 선택할 수 있는 성숙한 플러그인도 많이 있습니다.

1.jQuery 입력 함수와 Js 입력 함수의 차이점

[참고] js 입력 함수는 window.onload = function(){};

차이점 1: 쓰기 횟수는 다음과 같습니다. Different

Js 입력 기능은 한 번만 나타날 수 있습니다. 여러 번 나타날 경우 이벤트 적용 문제가 발생합니다.

jQuery의 입력 기능은 이벤트 적용 범위 없이 여러 번 나타날 수 있습니다.

차이점 2: 실행 시점이 다릅니다

Js 입력 기능은 모든 파일 리소스가 로드된 후에 실행됩니다. 이러한 파일 리소스에는 페이지 문서, 외부 js 파일, 외부 CSS 파일, 그림 등이 포함됩니다.

jQuery의 입력 기능은 문서가 로드된 후에 실행됩니다. 문서 로딩이 완료된다는 것은 DOM 트리가 로딩된 후 모든 외부 리소스가 로딩될 때까지 기다리지 않고 DOM을 작동할 수 있다는 것을 의미합니다.

문서 로딩 순서: 위에서 아래로, 파싱과 실행을 동시에 합니다.

2. jQuery 객체와 DOM 객체 간의 상호 변환

①여기서 DOM 객체는 js를 사용하여 DOM을 조작하여 반환된 결과를 의미합니다. DOM 조작 방법에 따라

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

3DOM 객체가 jQuery 객체로 변환

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

4jQuery 객체가 DOM 객체로 변환됩니다

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document）.ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

3. jQuery 선택기

기호(이름)#$("#btnShow").css("color", "red");.Class selector$(".liItem").css("color", "red "); elementTag selector$("li").css("color", "red");레벨 선택기space하위 항목 선택기$("#j_wrap li").css("color", "red");>$("#j_wrap > ul > li").css("color", "red") Basic filter selector:eq(index)$("li:eq(2)").css("color", "red")에서 시작합니다.에서 인덱스 번호 2가 있는 요소를 선택하세요. 홀수$("li:odd").css("color", "red")부터 시작합니다. ;

Description	사용법
기본 선택기(강조)
ID 선택기		Select 이드 btnShow의 요소입니다(반환 값은 jQuery 객체입니다. 아래와 같습니다)
		liItem
		라는 태그를 선택합니다. li 모든 요소
		select id 모두용 하위 요소 li
descendant selector		li의 모든 하위 요소 선택 ID가 j_wrap
인 요소의 모든 하위 요소 ul입니다. 일치하는 요소에서 인덱스 번호를 선택합니다. 인덱스의 요소이며, 인덱스는 0		li 요소
일치하는 요소 중 인덱스 번호가 홀수인 요소를 모두 선택하고 인덱스는 0		모든 요소 선택 li 요소에 홀수 인덱스 번호가 있습니다
:even	일치하는 요소 중 인덱스 번호가 짝수인 모든 요소를 ​​선택합니다. 인덱스는 0	$("li:odd").css("color", "red") 에서 시작합니다. li 요소에서 인덱스 번호가 짝수인 요소를 모두 선택
필터 선택기(메서드)(핵심)
find(selector)	지정 요소의 모든 하위 요소(후손) 찾기 Sun)	$("#j_wrap").find("li").css("color", "red"); ID가 j_wrap
children( )	지정된 요소의 직접 하위 요소(하위 요소)를 찾습니다	$("#j_wrap").children("ul").css("color","red"); 하나를 선택합니다. j_wrap의 ID를 가진 모든 하위 요소 ul
siblings()	모든 형제 요소 찾기(자기 자신 제외)	$("#j_liItem").siblings().css("color", "red "); id가 j_liItem
parent()	상위 요소 찾기(parent)	$("#j_liItem").parent("ul").css(" color" , "red"); id가 j_liItem
eq(index)	인 상위 요소를 선택합니다. 지정된 요소의 인덱스 번째 요소를 찾습니다. index는 0부터 시작하는 인덱스 번호입니다.	$("li ”).eq(2).css(“color”, “red”); 모든 li 요소 중 두 번째 요소를 선택하세요

다음 방법을 마스터하신 것 같습니다. 이 기사의 사례를 읽으면 더욱 흥미로울 것입니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천도서:

jquery의 전반적인 아키텍처 분석 및 사용에 대한 자세한 설명

jQuery 업로드된 이미지의 유형과 크기를 확인하는 방법에 대한 자세한 설명

jQuery 사용에 대한 자세한 설명 프레임워크

위 내용은 Jquery 기본 지식 포인트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!