jquery 일반 작업 구성 기본 소개_jquery

jQuery는 미국인 John Resig가 만들었으며 독일의 Jörn Zaefferer, 루마니아의 Stefan Petre 등 전 세계의 많은 JavaScript 전문가를 팀에 합류시켰습니다.
jQuery는 프로토타입 이후 또 다른 뛰어난 Javascript 프레임워크입니다. 그 목적은 - 적게 쓰고, 더 많이 하고, 더 적은 코드를 작성하고, 더 많은 일을 하는 것입니다.
다른 js 라이브러리의 범위를 넘어서는 경량 js 라이브러리(압축 후 21k)이며 CSS3 및 다양한 브라우저(IE 6.0, FF 1.5, Safari 2.0, Opera 9.0)와 호환됩니다.
jQuery는 사용자가 HTML 문서와 이벤트를 더 쉽게 처리하고, 애니메이션 효과를 얻고, 웹사이트에 AJAX 상호 작용을 쉽게 제공할 수 있게 해주는 빠르고 간결한 JavaScript 라이브러리입니다.
jQuery의 또 다른 큰 장점은 문서가 매우 완벽하고 다양한 애플리케이션이 자세히 설명되어 있다는 점입니다. 선택할 수 있는 성숙한 플러그인도 많이 있습니다.
jQuery는 사용자의 html 페이지의 코드와 html 콘텐츠를 분리하여 유지할 수 있습니다. 즉, 명령을 호출하기 위해 html에 여러 js를 삽입할 필요가 없으며 ID만 정의하면 됩니다.
Jquery는 프로토타입 이후 또 다른 뛰어난 Javascrīpt 프레임워크입니다. 저는 프로토타입을 많이 사용하지 않으며, 단지 간략하게만 이해하고 있습니다. 하지만 jquery를 사용한 후 나는 그 우아함에 즉시 매료되었습니다. 어떤 사람들은 프로토타입과 jquery를 비교하기 위해 이 비유를 사용합니다. 프로토타입은 Java와 같고 jquery는 Ruby와 같습니다. 사실 저는 Java를 선호하지만(Ruby에 덜 노출됨) jquery의 단순한 실용성은 상당한 매력을 가지고 있습니다. 프로젝트에서는 jquery를 유일한 프레임워크 클래스 패키지로 사용합니다. 저도 사용하면서 약간의 경험이 있습니다. 사실 이러한 경험은 jquery의 문서에서도 언급될 수 있지만 참고용으로 적어 두는 것이 좋을 것 같습니다.
하나, 찾았어요!
아직도 $() 일을 기억하시나요? 프로토타입과 DWR 모두 document.getElementById() 대신 이 함수를 사용합니다. 예, jquery도 이를 따랐습니다. document.getElementById()의 목적을 달성하기 위해 jquery는 다음과 같이 작성됩니다.
코드

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

var someElement = $("#myId")

다른 두 프레임워크보다 #이 하나 더 있는 것 같습니다. 다음 사용법을 살펴보세요.
　Code

코드 복사 코드는 다음과 같습니다.

　$("div p"); // (1)
　$("div.container") // (2)
　$("div #msg") // (3)
　$("table a",context ); // (4)

프로토타입에서 이런 글을 본 적이 있나요? 코드의 첫 번째 줄은 모든 태그 아래의 P 요소를 가져옵니다. 코드의 두 번째 줄은 컨테이너 클래스가 있는 요소를 가져오고, 코드의 세 번째 줄은 레이블 아래에 ID가 msg인 요소를 가져옵니다. 네 번째 코드 줄은 컨텍스트가 컨텍스트인 테이블의 모든 연결 요소를 가져옵니다.
CSS에 익숙하다면 이러한 작성 방법도 매우 익숙할 것입니다! 오른쪽. 정확히. 그 비밀을 보실 수 있습니다. 이것이 jquery가 Dom 객체에서 요소를 찾는 방법입니다. CSS 선택자와 유사합니다.
둘째, Jquery 객체?
jquery는 Each(fn) 등 편리한 기능을 많이 제공하지만, 이러한 기능을 사용하기 위한 전제 조건은 사용하는 객체가 Jquery 객체라는 것입니다. Dom 객체를 Jquery 객체로 만드는 것은 다음 방법 중 일부(일부)를 통해 매우 간단합니다.
코드

