JQuery
-
211005_siblingsJQuery 2021. 10. 5. 12:35
DOCTYPE html> Insert title here 첫번째 div div하나 둘 셋 h3 Tag h4 Tag 두번째 div div하나 둘 셋 h3 Tag h4 Tag //parent():부모태그 //siblings():형제태그 //children():자식태그 //next():선택한 요소의 다음에 위치한 형제요소 //prev():선택한 요소의 바로 이전에 위치한 형제요소 $("div.one div.hana").siblings().css("color", "red"); $("div").children("div.hana").css("text-decoration", "underline"); $("div.hana").next().next().css("background-color", "yellow"); $("..
-
211005_transform,hover,rocate,scale,translateJQuery 2021. 10. 5. 12:20
DOCTYPE html> Insert title here //1번째 이미지 hover $("img:eq(0)").hover(function() { //45 회전..angle은 각크기, 단위는 deg,rad,grad,turn(1회전=360deg) $(this).css("transform", "rotate(180deg)"); }, function() { $(this).css("transform", "rotate(0deg)"); }) //2번째 이미지에 -45도 회전했다가 제자리 $("img:eq(1)").hover(function() { $(this).css("transform", "rotate(-45deg)"); }, function() { $(this).css("transform", "rotate(0de..
-
211005_form,change,clickJQuery 2021. 10. 5. 11:32
DOCTYPE html> Insert title here div.right { position: absolute; left: 300px; border: 10px solid gray; padding: 20px; } 이미지 선택 이미지1 이미지2 이미지3 이미지4 이미지5 테두리선 선택 실선 점선 파선 입체선 박스그림자 그림자 넣기 //이미지 선택하면 change이벤트 $("#selImage").change(function() { //현재 내가 선택한 이미지 /* var im=$(this).val(); $("div.right img").attr("src", im); 아래처럼 한줄로도 가능*/ $("div.right img").attr("src", $(this).val()); }); //테두리선 선택시 cli..
-
211005_form,table,buttonJQuery 2021. 10. 5. 11:31
DOCTYPE html> Insert title here body { font-family: 'Nanum Pen Script'; font-size: 13pt; } table { border: 1px solid gray; border-collapse: collapse; } th,td { border: 1px solid gray; } th { width: 100px; background-color: #ffc; } #result{ margin-top: 30px; width: 400px; height: 300px; padding: 10px 10px; border: 2px groove gray; } $(function () { //핸드폰 4글자 입력시 다음칸으로 마우스커서 이동 $("#hp2").keyup(fun..
-
211001_each,append,afterJQuery 2021. 10. 1. 15:51
DOCTYPE html> Insert title here .bg_0{ background-color: orange; color: gray; } .bg_1{ background-color: lavender; color: purple; } .bg_2{ background-color: blue; color: white; } .bg_3{ background-color: green; color: white; } .bg_4{ background-color: pink; color: red; } ul li { width: 130px; } //b태그 개수만큼 자동반복 //i는 index 0부터 //element는 인덱스에 해당하는 b태그..생략가능 $("b").each(function(i, element) { $(thi..
-
211001_div,check,radioJQuery 2021. 10. 1. 14:46
DOCTYPE html> Insert title here div { border: 1px solid gray; padding: 20px 20px 20px 20px; width: 500px; margin-bottom: 10px; } 폼태그연습 #1 아이디 비밀번호 //input에 포커스가 갈 경우 배경색 $("input:text,input:password").focus(function() { $(this).css("background-color", "yellow"); }); //포커스가 벗어날 경우 다시 원래대로(흰색) $("input:text,input:password").blur(function() { $(this).css("background-color", "white"); }) 폼태그연습 #2 운전..
-
211001_clone,appendJQuery 2021. 10. 1. 14:43
DOCTYPE html> Insert title here 1번 영역을 복사해서 3번 영역에 추가 2번 영역을 복사해서 4번 영역에 추가 3,4번 영역 지우기 1번 박스 2번 박스 3번 박스 4번 박스 $("#btn1").click(function() { //box1 아래의 모든 img태그 복사 var no1=$("#box1").find("img").clone(); //3번 영역에 추가 $("#box3").append(no1); }); $("#btn2").click(function() { //box1 아래의 모든 img태그 복사 var no2=$("#box2").find("img").clone(); //3번 영역에 추가 $("#box4").append(no2); }); //3번..remove $("#btn..