Back Ground

JQuery 메소드 본문

Javascript/JQuery

JQuery 메소드

Back 2016. 8. 26. 14:13



jQuery 속성선택자


 요소[속성]

 특정 속성을 가지고 있는 문서 객체를 선택함

 요소[속성=값]

 속성 안의 값이 특정 값과 같은 문서 객체를 선택함
 요소[속성~=값]  속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택함

 요소[속성^=값]

 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택함
 요소[속성$=값]  속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택함

 요소[속성*=값]

 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택함


사용 예)

<inuput type="text" />


$('input[type=text]').val("텍스트 값추가");









jQuery 기본 필터 선택자


 요소:odd

 홀수 번째에 위치한 문서 객체르 선택함

 요소:even

 짝수 번째에 위치한 문서 객체를 선택함
 요소:first  첫 번째 위치한 문서 객체를 선택함
 요소:last  마지막에 위치한 문서 객체를 선택함


사용 예)

<table>

<tr><th>과일명 </th> <th>당도</th> <tr>

<tr><td>사과 </td> <td>2</td> <tr>

<tr><td>딸기 </td> <td>3</td> <tr>

<tr><td>수박 </td> <td>4</td> <tr>

<tr><td>멜론 </td> <td>2</td> <tr>

</table>


$('tr:odd').css('background', '#F9F9F9');

$('tr:event').css('background', '#9F9F9F');

$('tr:first').css('background', '#333333').css('color','#FFFFFF');    // 배경색 / 글자색











 jQuery 함수 필터 선택자


 [요소]:animated

 애니메이션 중인것 / ":not(:animated)" => 애니메이션중이지 않은것

 [요소]:contains(문자열)

 특정 문자열을 포함하는 문서 객체를 선택함

 [요소]:eq(n)

 n번째에 위치하는 문서 객체를 선택함
 [요소]:gt(n)  

 n번째 초과에 위치하는 문서 객체를 선택함

 [요소]:lt(n)   

 n번째 미만에 위치하는 문서 객체를 선택

 [요소]:has(h1) 

 h1 태그를 가지고 있는 문서 객체를 선택

 [요소]:not(선택자)  

 선택자와 일찌하지 않는 문서 객체를 선택함

 [요소]:nth-child(3n+1)  

 3n+1번째에 위치하는 문서 책체를 선택함

 [요소]:hidden

 hidden 인것을 선택

 [요소]:visible

 visible 인것을 선택



사용 예)

<table>

<tr><th>과일명 </th> <th>당도</th> <tr>

<tr><td>사과 </td> <td>2</td> <tr>

<tr><td>딸기 </td> <td>3</td> <tr>

<tr><td>수박 </td> <td>4</td> <tr>

<tr><td>멜론 </td> <td>2</td> <tr>

</table>


$('tr:eq(0)').css('background', '#000000').css('color', 'White');

$('td:nth-child(3n)').css('background', '#454545');

$('td:nth-child(3n+1)').css('background', '#333333').css('color','#FFFFFF');    // 배경색 / 글자색











 jQuery 어트리뷰트 기반으로 요소 선택

