자바스크립트[JavaScript]/제이쿼리[Jquery]
-
Jquery[제이쿼리] children() 메서드 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 30. 22:25
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] children() 메서드를 배워보겠습니다. 이렇게 준비해보았습니다.!^ㅡ^/실행화면입니다. 준비하시고 시작해볼까요~ =============================== $('.b1').on("click",function(){ $('ul').children().css("color","blue"); setTimeout(function(){ $('ul').children().css("color","black"); }, 2000); }); =============================== class b1가 click되면
-
Jquery[제이쿼리] animate()메서드 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 30. 22:20
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] animate()메서드를 배워보겠습니다. 이렇게 준비해보았습니다.!^ㅡ^/ 그림파일 경로는 이렇게 되어있습니다. 실행화면입니다. 그림은 아무거나 맘에드시는걸로 하시면된답니다. =============================== $('.img1').on("click",function(){ $('.img1').animate({"width":"200px","height":"50px"}).animate({"height":"200px"}); }); =============================== class img1가 click되면
-
Jquery[제이쿼리] slice() 메서드 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 28. 21:44
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] slice() 메서드를 배워보겠습니다. slice()메서드도 eq(),:lt(),:gt()처럼 인덱스 번호로 선택할 수 있습니다. 이렇게 준비해 보았습니다. 실행하면 이렇게 나오면 된답니다. =============================== $('li').slice(3).css("color","blue"); =============================== 태그의 대상으로 slice()메서드를 사용하여 지정한 인덱스 번호보다 크거나 같은 태그의 css를 변경하는 코드입니다. 전 인덱스 번호가 3보다 크거나 같은 태그의 css를 변경하였습니다. 인덱스번호는 0 1 2 3 4 5 6 이런식으로 0부터 시작한답니다. ==..
-
Jquery[제이쿼리] delay()메서드 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 28. 21:38
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] delay()메서드를 배워보겠습니다. 오늘은 이렇게 준비해보았습니다. 병신년 새해를 맞이하여 원숭이를 직접 만들어보았습니다.! 허접하지만 귀엽게봐주세요 ㅋㅋㅋ =============================== $('.input1').on("click",function(){ $('img').stop().animate({ 'margin-top':'+=100', 'margin-left': '+=200' },1000); =============================== class input1가 click되면
-
Jquery[제이쿼리] :has() 셀렉터 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 27. 22:58
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] :has() 셀렉터를 배워보겠습니다. 어제 했던 부분에서 조금수정하여 준비해보았습니다. 이렇게나오면 준비완료! =============================== $('.input1').on("click",function(){ var Text1 = $('input[type="text"]').val(); $('.div1:has('+Text1+')').css('border','4px solid blue'); setTimeout(function(){ $('.div1:has('+Text1+')').css("border","2px solid black"); }, 1000); }); =============================..
-
Jquery[제이쿼리]first,first-child,first-of-type셀렉터 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 27. 18:41
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] :first, :first-child, :first-of-type 셀렉터를 배워보겠습니다. 이렇게 준비해보았습니다. 실행화면입니다. 그럼 출발해볼까요~ =============================== $('.input1').on("click",function(){ $('div:first').css("border","2px solid blue"); setTimeout(function(){ $('div:first').css("border","2px solid black"); }, 1000); }); =============================== class input1가 click되면
-
Jquery[제이쿼리] :contains 셀렉터 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 27. 18:34
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] :contains 셀렉터를 배워보겠습니다. 이렇게 준비해보았습니다.!! 이렇게 나오면된답니다.! =============================== $('.b1').on('click',function(){ var input1 = $('.input').val(); var output1 =$('.div1:contains('+input1+')').text(); $('.div1:contains('+input1+')').css({ background:'green', color:'white' }); $('.output').val(output1); }); =============================== class b1가 clic..
-
Jquery[제이쿼리] :checked 셀렉터 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 27. 18:31
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] :checked 셀렉터를 배워보겠습니다. 이렇게 준비해보았습니다.!^ㅡ^/ 이렇게 나오면 성공! 이랍니다. 그럼 시작해볼까요. =============================== $('input[type="checkbox"]').on('click',function(){ var Text=""; $('input[type="checkbox"]:checked').each(function(){ Text= Text+$(this).val(); }); alert(Text); }); =============================== type이 checkbox인 태그를 click하면 Text변수의 값을 초기화 시키고