코드 복사 코드는 다음과 같습니다.

var a = $("#cid")
var b = $("hello")
var c = document .createElement("table") ;
　var tb = $©;

셋째, body 태그의 onload
를 교체하세요. $() 장소 외에 가장 많이 사용됩니다. 다음 코드 조각:
코드

코드 복사 코드는 다음과 같습니다.

$(document) .ready(function(){
　alert("hello");
　});(1)
　 (2)

위의 두 코드는 동일합니다. 하지만 코드 1의 장점은 성능과 로직을 분리한다는 것입니다. 그리고 동일한 작업이 다른 js 파일에서도 수행될 수 있습니다. 즉, $(document).ready(fn)가 충돌 없이 페이지에 반복적으로 나타날 수 있습니다. 기본적으로 Jqeury의 많은 플러그인은 이 기능을 활용하므로 초기화 중에 여러 플러그인을 충돌 없이 함께 사용할 수 있습니다.
어쨌든 이 규칙은 자바스크립트와 HTML을 분리할 수 있습니다. 추천합니다.
넷째, 이벤트 메커니즘
제가 자주 사용하는 이벤트는 아마도 버튼 클릭일 겁니다. 나는 입력 요소에 onclick = "fn()"을 작성하곤 했습니다. jquery를 사용하면 "이벤트"라는 용어를 모르더라도 HTML 코드에서 자바스크립트 코드를 분리하고 HTML을 깔끔하게 유지하며 이벤트를 쉽게 바인딩할 수 있습니다. .
　코드

코드 복사 코드는 다음과 같습니다.

　$(문서). Ready(function (){
　$("#clear").click(function(){
　alert("테이블을 비우려고 합니다");
　});
　$( "form[ 0]").submit(validate);
　});
　function verify(){
　//양식 검증 수행
　}

five , 동일한 함수가 집합을 구현합니다
코드

코드 복사 코드는 다음과 같습니다.

$("#msg").html();
　$("#msg").html("hello")

　위의 두 줄 코드에서 동일한 기능을 호출합니다. 그러나 결과는 매우 다양합니다.
첫 번째 줄은 지정된 요소의 HTML 값을 반환하고, 두 번째 줄은 지정된 요소에 hello 문자열을 설정합니다. 대부분의 jquery 함수에는 이 기능이 있습니다.
식스, 아약스
아약스가 횡행하는 시대다. ajax를 모르는 사람이라도 사용하기 시작한 사람은 얼마나 됩니까? 오. jquery를 사용하여 ajax를 구현하는 것은 똑같이 간단하고 비정상적인
코드

코드 복사 코드는 다음과 같습니다.

　$ .get("search.do",{id:1},rend)
function rend(xml){
alert(xml)
} (1)
$.post(" search.do",{id:1},rend);
function rend(xml){
alert(xml)
} (2)
$(" #msg").ajaxStart (function(){
　this.html("Loading...");
　});(3)
　$("#msg").ajaxSuccess(function( ){
This.html("로드가 완료되었습니다!");
});(4)

이러한 방법은 더 일반적으로 사용되며, get 및 post는 동일한 방식으로 사용됩니다. . 첫 번째 매개변수는 비동기 요청의 URL이고, 두 번째 매개변수는 매개변수이며, 세 번째 매개변수는 콜백 메소드입니다.
메소드 3과 4는 지정된 Dom 객체에 대한 Ajax 실행에 대한 응답으로 이벤트를 바인딩합니다. 물론 jquery에는 이러한 AJAX 관련 기능 외에도 더 많은 내용이 있습니다.
세븐, 페이드 인 앤 아웃
코드

