46일차: jQuery 기초 / jQuery 이벤트 2021.08.18

 

목차

1.     jQuery 기초

2.     jQuery로 CSS 속성 값 추가

3.     attr() 함수로 속성 변경하기

 

 

1. jQuery 기초  

 

1) jQuery 기초

 

• 자바스크립트에서 getElementById() 함수로 객체의 값을 가져오고, jQuery에서는 간단하게 $() 함수로 원하는 html 요소를 선택한다.

- ex) var b1 = document.getElementById("b1");  =  $("#b1")

 

• jQuery(  )   =   $(  )

 

• jQuery의 괄호 안에는 3가지 요소가 올 수 있다.

 (① HTML Tag / ② CSS Selector / ③ JavaScript Object (내장객체) )

 

① HTML Tag           

ex) $("div")

 

② CSS Selector

ex) $("h1").hide();                  → 페이지에 있는 h1요소를 모두 숨김      

ex) $(".my_class").slideUp();     → CSS의 Selector가 my_class인 요소를 모두 슬라이드로 올림

ex) $("#my_id").fadeOut();       → CSS의 Selector가 my_id인 요소를 모두 페이드아웃시켜 보이지 않게 함

 

③ JavaScript Object  

   ex) $(document).ready();

 

2) jQuery 실행 방법                

① 방법1)

<script>

     $(document).ready(function(){      // 웹문서 로딩이 완료되면 jQuery를 실행하라는 의미

     여기에 jQuery 처리 내용을 기술함

     });

</script>

 

② 방법2)  간단한 형식

<script>

     $(function(){

     여기에 jQuery 처리 내용을 기술함

     });

</script>

 

 

3) jQuery 이벤트 실행

• 형식

<script> 

     $(function(){

          $(셀렉터) . 이벤트( function(){

                $(셀렉터) . 명령;

          });

     });

</script>

 

ex)

<script>

     $(function(){

         $("button") . click( function(){

         button 태그가 클릭되었을 때 실행할 부분

         });

     });

</script>

 

4) jQuery 이벤트 종류

 

명령	의미
click()	클릭할 때 실행
submit()	submit 버튼을 클릭할 때 실행
dblclick()	더블 클릭할 때 실행
mousedown()	마우스의 버튼을 눌렀을 때 실행
mouseup()	마우스의 버튼에서 손을 뗄 때 실행
toggle()	클릭할 때마다 다른 처리를 실행
mouseover()	마우스가 오버됐을 때 실행
mouseout()	마우스가 아웃되었을 때  실행
mousemove()	마우스가 이동할 때 실행
one()	이벤트 발생을 한 번만 실행
unbind()	설정되어 있는 이벤트 처리를 취소
live()	앞으로 추가될 태그에 이벤트 처리를 설정
change()	값의 변화가 발생할 때 실행

 

2. jQuery로 CSS 속성 값 추가  

 

- jQuery에서 .css()로 style 속성을 추가할 수 있다.

- ex) $("li").css("color","red");                // .css(“속성 이름”, “속성 값”)

 

 

3. attr() 함수로 속성 변경하기

 

• attr()

- 엘리먼트(element)의 속성 값을 가져오거나 변경할 수 있는 함수

 

① .attr(속성 이름)

- 선택된 엘리먼트 중 첫 번째 엘리먼트의 속성에 해당하는 속성 값을 반환한다.

- ex) $("img").attr("src", $(this).attr("href"))

                 .attr("title", $(this).text());

 

② .attr(속성 이름, 속성 값)

- 선택자에 의해 선택된 요소에 하나 이상의 속성을 부여할 수 있다.

- ex) $("img").attr("src","sea.jpg")