jQuery
-
[Js&jQuery] remove on event / on 이벤트 없애기programming/JavaScript&jQuery 2020. 2. 24. 23:43
jQuery의 on 이벤트를 없애는 건 off 다. 왜인지 모르지만 써본 적은 없었던 것 같다. 근데 on이 있으면 off도 있을 거 같아서 써보았더니 정말 있었다. 그래서 간단한 예제로 만들어 봤다. 버튼을 클릭하면 alert이 생기고, off버튼으로 이벤트를 없앤다. on버튼으로 이벤트를 추가한다. on을 누른만큼 이벤트는 중첩해서 발생한다.(alert이 여러 개 뜬다.) off는 한번만 눌러도 모든 on 이벤트를 없앤다.
-
[jQuery&html] html 요소 지우기 .remove()programming/JavaScript&jQuery 2019. 11. 6. 00:00
기본 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 test p tag text test p 2nd text test code test Colored by Color Scripter cs 1. remove() Description: Remove the set of matched elements from the DOM. remove()에 대한 jQuery에 올라와 있는 설명이다. 일치하는 요소들을 DOM에서 없애는 기능을 가지고 있다. 2. 사용법 1 2 3 4 5 6 7 8 $("#main").remove(); // div#main 없애기 $("button").remove(); // 모든 버튼 없애기 $("button").first().remove() // 첫번째 버튼만..
-
[jQuery] each() 사용법programming/JavaScript&jQuery 2019. 10. 31. 00:00
1. each() 배열 같은 여러개의 데이터를 탐색할 때 사용할 수 있는 함수다. text1 text2 text3 text3 위와 같은 코드가 있을때, $("#btnDiv>button")로 접근하면, 길이가 4인 버튼 배열을 가져온다. 이때 저런 배열을 탐색하기 편하게 해주는 함수가 each()다. 2. jQuery $(function(){ $("#btnDiv>button").each(function(index, obj){ console.log(index); console.log(obj); }) }); each로 사용하면 첫번째로 index, 두번째로 객체를 전달해준다. index는 배열의 순서대로 0에서 3까지 나오게 된다. obj는 button 태그 전체를 반환한다. 그래서 인덱스별로, 객체별로 접근..
-
[jQuery] .not() 사용법programming/JavaScript&jQuery 2019. 10. 25. 00:00
jQuery .not() 사용법 먼저 아래와 같은 not.html 파일이 있다. test1 test2 test3 test4 test5 그리고 아래와 같은 not.js 파일도 있다. $("#test>button").click(function(){ $(this).text("click"); $("#test>button").not(this).text("unclick"); }); 해당 소스들을 실행하면, 이렇게 버튼이 5개 생기는데, 클릭된 버튼은 "click"로 텍스트가 바뀌고, 나머지 클릭되지 않은 버튼은 "unclick"로 텍스트가 바뀐다. 이때 사용한게 not()인데, not 뒤에 들어가는 요소를 제외하고 반환한다. 그러니까 저기서 this는 클릭된 버튼을 의미하고, $("#test>button") 으로 ..
-
[HTML&CSS] 자식&자손 선택자, 선택자 여러개 선택하기programming/HTML&CSS 2019. 9. 30. 23:45
html, css, javascript, jquery... 등에서 선택자를 쓸 일이 많다. 객체를 선택할 때 많이 쓰는데 여러 가지 방법으로 쓸 수 있다. #SELECTOR { stlye:display:none;} $("#SELECTOR").val("test value"); 등의 형식으로 쓸 수 있다. 이때 선택자는, 자식 선택자, 자손 선택자 또는 여러 선택자를 동시에 선택할 수 있다. 먼저 자식 선택자는 "바로 아래" 객체를 선택할 수 있다. 위와 같은 html 태그들이 있을때, 자식 선택자로 아래와 같이 해당 객체를 선택할 수 있다. $("SELECTOR1 > SELECTOR2"); 자손 선택자로는 "해당 객체 하위 객체 중 하나"를 선택할 수 있다. $("SELECTOR1 SELECTOR3-1")..
-
[JavaScript&jQuery] 코드에서 클릭 이벤트 발생시키기 (JavaScript)programming/JavaScript&jQuery 2019. 8. 30. 00:04
클릭 이벤트는 보통 $("SELECTOR").click(function(){ alert("selector click"); }); 의 형태로 실제로 클릭되었을 때, 콜백 함수로 실행 내용을 정의한다. 이때 코드에서 클릭 이벤트를 발생시키기 위해선 $("SELECTOR").trigger("click"); 형태로 발생시키거나, $("SELECTOR").click(); 의 형태로도 발생시킬 수 있다.
-
[jQuery] 제이쿼리 오브젝트 합치기 - jQuery.extend()programming/JavaScript&jQuery 2019. 8. 21. 23:17
제이쿼리를 사용해서 오브젝트를 합칠 때 사용하는 함수는 extend() 가 있다. 이때 사용법은 아래와 같이 사용할 수 있다. var object = $.extend({}, object1, object2); 위의 코드와 같이 사용하면, 아래처럼 실행된다. 합쳐지긴 합쳐지는데 사용법에 따른 차이는 아래 문서에서 좀 더 자세하게 확인할 수 있다. https://api.jquery.com/jquery.extend/ jQuery.extend() | jQuery API Documentation Description: Merge the contents of two or more objects together into the first object. When two or more object arguments are..