본문 바로가기

분류 전체보기

 (252)
[jquery] each() 명령어 each() 선택한 여러 개의 요소들에게 각각 순차적으로 접근을 할 때 사용한다. 기본형 $(요소선택).each(function(매개변수1, 매개변수2){ ... } ); 고양이 진돗개 호랑이 사자 $('.animal').each(function(){var name = $(this).text(); alert(name);}); $('.animal').each ==> 애니멀 클래스에 순차적으로 접근한다. var name = $(this).text(); ==> 변수 네임은 애니멀의 텍스트(고양이, 진돗개 등..) alert(name); ==>네임의 값을 alert 화면에 뿌려줘 그러니 alert(경고)창에 순서대로 고양이, 진돗개, 호랑이, 사자가 뜬다.
JavaScript를 Jquery로 바꾸기 예제 div1 -JavaScript 버전 window.onload = function(){ var div = document.getElementById('div1'); div.style.fontSize = "50px"; //그 div을 style의 폰트사이즈 = 50px } var div = document.getElementById('div1'); ==>Id의 요소를 div에게가지고 온다. div.style.fontSize = "50px"; ==> 가지고 온 div의 style을 설정한다. => fontsize = "50px"; -Jquery 버전 $(function(){ $('#div1').css('font-size', '50px'); }); 더 짧게 이용할 수 있다. $('#div1').css('font..
[jquery] clickTest 줄여서 쓰기 $(this) div1 div1 div1 div1 div1 $(function(){ var elements = $('.clickTest'); elements.click(function(){elements.text('클릭되었습니다.');}); }); 이런 모양이 있다. 클릭을 하면? 한 번에 모든 게 바뀐다. 하나를 클릭하면 하나만 바뀌도록 하려면? div1 div2 div3 div4 div5 일단은 바디부터 바꿔준다. 각 div에 id 설정을 해주었다. $(function(){ var div1 = $('#div1'); div1.click(function(){div1.text('클릭했어요');}); }); 제이쿼리에 가서 div1 변수 설정 및 명령어 입력을 해준다. 아직은 하나만 바뀜. $(function(){ var..
[jquery] focus()명령어 결과는 똑같지만 코드가 너무 길어져서 헷깔린다면 변수를 설정해서 간단하게 쓸수도 있다. 결과는 똑같으니 취향에 맞게 써주면 된다. $(function(){ $('#input1').focus(function(){$('#input1').addClass('active');}); $('#input1').blur(function(){$('#input1').removeClass('active');}); }); 위에서 본 기존의 코딩이다. $(function(){ var element = $('#input1'); element.focus(function(){element.addClass('active');}); element.blur(function(){element.removeClass('active');}); }..
[jpuery] click 명령어 div!!! $('#div1').click(function(){$('#div1').text('클릭되었네요');}); $('#div1').click(); div1가 클릭을 하면 안에 있는 것을 실행해라 function(){$('#div1').text('클릭되었네요');} div1에 '클릭되었네요' 텍스트를 출력해라 여기서 text는 html로 활용이 가능하다. text와 html의 차이? $('#div1').click(function(){$('#div1').html('클릭되었네요');}); 클릭하면 글씨가 두꺼워짐
[jquery] 사진 불러오고 효과주기 appendTo()명령어 제이쿼리로 사진 불러오기 var div1 = $('#div1'); 설정 쉽게 부르기 위해서 해준다. $("").appendTo(div1); ==> 사진을 갖고와서.div1에 추가하다. css에 .dordered와 div에게 효과를 먼저 준다. img.addClass('bordered'); 이미지에 css에서 설정한 선 효과를 준다. img.appendTo(div1); 사진을 div에 추가한다. img.fadeOut(2000); img.fadeIn(2000); 없어졌다가(fadeOut) 다시 나타나기(fadeIn) 여기서 2000은 2초 라는 뜻! 강아지 사진에 효과를 입힌다.
[jquery] append() 명령어 baseket apple banana orange 제이쿼리에 아무 값도 안 준 상태 $(function(){ var baseket = $('#baseket'); var apple = $('apple'); var banana = $('banana'); var orange = $('orange'); }); 변수만 선언했기 때문에 아무 변화가 없다. 값을 쉽게 부르기 위해서 변수 선언을 해준다. 그럼 이름만 불러도 쉽게 적용이 된다. basket.append(apple); 변수선언 해준 곳 바로 밑에 추가해줬다. basket.append(apple); basket안에 apple을 첨부하다. basket.append(apple); basket.append(banana); basket.append(orange);..
[jquery ] addClass(),removeClass() 명령어 div1 div2 div3 div4 div2~4까지 검은색 박스를 선언했지만 alert 설정으로 div4가 빨간선이 되었음. 대신에 위의 box의 설정이 내려와서 3px solid는 같다. $(function(){ $('#div1').addClass('box'); //내가 지정해준 클래스를 추가해라 addClass }); $('#div1').addClass('box'); div1에 addClass명령으로 box 값을 추가해주었더니 검은선이 추가 되었다. $('#div2').removeClass('box'); $('#div2').removeClass('box'); 말 그대로 remobeClass는 지워주는 역할이다. div2에서 box를 지웠더니 선이 없어졌다. $('#div3').addClass('ale..

티스토리툴바