jquery 자주쓰는 함수모음

*** 이벤트함수종류

-매게변수가 있으면 매게변수로 애벤트함수를 설정해주고

-매게변수가 없으면 사용자가 이벤트를 한것처럼 설정해준다.

  @ html 제어

  .after() -- 선택된 대성의 후에 html을 삽입한다.

  .before() -- 선택된 대성의 전에 html을 삽입한다.

  .html() -- 선택된 대상의 자식객체 html을 삽입한다.(초기화)

  .append() -- 선택된 대상의 자식객체 제일 마지막에 html 삽입한다.

  .prepend() -- 선택된 대상의 자식객체 제일 위에 html 삽입한다.

  .wrap() -- 선택된 대상의 부모객체를 생성한다.

  .remove() -- 선택된 대상을 제거한다.

  .on() -- 동적으로 html을 생성시 인식되지 않을경우 사용

  $(document).on('click','선택기',function(){})

 

  @ key 제어 -- 참고사항 : key event 번호 매게변수로 받을 수 있다.

  .keydown()

.keyup()

@ mouse 제어 -- 참고사항 : y, x 좌표를 받을수 있다.

.click()

.mousemove()

.mousedown()

.mouseout()

.mouseup()

.hover()

@ size 제어

.width() -- 선택된 대상의 가로사이즈를 가지고 오거나 변경한다.

.height() -- 선택된 대상의 세로사이즈를 가지고 오거나 변경한다.

@ css 제어

.addClass() -- 선택된 대상의 클래스를 삽입한다.

.removeClass() -- 선택된 대상의 삽입된 클래스를 지운다.

.css() -- 선택된 대상에 CSS를 삽입한다.

@ data 제어

.attr('속성','속성값') -- 선택된 대상의 속성값을 가지고 오거나 값을 부여 할수있다.

.data() -- 선택된 대상의 명칭으로 오브젝트 값을 가지고 오거나 값을 부여 할수있다.

.removeAttr()

.removeData()

@ boolean 값 요소 체크

.is() -- 선택된 대상의 요소값이 존재하는지 boolean값으로 체크한다.

ex) <input type="checkbox" id="a" value="Y">

if($('#a').is(':checked')){}

.prop() --선택된 대상의 요소값을 boolean값으로 체크하거나 강제 실행할 수 있다.

ex) <input type="checkbox" id="a" value="Y">

if($('#a').prop('checked')){}

강제 체크하기 > $('#a').prop("checked", true);

@ 선택요소의 선택된 인덱스 값을 가지고 올수 있다.

.index() -- 선택된 대상의 index 값을 가지고 올 수있다.

매게변수를 this로 가지고 와야한다.

ex) $('article').click(function(){

var getArticleIndex = $('article').index($(this));

});

@ text 제어

.text() -- 선택된 대상에 텍스트를 삽입한다.

.replaceAll() -- 선택된 대상의 텍스트 중 일치하는 텍스트를 교체한다.

@ form 제어

.change() -- selectbox값이 변경될때 실행된다.

.focus() -- 선택된 대상에 포커스를 준다.

.submit() -- 선택된 대상을 submit 시킨다.(form)

.val() -- 선택된 대상의 값을 가지고 오거나 삽입한다.

.toggle() -- 한번 클릭시와 한번더 클릭시 이벤트를 걸수 있다.

.slideToggle() -- 한번 클릭시 슬라이드 다운 한번더 클릭시 슬라이드업

.slideUp() -- 객체를 슬라이드 업시켜 선택된 대상을 감춘다.

.slideDown() -- 감춰진 대상을 슬라이드로 보이게 한다.

.show() -- 감춰진 객체를 보이게 한다. -- css display

.hide() -- 객체를 감춘다. - css display

***선택기함수 종류

-매게변수가 있으면 매게변수를 입력해주고

-매게변수가 없으면(또는 2개여야하는데 1개이면) 들어있는 값을 가져온다.

.each() -- 선택 대상의 전체를 반복시킨다.

.children() -- 선택된 대상의 자식을 검색한다.

(매개변수있을경우 매개변수에 해당되는 자식)

.eq() -- 선택된 대상 중 매개변수에 등록되는 인덱스값만 선택한다.

.not() -- 선택된 대상 중 매개변수에 해당되지 않는 객체만 선택한다.

//.filter() -- 선택된 대상 중 자식 객체를 검색한다. (다중 선택가능)

.find() -- 선택된 대상 중 자식 객체를 검색한다. (다중 선택가능)

.first() -- 선택된 대상 중 첫번째 객체를 선택한다.

.last() -- 선택된 대상 중 마지막 객체를 선택한다.

.prev() -- 선택된 대상의 바로 앞(이전) 객체를 선택한다.

.next() -- 선택된 대상의 다음 객체를 선택한다.

.parent() -- 선택된 대상의 부모 객체를 선택한다.

.parents() -- 선택된 대상의 부모 개체를 최상위까지 선택한다.

매개변수가 있을경우 매개변수와 일치하는 부모까지만 검색한다.

**선택기

$('#아이디') // 단일선택 여러개의 아이디가 있으면 가장 위의 아이디에만 적용됨

$('.클래스') // 여기서부터 다중선택

$('태그명 table tr td')

$('[속성]') //태그안의 속성 name type 등

$('[속성=송성값]') //속성값에 ""없음

$('태그명[속성=속성값]')

$('선택기 : 요소') //ex $('객체:checked')

$('[속성!=속성값]')

$('태그명[속성!=속성값]')

$(this) //자기자신-함수자신

-ex) $('input').click(function){

-input이란 객체가 100개가 검색되었을 시

 그 100개 대상중에 하나를 클릭했을 경우에

 클릭대상을 $(this)로 표현할 수 있다.

})