개발일지/JavaScript + jquery (57) 썸네일형 리스트형 [jquery] radio 입력 받아서 출력하기 성별체크 여자 남자 function radio(){ $(function(){ var id = $("input[name='sex']:checked").attr('id'); document.write(id); alert(id); }); } var id = $("input[name='sex']:checked").attr('id'); $("input[name='sex']:checked").attr('id') input 타입에 name='sex'인 것을 체크 document.write(id); alert(id); 둘중에 하나만 해줘도 됨 [jquery] 변수명을 설정해서 쉽게 부르기(feat.alert) 고양이 이런 파일을 준비한다. 그럼 아래처럼 뜰 것이다. var div1 = $('#div1'); 변수명 = 선택자 alert(div1.width()); 경고창에 div1의 width 크기를 띄운다. 이런식으로.. alert창에 div1의 width, height, font-size 값이 차례대로 뜬다. [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초 라는 뜻! 강아지 사진에 효과를 입힌다. 이전 1 2 3 4 5 6 7 8 다음
