전체 글
-
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변수의 값을 초기화 시키고
-
Jquery[제이쿼리] setInterval+empty+append로 실시간 세일 시간보기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 27. 18:26
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] setInterval+empty+append로 실시간 세일 시간보기를 만들어보겠습니다. 이렇게 틀을 만들어보았습니다. 실행화면입니다. 그럼 시작해볼까요~ =============================== var presale= 86400; var hour = presale/3600; var minute = (presale/60)%60; var second = presale % 60; $('h1').append(parseInt(hour)+"시 "+parseInt(minute)+"분 "+parseInt(second)+"초"); =============================== 변수 presale에는 세일시간 값을 지정해..
-
Jquery[제이쿼리] eq(),:lt(),:gt() 인덱스 번호로 요소찾기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 25. 21:13
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] eq(),:lt(),:gt() 인덱스 번호로 요소를 찾아보겠습니다. 이렇게 준비해 보았습니다. 실행하면 이렇게 나오면 된답니다. =============================== $('li:lt(4)').css('background','blue').css('color','white'); ===============================태그의 css background를 blue로 color를 white로 바꾼다는 뜻입니다. 여기서 lt(4)가 보이실텐데요. 인덱스번호 4보다 작은 태그의 css를 변경하는 소스입니다. ※:lt()는 지정된 숫자보다 인덱스 번호가 작은 요소들을 리턴하는 셀렉터입니다. 태그가 7개가 있는..
-
Jquery[제이쿼리] before,after,prepend,append 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 25. 21:10
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] before,after,prepend,append메서드를 배워보겠습니다. 비슷비슷해보이지만 차이가있으니 유심히 보세요~ 이렇게 준비해 보았습니다. 실행하면 이렇게 나오면 된답니다. =============================== $('input').on('click',function(){ var a =$(this).val(); var str = new String(a); ===============================태그가 click되면 해당하는 value의 값을 a라는 변수에 담아라입니다. str라는 변수에 a변수에 담아져있는 값을 new String(a);>이부분이부분이부분이부분