[Jquery] keydown
2022. 2. 19. 16:56
공부/JavaScript
클릭한 키보드 값을 받아온다. 이 때 우리는 아스키 코드로 각 키에 기능을 부여할 수 있다. 아래는 keydown을 이용하여 만든 간단한 피아노이다. $(document).ready(function(){ $(document).on("keydown", keyEventFnc) //이벤트 객체의 정보를 매개변수 e로 받는다. function keyEventFnc(e){ switch(e.keyCode){ case 65: $("#user-id").val("A") const audio_do = new Audio("./audio/1_do.wav") audio_do.play() break; case 83: $("#user-id").val("S") const audio_re = new Audio("./audio/2_re..
[Jquery] scroll, focus, blur
2022. 2. 19. 16:39
공부/JavaScript
scroll 스크롤 위치 값을 반환한다. $(document).ready(function(){ $(window).on("scroll",function(){ var sc_top=$(this).scrollTop(); var sc_left=$(this).scrollLeft(); $("#top").text(sc_top); $("#left").text(sc_left); }) }) focus 선택(focus) 되어 있는 상태에 기능을 추가할 수 있다. $(document).ready(function(){ $("#user_id,#user_pw").on("focus",function(){ $(this).css("backgroundColor","pink") }) }) blur focus가 해제 된 뒤(선택이 되지 않은)..
[Jquery] on 메서드, hover 메서드
2022. 2. 18. 19:51
공부/JavaScript
on 메서드를 사용하면 여러 개의 이벤트를 묶어서 그룹화하여 사용할 수 있고 콤마로 구분한다. $(document).ready(function(){ $("#btn").on({ click:function(){ $("#btn").css("color","red") }, mouseover:function(){ $("#btn").css("color","green") }, mouseout:function(){ $("#btn").css("color","blue") } }) }) 이때 on으로 hover 기능을 하나하나 구현할 필요 없이 hover 메서드를 사용하면 더 간단하게 사용 가능하다. 첫 번째 function에는 mouseover, 두 번째 function에는 mouseout시에 실행할 기능을 설정해준다. $..
[Jquery] addClass, removeClass, hasClass, toggleClass
2022. 2. 17. 23:29
공부/JavaScript
addClass 클래스를 추가한다. function myFunc() { $("#my-div").addClass("my-red") } removeClass 클래스를 제거한다. function myFunc() { $("#my-div").removeClass("my-red") } hasClass 클래스 값이 있는지 검사한다. function myFunc() { $("#my-div").hasClass("my-red") } toggleClass addClass, removeClass, hasClass를 합쳐서 토글 기능을 쉽게 사용할 수 있도록 해준다. toggleClass를 사용하지 않고 토글기능을 구현하려면 다음과 같다. function myFunc() { var result = $("#my-div").has..
[Jquery] attr 메서드
2022. 2. 17. 23:23
공부/JavaScript
Jquery에서는 attr 메서드를 사용하여 속성을 변경하거나 추가할 수 있다. $(document).ready(function(){ $('#my-img').attr("src","./img/cat.jpeg") }) 위와 같이 작성하게 되면 my-img라는 id를 가진 img 태그에 src="./img/cat.jpeg"을 추가하게 된다. 이를 이용하여 다음과 같이 응용이 가능하다. var mode = 'password' function changeMod(){ if(mode=='password'){ $('#pw').attr("type","text") mode='text' $('#btn').text("해제") } else if(mode=='text'){ $('#pw').attr("type","password"..
[Jquery] html, text 메서드
2022. 2. 17. 22:59
공부/JavaScript
html 메서드 html 메서드는 innerHtml과 비슷하다. $(document).ready(function(){ var result = $("#sec-1").html() console.log(result) }) 위 코드는 sec-1의 하위 영역의 모든 내용을 가져오게 된다. text 메서드 innerText와 비슷하다. $(document).ready(function(){ var result = $("#sec-1").text() console.log(result) }) 위 코드는 sec-1의 태그를 제외한 모든 내용을 가져오게 된다. 위 두 코드를 setter로 사용하게 되면 다음과 같다. $(document).ready(function(){ $("#sec-1").html('새로운') $("#sec..
[Jquery] first,last/even,odd/eq/lt,gt/slice
2022. 2. 17. 22:52
공부/JavaScript
FIRST, LAST 첫 번째 요소와 마지막 요소를 선택할 때 사용한다. $(document).ready(function(){ $("#menu>li").first().css("color","red") $("#menu>li").last().css("color","blue") }) 이렇게 하면 li 중에서 첫 번째는 red, 마지막 li는 blue로 변경된다. EVEN, ODD 짝수 요소와 홀수 요소를 선택할 때 사용한다. $(document).ready(function(){ $("#menu>li").even().css("color","red")//짝수요소 $("#menu>li").odd().css("color","blue")//홀수요소 }) even은 짝수, odd는 홀수, 즉 아래와 같이 선택된다. 리스..
[Jquery] val 메서드
2022. 2. 17. 22:31
공부/JavaScript
val 메서드를 사용하여 접근한 요소의 value(값)을 읽어올 수 있다. $(document).ready(function(){ var myVal=$("#my-input").val() console.log(myVal) }) 그렇다면 여기서 아래와 같은 간단한 응용을 해볼 수 있다. function myFunc(){ var myColor=$("#myColor").val() var myBgColor=$("#myBgColor").val() $("#my-div").css({"color":myColor, "backgroundColor":myBgColor}) } 이렇게 하면 myColor, myBgColor라는 id를 가진 input 요소의 value를 받아온 뒤, css 선택자로 적용하여 요소의 색을 변경할 수 ..
[Jquery] prev, next, siblings
2022. 2. 17. 22:23
공부/JavaScript
리스트1 리스트2 리스트3 리스트4 리스트5 위와 같은 상황에 me를 기준점으로 이전, 이후의 요소를 선택하는 방법이 prev, next이다. 코드는 다음과 같다. $(document).ready(function(){ $("#me").prev().css("color","red") $("#me").next().css("color","blue") }) 그리고 이전의 요소 모두, 다음 요소 모두를 선택하는 방법도 있다. $(document).ready(function(){ $("#me").prevAll().css("color","red") $("#me").nextAll().css("color","blue") }) 위와 같이 prevAll, nextAll을 사용해주면 된다. 그리고 기준점부터 원하는 요소 바로 ..