JQuery
-
211007_triggerJQuery 2021. 10. 7. 10:29
DOCTYPE html> Insert title here Start Start Start $("h2").click(function() { //별추가#1 $(this).append("*"); //별추가#2 /* $(this).html(function (idx,html) { return html+"*"; }); */ }); setInterval(function() { $("h2:last").trigger("click"); //이벤트 강제 발생..별추가#1 주석 풀어야 함 }, 1000); $("#camera").click(function() { $("#file").trigger("click"); });
-
211006_이미지의 배경사진 변경JQuery 2021. 10. 7. 09:45
DOCTYPE html> Insert title here body,h1,ul { margin: 0; padding: 0; } li { list-style: none; } body { background-color: #fff; } div.wall{ width: 800px; height: 600px; margin: 50px auto; background-color: #999; position: relative; border-radius: 5px; border: 5px solid #333; overflow: hidden; /* 스크롤바 해제..기본은 auto */ } h1.title{ font-size: 37px; position: absolute; right: 50px; top: 60px; width: 13..
-
211006_on,button(영화관,영화)JQuery 2021. 10. 6. 17:27
DOCTYPE html> Insert title here button { width: 120px; height: 40px; border-radius: 20px; font-size: 1.3em; font-family: 'Do Hyeon'; cursor: pointer; } button.a{ background-color: #fafad2; } button.b{ background-color: #87ceeb; } div { position: absolute; width: 300px; height: 150px; font-size: 20px; font-family: 'Do Hyeon'; } #one{ left: 50px; top: 100px; } #two{ left: 300px; top: 100px; } #thr..
-
211006_JQuery 2021. 10. 6. 17:24
DOCTYPE html> Insert title here $(function () { //정적이벤트 //최초에만 가능하고 추가된 element에는 버튼 추가 기능이 없음(부모의 이벤트 없음) /* $("button[name='add']").on("click", function() { $('body').append("B"); }); */ //동적이벤트 가능하게 변경 //추가된 element에 계속해서 부모의 이벤트를 가질 수 있게 만든다 //on(이벤트, 지정자, 구현부function) $(document).on("click", "button[name='add']", function() { $('body').append("B"); }); }); B
-
211006_on(동적/정적)JQuery 2021. 10. 6. 17:22
//on: 1.8이전에는 live 사용 //처음부터 존재하는 요소나 미래에 생기게 될 요소에 모두 이벤트 가능 DOCTYPE html> Insert title here $(function () { //jquery on("click")과 click() 차이 //동적으로 이벤트를 바인딩할 수 있는지의 차이 //click()은 최초에 선언된 element에만 동작 가능 //두번째 파라메타에선 지정자를 선택 가능..on("click",지정자,,function()) /* //정적이벤트 $("#mylang").children().click(function() { $(this).remove(); }); //li태그 추가 //정적인 이벤트는 추가된후 삭제 안됨(최초에 선언한 엘리멘트만 동작가능) $("#mylang")..
-
21006_animate,button,eachJQuery 2021. 10. 6. 17:19
DOCTYPE html> Insert title here 애니메이션#1 애니메이션#2 $("#box").css({ "width":"100px", "height":"100px", "border":"1px solid red" }); //버튼이벤트..id 안 줬을때 $("button:eq(0)").click(function() { $("#box").animate({width: "+=100px", borderWidth: "20px",opacity: "0.2", marginLeft: "300px"},3000); }); $("button:eq(1)").click(function() { $("#box").animate({width: "-=100px", borderWidth: "1px",opacity: "1", mar..
-
211006_image,each,figureJQuery 2021. 10. 6. 17:16
DOCTYPE html> Insert title here .fg{ float: left; } .fg img { border: 5px groove orange; border-radius: 50px; padding: 10px; cursor: pointer; } .fg figcaption{ font-family: 'Do Hyeon'; font-weight: bold; font-size: 1.3em; } .large{ width: 450px; height: 500px; position: absolute; left: 400px; top: 220px; border: 5px inset gold; } //결과.. 작은 이미지 누르면 div.large에 나타내기 $(function () { //큰이미지 $("img.la..
-
211006_array,eachJQuery 2021. 10. 6. 14:51
DOCTYPE html> Insert title here div.box { border: 5px solid tomato; margin-top: 20px; width: 300px; height: 120px; padding: 20px 20px; font-family: 'Nanum Pen Script'; font-size: 1.3em; } 배열반복시 사용하는 $.each문 var data1=["magenta","blue","orange","gray","yellow","green"]; /* i는 인덱스로 0번부터, elt는 element(인덱스에 해당하는 아이템값)로 생략가능 */ $.each(data1, function(i, elt) { var s=""+elt+""; document.write(s); }); ..