jQuery
-
[jQuery] jQuery on("click")과 click() 차이는? 그리고.off()jQuery 2022. 5. 1. 19:04
- 선택자.on("click") 과 선택자.click() 의 차이점은 동적으로 이벤트를 바인딩할 수 있는지 없는지의 차이다. - 선택자.on("click")은 동적으로 생성된 태그에 클릭을 가능하게 이벤트를 바인딩 해준다. - 선택자.click() 은 최초에 선언된 태그에만 동작한다. 동적으로 생성된 태그에는 안먹힘. - 선택자.on("click")이 선택자.click() 보다 메모리 관리에 좋다고한다. 이유는 미리 메모리를 할당하지 않기 때문임 off() - 이벤트 제거하기 통합 메서드 선택자.on("click") 를 사용할때 추가로 off()메서드를 사용하면 더 좋다고 한다. $('#id').off().on('click', function(){}); 이렇게 하면 기존에 클릭 이벤트가 있는 경우 cli..
-
[jQuery] 비동기통신 메소드 $.ajax(), $.get(), $.post() , load() 정리jQuery 2022. 2. 28. 14:05
Whait is AJAX? Asynchronous JavaScript And XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법 Ajax 메소드의 종류 $.ajax() 비동기식 Ajax를 이용하여 HTTP 요청함 $.get() HTTP GET 방식으로 요청 후 서버로부터 데이터를 받음 $.post() HTTP POST 방식으로 요청 후 서버로부터 데이터를 받음 $.getScript() HTTP GET 방식으로 요청 후 서버로부터 받은 JavaScript 파일을 로드하고 실행 $.getJSON() HTTP GET 방식으로 요청 후 서버로부터 받은 JSON 파일을 로드하고 실행 .load() URL로부터 HTML 데이트를 받고 jQuery 셀렉터로 선택된 위에 넣어 줌..
-
jQuery 사용자 정의 메소드 만들기 ($.fn 확장)jQuery 2020. 5. 30. 17:43
$.fn $("a").text("바로가기"); 이렇게 jQuery Selector 를 이용하는 메소드를 추가하려면 $.fn.메소드명 을 통해 추가하면 된다. 예제) 값을 콘솔로 출력하는 함수 만들기 (function($) { $.fn.getPrint = function(){ var value = this.val(); console.log(value) //return this; 생략 가능. }; }(jQuery)); jQuery 에서 사용하는 $ 변수는 다른 라이브러리들도 많이 사용한다. 그래서 변수가 충돌하여 동작을 하지 않을 가능성이 항상 있다.(jQuery의 경우 $ 변수는 jQuery 변수의 별칭 임) 우리가 만드는 플러그인이 이러한 충돌을 피할 수 있도록 즉시 호출 함수 표현을 사용해서 감싸 준다..
-
jQuery for each안에서 return false 사용하기jQuery 2020. 3. 24. 18:23
1. return false 안되는 코드 $("input[name=chkArray]:checked").each(function(idx, item) { if(item.value == "01"){ alert("잘못 체크 하였습니다."); return false; } } 2 return false 되는 코드 var exit= false; $("input[name=chkArray]:checked").each(function(idx, item) { if(item.value == "01"){ alert("잘못 체크 하였습니다."); exit = true return false; } } if(exit){ return false; } for문 은 function이 아니고 each 문은 function이기 때문에 eac..
-
제이쿼리(jQuery)로 html 태그 만들기jQuery 2019. 10. 9. 15:44
1. 그냥 문자열을 붙여서 태그 만들기. var appendHtml = ''; appendHtml += ''; appendHtml += ' '; appendHtml += ''; console.log(appendHtml); //결과 2. 제이쿼리를 이용해서 만들기 var imageUrl = 'www.test.com.kr/image/static/test.JPG'; var appendHtml = $('', {'class': 'pic'} ) .append($('',{ 'class':'img_acircle' ,'src': imageUrl ,'alt':'test사진' } ) )[0].outerHTML; console.log(appendHtml); //결과 1번 방법으로 만드는 것이 가독성이 좋다고 생각한다.
-
제이쿼리 jQuery closest(), parant(), siblings(), children()jQuery 2018. 3. 3. 20:07
HTML 예제 1 2 3 4 5 6 7 8 9 10 11 cs 1. parent() 1 2 3 4 5 $(document).on("click","#me",function(){ $(this).parent().css("background-color","red"); }); Colored by Color Scripter cs 결과 : grandmom , mom의 div색이 red로 변경됨. parent() 함수는 부모들을 호출한다. grandmom만 호출하려면 $(this).parent().parent()로 호출하는 법이 있지만 index로 호출하는 eq() 함수가 있다. $(this).parent().eq(2); 이렇게 하면 2번째 상위의 parent 요소가 선택된다. 2. closest() 1 2 3 4 5..
-