jQuery 요약 01jq의 기본 개념+선택기

jQuery 기본 개념
학습목표: jQuery를 어떻게 사용하는지 습득하고 jQuery의 일반적인api를 습득하여 jQuery를 사용하여 흔한 효과를 실현할 수 있습니다.
 
왜 jQuery를 공부합니까?
[01-div 표시 및 설정 내용.html]
자바스크립트를 사용하여 개발하는 과정에서 많은 단점이 있습니다.

1.          ，  。
2.         ，         for  。
3.       。
4.            ，    
5.     。

 
jQuery 첫 번째 경험
[02-div에 내용 표시 및 설정.html]

$(document).ready(function () {
    $("#btn1").click(function () {
        //    ：     ， jQuery ，      for   ，       。
        $("div").show(200);
    });
​
    $("#btn2").click(function () {
        $("div").text("    ");
    });
});

요약:

1.            ，    
2.         ，        for   。
3.          。
4.         ，         。
5.     、  。

 
대비가 없으면 상처가 없고 대비가 있으면 곳곳에서 급소를 찌른다.
 
jQuery란?
jQuery 공식 홈페이지http://jquery.com/jQuery는 js 라이브러리입니다. jQuery를 사용하면 자바스크립트를 사용하는 것보다 간단합니다.
js 라이브러리: 자주 사용하는 방법을 단독 js 파일에 쓰고 사용할 때 이 js 파일을 인용하면 됩니다.(animate.js、common.js)
 
우리는 jQuery가 사실은 js 파일이라는 것을 알게 되었다. 그 안에 많은 방법을 봉하여 우리의 개발을 편리하게 했다. 사실은 강화판의common이다.js, 그래서 우리는 jQuery를 배운다. 사실은 jQuery라는 js 파일에 봉인된 많은 방법을 배운다.
 
jQuery 버전
홈페이지 다운로드 주소:http://jquery.com/download/jQuery 버전은 1로 나뉘어져 있습니다.x 2.x 3.x
 
주요 버전 분류:

1.x  ：    IE678   
2.x  ：   IE678   
1.x 2.x  jquery        ，     3.x  。
​
3.x  ：   IE678，     （      ，      jQuery         IE678）

 
압축판 및 비압축판 정보

jquery-1.12.4.min.js:    ，       ，       ，     、  、     ，          。
jquery-1.12.4.js:     ，          ，    ，   。

 
jQuery의 입구 함수
jQuery를 사용하여 다음 세 단계를 수행합니다.

1.   jQuery  
2.     
3.     

 
jQuery 엔트리 함수 정보:

//     
$(document).ready(function() {
    
});
//     
$(function() {
    
});

jQuery 입구 함수와 js 입구 함수의 대비

1.  JavaScript               （    、  ）         。
2. jQuery                     ，       、     。

 
jQuery 객체와 DOM 객체의 차이점(중점)

1. DOM  ：  JavaScript                   dom  。
2. jQuery  ：jquery      jquery                  jQuery  。
3. jQuery      DOM      （   DOM     （   ））
4. DOM   jQuery         。

 
DOM 대상을 jQuery 대상으로 변환: [연상 기억: 돈 쓰기]

var $obj = $(domObj);
// $(document).ready(function(){});     DOM   jQuery  
​

jQuery 객체를 DOM 객체로 변환하려면 다음과 같이 하십시오.

var $li = $(“li”);
//     （    ）
$li[0]
//     
$li.get(0)

【연습: 칸막이 변색 사례.html】
 
선택기
jQuery 선택기란?
jQuery 선택기는 jQuery가 제공하는 방법으로 페이지의 요소를 쉽게 얻을 수 있습니다.참고: jQuery 선택기는 jQuery 객체를 반환합니다.
jQuery 선택기는 매우 많은데 기본적으로 CSS1에서 CSS3까지의 모든 선택기를 호환하고 jQuery는 더욱 복잡한 선택기를 많이 추가했다.[jQuery 문서 보기]
jQuery 선택기는 많지만 선택기 간에 서로 대체할 수 있습니다. 원소를 얻으려면 여러 가지 방법이 있습니다.그래서 우리가 평소에 진정으로 사용할 수 있는 것은 단지 소수의 가장 자주 사용하는 선택기일 뿐이다.
 
기본 선택기
이름:
사용법
묘사
ID 선택기
$(“#id”);
지정된 ID의 요소 가져오기
클래스 선택기
$(“.class”);
같은 클래스class 요소 가져오기
태그 선택기
$(“div”);
같은 종류의 탭의 모든 요소 가져오기
통합 선택기
$(“div,p,li”);
조건 중 하나에 부합하기만 하면 쉼표로 구분할 수 있다.
교차 선택기
$(“div.redClass”);
클래스가 레드클래스인 div 요소 가져오기
총괄: css의 선택기 사용법과 똑같다.
 
계층 구조 선택기
이름:
사용법
묘사
하위 선택기
$(“ul>li”);
>호를 사용하여 아들 등급의 원소를 얻습니다. 주의, 손자 등급의 원소를 얻지 못합니다
후대 선택기
$(“ul li”);
빈칸을 사용하면 후대 선택기를 대표하여 l 아래의 모든 리 요소를 얻을 수 있습니다. 손자 등을 포함합니다.
 
CSS 선택기랑 똑같아.
필터 선택기
이런 종류의 선택기는 모두 사칭을 가지고 있다.
이름:
사용법
묘사
:eq(index)
$(“li:eq(2)”).css(“color”, ”red”);
가져온 리 요소 중 색인 번호 2의 요소를 선택하고 색인 번호 index는 0부터 시작합니다.
:odd
$(“li:odd”).css(“color”, ”red”);
가져온 리 요소 중 색인 번호가 홀수인 요소를 선택합니다.
:even
$(“li:even”).css(“color”, ”red”);
가져온 리 요소 중 색인 번호가 짝수인 요소 선택
【사례: 칸막이 변색】
필터 선택기(메서드)
선별 선택기의 기능은 필터 선택기와 약간 유사하지만 사용법이 다르기 때문에 선별 선택기는 주로 방법이다.
이름:
사용법
묘사
children(selector)
$(“ul”).children(“li”)
$("ul>li"), 하위 클래스 선택기
find(selector)
$(“ul”).find(“li”);
$("ulli"), 후대 선택기
siblings(selector)
$(“#first”).siblings(“li”);
형제 노드를 찾으세요. 자신을 포함하지 않습니다.
parent()
$(“#first”).parent();
아버지를 찾다
eq(index)
$(“li”).eq(2);
$("li:eq(2)"에 해당), index는 0부터 시작
next()
$(“li”).next()
다음 형제를 찾습니다.
prev()
$(“li”).prev()
형제를 찾다

【  ：    】this+children+mouseenter+mouseleave
【  ：    】siblings+find
【  ：   】next+parent
【  ：    】index+eq