jquery 간단한 경험_기본 지식

Jquery 간단한 경험
쿼리는 프로토타입 이후 또 다른 훌륭한 Javascrīpt 프레임워크입니다. 저는 프로토타입을 많이 사용하지 않으며, 단지 간략하게만 이해하고 있습니다. 하지만 jquery를 사용한 후 나는 그 우아함에 즉시 매료되었습니다. 어떤 사람들은 프로토타입과 jquery를 비교하기 위해 이 비유를 사용합니다. 프로토타입은 Java와 같고 jquery는 Ruby와 같습니다. 사실 저는 Java를 선호하지만(Ruby에 덜 노출됨) jquery의 단순한 실용성은 상당한 매력을 가지고 있습니다. 프로젝트에서는 jquery를 유일한 프레임워크 클래스 패키지로 사용합니다. 저도 사용하면서 약간의 경험이 있습니다. 사실 이러한 경험은 jquery의 문서에도 언급될 수 있지만 참고용으로 적어 두는 것이 좋습니다.
하나, 찾았어요!
$()를 기억하시나요? 프로토타입과 DWR 모두 document.getElementById() 대신 이 함수를 사용합니다. 예, jquery도 이를 따랐습니다. document.getElementById()의 목적을 달성하기 위해 jquery는 다음과 같이 작성됩니다.


Code
var someElement = $("#myId");

가 더 좋아 보입니다. other 두 프레임에는 추가 #이 있습니다. 다음 사용법을 살펴보겠습니다.
Code
$("div p");(1)
$("div.container")( 2)
$("div #msg");(3)
$("table a",context);(4)

프로토타입에서 이런 글을 본 적이 있나요? 코드의 첫 번째 줄은

태그 아래의 모든

요소를 가져옵니다. 코드의 두 번째 줄은 컨테이너 클래스가 있는

요소를 가져오고, 코드의 세 번째 줄은

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

Code
var a = $("#cid");(1)
var b = $("

안녕하세요

");(2)
var c = document.createElement("table"); var tb = $(c);

셋째, body 태그의 onload
규칙 대신, 아마도 $() 외에도 가장 많이 사용되는 곳은 다음과 같은 코드입니다:

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

(2)

위 두 코드는 동일하지만 코드 1의 장점은 성능과 로직을 분리할 수 있다는 점입니다. . 다른 js 파일에서도 동일한 작업을 수행합니다. 즉, $(document).ready(fn)는 충돌 없이 페이지에 반복적으로 나타날 수 있습니다. 기본적으로 이 기능 때문에 Jqeury의 많은 플러그인이 이 기능을 사용합니다. 함께 사용하면 초기화 시 충돌이 발생하지 않습니다.
어쨌든 이 규칙은 javascript와 HTML을 분리할 수 있습니다.
넷, 이벤트 메커니즘
버튼의 onclick을 많이 사용합니다. 입력 요소에 onclick = "fn()"을 작성하는 데 사용됩니다. jquery를 사용하면 "이벤트"라는 용어를 모르더라도 HTML 코드에서 자바스크립트 코드를 분리하고 HTML을 깔끔하게 유지하며 이벤트를 쉽게 바인딩할 수 있습니다. 🎜>
코드
$(document).ready(function(){
$("#clear").click(function(){
Alert( "테이블을 비우려고 합니다. ");
});
$("form[0]").submit(validate);
});
function verify(){
//양식 유효성 검사 수행
}

다섯째, 동일한 함수가 set&get

코드
$("#msg").html()
$ ("#msg")를 구현합니다. html("hello");

위의 두 줄은 동일한 함수를 호출하지만 결과는 매우 다릅니다.
첫 번째 줄은 지정된 요소의 HTML을 반환합니다. hello 문자의 문자열을 지정된 요소에 설정하는 것입니다.
Six, ajax
이 시대에는 ajax를 아는 사람이라면 누구나 사용할 수 있습니다. 오. ajax를 구현하기 위해 jquery를 사용하는 것은 똑같이 간단하고 비정상적인

Code
$.get("search.do",{id:1},rend)
function rend(xml){
경고( xml);
} (1)
$.post("search.do",{id:1},rend)
function rend(xml){
경고(xml) );
} (2)

$("#msg").ajaxStart(function(){
this.html("로드 중...");
}); ( 3)
$("#msg").ajaxSuccess(function(){
this.html("Loading done!");
});(4)

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

코드
$("#msg").fadeIn("fast")
$("#msg").fadeOut("slow" ) ;

예, 위의 두 줄의 코드는 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://www.codylindley.com/blogstuff/js/jtip/ Jtip , 실용적인 프롬프트 도구
http://jquery.com/plugins/ 멋진 플러그인이 많이 있습니다.
http://15daysofjquery.com/jquery의 15일 튜토리얼