>웹 프론트엔드 >JS 튜토리얼 >그 시절 나는 여전히 jquery를 배우고 있었습니다. Study Notes_jquery

그 시절 나는 여전히 jquery를 배우고 있었습니다. Study Notes_jquery

WBOY
WBOY원래의
2016-05-16 17:55:32927검색

Jquery는 자바스크립트로 작성된 라이브러리로, 일반적으로 사용되는 많은 메서드를 제공합니다. 이러한 메서드는 여러 브라우저와 호환될 수 있으며 해당 기간의 연구 노트를 살펴보겠습니다. 🎜> 1. $ 기호
1. 선택기
html 태그, ID, 클래스 등을 선택할 수 있습니다.
다음과 같습니다.

code 코드는 다음과 같습니다.
 

2. 태그에서 속성 가져오기

코드 복사 코드는 다음과 같습니다.
var sTitle = $("p>span").attr("Title") //태그의 속성 값 가져오기
$ ("p>a" ).text(sTitle);//값을 설정합니다. text()를 사용하여 값을 얻으면 html을 제외하고 얻은 텍스트가 됩니다

3. 속성 설정

코드 복사 코드는 다음과 같습니다.
$("button:gt( 0)").attr("disabled", "disabled "); //첫 번째 버튼 뒤의 버튼을 가져온 다음 비활성화 속성을 사용할 수 없도록 설정합니다. 이 속성이 없으면 정의되지 않은 값이 반환됩니다.
$("img ").attr({ src: "test.jpg" , alt: "테스트 이미지" });

3.1. 속성 삭제
$("img").removeAttr("src ");
 4. 클래스 수정, 존재하는 경우(존재하지 않는 경우) 클래스를 삭제(추가)합니다.

코드 복사 코드는 다음과 같습니다.
$(
function() {
$("div>p").mouseover(
function() {
$(this).toggleClass("HightLight");//스타일 클래스 수정
}
) ;
}

4.1. 클래스 제거
$("p").removeClass("selected")
4.2. ).addClass( "selected");
5. 사진 복사
 $("img:eq(0)").clone().appendTo($("p")); 첫 번째 사진
 6. 이벤트 바인딩, 여러 개의 동일한 이벤트를 바인딩할 수 있습니다


$(function() {
$("img").bind("click", function() { //바인딩 이벤트
alert("Click! 1");
});
 $("img").bind("click", function() { //바인딩 이벤트
alert("Click! 2");
}); })


7. 이벤트 제거


코드 복사 코드는 다음과 같습니다. $(function() {
$("input[type=button]").click(function() {
$("img").unbind("click", eventImg );//바인딩 해제하여 메소드
})
})


요소 표시 및 숨기기



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

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



<시간 />
log

다음과 같습니다.



코드 복사
코드는 다음과 같습니다. $ ("#Button3").click( function() { $("#imgs").fadeIn(10000); })
$("#Button4").click(function( ) {
$("# imgs").fadeOut(5000);
})


2. 슬라이드업() 및 슬라이드다운() 메소드로 구현됨



코드 복사
코드는 다음과 같습니다. $("#Button1").click(function () { $("#imgs ").slideUp(10000) })
$("#Button2").click(function() {
$("#imgs ").slideDown(5000);
});


3. Jquery 기능 함수
1. 브라우저 감지 $.browser, 다음과 같습니다.



코드 복사
코드는 다음과 같습니다. if ($.browser.msie) return Alert("IE"); 🎜>if ($.browser.safari) return Alert( "safari"); if ($.browser.mozilla) return Alert("mozilla") if ($.browser.opera) return Alert ("opera");

2. 박스 모델 $.boxModel은 다음과 같습니다.
Alert($.boxModel ? "standard" : "IE") 3. javascript 객체 처리 $.each(arr,function) //배열의 경우 각 객체는 다음과 같이
함수 함수로 처리됩니다.



코드 복사


코드는 다음과 같습니다.
$.grep(Arr,funtion(value)):Filter
예:



코드 복사


코드는 다음과 같습니다.

이 글은 모두 그 해의 학습 노트에서 파생되었습니다.
요약
Jquery 라이브러리에는 많은 기능이 있으며 그 중 특히 Jquery의 Ajax는 매우 중요합니다. 이 글은 그 시절 Jquery를 배우던 시절을 회상합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:Node.js 간단한 웹 서버_자바스크립트 기술 구축 연습다음 기사:Node.js 간단한 웹 서버_자바스크립트 기술 구축 연습

관련 기사

더보기