jquerydom object_jquery의 이벤트 숨기기 표시 및 객체 배열 예

1. 이벤트 처리

1.1. 이벤트 바인딩

bind(type,fn)

예:

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

$(function(){

//정식 쓰기
$('#d1 ' ).bind('click',function(){
$(this).css('font-size','80px');
})

//약식 형식
$('#d1').click(function(){
$(this).css('font-size','80px');
});

1.2. 결속방법의 약어

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

click(function(){
});

1.3. 합성 이벤트

hover(enter,leave): 커서 호버 이벤트 시뮬레이션
토글(fn1,fn2...): 연속 마우스 클릭 이벤트 시뮬레이션

예 1:

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

$(function(){
//별도의 이벤트
$('.s1').mouseenter(function(){
$ (this ).addClass('s2');
})

$('.s1').mouseleave(function(){
$(this).removeClass('s2' );
});

//합성 이벤트
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
})
})

예 2:

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

$(function(){
$( '#a1') .toggle(function(){
$('#d1').show('slow');
},function(){
$('#d1'). hide('slow' ; >1.4.1. 이벤트 객체 획득 // e와 같은 임의의 변수를 이벤트 처리 함수에 추가하기만 하면 됩니다.
// e는 실제 이벤트 객체가 아니라 기본 이벤트의 패키지입니다. 이벤트 객체

click(function(e){

})

예제 1:




코드 복사


코드는 다음과 같습니다.

$(function(){ $('a').click(function(e){ //e:jQuery 객체, 내부에는 이벤트 객체가 포함되어 있습니다. //target 속성은 이벤트 소스인 DOM 객체를 반환합니다. var srcObject = e.target; alert(srcObject.innerHTML); })

})

1.4.2.
event.stopPropagation();

예제 2:

코드 복사


코드는 다음과 같습니다.


$(function(){

$('a').click(function(e){ alert('링크를 클릭했습니다'); // 버블 중지e.stopPropagation(); }); $('#d1').click(function(e){

alert('div를 클릭했습니다.' ) ;

});
});


1.4.3. 기본 동작 중지

event.preventDefault();//예: 양식 제출

예시 3:

코드 복사


코드는 다음과 같습니다.


$( function(){

$('a').click(function(e){ var flag = verify('삭제하시겠습니까?'); if(!flag){ //기본 동작 중지 e.preventDefault(); } })

1.5.

event .type: 이벤트 유형
event.target: 이벤트 소스 반환(dom 개체입니다!!!)
event.pageX/pageY: 클릭한 지점의 좌표

예제 4:

코드 복사


코드는 다음과 같습니다.


$( function(){
$('a').click(function(e){

alert(e.type); //이벤트 유형 가져오기 alert(e. pageX ' ' e.pageY); } ); })

1.6.예:.$('xxx').mouseenter( );

$('xxx').trigger ('시뮬레이트된 이벤트');//

예 5:




코드 복사

코드는 다음과 같습니다.


$(function(){
$('#b1').click(function(){

//사용자 이름에 해당하는 텍스트 입력 상자에 포커스를 둡니다$('#username').trigger('focus') //또한 단순화할 수도 있습니다 $( '#사용자 이름').focus(); })
2. 애니메이션

2.1.show()/hide()//Show/Hide
//기능: 요소의 너비와 높이를 동시에 변경하여 표시 및 숨기기

사용법:
show(speed,[콜백 함수]);

속도에 "normal", "fast", "slow"를 사용하거나 밀리초를 사용할 수 있습니다

콜백 전체 애니메이션이 실행된 후 함수가 실행됩니다.

2.2.slideUp() / SlideDown()

//함수: 높이를 변경하여 표시 및 숨기기
요소 사용법은 위와 동일합니다.


예:

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

$ (function(){
$('#a1').toggle(function(){

$('#d1').show('slow');

$ ('#d1').slideDown('느린');

},function(){

$('#d1').hide('느린');

$('#d1').slideUp('slow');

})
})

2.3. fadeIn() / fadeOut()//페이드 인, 페이드 아웃

//기능: 요소의 불투명도를 변경하여 표시하고 숨깁니다
사용법은 위와 동일합니다.

예:

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

$ (함수( ){

$('#b1').toggle(함수(){

$('#d1').fadeOut('slow');

} ,function( ){

$('#d1').fadeIn('slow')

})


2.4.애니메이션 정의 이후

animate(params,speed,[callback])

params: //애니메이션 실행이 종료될 때의 스타일을 기술하는 자바스크립트 객체입니다.

speed: //속도, 단위는 밀리초입니다.

콜백: //애니메이션이 완료된 후 콜백 함수가 실행됩니다.


예:

코드 복사 코드는 다음과 같습니다. $ (function(){

$('#d1').click(function(){

//애니메이션 대기열
$(this).animate({'left':'400px' },3000 );
$(this).animate({'top':'250'},2000).fadeOut('slow')
});


3. 배열 유사 작업

//배열 유사: 발견된 모든 DOM 객체를 jQuery 객체로 캡슐화하는 jQuery 선택기를 참조합니다.

// 이러한 DOM 객체를 배열형 객체라고 합니다.

3.1.length 속성: //jQuery 객체에 포함된 DOM 객체의 개수를 가져옵니다.

3.2.each(fun(i)): //각 요소를 반복합니다. this는 반복되는 dom 객체를 나타내고,
//$(this)는 반복되는 jquery 객체를 나타냅니다.

3.3.eq(index): //인덱스 1에서 jquery 객체를 반환합니다.

3.4.index(obj): //아래 첨자를 반환합니다. 여기서 obj는 dom 객체 또는 jquery일 수 있습니다. 물체.

3.5.get(): //dom 객체 배열을 반환합니다.

3.6.get(index): //인덱스 1 dom 객체를 반환합니다.

예:




코드 복사

코드는 다음과 같습니다. $ (function( ){ $('#b1').click(function(){ //var $obj = $('ul li');

alert($obj.length);

$obj.each(function(i){
//i: 액세스 중인 DOM 객체의 첨자를 나타냅니다.
//첨자는 0부터 시작합니다.
//this : 액세스 중인 DOM 객체를 나타냅니다.
if(i==0){
$(this).css('font-size','60px')
}else if(i== 1 ){
$(this).css('font-style','italic')
}else{
$(this).css('color','red'); >}
});

//var $obj = $('ul li')
var $o = $obj.eq(1)//$ o .css('font-size','60px');
var index = $obj.index($o)
//alert(index)

//var $ obj = $('ul li');
var arr = $obj.get();
//alert(arr[1].innerHTML)

var $obj = $( ' ul li');
var obj = $obj.get(1);
alert(obj.innerHTML)
});