jquery의 DOM 작업 및 이벤트 학습 예 Yahoo 사서함 로그인 box_jquery의 프롬프트 효과 모방

하지만 이렇게 글을 쓰는 것은 매우 지루한 일입니다.

jquery의 장점은 간단한 코드로 더 나은 사용자 경험을 제공할 수 있다는 것입니다.

그래서 제가 생각하기에 실용적이라고 생각되는 몇 가지 사례를 찾아서 소개하겠습니다. 그런데, 거기에서 사용되는 조작이나 이벤트를 소개하겠습니다.

html 코드:



jquery 코드:

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

$(document).ready(function() {
$('#address').focus(function(){
var add_value=$(this).val();
if(add_value=="이메일 주소를 입력하세요."){
$( this).val("");
}
})
$('#address').blur(function(){
var add_value=$(this) .val();
if(add_value==""){
$(this).val("이메일 주소를 입력하세요.")
}
})
}) ;

주소 상자에 마우스 포커스가 오면 주소 상자의 값이 지워지는 효과가 있습니다. 마우스 포커스를 잃으면 주소 상자가 기본 설정으로 돌아갑니다.

여기에 사용된 jquery 이벤트를 소개합니다.

jquery 객체가 마우스 포커스를 얻을 때 focus()가 트리거되고 jquery 객체가 마우스 포커스를 잃을 때 Blur()가 트리거됩니다

그럼, 다른 마우스 이벤트도 소개해보겠습니다. mouseover()는 마우스가 객체 안으로 이동할 때 트리거됩니다. mouseout() 마우스가 객체 밖으로 이동할 때 트리거됩니다. mousemove()는 마우스가 객체 내에서 움직일 때 트리거됩니다.

사용된 jquery dom 연산:

val()은 요소 값의 값을 가져오고 요소 값의 값을 설정할 수도 있습니다. 함수 내에서 가져오고 설정하는 이 방법은 html(), text(), heigth(), width(), css(), attr() 등을 포함한 jquery

클래스에서 매우 일반적입니다.

여기서 html()과 text()를 구별합니다.

html()은 개체의 html 코드에 상대적인 반면, text()는 개체의 텍스트 내용일 뿐입니다.

예제

차이

$('p').html(). 결과는 Difference

$('p').text()입니다. 결과는 Difference

이 예제의 소개와 확장입니다.