JS 관련

jQuery] 이펙트 메서드( slide, fade, animate )

이펙트 메서드 hide() show() toggle() slideUp() slideDown() slideToggle() fadeOut() fadeIn() fadeTo() fadeToggle() animate() ​ ​ ​ ​ $("b").click(function(){ $("p").toggle(); $("p").each(function(i){ $(this).animate({ "top": 50 * (i + 1) + "px" }, 1000); }); }); div영역은 숨겨져 있습니다. 하지만 위의 코드로인해 이펙트 메서드라는 텍스트를 클릭하면 다시 보이게 됩니다. ​ 이제 각각의 이펙트 메서드들의 효과를 하나씩 볼까요? if(ele.is("p:contains(hide)")){ $("img").hide();..

[jQuery] 이벤트 전파( stopPropagation(), preventDefault(), return false )

이벤트 전파 : 각 요소가 서로 포함관계(중첩)인 경우 요소 중 하나에 이벤트가 발생하면 중첩된 요소들도 이벤트가 전파된다. ​ ​ 이벤트 전파 막기 - stopPropagation() : 이벤트 요소의 전파막기 - preventDefault() : 이벤트에 의한 기본 동작 막기 - return false : 위의 기능 두개 모두 적용 ​ unbind() : 이벤트 해제 naver 클릭 daum 클릭 요소 추가 ​ ​ $("a:eq(0)").click(function(e){ alert("a click!"); //e.stopPropagation(); //e.preventDefault(); return false; }); 함수 안에서 첫번째 a태그를 클릭하면 a click! 이라는 메세지가 나오고 원래는 연..

[jQuery] DOM탐색 메서드

DOM 탐색 메서드 필터링 메서드 .eq() .slice() .first() .last() 트리 탐색 메서드 .find() .children() .parent() .next() 기타 탐색 메서드 .add() .is() ​ ​ 해당 코드는 menu class를 가진 태그들의 자식 div영역은 모두 display: none; 처리 되어있습니다. 하지만 마우스를 올리면 hover 효과로 숨겨진 태그들을 보여주고 다시 마우스를 떼면 숨김처리됩니다. ​ $(function(){ $(".menu div").css("display", "none"); $(".menu").hover( function(){ $(this).children("div").toggle(); } ); }); 함수에서 보면 menu안에 있는 div..

[jQuery] add(), is()

add() - 선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용 is() - 선택한 엘리먼트들 중에 원하는 엘리먼트가 있는지 확인 ​ add() 선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용 is() 선택한 엘리먼트들 중에 원하는 엘리먼트가 있는지 확인 $("p:eq(0)").add("span").css("color","red"); 첫번째 p태그에 span태그까지 color를 red로 변경합니다. ​ ​ ​ $("div").children().click(function(){ if($(this).prop("tagName") == "SPAN"){ alert("span tag click!"); $(this).css("color","darkblue"); } if($(t..

[jQuery] find(), children(), parent(), next()

find("selector") : 선택한 엘리먼트의 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다. children("selector") : 선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다. parent() / parents("selector") : 선택한 엘리먼트의 부모요소를 찾는다. next("selector") : 선택한 엘리먼트 다음에 따라오는 요소를 찾는다. ​ find("selector") : 선택한 엘리먼트의 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다. children("selector") : 선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다. parent() / parents("selector") : 선택한 엘리먼트의 부모요소를 찾는다. next("..

[jQuery] checkbox( 전체선택 )

체크 여부 확인 전체 선택 Java Oracle JavaScript 선택한 책 가격 ​ ​ 체크박스가 하나도 선택되지 않았을경우 하나 이상 선택해 주세요라는 메세지를 출력시킵니다. $(function(){ $("#confirm").click(function(){ $("#result").empty(); //유효값처리 if($("input[name=chk]:checked").length == 0){ alert("하나 이상 선택해 주세요"); }else{ var total = 0; $("input[name=chk]:checked").each(function(i){ //var chk = $(this); var chk = $("input[name=chk]:checked").eq(i); var book = chk...

[jQuery] submit 활용해보기

User ID 반드시 입력하세요 ​

[jQeury] val()(value값 가져오기)

Javascript에서는 value값을 가지고 올때 .value를 사용했지만 jquery에서는 .val()을 사용합니다! one two three function test01(){ var doc = $("input:text").val(); alert(doc); } ​ ​ ​ function test02(){ var doc = $("input:radio").val(); alert(doc); } ​ ​ ​ function test03(){ var doc = $("input:checkbox").val(); alert(doc); } ​ ​ ​ $(function(){ var sele = document.getElementsByTagName("select")[0]; sele.onchange=function(){ ..

[jQeury] 제이쿼리 연습! (선택자 / hide, slideup 등)

1.이미지들의 크기를 모두 200px * 200px으로 설정하자 클릭 2. 이미지들 중 id가 'selid'인 태그를 찾아 숨기자 클릭 3.이미지들 중 class가 'selclass'인 태그를 찾아 투명도 50%를 적용하자 클릭 4.이미지들 중 속성값으로 탐색하여, title 속성값 중 02를 포함하는 태그를 찾아서, slideUp 기능을 적용하자 slideUp 속성은 2000ms로 적용하자 클릭 5.td의 자식요소인 img 태그만 선택하여 img2.png로 바꾸자 클릭 이번에는 HTML의 바디부분과 출력결과 먼저 보여드렸습니다!! 혹시 이것만보고 만드실분은 한번 만들어보세요~~ ​ ​ ​ function resizeImg(){ $("img").css("width", "200px").css("height..

[jQuery] 선택자(selector)

selector 표현식 tag로 선택 id로 선택 class로 선택 parent child로 선택 parent > child 선택 :nth-child(n/odd/evn)로 선택 :first-child로 선택 :last-child로 선택 tag id class p c p > c nth first last clear 코드 ​ 버튼을 누르면 해당 버튼에서 실행된 함수의 명령코드가 아래쪽에 나오도록 작성하였습니다! 버튼의 이름은 선택자를 어떻게 주었는지에 따라 value를 넣었습니다! ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ function sel06(){ $("li:nth-child(6)").css("background-color", "yellow"); // 보통 숫자로 뭔가를 찾을때는 0부터 시작하는 경우..