[개발] Programming/JQuery18 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. JQuery, 부모 태그 찾는 함수 Closest(), Parent(), Parents() JQuery Closest(), Parent(), Parents() 마우스 클릭 이벤트와 같은 이벤트를 발생시킬 때 상위 태그나 요소를 찾을 일이 종종 발생한다. 이때 사용할 수 있는 jquery 함수는 3가지가 있다. 이 세가지는 아주 흔히 사용되는 함수로 반드시 기억해 둔다. .closest() // .closest("div") 와 같이 사용하여 원하는 특정 요소만 찾을 수 있음. .parent() // 바로 상위 요소 하나를 찾아줌. .parents() // 상위 모든 요소를 반환함. 예제로 살펴보면 아래와 같다. Find parent element 페이지에 clickButton 이라는 id를 가진 a태그를 클릭 했다고 가정했을 때, 아래 주석처럼 각각의 결과물을 확인할 수 있다. .closest(.. 2018. 10. 29. JQuery, 체크박스 체크 여부 검사하는 방법 정리 이번 포스트에서는 JQuery 명령어를 통해 체크박스의 상태를 가져오거나 객체 전체를 호출하는 방법, 체크된 박스의 개수를 구하는 방법을 소개하겠습니다. 참고로 라디오 버튼도 거의 유사한 원리로 동작합니다. 체크된 객체 가져오기 체크 박스가 있는 예시 소스 체크된 태그의 객체를 가져오는 JQuery 소스 // 결과: 체크된 input의 object를 가져온다. $("input[name='getByName']:checked"); 예) 체크된 input 객체가 있는지 없는지 검사하는 방법. // 결과: 0보다 크면 체크 된 상태다. $("input[name='getByName']:checked").length; 체크 여부 확인하기 예시 소스 체크 여부를 검사하는 JQuery 소스 // 결과: 체크되어 있으면.. 2018. 10. 29. JQuery, 동적으로 추가된 dom element(태그)에 onclick이 인식 안되는 경우 해결 방법 onclick이 인식 안되는 경우 .on() 메소드는 DOM element에 이벤트를 바인딩 하는데 쓰인다. 하지만, 동적으로 추가된 요소에 대해서는 이벤트가 바인딩 되지 않는다. 아래 소스를 예로 들면 $(document).ready(function () { $('#btnAdd').on('click', function(){ $('Dynamic Div ').appendTo('body'); }); $('div').on('click', function() { console.log("Clicked."); }); }); btnAdd 라는 태그를 클릭했을 때 div가 추가되는데, 새로 추가된 div 태그를 클릭하면 바로 아래 onclick 이벤트가 실행되지 않는다. 최초에 페이지를 로딩할 때 해당 태그가 없어서 .. 2018. 10. 29. 자바스크립트, JQuery 특정 좌표나 엘리먼트, 태그로 스크롤 이동 자바스크립트 소스 특정 좌표(x, y)로 스크롤 이동 시키기 function scrollToDown(){ window.scrollTo(X, Y); } JQuery 소스 특정 요소(element)나 tag 위치로 스크롤 이동시키기 div1로 이동 div2로 이동 div1 div2 2018. 10. 26. JQuery 마우스 이벤트 정리 JQuery 마우스 이벤트 JQuery에는 수많은 마우스 이벤트가 존재합니다. 그러다 보니 가끔 헷갈려 정리해봤습니다. .click() 마우스를 클릭하면 실행 .contextmenu() 마우스 오른쪽 버튼을 누르면 실행 .dblclick() 마우스를 더블 클릭하면 실행 .hover() 마우스 포인터가 해당 영역 안으로 이동하면 실행 .mousedown() 마우스 버튼을 누를 때 실행 .mouseenter() 마우스 포인터가 해당 영역 안으로 이동하면 실행 .mouseleave() 마우스 포인터가 해당 영역 밖으로 떠나면 실행 .mousemove() 마우스를 움직이면 실행 .mouseout() 마우스 포인터가 해당 영역 밖으로 떠나면 실행 .mouseover() 마우스 포인터가 해당 영역 안으로 이동하면 .. 2018. 10. 23. 이전 1 2 다음
