Jquery 소개 및 자세한 사용법-JS 튜토리얼-php.cn

이 기사는 Jquery에 대한 소개와 자세한 사용법을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. Jquery 소개

Jquery는 뛰어난 Javascrīpt 프레임워크입니다. 가벼운 js 라이브러리입니다(압축 후 21k). CSS3 및 다양한 브라우저(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)와 호환됩니다. 우리 프로젝트에 Jquery를 적용하면 프로그래머가 복잡한 JS 애플리케이션을 설계하고 작성하는 데서 벗어나 구현 세부 사항보다는 기능적 요구 사항에 관심을 돌릴 수 있어 프로젝트 개발 속도가 빨라집니다. JavaScript 및 Ajax 프로그래밍을 단순화하는 데 도움이 됩니다. 이를 통해 쉽게 문서를 조작하고, 이벤트를 처리하고, 특수 효과를 구현하고, 웹 페이지의 웹 페이지에 Ajax 상호 작용을 추가할 수 있습니다.

2. jQuery

a. 경량 b. DOM 작업, 이벤트 처리, 모션 애니메이션, AJAXd(브라우저 호환성은 더 이상 고려되지 않음) e. 암시적 반복 g. 풍부한 플러그인 라이브러리......

3. jQuery

사용 jQuery

路径引入
<script src=&#39;文件路径&#39;></script>
引入在线资源
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

로그인 후 복사

입력 함수

$(document).ready(function(){    
//类似于原生js的window.onload
});
//简写
$(function(){   });

로그인 후 복사

와 .onload의 차이점

차이점 1: 쓰는 횟수가 다릅니다

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

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

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

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

DOM 객체와 jQuery 객체

jQuery 객체:

jQuery 선택자는 DOM 객체를 가져와서 캡슐화하여 jQuery 메소드를 사용하는 jQuery 객체를 갖게 됩니다. DOM 객체가 다시 패키징되었습니다.

jQuery 객체를 DOM 객체로 변환

첫 번째 방법:

var btn1 = $btn[0];

로그인 후 복사

// 이때 jQuery 객체 $btn을 DOM 객체 btn1로 변환합니다(이 방법을 권장합니다). 두 번째 방법

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

로그인 후 복사

DOM 개체를 jQuery로 변환

$(domObject) 패키지를 사용하여 jQuery 개체로 래핑

jQuery 선택기

jQuery 선택기는 jQuery의 강력한 구현이며 A 세트를 제공합니다. 페이지의 요소를 보다 편리하게 얻을 수 있는 방법입니다. 구문은 CSS 선택기와 일치합니다.

Basic Selector

"#"

Id Selector

--Example

$(“#btnShow”).css(“color”, “red”);

로그인 후 복사

ID가 btnShow인 요소 선택(반환 값은 jQuery 객체)

" ."

클래스 선택기

--예

$(“.liItem”).css(“color”, “red”);

로그인 후 복사

liItem

"element"

태그 선택기

클래스가 있는 모든 요소 선택

--예

$(“li”).css(“color”, “red”);

로그인 후 복사

태그 이름이 li

"space"

레벨 선택기(하위 선택기)

--예

$(“#j_wrap li”).css(“color”, “red”);

로그인 후 복사

ID 선택 모든 하위 요소 li

">"

하위 선택기

--Example

$(“#j_wrap > ul > li”).css(“color”, “red”);

로그인 후 복사

ID가 j_wrap인 요소의 모든 하위 요소 ul 선택 모든 하위 요소 li

기본 필터 선택기

":eq(색인)"

选择匹配到的元素中索引号为index的一个元素，index从0开始

--示例

$(“li:eq(2)”).css(“color”, ”red”);

로그인 후 복사

选择li元素中索引号为2的一个元素

":odd"

选择匹配到的元素中索引号为奇数的所有元素，index从0开始

--示例

$(“li:odd”).css(“color”, “red”);

로그인 후 복사

选择li元素中索引号为奇数的所有元素

":even"

选择匹配到的元素中索引号为偶数的所有元素，index从0开始

--示例

$(“li:odd”).css(“color”, “red”);

로그인 후 복사

选择li元素中索引号为偶数的所有元素

筛选（方法）

find(selector)

查找指定元素的所有后代元素（子子孙孙）

--示例

$(“#j_wrap”).find(“li”).css(“color”, “red”);

로그인 후 복사

选择id为j_wrap的所有后代元素li

children()

查找指定元素的直接子元素（亲儿子元素）

--示例

$(“#j_wrap”).children(“ul”).css(“color”, “red”);

로그인 후 복사

选择id为j_wrap的所有子代元素ul

siblings()

查找所有兄弟元素（不包括自己）

--示例

$(“#j_liItem”).siblings().css(“color”, “red”);

로그인 후 복사

选择id为j_liItem的所有兄弟元素

parent()

查找父元素（亲的）

--示例

$(“#j_liItem”).parent(“ul”).css(“color”, “red”);

로그인 후 복사

选择id为j_liItem的父元素

eq(index)

查找指定元素的第index个元素，index是索引号，从0开始

--示例

$(“li”).eq(2).css(“color”, “red”);

로그인 후 복사

选择所有li元素中的第二个

jQuery各大版本的引用

官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
jquery-3.0.0
官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
jquery-2.1.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
jquery-2.1.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
jquery-2.0.0
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
jquery-1.11.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
jquery-1.11.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
jquery-1.10.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
jquery-1.9.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
jquery-1.8.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
jquery-1.7.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
jquery-1.6.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
jquery-1.5.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
jquery-1.4.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
jquery-1.4.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
jquery-1.3.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
jquery-1.2.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.2.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>

로그인 후 복사

위 내용은 Jquery 소개 및 자세한 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!