만두야닷컴


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<style type="text/css">
		#diva {
			height:2500px;
		}
		#scrollBtn1,#scrollBtn2 {
			cursor:pointer;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){

			$("#scrollBtn1").click(function(){
				//divb의 top의 위치 값으로 이동
				var pos=$("#divb").position().top;
				$("html, body").animate({scrollTop:pos},'slow');
			});

			$("#scrollBtn2").click(function(){
				$("html, body").animate({scrollTop:0},'slow');
			});
		});
	</script>
</head>
<body>
	<div id="diva"> 
		맨위
		<p id="scrollBtn1">[맨아래로 이동]</p>
	</div>
	<div id="divb">
		맨 아래 
		<p id="scrollBtn2">[맨위로 이동]</p>
	</div>
</body>
</html>


dd
해당 페이지 맨위와 divb(맨 아래)로 애니메이션 이동

확인:http://azit4u.phps.kr/jquery/scrollTop.html

Comment +0

jQuery preventDefault();

jQuery2011. 10. 17. 15:53
하이퍼 링크가 작동 하지않는다.


$(".roll").click(function(event) {
	event.preventDefault();
});

Comment +0

hover(마우스오버시 이벤트,마우스아웃시 이벤트)

$("#button").hover(
	function() {
		$(this).addClass("hover");
	},
	function() {
		$(this).removeClass("hover");
	}
);


$("#button").hover(function(){
	$("#button").toggleClass("hover");
});


위 두 소스는 같은 결과를 출력

toggleClass() - 선택한 엘리먼트에 클래스가 이미 적용되어 있으면 해당 클래스를 제거 하고 그렇지 않으면
                       해당 클래스를 적용 한다.

toggle(handler0,handler1) - 선택한 엘리먼트에 두개 이벤트 연결 한번 실행 마다 0,1 의 핸들러 함수 실행


$("#button").toggle(
	function(){
		$(this).removeClass("hover2");
		$(this).addClass("hover");
	},
	function(){
		$(this).removeClass("hover");
		$(this).addClass("hover2");
	}
);

Comment +0

jQuery css

jQuery2011. 10. 14. 13:16

.css(propertyName,value) -  기본적 형태 css( 속성명 , 속성값)

$(".box").css("width","100px");

 


.css(propertyName,function(index,value) { })
   - function 사용 자신이 원하는 기능 확장 // index는 선택한 개체 순서, value 는 해당 개체의 현재 속성값


$("#inText").css("color",function(index,value) {
	if(value=="rgb(0, 0, 255)"){ //color 가 rgb(0, 0, 255) 이면 red로 변경
		return "red";
	}
});

 


.css(map) - 맵형태로 입력 {key:value}


$("#button").bind("mouseover", function() {
	$("#inText").css({
		'background':'cyan',
		'font-weight':'bold',
		'color':'blue'
	});
});

Comment +0


1. 클릭한 버튼 알아내기

익플: 왼쪽=1, 오른쪽=2 ,휠=4
사파리,크롬,파폭:왼쪽=0,오른쪽=2,휠=1
2를 먼저 판단하는게 좋을 듯..

$(".mouseBtn").mousedown(function(event){
       alert(event.button);
   if(event.button==2){
       alert('right button');
   }else{
       alert('left button');
   }
 });


 
2. 클릭한 위치 알아내기 


 $("#inArea").click(function(event){
    var $x=event.screenX;
    var $y=event.screenY;
    $("#inText").html('<font color=red>x좌표:'+$x+'</font>  <font color=blue>y좌표:'+$y+'</font>');
 });

Comment +0

bind() - 여러개의 이벤트와 펑션을 묶어준다
ex) 

$("#buttons").bind("click mouseover",function() {
   alert('click or mouseOver');
});

unbind() - 이벤트 제거
ex)

$("#buttons").bind("click mousevoer",function(){
   $("#buttons").unbind("click"); //click 이벤트 비활성 unbind("click mouseover")= click mouseover 둘다 비활성
}




trigger() - 이벤트의 자동 발생
ex)

$("#buttons").trigger('click'); //p 엘리먼트 클릭 - 자동발생 

Comment +0


 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1.x.x 버전대의 jQuery 를 지원 해줍니다.

Comment +0

jQuery children(),each()

jQuery2011. 10. 7. 16:18
children( ) => 지정한 엘리먼트의 바로 아래 자식 노드 (parent( )는 부모 노드)
each( ) => 각각 엘리먼트에 차례로 접근

<html>
<head>
	<title>jquery each()</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {

			//root의 자식 노드 선택
			var nodes=$("#root").children();

			//nodes의 갯수를 alert
			alert(nodes.length);

			//변수 txt 선언
			var txt="";	
			//nodes 의 각각 엘리먼트에 차례로 접근해서 txt에 입력
			nodes.each(function(){
				txt+=" "+$(this).text();
			});
			alert(txt);
		});
	</script>
</head>
<body>
	<div id="root">
		<div>Azit4u</div>
		<div>S2ang</div>
		<div>Hello</div>
	</div>
</body>
</html>

 

http://azit4u.phps.kr/jquery/each.html

Comment +0

jquery 기본 필터

jQuery2011. 7. 31. 23:23

필터

설명

:first

선택된 개체들 중 첫 번째 요소

:last

선택된 개체들 중 마지막 요소

:even

짝수

:odd

홀수

:eq(Index)

인덱스에 해당하는 요소

:gt(Index)

인덱스보다 높은 인덱스를 가진 요소

:lt(Index)

인덱스 봐 낮은 인덱스를 가진 요소

:header

모든 헤더 요소들(

:animated

현재 에니메이션 중인 모든 요소

 

Comment +0

jquery 셀렉터

jQuery2011. 7. 31. 20:56
기본 셀렉터

필터

설명

$(“div”)

모든 div 엘리먼트

$(“div a”)

Div의 자손 a 엘리먼트

$(“div>a”)

Div의 바로 아래 자식 a 엘리먼트

$(“div~a”)

Div의 다음에 나오는 모든 형제 a 엘리먼트

$(“div+a”)

Div의 바로다음에 나오는 a 엘리먼트

$(“div.class”)

클래스 class를 가지는 div 엘리먼트

$(“div#id”)

아이디 id 를 가지는 div 엘리먼트

$(“div[name]”)

어트리뷰트 name을 가진 div 엘리먼트

$(“input[type=text]”)

text Type 어트리뷰트를 가지는 input 엘리먼트

$(“input[type^=te]”)

te 로 시작하는 Type 어트리뷰트를 가지는 input 엘리먼트

$(“input[type$=xt]”)

xt로 끝나는 Type 어트리뷰트를 가지는 input 엘리먼트

$(“input[type*=t]”

t를 포함 하는 Type 트리뷰트를 가지는 input 엘리먼트

 

Comment +0