웹 / 제이쿼리(jQuery) 자주 쓰이는 함수 모음zip / 제이쿼리 메소드 / 제이쿼리 이벤트 함수/ HTML제어 메소드

매개변수에 따른 이벤트 함수

매개변수가 있을 때의 이벤트 함수는 매개변수를 사용하여 이벤트 함수를 설정한다.

매개변수가 없을 때의 이벤트 함수는 사용자로부터 값을 받아오거나, 사용자가 이벤트를 한 것처럼 설정한다.

HTML 제어와 관련된 메소드

.after()

해당 요소 뒤에 내용(html()와 같은 기능)을 추가한다.

$("#document").after("<div>뒤에 해당 내용을 추가해주세요.</div>");

 

.before()

선택된 대성의 전에 html을 삽입한다.

해당 요소 앞에 내용( html()와 같은 기능 )을 추가한다.

$("#document").before("<div>앞에 해당 내용을 추가해주세요.</div>");

.html()

.text() 메소드와 기능은 유사하지만 삽입하는 내용에 hmtl 태그가 있다면

태그가 적용되며 text가 변경된다.

$("p").html("<div>여기 구문을 이렇게 바꿔주세요. </div>");

 

.prepend()

 가리킨 대상의 자식요소의 맨 앞에 내용을 추가한다.

$("#content").prepend(first_name + " : " + last_name + "<br>");

 

.append()

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

$("#content").append(first_name + " : " + last_name + "<br>");

.wrap()

wrap의 타겟이 된 요소를 해당 요소로 감싼다. = 선택한 요소의 부모요소를 생성한다.

$("<span>내용<span").wrap("#result");

 

.unwrap()

선택한 요소의 부모 요소를 삭제한다.. = 선택한 요소의 부모요소를 삭제한다.

$("#result").unwrap();

 

 

.remove()

태그를 포함한 요소 전체를 제거한다.

$("#content").remove();

 

.empty()

해당 요소의 내용(text)만을 지운다.

$("#content").empty();

 

.detach()

ctrl + x 키를 눌렀을 때의 잘라내기 기능과 같다.

잘라낸 부분을 다른 변수에 저장 가능하다.

let val = $("#content").detach();

 

.on()

동적으로 html을 생성시 인식되지 않을경우 사용하며 이벤트 바인딩을 해준다.

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

$("body").on("moiseenter mouseleave", function(){})

 

.ready()

작성한 HTML이 웹에 로딩이 완료가 되면 매개변수로 전달된 함수를 실행하는 메소드이다.

더 추가적으로 말하면 페이지에 모든 외부 리소스가 아닌 DOM 객체만 로드가 되어도 실행이 된다.

$(document).ready(function(){});

 

$(document)는 '웹 페이지 전체'를 뜻한다.

 

.load()

ready()와 다르게, 해당 페이지의 모든 외부 리소스가 포함된 모든 요소가 브라우저에 로드 되어야 실행하는 메소드이다.

$(window).load(function(){});

 key 제어와 관련된 메소드

.keydown()

키보드에 키를 누른 상태가 될 때 발생되는 이벤트 메소드

$("#text").keydown(function(){})

.keypress()

keydown() 메소드와 유사하게 키 입력 시 발생되는 이벤트지만

Tab 키, Enter키 등의 특수키에는 이벤트가 발생하지 않는 메소드

$("#text").keyrpress(function(){})

 

.keyup()

키보드에 키를 누르고 뗀 후에 이벤트 메소드

$("#text").keyup(function(){})

 

※키보드 버튼 '키 값'※

Enter key: 13
Up Arrow: 38
Down Arrow: 40
Left Arrow: 37
Roight Arrow: 39
ESC key: 27

mouse 제어와 관련된 메소드

마우스와 관련된 x, y값 좌표를 받아올 수 있다.

.click()

마우스로 클릭했을 때 발생하는 메소드이다.

