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)로 표현할 수 있다.
})