jQuery_jquery의 일부 기능 및 사용법 요약

1. 정확하고 간단한 객체 선택(dom):

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

$('#element');// document.getElementById와 동일
("element")
$('.element');//클래스
$ ('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("slow")...

3. ):

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

$("# element").addClass("selected");/ /객체에 스타일 추가
$('#element').css({ "Background-color":"yellow", "font
-weight": "bolder" });//개체 스타일 변경
$("p").text("Some new text.");//개체 텍스트 변경
$("img").attr({ src: "test.jpg", alt: "테스트 이미지 "
});//객체 텍스트 변경
$("p").add("span");//객체 텍스트에 라벨 추가 object
$("p").find("span" );//객체 내부에서 해당 요소 찾기
$("p").parent();//객체의 상위 요소
$("p").append("Hello");//객체에 콘텐츠 추가

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

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

$("#feeds").load("feeds.html"); //정적 페이지 콘텐츠를 해당 영역으로 가져오기
$("#feeds").load("feeds.php" , {limit: 25}, function()
{alert("피드의 마지막 25개 항목이
로드되었습니다.");});//동적 콘텐츠 가져오기

5. 이벤트 지원:

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

$("p").hover(function () {
$(this).addClass( "hilite");//마우스를 놓았을 때
}, function () {
$(this).removeClass("hilite");//마우스 제거
});//마우스를 놓았을 때 올라가고 멀어지는 효과가 다릅니다(모든 p 객체를 자동으로 반복
)

6. 애니메이션:

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

$("p").show("slow");//숨겨진 개체(느린 그라데이션)
$("#go").click(function(){
$("#block").animate({
너비: "90%",
높이: "100%",
fontSize: "10em"
}, 1000
});//마우스 클릭 후 너비, 높이 및 글꼴의 동적 변경

7. 확장자:

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

$.fn.Background = function(bg) {
return this.css('Background', bg );
};
$(#element).Background("빨간색");