jQuery 기술 총화

9334 단어 jQuery기교 총화
1.소개 1.1.요약 은 WEB 2.0 과 ajax 사상 이 인터넷 에서 신속히 발전 하면 서 우수한 JS 프레임 워 크 가 계속 나 타 났 다.그 중에서 비교적 유명한 것 은 Prototype,YUI,jQuery,mootools,Bindows 와 국내의 JSVM 프레임 워 크 등 이 있다.이런 JS 프레임 워 크 를 우리 의 프로젝트 에 활용 하면 프로그래머 가 디자인 과 쓰기 가 복잡 한 JS 응용 에서 벗 어 날 수 있다.세부 적 인 것 보 다 는 기능 수요 로 관심 을 돌려 프로젝트 의 개발 속 도 를 높 인 다.jQuery 는 prototype 에 이 어 또 하나의 우수한 자바 script 프레임 워 크 입 니 다.이것 은 John Resig 가 2006 년 초 에 만 든 것 으로 자바 스 크 립 트 를 간소화 하 는 데 도움 이 된다.™ 그리고 Ajax 프로 그래 밍.어떤 사람 은 이러한 비 유 를 사용 하여 prototype 과 jQuery:prototype 을 자바 와 비교 합 니 다.jQuery 는 ruby 와 같 습 니 다.이것 은 간결 하고 빠 르 며 유연 한 JavaScript 프레임 워 크 입 니 다.웹 페이지 에서 간단 한 문서 조작,사건 처리,특수 효 과 를 실현 하고 웹 페이지 에 Ajax 상호작용 을 추가 할 수 있 습 니 다.그것 은 다음 과 같은 몇 가지 특징 을 가지 고 있다.코드 가 간결 하고 의미 가 이해 하기 쉬 우 며 학습 이 빠 르 고 문서 가 풍부 하 다.jQuery 는 경량급 스 크 립 트 로 코드 가 매우 작고 최신 판 자 바스 크 립 트 패 키 지 는 20k 정도 밖 에 안 됩 니 다.jQuery 는 CSS 1-CSS 3 및 기본 xPath 를 지원 합 니 다.jQuery 는 IE 6.0+,FF 1.5+,Safari 2.0+,Opera 9.0+를 지원 하 는 브 라 우 저 입 니 다.jQuery 의 다른 기능 을 쉽게 확장 할 수 있 습 니 다.JS 코드 와 HTML 코드 를 완전히 분리 하여 코드 와 유지 와 수정 에 편리 합 니 다.플러그 인 이 풍부 합 니 다.jQuery 자체 에 있 는 일부 효 과 를 제외 하고 플러그 인 을 통 해 더 많은 기능 을 실현 할 수 있 습 니 다.예 를 들 어 폼 검증,tab 네 비게 이 션,드래그 효과,표 정렬,DataGrid,트 리 메뉴,이미지 효과 와 ajax 업로드 등 입 니 다.jQuery 의 디자인 은 자바 스 크 립 트 코드 를 쓰 는 방식 을 바 꾸 고 JS 를 사용 하여 웹 페이지 를 조작 하 는 복잡 도 를 낮 추 며 웹 JS 개발 효율 을 높 일 것 입 니 다.js 초보 자 든 베테랑 전문가 든 jQuery 는 당신 의 최 우선 선택 이 될 것 입 니 다.jQuery 는 디자이너,개발 자,그리고 괜 찮 은 사람들 에 게 적합 하고 상업 개발 에 도 적합 합 니 다.jQuery 는 모든 JavaScript 응용 프로그램 에 적합 하고 서로 다른 웹 응용 프로그램 에 사용 할 수 있 습 니 다.공식 사이트:http://jquery.com/ 중국어 사이트:http://jquery.org.cn/ 1.2 목적 은 본 문 서 를 학습 함으로써 jQuery 에 대해 간단 한 인식 을 가지 고 JQuery 가 다른 JS 구조 와 달리 jQuery 의 상용 문법,사용 기법 과 주의사항 을 파악 할 수 있 습 니 다.2.사용 방법 은 JQuery 를 사용 해 야 하 는 페이지 에 JQuery 의 js 파일 을 도입 하면 됩 니 다.예 를 들 어을 도입 한 후 페이지 의 임의의 곳 에서 jQuery 가 제공 하 는 문법 을 사용 할 수 있 습 니 다.3.학습 과정 및 참고 자 료 는 와 를 참조 하 시기 바 랍 니 다.http://jquery.org.cn/visual/cn/index.xml 좋 은 jquery 튜 토리 얼 두 편 을 추천 합 니 다:와 4,문법 총화 와 주의사항 1,페이지 요소 에 대한 인용 은 jquery 를 통 해$()인용 요 소 는 id,class,요소 이름과 요소 의 등급 관계 및 dom 또는 xpath 조건 등 방법 이 있 으 며,돌아 오 는 대상 은 jquery 대상(집합 대상)이 며,dom 정의 방법 을 직접 호출 할 수 없습니다.2.jQuery 대상 과 dom 대상 의 전환 은 jquery 대상 만 jquery 가 정의 하 는 방법 을 사용 할 수 있 습 니 다.dom 대상 과 jquery 대상 은 차이 가 있 습 니 다.호출 방법 은 dom 대상 인지 jquery 대상 인지 주의해 야 합 니 다.일반적인 dom 대상 은 일반적으로$()를 통 해 jquery 대상 으로 변환 할 수 있 습 니 다.예 를 들 어$(document.getElement ById(msg)는 jquery 대상 으로 jquery 방법 을 사용 할 수 있 습 니 다.jquery 대상 자체 가 집합 이기 때문이다.따라서 jquery 대상 이 dom 대상 으로 전환 하려 면 그 중의 하 나 를 꺼 내야 합 니 다.보통 색인 을 통 해 꺼 낼 수 있 습 니 다.예 를 들 어$("\#msg")[0],$("div"),eq(1)[0],$("div"),get()[1],$("td")[5]는 모두 dom 대상 이 므 로 dom 의 방법 을 사용 할 수 있 지만 Jquery 의 방법 을 사용 할 수 없습니다.다음 몇 가지 문법 은 모두 정확 하 다.jquery 대상 에 대해 서 는 jquery 방법 만 사용 할 수 있 고,dom 대상 은 dom 방법 만 사용 할 수 있 습 니 다.예 를 들 어 세 번 째
요소 의 내용 을 가 져 오 려 면.다음 과 같은 두 가지 방법 이 있다.jquery 는 이미 우리 에 게 제공 한 매우 편리 한 방법 으로 집합 처 리 를 진행 했다.두 가지 형식 을 포함 합 니 다
 
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
6.우리 가 필요 로 하 는 기능 을 확장 합 니 다
 
