JQuery - JQuery(제이쿼리) 정리 , 선택자 , 기본 이벤트

제가 JQuery(제이쿼리) 자주쓰는 기본 이벤트를 정리한 거에요.

 

-기본

$(document).ready(function(){

//ready 모든 로딩이 되고 나서 스크립트문 실행

 

html(); //get 
선택요소의 html 내요을 가져옴.innerHtml과 동일 
html(value) //set 
선택요소에 인수로 받은 value를 넣는다
value내에 html태그가 있는 경우 태그로 들어간다
text() ///get 
선택요소 내의 html태그 요소를 제외한 내용을 가져온다 
text(value) //set 
선택요소 내에 인수로 받은 value를 넣는다
value내의 html 태그도 text로 들어간다 
val() //get 
input 태그의 value 값을 조회 
val(value) //set 
인수로 받은 value를 input 태그의 value 값을 설정 

 

-선택자
$("*") //전체
$(this) //현재의 HTML element
$("p.intro") //p테그의 intro클래스
$("p:first") //p의 첫번째
$("ul li:first") //첫번째 ul의 첫번째 li 선택
$("ul li:first-child") //모든 ul의 첫번째 li 선택
$("[href]") //링크
$("li[name='id']") //li의 name의 값이 id 선택
$("li[name!='id']") //li의 name의 값이 id가 아닌것 선택
$(":button") //모든button (type=button)
$("tr:even") //모든tr의 짝수 (odd 홀수)

 

-기본 이벤트
$("p").click(); //클릭
$("p").dblclick(); //더블클릭
$("p").hover(); //특정범위에 올라갔을 때 (mouseenter+mouseleave)합쳐 놓은 것
$("p").mouseenter(); //특정범위에 있을때
$("p").mouseleave(); //특정범위를 벗어날때
$("p").mousedown(); //눌렀을때

$("p").mouseup(); //눌렀다가 땟을때
$("p").focus(); //커서가 선택하면

$("p").blur(); //커서가 벗어날 때

.on() - $(selector).on(event,childSelector,data,function,map)
//하나 또는 그 이상의 요소(노드)에 이벤트 핸들러를 부착

$("p").on("click", function(){ 
    $(this).hide(); 
}); 

$('.box li').on({   

//하나에 여러가지 이벤트

$('.box li').on({   //하나에 여러가지 이벤트 
  click:function(){ 
 	 console.log('click 이벤트'); 
  }, 
  mousedown:function(){ 
 	 console.log('down 이벤트'); 
  }, 
  mouseup:function(){ 
 	 console.log('up 이벤트'); 
  } 
}); 

$(selector).hide(speed,callback);  //숨기기

$(selector).show(speed,callback); //표시

$(selector).toggle(speed,callback); //표시 또는 숨기기

$("p").hide(1000 , callback);
$("p").show(1000 , callback); 
$("p").hide(1000 , callback);

 

$(selector).fadeIn(speed,callback); //서서히 보이기
$(selector).fadeOut(speed,callback); //서서히 사라지기
$(selector).fadeToggle(speed,callback); //서서히 보이기, 사라지기

$("button").click(function(){ 
    $("#div1").fadeToggle(); 
    $("#div2").fadeToggle("slow"); //(fast) 
    $("#div3").fadeToggle(3000); 
}); 

$(selector).fadeTo(speed,opacity,callback); //(value between 0 and 1) 투명도 조절

$("button").click(function(){ 
    $("#div1").fadeTo("slow", 0.15); 
    $("#div2").fadeTo("slow", 0.4); 
    $("#div3").fadeTo("slow", 0.7); 
}); 

 

$(selector).slideDown(speed,callback); //슬라이드가 내려온다 
$(selector).slideUp(speed,callback); //슬라이드가 올라간다
$(selector).slideToggle(speed,callback); //슬라이드가 내려오거나 올라간다

$("#flip").click(function(){ 
    $("#panel").slideToggle("slow"); //(fast) 
}); 

$(selector).animate({params},speed,callback); //애니메이션 동작

$("button").click(function(){ 
    $("div").animate({left: '250px'}); 
}); 

$(selector).stop(stopAll,goToEnd); //멈추게 함

$("#stop").click(function(){ 
    $("#panel").stop(); 
}); 

 

-Callback함수 

 현재 실행되고 있는 효과가 완전하게 종료 후에 실행되는 함수를 뜻함

$("button").click(function(){ 
    $("p").hide("slow", function(){ 
        alert("The paragraph is now hidden"); 
    }); 
}); 

-Chaining

 action와 method들 함께 묶음

$("button").click(function(){ 
	$("#p1").css("color", "red").slideUp(2000).slideDown(2000); 
}); 

$(selector).attr(attribute,value,function....) //선택자의 요소들중 제일 처음 요소의 속성값을 가지고 옴

$("img").attr("width","500"); 

append() //선택요소의 끝에 컨텐츠를 추가
prepend() //선택요소 전에 컨텐츠를 추가
after() //선택요소 후에 컨텐츠를 추가
before() //선택요소 전에 콘텐추를 추가
remove() //선택요소를 지워버림
empty() //선택요소의 자식을 지워버림

addClass()

//특정한 클래스를를 요소에 추가, 중요한 건 이 함수가 클래스를 대체하는 함수가 아니라 단순히 클래스를 추가하는 기능만 있음

<style>
.important{font-weight: bold;font-size: xx-large;} 
.blue{color: blue;} 
</style>
<script>
  $("button").click(function(){ 
      $("#div1").addClass("important blue");//하나 이상의 클래스를 추가하려면 띄어쓰기 
  }); 

  $("#div1").removeClass("important blue"); 
  //removeClass()와 자주 같이 사용 
  
  $("#div1").toggkeClass("important blue"); 
  //toggleClass() 추가 또는 지움 
</script>

css("propertyname","value"); //하나 사용
css({"propertyname":"value","propertyname":"value",...}); //여러개 사용

$("p").css({"background-color": "yellow", "font-size": "200%"}); 

-dimension Methods (공간)
$("#div1").width()

//width() padding,border,margin을 제외한 크기를 가져온다, height() 
$("#div1").innerWidth()

//innerWidth() padding(안쪽)을 포함한 크기를 가져온다, innerHeight() 
$("#div1").outerWidth()

//outerWidth() padding and border를 포함한 크기를 가져온다, outerHeight() 
$("#div1").outerWidth(true)

//outerWidth(true) margin까지 다 포한다, outerHeight(true)

$("button").click(function(){ 
    $("#div1").width(500).height(500); //값이 변한다
}); 

 

$("span").parent(); //parent() 부모를 찾는다 

$("span").parents(); //span을 제외한 모든 부모를 찾는다
$("span").parents("ul"); //span의 부모ul만 찾는다
$("span").parentsUntil("div");//두개 인수 사이에 모든 조상요소를 찾는다
$("div").children(); //children() 자식을 찾는다
$("div").find("span"); //선택자 안의 자식중 모든 인수를 찾는다
$("h2").siblings(); //siblings() 형제 자매 찾는다(부모를 제외한) 
$("h2").next();  //next() 다음형제 찾는다(하나만) 
$("h2").nextAll(); //nextAll() 다음 다 찾는다 
$("h2").nextUntil("span"); //두개 인수 사이에 모든 형제를 찾는다
$("h2").prev(); //prev() 이전에 요소를 반환 
$("h2").prevAll(); //이전의 모드요소 반환
$("h2").prevUntil("span"); //두개 인수 상이에 모든 형제를 반환
$("div p").first();  //첫번째 div의 첫번째 p를 찾는다 
$("div p").last(); //마지막 div의 마지막 p를 찾는다
$("p").eq(1); //index 번호로 찾는다 
$("p").filter(".intro"); //선택자 안에 값이 맞는 모든것을 찾는다 
$("p").not(".intro"); //선택자 안에 값이 안맞는 모든것을 찾는다