$("#button").click( function(){} );

.mousemove()

마우스 포인터가 지정된 요소 범위 내에서 움직이면 이벤트가 발생하는 메소드이다.

$("p").mousemove();

.mousedown()

마우스 버튼을 누를 때 이벤트가 발생하는 메소드이다.

.mouseup()

마우스 버튼을 뗄 때 이벤트가 발생하는 메소드이다.

.mouseout()

마우스 포인터가 지정된 요소 범위 내에서 벗어날 때 이벤트가 발생하는 메소드이다.

.hover()

요소에 마우스를 올리거나 올렸던 마우스가 벗어났을 때 실행되는 메소드이다.

$("button").hover();

 

Size와 관련된 메소드

.width()

해당 요소의 가로 크기를 변경하거나 가져온다. 

.height()

해당 요소의 세로 사이즈를 변경하거나 가져온다.

 

css 제어와 관련된 메소드

클래스명을 추가하거나 제거하면 간단하게 원하는 스타일을 추가하거나 제거하는 것이 가능해진다.

물론 해당되는 class 스타일이 css에 선언되어 있어야 한다. 

.addClass()

파라미터로 전달받은 클래스를 특정 요소에 추가한다. 이미 요소가 해당 class를 가지고 있으면 추가되지 않는다.

$("span").addClass("black");

 

.removeClass()

파라미터로 전달받은 클래스를 요소가 가지고 있다면 삭제한다. 

$("div").removeClass("test");

 

.css()

선택된 DOM 엘리먼트에 인라인 방식으로 스타일인 CSS를 추가하거나 값을 가져오는 메소드이다.

.attr()과 유사하지만 다른 점은 attr()은 기존에 있던 값이 모두 삭제되고, 새로운 값으로 스타일이 변경되는데

.css()는 기존 값을 유지하면서 새로운 스타일을 추가하거나 변경할 수 있다.

$(".test").css("color", "blue");

 

 

CSS의 속성 값 등의 data를 제어하는 메소드

.attr("속성")

선택된 요소 집합에서 첫 번째 요소의 속성 값을 조회한다.

$("form").attr("action); //첫 번째 form 요소의 action 속성의 속성 값 반환

.attr("속성","속성값")

선택자의 의해 선택된 요소에 하나 이상의 속성 값을 부여한다. 

$("#banner").attr({src:"photo.jpg", alt:"Advertisement", width:480, height:240}); //한번에 4개 속성 부여

.removeAttr()

선택된 모든 요소에서 속성을 완전히 제거한다. 

$("a").removeAttr("target");

.data()

값(value)을 키 <key, value>로 값을 저장할 수 있고, 저장된 데이터를 키 값으로 읽어올 수 있다. 

$("span").data("name", "PJH"); //데이터 저장

var name = $("span").data("name"); //데이터 읽어오기

.removeData()

저장된 데이터를 키(key) 값을 통해 삭제하는 메소드이다.

$("span").removeDate("name"); //데이터 삭제

 

이벤트에서 boolean 값을 받아올 수 있는 메소드

.is()

해당 요소에 원하는 요소 값이 존재하는지 boolean값으로 체크한다.

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

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

}

 

.prop()

.prop()는 .attr()와 마찬가지로 요소의 첫 번째 속성을 반환하는 메소드이다. 

또, 선택된 대상의 요소값을 boolean값으로 체크할 수 있으며, 체크박스에 강제로 체크할 수 있다.

ver res = $("#chk").prop("checked"); //체크박스에 체크가 되어 있으면 res에 'true'가 들어간다.

 $('#a').prop("checked", true); //강제로 체크(true) 만들기.

 

.index()

특정 태그 요소가 몇 번째 해당하는 요소인지 알아내어 index 값을 가지고 오는 메소드이다. 

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

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

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

});

 

text 제어와 관련된 메소드

.text()

해당 요소에 텍스트를 삽입한다.