$("div").eq(2).html(); // jquery
$("div").get(2).innerHTML; // dom
확장 하 는 방법("$.방법 명"을 통 해 호출):alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20);7.지원 하 는 방법의 연작 이란 jquery 대상 에 대해 다양한 방법 을 연속 으로 호출 할 수 있 습 니 다.예 를 들 어$("p").click(function(){alert($(this).html()}).mouseover(function(){alert('mouse over event')}).each(function(i){this.style.color=['\#f00','\#0f0','\#00f']});8.조작 요소 의 스타일 은 주로 다음 과 같은 몇 가지 방식 을 포함한다
 
$("#msg").html(); // id msg html 。
$("#msg").html("<b>new content</b>");
// “<b>new content</b>” html id msg , new content
$("#msg").text(); // id msg 。
$("#msg").text("<b>new content</b>");
// “<b>new content</b>” id msg , <b>new content</b>
$("#msg").height(); // id msg
$("#msg").height("300"); // id msg 300
$("#msg").width(); // id msg
$("#msg").width("300"); // id msg 300
$("input").val("); // value
$("input").val("test"); // value test
$("#msg").click(); // id msg
$("#msg").click(fn); // id msg
9.완 선 된 사건 처리 기능 인 Jquery 는 우리 에 게 각종 사건 처리 방법 을 제공 했다.우 리 는 html 요소 에 사건 을 직접 쓰 지 않 고 jquery 를 통 해 얻 은 대상 에 사건 을 직접 추가 할 수 있다.예 를 들 어$("\#msg").click(function(){alert("good")})//요소 에 클릭 이벤트$("p").click(function(i){this.style.color=['\#f00','\#0f0','\#00f']}을 추가 하 였 습 니 다.fn2):서 스 펜 션 이벤트(마우스 가 대상 위로 이동 하고 이 대상 을 옮 기 는 방법)를 모방 하 는 방법.마우스 가 일치 하 는 요소 위로 이동 하면 지정 한 첫 번 째 함수 가 실 행 됩 니 다.마우스 가 이 요 소 를 옮 길 때 지정 한 두 번 째 함수 가 실 행 됩 니 다./표 의 한 줄 에 마우스 가 놓 여 있 을 때 class 를 over 로 설정 하고 떠 날 때 out 으로 설정 합 니 다.$(")tr").hover(function(){ $(this).addClass("over"); }, function(){ $(this).addClass("out"); }); (2)ready(fn):DOM 불 러 오기 가 완료 되 었 을 때 실행 할 함 수 를 조회 하고 조작 할 수 있 습 니 다.$(document).ready(function(){alert("Load Success")})//페이지 로드 완료 알림"Load Success"는 onload 이벤트 와 달리 onload 는 페이지 내용 로드 완료(그림 등)가 필요 하 며,ready 는 페이지 html 코드 다운로드 가 완료 되면 터치 합 니 다.$(fn)와 등가(3)toggle(evenFn,oddFn):클릭 할 때마다 호출 할 함수 로 전환 합 니 다.일치 하 는 요 소 를 클릭 하면 지정 한 첫 번 째 함 수 를 터치 하고 같은 요 소 를 다시 클릭 하면 지정 한 두 번 째 함 수 를 터치 합 니 다.그 다음 에 클릭 할 때마다 이 두 함수 에 대한 번갈아 호출 을 반복 합 니 다./클릭 할 때마다 selected 라 는 class 를 번갈아 추가 하고 삭제 합 니 다.$(")p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); }); (4)trigger(eventype):일치 하 는 요소 마다 이벤트 가 발생 합 니 다.예 를 들 어$("p").trigger("click");/모든 p 요 소 를 촉발 하 는 click 이벤트(5)bind(eventype,fn),unbind(eventype):이벤트 의 바 인 딩 과 바 인 딩 은 모든 일치 하 는 요소 에서 바 인 딩 된 이 벤트 를 삭제 합 니 다.예 를 들 어$("p").bind("click",function(){alert($(this).text();});//각각 p 요소 에 이벤트$("p")를 누 르 십시오.unbid();/모든 p 요소 의 모든 이벤트$("p")를 삭제 합 니 다.unbid("click")/모든 p 요소 의 클릭 이벤트 10,몇 개의 실 용적 인 필터 기능 중 toggle()과 slidetoggle()방법 은 상태 전환 기능 을 제공 합 니 다.예 를 들 어 toggle()방법 은 hide()와 show()방법 을 포함한다.slideToggle()방법 은 slideDown()과 slideUp 방법 을 포함한다.11.몇 가지 유용 한 jQuery 방법$.browser.브 라 우 저 유형:브 라 우 저 유형 을 검사 합 니 다.유효 인자:safari,opera,msie,mozilla.ie:$.browser.isie 여 부 를 검사 하면 ie 브 라 우 저 는 true 로 돌아 갑 니 다.$.each(obj,fn):통용 되 는 교체 함수.유사 한 교체 대상 과 배열(순환 대체)에 사용 할 수 있 습 니 다.예 를 들 어$.each([0,1,2],function(i,n){alert("Item\#"+i+":"+n);});등가:var tempArr=[0,1,2];for(var i=0;i0?i + 1 : null; }); tempArr 내용 은:[2,3]$.merge(arr1,arr 2):두 개의 배열 을 합 쳐 중복 되 는 항목 을 삭제 합 니 다.예 를 들 어$.merge([0,1,2],[2,3,4])//[0,1,2,3,4]$.trim(str):문자열 양쪽 의 공백 문 자 를 삭제 합 니 다.예 를 들 어$.trim("hello,how are you?");/"Hello,how are you?"12.사용자 정의 방법 이나 다른 라 이브 러 리 와 jQuery 의 충돌 을 해결 할 때 우 리 는 스스로$(id)방법 을 정의 하여 요 소 를 얻 거나 다른 js 라 이브 러 리,예 를 들 어 prototype 과 같은$방법 을 정의 합 니 다.이 내용 을 함께 놓 으 면 변수 방법 정의 충돌 을 일 으 킬 수 있 습 니 다.Jquery 는 이에 대해 전문 적 으로 이 문 제 를 해결 하 는 방법 을 제공 합 니 다.jquery 의 jQuery.noConflict()사용 하기;방법 은 변수$의 제어 권 을 첫 번 째 라 이브 러 리 나 이전에 사용자 정의$방법 으로 양도 할 수 있 습 니 다.이후 Jquery 를 사용 할 때 모든$를 jQuery 로 바 꾸 면 됩 니 다.예 를 들 어 인용 대상 방법$("\#msg")를 jQuery("\#msg")로 바 꾸 면 됩 니 다.예 를 들 면
 
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
// 0,1,2 p 。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//
$("p").click(function(){alert($(this).html())})
// p click , p

좋은 웹페이지 즐겨찾기