반응형 [개발] Programming/JQuery18 JQuery addClass/removeClass 함수로 class 추가, 제거 하기 클래스 추가하는 함수 $(this).removeClass( "클래스명" ) ; 클래스 제거하는 함수 $(this).addClass( "클래스명" ) ; removeClass()로 클래스 제거 예시 페이지 소스 클릭 JQuery 소스 $("#removeClassBtn").on("click", function(){ // 클릭하면 damm 이라는 클래스가 사라진다. $(this).removeClass( "damm" ); )}; 결과 페이지 소스 클릭 2018. 10. 29. JQuery, 여러 개의 checkbox 중 checked 된 checkbox 찾기 여러 개의 checkbox 중 원하는 checkbox가 체크 되어 있는지 검사하는 방법이다. 아래 소스에 대해 설명하면, 버튼 명 '주문'을 클릭하면 체크 여부를 검사하는 함수가 실행된다. 페이지 HTML 소스 burger rice beer kimchi 주문 JQuery 소스 $("#next").onclick(function(){ // 체크 개수 만큼 루프 돌리기 $(document).find("input:checkbox").each(function(index){ if( $(this).attr("id") == "rice" || $(this).attr("id") == "kimchi" || $(this).attr("id") == "beer"){ // 모든 체크박스 중 특정 id만 체크여부 검사 if(!$(t.. 2018. 10. 29. JQuery, 특정 레이어 밖을 클릭할 경우 열려 있는 레이어 또는 팝업 닫기 레이어를 띄운 상태에서 레이어 밖을 클릭할 경우 레이어 닫는 방법! '예'에서 만약 id가 "layerid"인 div의 밖을 클릭할 경우 container.has(e.target).length는 0이 리턴 되고 container.hide();를 통해 열려 있는 레이어는 닫히게 된다. JQuery 소스 $(document).mouseup(function (e){ var container = $("#layerid") if(container.has(e.target).length == 0){ container.hide(); } }); 페이지 소스 레이어 화면 아무곳을 클릭해도 함수를 실행시키기 위해 mouseup()을 사용했다. 다른 방법으로는 마우스가 레이어를 떠날 때 닫고 싶으면 mouseup 대신 mous.. 2018. 10. 29. JQuery, class 내 특정 하위 class만 지정하는 방법 동일한 class 명이 같은 페이지 내에 존재할 때, 특정 class 하위에 종속된 class를 찾고 싶은 경우 아래 처럼 class를 top down 순으로 지정하면 특정 class를 찾을 수 있다. JQuery 소스 var classObj = $(".BurgerKung .burger"); 페이지 소스 --> 여러 burger class 중 이것만 찾고 싶을 때 2018. 10. 29. JQuery, find()로 특정 태그 찾기, not()으로 특정 태그 제외하기 jQuery find() : 특정 태그 찾는 방법. $(selectorA).find(selectorB); HTML 페이지 소스 --> 찾으려는 대상 예1) beer라는 name을 가진 요소를 찾고 싶은 경우. var targetObj = $("#menuList").find("input[name='beer']"); 예2) id로 찾고 싶은 경우. var targetObj = $("#menuList").find("#beer"); jQuery not() : 특정 태그는 제외하고 찾는 방법. $(selectorA).find(selectorB).not(selectorC); HTML 페이지 소스 --> 찾으려는 대상 예) 특정 ul 밑에 li 를 찾되 burger라는 id를 가진 태그는 제외하고 싶은 경우. var.. 2018. 10. 29. each(), for문과 유사한 JQuery loop 함수 JQuery에서 제공하는 each()를 이용하면 loop 효과, 즉 for문 처럼 사용할 수 있다. 기본적으로 아래와 같은 형태이다. .each( function(index, Element) ); Element에는 루프를 돌때 마다 작업을 수행하고 싶을 때 function를 정의 해주면 된다. 아래 예시에서는 function을 추가하여 div 개수 만큼 function이 수행되어 alert이 세번 뜬다. first second third 자바스크립트 배열에 사용하고 싶은 경우 아래 예시 참고 var jsArray = ["first", "second", "third"]; $.each(jsArray, function(index){ alert(index +" 번째 루프."); }); JQuery docemnt.. 2018. 10. 29. 이전 1 2 3 다음 728x90