$("div").text("안녕하세요.");

.replaceAll()

선택된 대상의 요소 중 일치하는 부분을 교체한다.

$("<div>Hi my name is Hwan").replaceAll("p");

 

form 제어와 관련된 메소드

 

.change()

요소의 값(value)에 변화가 생길 경우 변화를 감지하여 등록된 콜백(callback)함수를 동작시킨다.

해당 메소드는 input, textarea, select 태그에 동작한다.

#inputFile.change(function() {alert("파일첨부가 완료되었습니다.");});

 

.focus()

선택된 대상에 포커스를 주는 메소드로 주로 입력부의 가장 첫 번째 항목에

포커스를 주어 마우스 커서가 눌려있도록 한다. 사용자가 마우스를 한번 클릭하는

수고를 덜어줄 수 있다.

$("#input_id_text).focus();

 

 

.submit()

submit가 발생하면 실행하는 메소드이다. 대상을 submit한다.

$("#submit_signal").submit( function(){} );

.val()

값을 가져오거나 삽입하는 메소드이다.

$("#input_text").val();

.toggle()

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

$("#btn").toggle();

 

.slideToggle()

요소가 사라진 상태가 될 땐 슬라이드 다운, 요소가 나타날 땐 슬라이드 업을 해준다.

$("img").slideToggle();

.slideUp()

천천히 올라가면서(슬라이드 업) 사라지는 효과를  보여주며 요소를 감춘다.

$("img").slideUp("fast");

.slideDown()

천천히 내려가면서(슬라이드 다운) 사라지는 효과를  보여주며 요소를 감춘다.

$("img").slideDown("slow");

.show()

감춰진 요소를 보이게 한다.

$("#btn").show();

.hide()

요소를 감춘다.

$("#btn").hide();

 

 

선택자를 활용한 요소의 탐색과 관련된 메소드

.each()

이는 반복문이며, 반복시키고자 하는 대상 전체를 반복시킨다. for문의 상위버전

$("input[number=chk]:checked").each( function() {});

 

.eq()

선택된 대상 중 매개변수로 넣은 인덱스로 탐색한다.

$("li").eq(1).css("background-color", "black");

 

.not()

선택된 요소 중 특정 선택자를 제외한 요소를 선택한다.

$("p").not("p.abc").css("color", "green"); //p요소 중 abc를 클래스 값으로 가지지 않는 요소 중

css 색이 녹색인 것을 선택

 

.filter()

선택된 요소들의 일부분을 추출하여 새로운 객체를 생성하는 메소드이다. 

$('li').filter(':even').css('background-color', 'red'); //리스트 요소 중 인덱스 번호가 짝수인 것만 빨간색 배경으로 바꾸는 기능

.find()

선택된 요소의 자식 요소 중에서 일치하는 자식 요소를 찾아 반환한다. (다중 선택가능)

var testVar = $("div").find("p");

 

.first()

선택된 대상 중 첫번째 요소를 선택한다.

$("pre").first().css("color", "black");

.last()

선택된 대상 중 마지막 요소를 선택한다.

$("pre").last().css("color", "black");

.prev()

선택된 대상의 바로 앞(이전) 요소를 선택한다

$("#text").prev().css({"color" : "black"});

.next()

선택된 대상의 다음 요소를 선택한다.

$("#text").next().css({"color" : "black"});

.parent()

선택된 대상의 부모 객체를 선택한다.

$("div").parent().css("background-color", "black");

 

.parents()

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

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

$("p").parent("div").css("background-color", "yellow");

 

.children()

선택된 대상의 자식요소를 검색한다.

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

$("div").children("#chd").text("children()");

 

제이쿼리(jQuery)를 위한 선택기(selector)

$('#아이디')

$('.클래스') 

$('태그명 table tr td')

$('[속성]') 

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

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

$('선택기 : 요소')

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

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

$(this)