1.5 jQuery

jQuery는 div와 같은 특정 효과를 연출하는데 사용합니다. 빠르게 작업할 수 있게 도와주는 크로스 브라우징 라이브러리입니다.  

 

자바스크립트에서 직접 치는 것 보다 편한 이유를 코드를 통해서 확인하시면 됩니다.

 

1. 자바스크립트를 사용한경우

 

<script>

   window.onload=function(){

//먼저 #menu2를 찾는다.

var menu2=document.getElementById("menu2");

// #menu2의 태그 중 li태그를 찾는다.

var liList = menu2.getElementByTagName("li");

 

for(var i = 0 ; i <lList.length;i++){

   var li = liList[i];

   li.style.color="#f00";

   }

}

</script>

 

2. jQuery를 사용한 경우

<script>

  $(document).ready(function(){

       $("#menu li").css("color","#foo");

})

</script>

 

jQuery 기능이 들어있는 라이브러리 파일을 연결해야 합니다.

 

<script src="../../libs/jquery-1.11.0.min.js"></script>

<script>

 

   $(document).ment(function(){

    // 여기에 노드를 다루는 코드를 작성

    alert("환영합니다.");

})

 

</script>

 

jQuery를 이용한 노드 찾기

jQuery에는 수많은 노드 찾기 기능을 제공합니다.

 

var $ 변수이름 = $("CSS 선택자");

 

$()

그냥 함수 호출입니다. 함수 이름이 $인 것을 호출한 것입니다. 함수의 역활은 해당하는 노드를 찾아줍니다.

 

"CSS 선택자"

함수의 매개변수를 넣어주면 된다.

 

var $ 변수이름

$() 함수에서 리턴해주는 값을 저장하기 위해 만든 변수입니다.

 

이벤트 등록하는 방법

-$대상.on("이벤트 이름", 이벤트리스너);

-$대상.단축이벤트메서드(이벤트리스너);

 

<script>

$(document).ready(function(){

  $(#btnCheck").on("click",function(){

     alert("환영합니다.  ");

});

 

$("#btnCheck").click(function(){

    alert("환영합니다.  ");

  });

})

</script>

 

스타일 설정하는 방법

-$대상.css("스타일 이름", 값); //설정 내용이 1개인 경우

-$대상.css({

    "스타일 이름":"값"[,

    "스타일 이름", "값", .............

   ]

});

 

//////////1개인 경우/////////////

<script>

  $(document).ready(function(){

     $("#btnCheck").on("click",function(){

        $(#panel").css("border","4px solid #f00");

  });

})

</script>

 

///////////여러개인 경우//////////////////////

<script>

  $(document).ready(function(){

     $("#btnCheck").on("click",function(){

        $(#panel").css({

         "fontSize":16,

         "color" : #f00" 

     });

  });

})

</script>