[개발] Programming/JQuery18 jQuery mouseover 이벤트 - 마우스 커서를 올리면 인식하기 웹 프런트 단을 개발하다 보면 가장 흔하게 사용하는 자바스크립트 이벤트는 아마 mouseover 이벤트일 것이다. 해당 이벤트는 마우스 커서를 이벤트가 바인딩된 태그(엘리먼트) 올려두면 트리거 되는 방식이다. 이는 클릭 이벤트와는 다른 형태이다. HTML 소스 마우스 올려보삼. jQuery 소스 $(document).ready(function () { $("#testId").mouseover( function () { alert("뿌잉 뿌잉"); }); }); 위 소스를 보면 '요기 마우스 올려보삼.' 이라는 문구가 페이지에 노출될 것인데, 여기에 마우스 커서를 올려 두면 '뿌잉 뿌잉' 이라는 문구의 알럿이 뜬다. 또 다른 방법으로는 아래와 같이 구현할 수 있다. 결과는 당연히 동일~! $(documen.. 2021. 8. 1. JQuery serialize() 사용하는 이유 JQuery serialize JQuery Ajax로 호출하기 전에 serialize를 해주면 form안에 값들을 한 번에 전송 가능한 data로 만들 수 있어 많은 data를 보낼 때 유용하다. (Ajax가 아닌 다른 상황에서도 사용할 수 있음.) 형태: $("form id 또는 name").serialize(); serialize를 사용하지 않는다면 하나씩 담아줘야 하기 때문에 보낼 data가 많을수록 노가다를 엄청 해야 된다. 예제 소스 예제 소스를 통해 살펴보면, id="food" 인 form이 있다고 가능하자. 이제 아래 form을 Ajax를 사용하여 서버로 보내기 위한 data 형태로 만들어본다. 1 2 3 4 5 6 Colored by Color Scripter cs 1. serialize .. 2020. 4. 4. JQuery, 서로 다른 태그를 하나의 click event에 바인딩 하기 JQuery Click Event 업무를 하다보면 어쩌다가 한 번씩은 서로다른 태그나 버튼으로 하나의 함수를 호출할 일이 생긴다.이때 서로 다른 click event 한곳에서 처리 하기 위해서는 두 개의 서로 다른 id 나 class 를 한 이벤트로 명시해주면 된다. 아래 예시에서 두 개의 서로 다른 태그가 있고 각각 클래스가 추가되어 있다.JQuery 소스에서 이벤트를 바인딩할 때 함께 명시해주면 깔끔하게 해결 된다. 페이지 소스 test1 test2 JQuery 소스 $('.tag1, .tag2').click(function() { // 두 클래스에서 발생하는 click event 처리 var $this = $(this); if ($this.hasClass('tag1')) { // tag1을 클릭한 .. 2018. 10. 29. JQuery, visible(not hidden) elements 개수 구하기 JQuery Elements 개수 구하기 아래 div tag 중에서 .hide() 시킨 tag를 제외한 나머지 visible tag 개수 구하는 방법 예제 페이지 소스 a b c d JQuery 소스 $(".hideOrShow").index(0).hide(); $(".hideOrShow").index(1).hide(); var count = $(".hideOrShow:visible").length; a, b는 hide 되었으므로 변수 count에는 2가 저장된다. 같은 결과를 위해 .size() 함수를 사용해도 된다. $(".hideOrShow:visible").size(); 2018. 10. 29. [JQuery] 체크박스 개수와 체크된 체크박스 개수 구하는 방법 JQuery 체크박스 예제 HTML 소스 1 2 3 4 5 6 7 뭐 먹을래? 햄벅 감튀 술 cs 위 예제 소스가 로딩되면 화면에서는 체크 박스 세개가 보이고 그 중 2개는 체크된 상태로 나온다. (핸벽, 술은 체크박스에 체크가 되어 있는 상태) 01 전체 체크박스 개수 구하기 체크박스 개수를 모두 구한다. 결과는 3 1 $("input:checkbox[name=menu]").length; // 결과 3 cs 02 체크된 체크박스 개수 구하기 모든 체크박스 중 체크된 개수만 구한다. 결과는 2개 1 $("input:checkbox[name=menu]:checked").length; // 결과 2 cs 03 체크박스 별로 체크 여부 검사 체크박스의 체크 여부를 검사하여 특정 명령을 실행하고 싶은 경우. 아.. 2018. 10. 29. JQuery 클릭 이벤트 on("click") 과 click() 의 차이 JQuery on("click")과 click() on("click") 과 click() 의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다. on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다. 아래 예제 소스로 차이점을 알아보자. Coding Answering Getting Paid jQuery click() 이벤트 위 예제 소스에서 아무 li 태그나 클릭하면 아래 함수가 실행된다. $('#myTask').children().click(function () { $(this).remove(); }); 그러면 클릭한 li 태그에 바인딩된 click 이벤트가 실행되어 해당 li 태그가 remove() 될 것이다. 여기서 아래 소스 처럼 동적으로 새로운 .. 2018. 10. 29. 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. 이전 1 2 다음
