그냥 JQuqery을 배우고 시작하는 $ get 및 많은 (), ... 등 기호를 이미 내 현기증을 설정합니다. 일시적으로 포기.
이후, 마이크로 소프트의 지도력하에 ASP.NET AJAX를, 학습, 점차적으로 서버 측 클라이언트 측 프로그래밍에서 이동. 클라이언트 측 프로그래밍에 내 관심을 불러 일으켰다
. JQuery와에 대한 학습 기억
, 인터넷에서 통신 WEB2.0의 급속한 발전과 아약스 생각으로 더 유명한 중 하나가 프로토 타입, YUI 있으며, 일부 우수한 JS 프레임 워크에서 발견 된 jQuery를, Mootools의이 Bindows 국내 JSVM 프레임 워크,이 JS를 통해 프레임 워크는 우리의 프로젝트에 적용 설계 및 복잡한 응용 프로그램을 작성 JS에서 해방 프로그래머 수, 초점은 기능적 요구 사항보다는 구현 세부 켜져 하여 프로젝트의 개발의 속도를 증가.
jQuery를 다른 우수한 자바 스크립트 프레임 워크의 두 번째 프로토 타입입니다. 그것은 자바 스크립트 ™와 Ajax 프로그래밍을 단순화하는 데 도움이 존 레식에 의해 2006 년 초에 만들어졌다. 어떤 사람들은 프로토 타입과 jQuery를 비교하는 등의 은유를 사용 루비와 같은 자바, jQuery를 같은 프로토 타입을 그것을 당신이 단순히 웹 페이지 문서에서 작동 이벤트를 처리 할 수있는 간단하고 신속하고 유연한 자바 스크립트 프레임 워크입니다. 웹 페이지에 특수 효과를 달성하기 위해 아약스의 상호 작용을 추가 할 수 있습니다.
: 그것은 다음과 같은 특징이 몇 가지있다
1, 의미 론적 이해하기 쉬운 간결한 코드, 빠르고, 풍부한 문서를 학습.
2, jQuery를 자바 스크립트 패키지의 최신 버전은 약 20K, 그 코드가 매우 작고, 가벼운 스크립트입니다.
3, jQuery를 지원 CSS1 - CSS3, 기본 XPATH.
4, jQuery를가 IE 6.0 이상, FF 1.5 이상, 사파리 2.0 이상을 포함하여 브라우저를 지원하는 크로스 브라우저이며 , 오페라 9.0를.
5, jQuery를 용이하게 다른 기능을 확장 할 수있다.
6 HTML 코드와 JS 코드는 완전히 분리, 쉬운 유지하고 코드를 수정 할 수 있습니다.
7, 플러그인이 풍부한, 일부 특수 효과와 jQuery를 자체뿐만 아니라, 당신은 양식 유효성 검사, 탭 탐색, 드래그 및 효과를 드롭, 테이블 정렬, 데이터 그리드, 트리 메뉴, 아약스 업로드 이미지와 특수 효과와 같은 플러그인을 통해 더 많은 기능을 달성 할 수있다.
jQuery를이 자바 스크립트 코드를 작성하는 방법을 변경하도록 설계되어, 당신이 운영 페이지의 복잡성을 줄이기 위해 JS를 사용하는 방법을 배우게 웹 JS는 모두 초보자와 전문가 JS를 들어, jQuery를 귀하의 첫 번째 선택이 될 것입니다, 개발 효율성을 향상시킵니다.
JQuery와 디자이너, 개발자에 적합하고, 다행히, 또한 상업 개발에 적합한 사람은, 그것은 어디서나 jQuery를 자바 스크립트 애플리케이션을 위해 말할 수있다, 그것은 다른 웹 응용 프로그램을 사용할 수 있습니다.
공식 사이트 : HTTP : 중국어 사이트 //jquery.com/ : HTTP : //jquery.org.cn/
1.2 목적
이 문서 전체에서는, 문법 공통 팁과주의 사항 및 다른 JQuery와 JS jQuery를 워크 파 분명히 다른 jQuery를 이해의 간단한 이해를 가질 수있다.
둘째, 사용
페이지로 JQuery와 JS 파일을 소개하는이에 JQuery와 사용할 필요가있다.
예를 들면 : <스크립트 유형 = "텍스트 / 자바 스크립트"SRC는 = "JS / jquery.js"> </ SCRIPT>
이 페이지에 어디에서 제공하는 jQuery를 구문을 사용할 수 있습니다 도입 후.
셋째, 튜토리얼 및 참조 정보
"jQuery를 중국어 API 설명서"를 http://jquery.org.cn/visual/cn/index.xml 참조는
이 좋은 JQuery와 튜토리얼을 권장 : "사용"의 jQuery 자습서 지점을 시작하기 " "jQuery로 Ajax 개발을 단순화하기
넷째, 구문 요약 및 메모
페이지 요소에 인용 1,
ID, 클래스, 요소 이름과 jQuery의 $ ()에 의한 요소 및 DOM 또는 XPath는 조건의 계층 관계에 의한 방법을 포함하여 요소를 참조 객체와 JQuery와 개체 (개체의 컬렉션)으로 되돌아가 직접 할 수 없다 메서드 호출을 DOM 정의.
2, 변환 jQuery를 대상 DOM 객체는
단지 JQuery와 JQuery와 Object 정의를 사용합니다. 참고 JQuery와 DOM 객체와 객체를 사용하면 호출 할 때 작업의 방법은 JQuery와 DOM 객체 또는 객체에 관심을 지불하는 것입니다 다릅니다.
공통 DOM 객체는 일반적으로 JQuery와 $하여 객체로 변환 할 수있다 ().
예를 들면 : $은 (document.getElementById를은 ( "MSG" )) , JQuery와 객체와 비교, 당신이 JQuery와 방법을 사용할 수 있습니다.
JQuery와 객체는 콜렉션 자체이기 때문입니다. DOM의 JQuery와 객체가 객체로 변환하는 경우 그래서 일반적으로 인덱스에 의해 제거 될 사람들의 어떤에서 제거해야합니다.
예를 들면 : $ ( "#의 MSG")은 [0], $ ( "DIV") 당량 (1) [0], $ ( "DIV")이 얻을 수 () [1], $ ( "TD") 5 .. 이들 DOM 객체이며, DOM 방법이 사용될 수 있지만, JQuery와 방법을 사용할 수 없다.
다음 버전이 정확 :
$ ( "#의 MSG") HTML ();
$ ( "# 메시지") [0] .innerHTML;
$ ( "#의 MSG") EQ (0) [0] ... innerHTML을,
$ ( "#의 MSG") GET (0) .innerHTML;
3 JQuery와의 특정 세트를 획득하는 방법
당량 사용할 수있다 (인덱스에 의해 지정된) 항목을 취득하고, 상기 요소의 컬렉션의 취득 또는 (N)를 얻거나 인덱스 번호 취득 방법 당량 jQuery에 객체를 반환하는 것이 주목되어야 및 (n)을 얻을 인덱스 요소 객체의 DOM을 반환합니다. 단지 JQuery와 JQuery와 개체를 사용하고,하기위한 방법은 제 콘텐츠 <div> 엘리먼트를 획득하는 등, DOM DOM의 방법을 허용한다. 두 가지 방법이 있습니다 :
$ ( "DIV") EQ (2) .html 중에서 (); // 호출 JQuery와 객체 방법은.
$ ( "사업부") GET (2) .innerHTML; // 메소드 호출 DOM 속성.
4, 동일한 기능 세트를 달성하고 얻을
주로 다음과 같은 포함, JQuery와 사실이다 방법을 많이 :
$ ( "#의 MSG") HTML을 (); //는 요소 노드 MSG의 id HTML 콘텐츠를 반환합니다.
$ ( "#의 MSG") HTML ( "<B> 새로운 콘텐츠 </ B>" );
//은 "<B> 새로운 콘텐츠 </ B>" 내용 작성된 HTML 엘리먼트 노드 ID의 문자열로 MSG 페이지 표시 대담한 새로운 콘텐츠
$ ( "#의 MSG") 텍스트 (); // 요소 노드 MSG의 텍스트 내용의 ID를 반환합니다.
$ ( "#의 MSG") 문자 ( "<B> 새로운 콘텐츠 </ B>" );
//은 "<B> 새로운 콘텐츠 </ B>" MSG되는 텍스트 문자열 id 요소 노드 콘텐츠로 작성된 페이지 표시 <B> 새로운 콘텐츠 </ B >
$ ( "#의 MSG") 높이 // (); 엘리먼트 높이 MSG의의 ID를 돌려
$ ( "#의 MSG")의 높이 ( "300"); // 소자 MSG (300)의 높이에 ID를 설정
$ ( "#의 MSG") 폭 // (); 소자 MSG의 폭의 ID를 반환
$ ( "#의 MSG") 폭 ( "300"); // 소자 MSG (300)의 폭에 ID를 설정
$ ( "입력") 브로는 ( "); // 양식 입력 상자 값 값 리턴
(입력 ') 브로. $"를 ( "테스트"); // 테스트의 값 값 형태 입력란
$ ( "#의 MSG") 클릭 (); // 에 id MSG에게 클릭 이벤트 트리거
$ ( "#의 MSG") 클릭 //이 (FN을); 요소 MSG ID의 클릭 이벤트에 함수를 추가
마찬가지로 선택, 집중, 흐림, 제출 이벤트는 메소드를 호출하는 두 가지 방법을 가지게 될 수있다
5, 처리 기능의 집합
콘텐츠 JQuery와의 수집은 각각 개별적으로 객체 및 가공을 통해 우리 자신의 루프를하지 않고 반환, JQuery와 컬렉션 처리하는 매우 편리한 방법으로 우리를 제공하고 있습니다.
두 가지 형태 :
. $ ( "P")는 각 (함수 (I) = {this.style.color [ '#의 F00', '# 0f0의', '# 00F']})
// 인덱스는 0이었다 쪽 요소 1과 2는 서로 다른 폰트 칼라를 설정한다.
$ ( "TR"). 각 (함수 (I) {this.style.backgroundColor = '#의 CCC', '# FFF'] [% I 2]})
// 인터레이스 변색 형태의 효과를 달성
$ ( "P"). 클릭 (함수 () {경고 ($합니다 (이) .html 중에서 ())})
의 내용의 팝업 요소, 페이지를 클릭 페이지의 각 요소에 대한 클릭 이벤트를 증가 //
도 6은 우리의 기능을 확장 할 필요가
$ .extend을 ({
<:; ,?} B B를 A : 분 기능 (A, B) {A를 반환
맥스 : 기능 (A, B) {복귀 A> B A를 :? B 단계; }
}); // 확장 JQuery와 분, 최대 두 방법
확장 프로세스 (이하 "$ 메소드 이름."전화)를 사용 :
경보 ( "A = 10, B = 20, 최대이다 ="$ + 최대 (. 10,20) + ", 최소값 =" + $ 분 (10, 20));
(7)의 합자 방식에 대한 지원이
다른 방법 JQuery와 객체의 다양한 연속 통화를 할 수있다 소위 합자.
예를 들면 다음과 같습니다
. $ ( "P")를 클릭 (함수 () {경고 ($합니다 (이) .html 중에서 ())})
.mouseover (함수 () {경고 () 마우스 이벤트를 통해 '})
.each (기능 ( ⅰ) {this.style.color = '#의 F00', '# 0f0의', '#의 00F']});
8, 운영 스타일 요소는
다음과 같은 방법을 포함한다 :
$ ( "#의 MSG") CSS ( "배경"); //이 요소의 배경 칼라를 돌려줍니다.
$ ( "# 메시지") CSS ( "배경",. " #ccc "회색 배경에 요소 설정 //)
을 $ ("#의 MSG ")의 높이 (300); $ ("#의 MSG ") 너비. ("200 "); // 화면 설정
을 $ ("# MSG ".) CSS ({색상 :"빨간색 "배경"블루 "}) // 이름 - 값 쌍의 형태로 설정 패턴
") addClass ( "$는 (. "#의 MSG 선택 "); //이 있다 클래스 높이기 위해 요소의 이름을 선택
$ ( "#의 MSG") removeClass는 ( "선택을"); // 클래스 선택 요소 이름을 삭제
$ ( "#의 MSG") toggleClass는 ( "선택을"); // 만약이 선택 (추가) 삭제 클래스의 이름을 (존재하지 않음)
9 취급 완벽한 이벤트
JQuery와 이벤트 처리 방법의 다양한으로 우리를 제공하고, 우리는 html 요소에 직접 이벤트를 작성할 필요가 없으며, 객체는 이벤트를 추가 할 JQuery와 직접 얻을 수 있습니다.
예를 들면 :
$ ( "#의 MSG")를 클릭 (함수 () {경고 () "좋은"}) // 요소에 대한 클릭 이벤트를 추가합니다.
$ ( "P- 형")를 클릭 (기능 (I) {this.style을. .color = [ '#의 F00', '# 0f0의', '# 00F']})
// P 세 가지 요소가 다른 클릭 이벤트를 설정하는 처리이다
이벤트를 jQuery를 몇 가지 정의 :
(1 ) 호버 (을 Fn1, Fn2를) 모의 마우스 오버 이벤트 (마우스 상기 대상물) 방법 중 물체를 이동. 상기의 정합 소자, 마우스 이동, 그것은 지정된 제 기능을 트리거 할 때. 이 요소 중 마우스, 그것은 두 번째 지정된 함수를 트리거합니다.
행이 클래스에 이상 설정하면 마우스가 테이블에 배치 // 때, 생략하도록 설정되어 있습니다.
$ ( "TR") 호버 (함수 () {.
$ ( "위에"는이를) .addClass ();
}
함수 () {
$ (이 본) .addClass ( "OUT")
})
(2) READY (FN) : DOM을 조회하고 조작 할 준비가되면 기능을 결합 실행합니다.
$ (문서) .ready (함수 ( ) {경고 ( "로드 성공"
)}) // 페이지 프롬프트 "로드 성공", onload 이벤트에 해당하는로드됩니다. 그리고 $ (FN) 상당
(3) 토글 (evenFn, oddFn ) : 클릭 할 때이 기능을 전환 할 때마다 호출된다. 당신이 경기의 요소를 클릭하면 다음 두 번째 지정된 함수를 트리거, 다시 같은 요소를 클릭하면 지정된 첫 번째 함수를 트리거합니다. 후속 클릭이 두 함수를 호출 회전을 계속한다.
// 추가를 클릭 할 때 호출 선택한 클래스의 각 회전을 삭제합니다.
$ ( "P") 토글 (함수 () {.
$ ( '선택'이 본) .addClass ();
} 함수 () {
$ (이 본) .removeClass () '선택';
})
. (4) 트리거 (EVENTTYPE)마다 유사한 요소에 한 유형의 이벤트를 발생시킨다.
예를 들면 :
$ ( "P")는 트리거 ( '클릭'), 모든 페이지 요소에 대한 클릭 이벤트를 트리거 //.
(5) 바인딩 (EVENTTYPE, FN을 (EVENTTYPE) 바인드 해제) : 바인딩 및 바인딩 해제 이벤트
에서 각각 정합 소자의 이벤트 삭제 결합 (추가).
예를 들면 다음과 같습니다
. $ ( "P") 바인드 (이하 "클릭", 기능 () {경고 ($합니다 (이)는 .text ());}); // 각 페이지 요소에 대한 클릭 이벤트를 추가
$ ( "P" ) .unbind (); // 모든 페이지 요소에 대한 모든 이벤트 삭제
$ ( "P") 결합 해체 ( //) "클릭" 모든 페이지 요소에 클릭 이벤트를 삭제합니다.
10, 몇몇 실제적인 효과의 기능
전환 () 및 slideToggle () 메소드는 상태 전환 기능을 제공하는 방법.
수피 () 및 표시 () 메소드를 포함하는 토글 () 메소드.
slideDown () 메소드를 포함 slideUp slideToggle () 메소드.
11, 몇 가지 유용한 jQuery를 방법
$의 .browser 브라우저 유형 : 브라우저 유형을 감지합니다. 효과적인 매개 변수 : 사파리, 오페라, MSIE, 모질라 . 이러한 예 :. $ Browser.isie 여부를 검출로, 브라우저, 즉 true를 돌려줍니다.
$ .each (OBJ, FN) : 일반적인 iterator 함수. 반복 객체 및 (원형 대신에) 배열을 근사화하는데 사용될 수있다. $의 .each ([0,1,2] 기능 (I, n)은 {경보 ( "아이템 #"+ I + ""+ N)}) : 동등 VAR = tempArr [0,1 2] 대 (VAR의 I = 0; I는 <tempArr.length; I는 ++) { 경보 ( "아이템 #"+ I + ""+ tempArr는) } 와 같은 데이터 처리를 JSON있다 $ .each ({상품명 : "존"LANG "JS "}, 기능 (I, n)은 {경보 ( "이름"+ I + ", 값"+ N)}) 결과 : 이름 : 이름, 값 존 이름 : 랭의 값 : JS $ .extend (목표는 prop1, propN) 하나 또는 그 이상의 다른 개체는 개체를 확장 객체가 확장 반환한다. 이것은 달성하기 위해 상속 JQuery와있다. 예를 들면 : $ .extend (설정,
설정 및 옵션을 병합하고, 옵션 상속과 승계는 설정에서 결과를 저장 설정의 해당하는 설정을 반환하는 결과를 결합 //.
설정 .extend $ = VAR ({}, 기본 설정, 옵션);
// 기본값이 결합 및 옵션과 결합 된 결과가 커버하지 않고 내용을 기본 설정으로 돌아갑니다했다.
여러 매개 변수 (합병 대가의 수)있을 수 있습니다
배열 매핑 : $ .MAP (배열의 FN을). 다른 배열 (후가공 변환)의 항목은 새로운 배열을 저장하고, 생성 된 새로운 배열을 반환한다.
예를 들면 :
VAR = $ tempArr지도; ;. ([0,1,2] 기능 (I) 4 + {I} 리턴.)
TempArr 함량 : [4,5,6]
VAR = $ tempArr지도 ([0. 1,2, 기능 (I) {복귀 I> 0 I + 1 개 :?는 null;.})
tempArr 함량 [2,3]
$ .merge (arr1의, arr2 임) : 두 배열 병합 및 삭제를 중복 항목.
같은 :. $ 병합 ([0,1,2] , [2,3,4]) // 반환 [0,1,2,3,4]
$ .trim (STR) : 공백 문자의 문자열의 양쪽 끝을 삭제 .
예를 들면 :;. "여보세요?여보세요, 방법 ("? 어떻게 안녕하세요 당신은 ") $ 트림 당신이"// 반환
12, jQuery를 충돌과 사용자 정의 방법 또는 다른 라이브러리 문제를 해결
요소를 얻기 위해 종종 $ (ID) 메소드의 우리 자신의 정의를, 또는 프로토 타입 같은 다른 JS 라이브러리는이 두 경우 $ 메소드를 정의 내용이 함께 변수 방법을 정의 충돌, JQuery와 전문 지식이 문제를 해결하는 방법을 제공하게됩니다.
에 jQuery.noConflict의 jQuery를 사용하여 ()를; 변수에 메소드가 전에 첫번째 $ 방법 라이브러리 또는 사용자 정의 구현의주고 제어를 $. $ jQuery를 모두는 원래 목표물 방법 $ ( "#의 MSG")로 대체 될 수만큼의 jQuery인가 시간 후 jQuery를 ( "#의 MSG")를 대체했다.
예를 들면 :
jQuery.noConflict ();
jQuery를 사용하기 시작하지 //
jQuery를 (이하 "P-DIV") 숨기기 ();
$ ()를 사용하여 // 다른 라이브러리
$ ( "콘텐츠") style.display를 = '없음'을 ;..