- $("img[alt])                 // 이미지태그에 alt 속성이 있는것을 선택

- $("div[id~="name"])    //  DIV태그에 아이디값이 "name"포함하는 모든것


 [attr]

 특정 어트리뷰트를 가지고 있는 요소와 일치 하는것

 [attr=val]

 지정되 어트리뷰트가 특정 값을 가지는 요소와 일치

 [attr!=val]

 지정된 어트리뷰트나 값을 갖지 않은 요소와 일치

 [attr^=val]

 지정된 어트리뷰트가 특정 값으로 시작하는 요소와 일지

 [attr$=val]  지정된 어트리뷰트가 특정 값을 끝나는 요소와 일찌
 [attr~=val]  공백과 함께 특정 값을 포함하는 요소와 일치










jQuery 배열


 $.each(array ,

    function(index,item){ }) ;

 (배열 , 함수(배열인덱스, 배열 인덱스 값)) 

 // 함수를 배열겟수만큼 반복실행

 $(selector).each(array ,  

   function(index,item){ }) ;

 선택한 속성.each(배열 , 함수(배열인덱스, 배열 인덱스 값))

 // 함수를 배열겟수만큼 반복실행













jQuery 메서드 (문서 객체 다루기)


 addClass()

 문서 객체의 클래스 속성을 추가 함. => $('선택').addClass('정의한 클래스이름');

 removeClass()

 문서 객체의 클래스 속성을 제거 함. => $('선택'). removeClass ('삭제할 클래스이름');

 arrt()

 속성과 관련되 모든 기능을 수행함.

 1. 이미지태그의 경로 속성값 알아내기 

  => $('img').attr('src');

 2. 속성 값추가 

 => $(selector).attr(속성이름 , 속성값);

 => $(selector).attr(속성이름  , function( 속성각각의 index값  ,attr ){} );

 => $(selector).attr(object);  

 => $('<img />').attr('src', 'image.jpg').appendTo('body'); // body 에 img태스생성

 => $('<img />' , {src:''image.jpg, width:350, height:250}).appendTo('body');

 removeAttr(name)

 문서 객체의 속성을 제거 함.
 => $('h1').removeAttr('data-index') // h1태그의 data-index 속성제거

 css()

 스타일과 관련된 모든 기능 수행

 1. 스타일 속성값 가져오기 

  => $('h1').css('color')  // h1 태그의 색상값 

 2. 속성 값 추가

  => $(selector).css(name , value);

  => $(selector).css(name , function(속성 각각의 index값 ,style){} );

  => $(selector).css(object);

 html()

 문서 객체 내부의 글자와 관련된 모든 기능을 수행함 (html 태그인식) 

1. 값 가져오기 

 => $('h1').html();   // 맨처음 h1 태그 값만 출력

2. 값 추가

 => $(selector).html(value);

 => $('div').html('<h1> 내용  </h1>');   // 태그인식

 text()

 문서 객체 내부의 글자와 관련된 모든 기능을 수행함

1. 값 가져오기  
 =>  $('h1').text();  // 모든 h1태그 값을 출력

2. 값 추가

 => $(selector). text (value);

 => $('div'). text ('<h1> 내용  </h1>');   // 정규표현식 으로 표현

 remove()

 특정 문서 객체를 제거.

 => $('h1').first().remove();    // 첫번쩨 h1 삭제

 empty()

 특정 문서 객체의 후손을 모두 제거 함.

 => $('div').empty();             // div 자식 객체까지 삭제

 $()

 문서 객체를 생성함 

 => $('<h1></h1>');

 => $('<h1></h1>').html('내용');

 => $('<h1></h1>').html('내용').addendTo('body');    // 태그와 내용을 body 에추가

 $(a).appendTo(b)

 a를 b의 뒷 부분에 추가함. (태그안)

 => $('img').first().appendTo('body');   // 첫번째이미지를 body 안 맨뒤로 보냄

 $(a).prependTo(b)

 a를 b의 앞 부분에 추가함. (태그안) 

 $(a).insertAfter(b)

 a를 b의 뒷에 추가함.  (태그 밖)

 $(a).insertBefore(b) a를 b의 앞에 추가함.  (태그 밖)
 $(a).append(b)

 b를 a안의 뒷 부분에 추가함.  

 $(a).prepend (b)  

 b를 a안의 앞 부분에 추가함.

 $(a).after(b)  

 b를 a의 뒷에 추가함.
 $(a).before(b)

 b를 a의 앞에 추가함.

 $(a).wrapAll(b);

 b를 a의 안에 추가함.

 clone()

 문서 객체를 복사

 $('div').append( $(h1) ).clone());   // h1 태그를 div 태그안으로 복재









jQuery 이벤트


이벤트 객체속성

 event.pageX

 브라우저의 화면을 기준으로 한 마우스의 X좌표 위치 

 event.pageY

 브라우저의 화면을 기중으로 한 마우스의 Y좌표 위치

 event.preventDefault()

 기본 이벤트를 제거함 

 event.stopPropagation()

 이벤트 전달을 제거함 


이벤트 메소드

 $(document).ready() 

 html 문서가 다불러와지면 실행 

 bind()

 이벤트를 연결함
 => $(selector).bind(eventName, function(event){} );

 => $(selector).bind(object);

 unbind()

 bind() 메서드를 사용한 이벤트 연결 제거

 => $(selector).unbind();

 => $(selector).unbind(eventName);

 => $(selector).unbind(eventName, function);

 delegate()

 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연경함    (version:1.4.3*) 

 undelegate()

 delegate() 메서드를 사용해 연결한 이벤트를 제거함   (version:1.4.3*)
 live()

 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결함

 die()

 live() 메서드를 사용해 연결한 이벤트를 제거함
 => $(selector).die()
 => $(selector).die(eventName)

 => $(selector).die(eventName , function)

 one()

  이벤트를 한번만 연결함  

 on()

 이벤트를 연결함, 아래 이벤트열결을 대체함   delegate 대체함 version:1.7 )

 => bind() :       $(selector).on(eventName , eventHandler)

 => live() :        $(document).on(eventName , selector, eventHandler)

 => delegate() : $(selector).on(eventName , selector , eventHandler)

 off()

 이벤트를 제거함
 => unbind() :       $(selector).off(eventName[, eventHandler])

 => die() :            $(document).off(eventName , selector[, eventHandler])

 => undelegate() : $(selector).off(eventName , selector[, eventHandler])

 toggle(function(event){},

... , function(event){} )

 click 이벤트를 여러 이벤트 핸들러를 번갈아가며 실행할 수있게 연결함 

 hover(mouseenter , mouseleave)

 mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결함 

 trigger()

 이벤트를 강제 발생 
 => $(selector).trigger(eventName)

 => $(selector).trigger(eventName, data)







