본문 바로가기

[개발] Programming197

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.

티스토리툴바