본문 바로가기

분류 전체보기957

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.
JQuery 함수 trigger(), 강제로 click 이벤트 발생시키기 강제로 이벤트를 실행시키기 위해서는 JQuery .trigger() 라는 함수를 사용한다. .trigger( eventType [, extraParameters ] ) 아래 예시에서 btn 이라는 id를 갖는 요소에 강제로 클릭 이벤트를 발생시킨다. $(document).ready(function(){ // trigger로 인해 실행되는 부분 $("#btn").bind("click", function(){ alert("클릭!"); }); // 강제로 클릭 이벤트 발생시키는 부분! $("#btn").trigger("click"); }); 클릭 안 해도 됨. 로딩이 완료되는 데로 div를 클릭하지 않아도 trigger로 이벤트를 발생시키기 때문에 "클릭!" 이라는 alert가 뜬다. 클릭 외에도 원하는 이벤.. 2018. 10. 29.

티스토리툴바