jQuery 입력 Knowledge_jquery 소개

현재까지 jQuery는 1.4.2 버전으로 출시됐고, 일주일 전인 1.4 버전이 출시된 것을 보면, 각 버전의 출시 시기를 보면 빠르게 발전하고 있으며 매달 업데이트되고 있다는 것을 어렵지 않게 찾아볼 수 있다. . 리더인 John Resig는 "Pro JavaScript Techniques"라는 책을 썼습니다. Mozolla에서 근무하기 때문에 Firefox 3에는 Jquery가 포함될 것이라고 합니다. 현재 Jquery 팀에는 주요 개발자, 프로모터, UI, 플러그인 개발 및 웹 사이트가 포함되어 있습니다. 3을 포함한 디자인 및 유지 관리 주요 개발자는 미국인 John Resig/Brandon Aaron 2명, 독일인 Jorn Zaefferer 1명입니다.
다음은 jQuery의 일부 기능과 사용법을 간략하게 소개합니다.
1. 간단한 객체 선택(dom):

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

$('#element');// document.getElementById("element")
$('.element');//Class
$('p');//html 태그 $("form > input");/ /하위 개체
$("div,span,p.myClass");//동시에 여러 개체 선택
$("tr:odd ").css("Background-color", "#bbbbff" );//테이블의 인터레이스 배경
$(":input");//양식 개체
$("input[name=' newsletter']");//특정 양식 개체


2. 개체 기능의 적용은 간단하고 제한이 없습니다.

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

element.function(par)

$("p.surprise").addClass("ohmy").show ("느림")...


3. 선택한 개체에 대한 작업(스타일 포함):

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

$ ("#element").addClass("selected");//객체에 스타일 추가

$('#element' ).css({ "Background-color":"yellow", "font-weight": "bolder" });//객체 스타일 변경
$("p").text("새로운 텍스트입니다." );//객체 텍스트 변경
$("img").attr({ src : "test.jpg", alt: "Test Image" });//객체 텍스트 변경
$("p ").add("span");//객체에 라벨 추가
$(" p").find("span");//객체 내부에서 해당 요소 찾기
$(" p").parent();//객체의 상위 요소
$("p").append("Hello");//객체에 콘텐츠 추가


4. aJax 및 파일 형식 지원: xml/html/script/json/jsonp

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

$("#feeds").load("feeds.html ");//해당 영역의 정적 페이지 콘텐츠 가져오기

$("#feeds ").load("feeds.php", {한계: 25}, function(){alert("피드의 마지막 25개 항목이 로드되었습니다.");});//동적 콘텐츠 가져오기


4. 이벤트 지원:

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

$("p").hover(function () {

$(this).addClass("hilite");//마우스 이동 위로 올라갈 때
}, function () {
$( this).removeClass("hilite");//마우스 제거
});//마우스를 올리고 멀리 이동하는 다양한 효과(모든 p 객체 자동 반복)


5. 애니메이션:

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

$("p" ).show("slow");//숨겨진 개체(느린 그라데이션)

$("#go").click(function(){
$ ("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em"
}, 1000 )
} );//너비, 높이 및 글꼴의 동적 변경 마우스 클릭 후


6. 확장자:

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

$.fn.Background = function(bg){

return this.css('Background', bg)
}; 빨간색");


각 jQuery 객체에 함수를 추가하려면 해당 함수를 $.fn에 할당해야 하며, 함수는 this(jQuery 객체)를 반환해야 합니다.
jQuery 관련
《jQuery 배우기: 더 나은 상호 작용 jQuery 개발자가 작성한 jQuery 학습 방법에 대한 첫 번째 책인 "간단한 JavaScript 기술을 사용한 디자인 및 웹 개발"은 7월에 출시되었으며 관련 책 3권이 더 준비 중입니다.
10월 27일에는 jQuery 개발자들의 모임인 jQueryCamp 2007도 보스턴에서 개최됩니다.
VisualJquery는 Jquery 학습 및 쿼리 웹사이트로, 버전 1.1.2로 업데이트되었습니다.
jQuery 공식 홈페이지 소개 번역:
jQuery는 이전에 존재하지 않았던 JavaScript 라이브러리입니다.
빠르고 간결하며 HTML 문서 처리, 이벤트 제어, 애니메이션 및 Ajax 효과를 페이지에 쉽게 추가할 수 있습니다.
jQuery는 JavaScript 작성 방식을 변경하도록 설계되었습니다.
디자이너, 개발자, 괴짜, 비즈니스 애플리케이션 등 모든 사람에게 적합합니다...
작은 크기: 26.5KB(1.2.1 압축 버전), 45.3KB(1.2.1 라이트 버전), 78.6KB(1.2) .1 정식 버전)...20.7KB(1.1.2 압축 버전), 57.9KB(1.1.2 정식 버전)
호환성: CSS 1-3 및 기본 XPath 지원
크로스 브라우저: IE 6.0, FF 1.5, Safari 2.0, Opera 9.0(이전 버전과 호환 가능)
jQuery 플러그인:
Ajax(25)/Animation and Effects(26)/Browser Tweaks(6)/Data(17)/DOM(21) /드래그 앤 드롭(6)/이벤트(19)/양식(39)/통합(12)/JavaScript(20)/jQuery Extensions(37)/레이아웃(23)/미디어(13)/메뉴(13) /Navigation (23)/Tables (11)/User Interface (84)/Utilities (27)/Widgets (41)/Windows and Overlays (4)

jQueryUI 라이브러리:
기본 마우스 상호 작용: 드래그 및 놓기, 정렬, 선택, 크기 조정
다양한 대화형 효과: 아코디언 스타일 접기 메뉴(아코디언), 달력(날짜 선택기), 대화 상자(대화 상자), 슬라이더(슬라이더), 테이블 정렬기(테이블 정렬기), 탭( 탭), 돋보기효과(돋보기), 그림자효과(그림자)