Develop/JavaScript JQuery JSP

0706 JQuery

포페PostFace 2022. 7. 6. 17:24


attr : 어트리뷰트,속성을 설정하거나 가져오는 함수.
설정을 할 때는 속성과 값을 같이 설정해줘야 한다.


removeAttr: 특성 속성을 지워주는 함수.
속성만 설정해주면 된다.


toggle(): 설정된 위치를 style="diplay=none"으로 전환한다. 한번 더 실행하면
다시 보인다.

$('div').addClass('redBorder').add('p').addClass('yellow');
= redBorder는 div만 yellow는 p와 div 둘 다 적용된다.

$('div').css('background','yellow').filter('.middle').css('border-color','red');
= 모든 div는 배경이 노랑 클래스가 middle인 곳만 보더색을 빨강으로

.filter('[id="third"]')
.filter('[id *= "ir"]') = ir을 포함하는
.not('[id *= "ir"]') = filter와 반대

$('div').children('.selected'):자식 중 class가 selected
$('div').find('.selected'):자손 중 class가 selected
$('span').parent() : span의 부모 
$('span').parents() : span의 모든 부모 
$(this).prev() : 앞
$(this).next() : 뒤
$(this).siblings() : 자신을 제외한 부모의 자식

$(function(){

});

$(document).ready(function(){

});


둘이 같은 기능이다 (document).ready는 생략 가능하다.

특정 태그등의 객체화가 아닌 일반 객체는 ''를 쓰면 안된다.

$("<li>"+index+':'+value+"</li>").appendTo('#car_list');
appendTo : append는 뒤에 값을 앞에 넣고 To가 붙으면 해당 값을 뒤에 위치에 
넣는다.

prepend : append가 위에서부터 채운다면 prepend는 나중에 들어오는 값이
가장 위에 위치한다.(prependTo도 있다.)

$('header').after() : 바로 뒤에 자식이 아닌 형제로 입력한다.
insertAfter() : append(),appendTo()와 같은 관계

$('header').before(): 앞에 형제로 추가한다.
insertBefore(): 이하동문.

$('div').empty(): div가 가지고 있는 값을 삭제

$('div').remove(): div 자체를 삭제

bind():여러 기능을 묶어서 코드의 효율화를 시켜준다.

$('img').bind('click mouseover',function(){
	alert(1);
});
//== 아래의 코드를 위의 코드로 묶었다.
$('img').click(function(){
	alert(1);		
})
$('img').mouseover(function(){
	alert(1);		
})


bind의 응용:

$('img').bind({
		'mouseover' : function(){ //마우스 올렸을 때
			$('img').attr('src','../images/but2.gif')
			cnt++;
			if(cnt==3){
				$('img').unbind(); //해제
			}
		},
		'mouseout' : function(){ //마우스 치웠을 때
			$('img').attr('src','../images/but1.gif')
		}
})




live(): 이벤트 처리를 위임할때 사용한다. bind와 작성방식은 같다.
die() : 멈춘다.(live와 한쌍)


'Develop > JavaScript JQuery JSP' 카테고리의 다른 글

0708 JQuery 마무리와 JSP Start!  (0) 2022.07.08
0707 AJAX JSON XML  (0) 2022.07.08
0705 JavaScript & JQuery Start  (0) 2022.07.06
0704 <form> 태그의 특성  (0) 2022.07.04
0704 시간 띄우고 인터벌로 갱신하기  (0) 2022.07.04