뛰어난 js 오픈소스 프레임워크 - jQuery 사용자 매뉴얼(1)_jquery

jQuery는 프로토타입만큼 좋은 js 개발 라이브러리 클래스입니다. 특히 CSS와 XPath를 지원하므로 js 작성이 더욱 편리해집니다! js 전문가가 아니고 뛰어난 js 효과를 작성하고 싶다면 jQuery가 목표 달성에 도움이 될 수 있습니다!
다운로드 주소 : http://jquery.com

다운로드 후 문서에 먼저 로딩한 후 간단한 예시를 살펴보겠습니다!
<script> <BR> $(document).ready(function(){<BR> $("a").click(function() {<BR> Alert("Hello world!");<BR> });<BR>});<BR><script><BR> 위의 효과는 문서의 모든 태그를 클릭하면 대화 상자가 나타나는 것입니다. $("a")는 jQuery입니다. 선택기이며 $ 자체는 jQuery 클래스를 나타냅니다. 모든 $()는 jQuery 객체를 구성하는 것입니다. click()은 이 객체의 메서드입니다. 마찬가지로 $(document)도 jQuery 객체이고, Ready(fn)는 다음의 메서드입니다. $(document), 문서가 모두 끝났을 때를 의미 다운로드가 완료되면 기능을 실행합니다. <BR> 다음 내용을 진행하기 전에 $("p")와 $("#p")의 차이점에 대해서도 설명하고 싶습니다. $("p")는 모든 p 태그를 취한다는 의미입니다(<p></script>

) Element, $("#p")는 id가 "p"인 요소를 나타냅니다().

다음 내용에서 jQuery의 사용법을 설명하겠습니다.
1 :핵심부분
2:DOM 연산
3:css 연산
4:javascript 처리
5:동적 효과
6:이벤트 이벤트
7:ajax 지원
8: 플러그인

1: 핵심 부분
$(expr)
설명: 이 기능은 CSS 선택기, Xpath 또는 html 코드 대상 요소, 모든 jQuery 작업은 이
매개변수: expr: 문자열, 쿼리 표현식 또는 html 문자열
예:
jQuery가 실행되기 전:

하나

 

둘

 

셋

 jQuery

jQuery 코드 및 기능:
function jq(){
Alert($("div > p").html())
}
실행: 클릭 ID가 테스트할 때 요소, 팝업 대화 상자의 텍스트는 2개입니다. 이는 div 태그
function jq(){
$("

Hello

").appendTo("body");

}
실행: ID 테스트가 있는 요소를 클릭하면 "

Hello

"

를 추가합니다.
to body
$(elem)설명: jQuery를 특정 dom 요소로 제한합니다. 이 함수는 xml 문서 및 Windows 개체도 허용합니다.
매개 변수: elem: jQuery 개체로 압축된 DOM 요소
예:
jQuery를 실행하기 전:

하나

둘

셋

jQueryjQuery 코드 및 함수:
function jq(){
Alert($(document).find("div > p").html()) ;
}
실행: ID가 test인 요소를 클릭하면 팝업 대화 상자 텍스트가 2개로 표시됩니다. 이는 div 태그
function jq(){ 아래에 있는 p 요소의 내용입니다.
$(document.body) .ground("black");
}
실행: ID 테스트가 있는 요소를 클릭하면 배경색이 검정색으로 변경됩니다


$(elems) 설명: jQuery를 특정 DOM 요소 그룹으로 제한
매개변수: elem: jQuery 객체로 압축된 DOM 요소 그룹
예:
jQuery가 실행되기 전 :

jQueryjQuery 코드 및 함수:
function jq() {
$(form1.elements) .hide();
}
실행: id가 test인 요소를 클릭하면 form1 양식의 모든 요소가 숨겨집니다.


$(fn) 설명: 문서가 완전히 로드되었을 때 함수를 실행하는 $(document).ready()의 약어입니다. $(fn)은 여러 개가 있을 수 있으며 문서가 로드되면 모든 기능이 동시에 실행됩니다!
파라미터: fn(함수): 문서가 로드되면 실행되는 함수!
예:
$( function(){
$(document.body).Background("black");
})
실행: 문서가 로드되면 배경이 black , onLoad와 동일합니다.


$(obj) 설명: jQuery 객체를 복사합니다.
매개변수: obj(jQuery): 복사할 jQuery 객체
예:
jQuery를 실행하기 전:

하나

둘

세 개

jQuery
jQuery 코드 및 함수:
function jq(){
var f = $("div")
Alert($(f).find("p").html())
}
실행: 테스트로 ID가 있는 요소를 클릭하면 팝업 대화 상자 텍스트가 2개, 즉, div 태그 아래의 p 요소의 내용입니다.

each(fn)
설명: 일치하는 모든 객체에 함수를 적용합니다.
매개변수: fn(Function): 실행해야 하는 함수
예:
jQuery를 실행하기 전:


jQueryjQuery 코드 및 함수:
function jq(){
$("img" ).each(function(){
this.src = "2.jpg"; });
}
실행: test로 id가 있는 요소를 클릭하면 img의 src가 태그는 2.jpg가 됩니다.

eq(pos)
설명: 일치하는 객체를 별도의 dom 요소로 줄입니다.
매개변수: pos(Number): 0부터 시작하는 원하는 제한의 인덱스
예:
jQuery가 실행되기 전:

이것은 단지 테스트입니다.

이것도 마찬가지입니다

jQueryjQuery 코드 및 함수:
function jq(){
Alert($("p").eq(1).html())
}
실행: 클릭 시 ID는 다음과 같습니다. 테스트 요소를 테스트하면 경고 대화 상자가 표시됩니다. 즉, 두 번째

태그

get() get(num)
의 내용입니다. 설명: Get 일치하는 요소 get(num)은 일치하는 요소 중에서 요소를 반환합니다.
매개변수: get(Number): 0부터 시작하는 원하는 제한의 인덱스
예:
jQuery가 실행되기 전:

이것은 단지 테스트일 뿐입니다.

이것도 마찬가지입니다

jQuery
jQuery 코드 및 함수:
function jq() {
경고 ($("p").get(1).innerHTML);
}
실행: ID 테스트가 있는 요소를 클릭하면 경고 대화 상자가 표시됩니다. 즉, 두 번째

태그의 내용
get과 eq의 차이점에 주의하세요. eq는 jQuery 객체를 반환하고, get은 일치하는 dom 객체를 반환합니다. $("p" ).eq(1) 객체는 jQuery 메서드 html()을 사용하여 얻고 innerHTML

index(obj) 설명: 객체 인덱스 반환
매개변수: obj(Object): 찾을 객체
예시:
jQuery 실행 전:

jQueryjQuery 코드 및 함수:
function jq(){
Alert($("div").index(document.getElementById(' test1')));
Alert($("div" ).index(document.getElementById('test2')));
}
실행: test ID가 있는 요소를 클릭하면, 경고 대화 상자가 두 번 나타나고 각각 0과 1이 표시됩니다


size() 길이 설명: 현재 일치하는 개체의 수는 둘 다 동일합니다.
예:
jQuery 실행 전:



jQueryjQuery 코드 및 함수:
function jq(){
Alert( $("img").length);
}
실행: test라는 ID를 가진 요소를 클릭하면 경고 대화 상자가 팝업되고 2가 표시되어 일치하는 두 개체가 발견되었음을 나타냅니다.