목록Front-end/jQuery (4)
NULL
여러개의 요소 추가 $("#close, .black-bg").on('click', function(){ $(".black-bg").hide(); }) 각 클래스나 아이디 요소마다 따옴표로 구분 할 필요없이 따옴표는 전체로 묶어주고 요소마다 ,로 구분해준다. 여러개의 이벤트 추가 $(요소).on({ click:function(){ // 내용 }, mouserenter:function(){ // 내용 }, input:function(){ // 내용 } }) 이벤트를 여러개 작성하려면 위와 같이 작성하면 된다. 이 코드의 장점은 하나의 선택자에 여러개의 이벤트를 동시 사용함으로 가독성과 소스가 좋아진다.
이펙트 효과의 제어와 관련된 메소드 메소드 설명 .delay() 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정함. .stop() 선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴 .finish() 선택한 요소에 실행 중인 모든 이펙트 효과를 중지시키고, 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킴. .delay() $(function() { $("#startBtn").on("click", function() { // id가 "divBox"인 요소를 0.5초에 걸쳐 사라지게 하고 // 5초의 지연시간 뒤에 다시 2초에 걸쳐 나타나게 함. $("#divBox").fadeOut(500).delay(5000).fadeIn(2000); }); ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bClOwM/btryPTgTw7i/c968cPwC60aImNyXKFLBtK/img.gif)
JS에서 classList.toggle처럼 제이쿼리에서도 toggle이 존재한다. JS보다 더 간편하게 사용할 수 있다. 사용법 ()안에 'fast', 'slow' 혹은 시간초(초당 1000)를 지정할 수 있다. 기본 : 400ms fast : 200ms slow : 600ms 1. 서서히 보이고 사라지는 메소드 $('.btn').on('click', function(){ $('.hello').fadeOut(); }); .fadeIn() : 실행시 숨겨진 요소를 나타나게 한다. .fadeOut() : 실행시 요소를 사라지게 한다. .fadeToggle() $('.navbar-toggler').on('click', function(){ $('.list-group').fadeToggle(); }) fadeT..
요소추가 요소는 $로 불러온다. 사용법 $('.hello'); // 클래스추가 $('#world'); // 아이디추가 효과는 js의 쿼리셀렉터라고 생각하면 된다. 일반 js와 차이점은 다음코드와 같이 p태그를 바꿔주려면 일일히 값을 바꿔주거나 이에 맞는 로직을 짜야하지만 안녕 안녕 안녕 jquery의 $()는 querySelectorAll처럼 여러개가 있다면 전부다 찾아주고 인덱싱 할 필요없이 .html()메소드를 쓰게 되면 모든 요소를 한번에 조작, 변경이 가능하다. 안녕 안녕 안녕 주의사항 js와 jquery는 각각 자신들의 메소드만 사용할 수 있다. $(".hello").innerHTML('123'); // juery에서 js의 메소드를 사용하면 오류가 발생한다. .on() 제이쿼리의 이벤트리스너 ..