코드 복사 코드는 다음과 같습니다 :

　$("#msg").fadeIn("빠름")
　$("#msg").fadeOut("느림")

그렇습니다. 위 두 줄의 코드는 ID가 Msg인 jquery 개체의 페이드 인과 페이드 아웃을 각각 구현했습니다. Gmail과 같은 동적 로딩 알림 표시줄을 만드는 것은 jquery를 사용하는 것만큼 간단합니다. 속도 등 외에도 두 기능에 의해 허용되는 매개변수는 페이드 인 또는 페이드 아웃의 완료 시간으로 사용되는 정수를 받을 수 있으며 단위는 MS입니다.
에잇, 플러그인
요즘은 플러그인 시대이기도 합니다.
jquery 플러그인은 깔끔하고 단순한 느낌을 줍니다. Jtip과 같은 기능을 사용하려면 요소의 클래스에 Jtip을 추가하고 jtip.js와 해당 스타일을 도입하기만 하면 됩니다. 다른 모든 플러그인이 포함되어 있습니다. 내가 jquery를 좋아하는 중요한 이유는 jquery가 이미 훌륭하고 멋진 플러그인을 많이 갖고 있기 때문입니다.
매우 형편없게 쓰여졌습니다. 어쩌면 당신은 jquery의 이점을 보지 못할 수도 있습니다. 뭐, 듣기만 하면 소용없어요. 한번 해보세요. 당신은 그것이 흥미로울 것입니다.
오늘로 끝내겠습니다. 새로운 발견이 있으면 다시 공유하겠습니다.
Jquery 리소스 추가:
http://www.visualjquery.com/index.xml 좋은 API 쿼리 사이트
http://jquery.com/demo/thickbox/ lightBox에 대해 알고 계십니까? Jquery가 동일한 기능을 어떻게 구현하는지 살펴보세요
　http://jquery.com/plugins/ 멋진 플러그인이 많이 있습니다.
　http://15daysofjquery.com/jquery의 15일 튜토리얼
　http://jquery.org.cn/visual/cn/index.xml //좋은 JQUERY 중국어 학습 추천
　jquery 소스
jQuery는 미국인 John Resig에 의해 만들어졌으며 독일의 Jörn Zaefferer, 루마니아의 Stefan Petre 등 전 세계의 많은 JavaScript 전문가가 합류했습니다.
jQuery는 프로토타입 이후 또 다른 뛰어난 Javascript 프레임워크입니다. 그 목적은 - 적게 쓰고, 더 많이 하고, 더 적은 코드를 작성하고, 더 많은 일을 하는 것입니다.
다른 js 라이브러리의 범위를 넘어서는 경량 js 라이브러리(압축 후 21k)이며 CSS3 및 다양한 브라우저(IE 6.0, FF 1.5, Safari 2.0, Opera 9.0)와 호환됩니다.
jQuery는 사용자가 HTML 문서와 이벤트를 더 쉽게 처리하고, 애니메이션 효과를 얻고, 웹사이트에 AJAX 상호 작용을 쉽게 제공할 수 있게 해주는 빠르고 간결한 JavaScript 라이브러리입니다.
jQuery의 또 다른 큰 장점은 문서가 매우 완벽하고 다양한 애플리케이션이 자세히 설명되어 있다는 점입니다. 선택할 수 있는 성숙한 플러그인도 많이 있습니다.
jQuery는 사용자의 html 페이지의 코드와 html 콘텐츠를 분리하여 유지할 수 있습니다. 즉, 명령을 호출하기 위해 html에 여러 js를 삽입할 필요가 없으며 ID만 정의하면 됩니다.
jQuery의 최신 릴리스 버전은 1.3.2입니다.
공식 다운로드 주소는 다음과 같습니다. http://code.google.com/p/jqueryjs/downloads/list
Microsoft의 Visual Studio 2008 sp1은 jquery에 대한 동적 프롬프트를 지원합니다. 코드에 있습니다. 해당 vsdoc 스크립트를 페이지로 가져오세요.