마우스 이벤트

 click

 마우스를 클릭할 때 발생함.

 dblclick  마우스를 더블클릭할 때 발생함.
 mousedown  마우스 버튼을 누를 때 발생함.
 mouseup  마우스 버튼을 뗄 때 발생함.
 mouseenter

 마우스 요소의 경계 외부에서 내부로 이동할 때 발생. (자기자신만 이벤트)

 mouseleave  마우스 요소의 경계 내부에서 외부로 이동할 때 발생. (자기자신만 이벤트)

 mousemove

 마우스를 움직일 때 발생함.

 mouseout  마우스가 요소를 벗어날 때 발생함.    (버블링)

 mouseover

 마우스를 요소 안에 들어올 때 발생함.(버블링)







키보드 이벤트

 keydown  키보드가 눌러질 때 발생함.
 keypress  글자가 입력될 때 발생함.

 keyup

 키보드가 떼어질 때 발생함.







윈도우 이벤트

 ready

 문서 객체가 준비를 완료함.
 load

 윈도우(문서 객체)를 불러들일 때 발생함.

 unload

 윈도우(문서 객체)를 닫을 때 발생함.

 resize  윈도우의 크기를 변화시킬 때 발생함.
 scroll

 윈도우를 스크롤할 때 발생함.
 => $(window).scroll(function(){ });

 error

 에러가 있을 때 발생함.







입력 양식 이벤트

 change

 입력 양식의 내용을 변경할 때 발생함.

 focus

 입력 양식에 초점을 맞추면 발생함.
 focunsin  입력 양식에 초점이 맞춰지기 바로 전에 발생함.
 focusout  입력 양식에 초점이 사라지기 바로 전에 발생함.
 blur  입력 양식에 초점이 사라지면 발생함.
 select

 입력 양식을 선택할 때 발생함(input[type=text] 태그와 textarea 태그 제외).

 submit  submit 버튼을 누르면 발생함.
 reset

 reset 버튼을 누르면 발생함.



간단한 이벤트 종류


 blur  focus  focusin  focusout   load 
 resize  scroll  unload  click  dblclick
 mousedown  mouseup  mousemove   mouseover    mouseout 
 mouseenter  mouseleave    change  

 select    

 submit    
 keydown  keypress  keyup   error  ready 




$(select).methodName(function(event){ });




jQuery effects


메서드

 show()

 문서 객체를 크게 하며 보여줌.

 hide()  문서 객체를 작게 하며 사라지게 함.
 toggle()  show() 메서드와 hide() 메서드를 번갈아 실행함.

 slideDown()

 문서 객체를 슬라이드 효과와 함께 보여줌.

 slideUp()

 문서 객체를 슬라이드 효과와 함께 사라지게 함.

 slideToggle()

 slideDown() 메서드와 slideUp() 메서드를 번갈아 실행함.

 fadeln()

 문서 객체를 선명하게 하며 보여줌.
 fadeout()  문서 객체를 흐리게 하며 사라지게 함.
 fadeToggle()

 fadeln() 메서드와 fadeOut() 메서드를 번갈아 실행함.

 animate()

 사용자 지정 효과를 생성함. 

 ( opacity , height , width , top , bottom , left , right , margin , padding )
 => $(selector).animate(object);

 => $(selector).animate(object , speed);

 => $(selector).animate(object , speed , easing);

 => $(selector).animate(object , speed , easing , callback);

 clearQueue()

 큐의 내용을 제거 함. 

 stop()

 효과와 애니메이션을 정지함.

 => $(selector).stop()

 => $(selector).stop(clearQueue) 

 => $(selector).stop(clearQueue , goToEnd)

 delay()

 큐에 있는 명령을 잠시 중지함.

 => $(this).delay(500).animate({ left:500 }, 'slow' ) 


1. $(selector).method();

2. $(selector).method(speed);                            // 밀리초 단위의 숫자나 문자열 ( slow, normal , fast )

3. $(selector).method(speed , callback);             // callback 효과를 모두 완료한 후에 실행할 함수를 지정

4. $(selector).method(speed , easing , callback);// 기본(linear , swing ) , easing플러그인 설치.


출처:http://turfrain.tistory.com/entry/1-jQuery-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%A0%95%EB%A6%AC

'Javascript > JQuery' 카테고리의 다른 글

key event -(key code)  (0) 2016.08.30
css selector 검색시 .prop('outerHTML')  (0) 2016.08.30
jQGrid  (0) 2016.08.29
시사 JQuery - CSS Styling / Effects & Custom Animations  (0) 2016.08.26
시사 JQuery 이벤트  (0) 2016.08.26
Comments