Javascript (16) 썸네일형 리스트형 16. Javascript_jquery_slide toggle_CDN 방식 DOCTYPE html> ::: 03_jquery_SlideToggle_CDN ::: // jquery 사용을 위한 준ㄴ비하기 $(document).ready(function(){ // div1이 클릭되면 div2를 숨겼다가/보였다가.. 기능 만들기 // slideToggle 함수 사용 $("#div1").click(function(){ $("#div2").slideToggle("slow"); }); }); #div1, #div2 { padding: 5px; text-align: center; background-color: yellow; border: solid 1px blue; } #div2 { padding: 50px; /* 최초의 div2는 숨겨 놓기 */ display: none; } slide.. 15. Javascript_jquery_slidetoggle DOCTYPE html> ::: 03_jquery_SlideToggle ::: // jquery 사용을 위한 준ㄴ비하기 $(document).ready(function(){ // div1이 클릭되면 div2를 숨겼다가/보였다가.. 기능 만들기 // slideToggle 함수 사용 $("#div1").click(function(){ $("#div2").slideToggle("slow"); }); }); #div1, #div2 { padding: 5px; text-align: center; background-color: yellow; border: solid 1px blue; } #div2 { padding: 50px; /* 최초의 div2는 숨겨 놓기 */ display: none; } slide tog.. 14. Javascript_jquery_toggle DOCTYPE html> ::: 02_jquery_toggle ::: // toggle 적용하기 $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); toggle :: 숨겼다/보이기 기능 toggle 기능 : 특정 태그를 숨겼다가 보였다가를 반복할 수 있는 기능 toggle 13. Javascript_jquery DOCTYPE html> ::: 01_jquery 시작 ::: // jquery의 시작은 $로 시작합니다. // () : 문서전체(document), 태그이름, 아이디, 클래스 $(document).ready(function(){ // p태그 숨기기 $("#hide").click(function(){ $("p").hide(); }); // p태그 보이기 $("#show").click(function(){ $("p").show(); }); }); jQuery 시작하기 jQuery 라이브러리 위치 : http://www.jquery.com hide show 12. Javascript_form(입력데이터 확인, 로그인 기능, focus, required) DOCTYPE html> ::: 12_form 입력데이터 확인하기 ::: // 회원아이디 및 패스워드 입력 확인 // 입력 확인 후 전송하기 function goLogin(){ var fm = document.getElementById("fm"); // 회원 아이디 입력 여부 확인하기 if(fm.mem_id.value == ""){ alert("아이디를 입력해 주세요"); // focus() 해당 입력 박스로 커서를 이동함 fm.mem_id.focus(); return; } if(fm.mem_pw.value == ""){ alert("패스워드를 입력해 주세요"); fm.mem_pw.focus(); return; } alert(fm.mem_id.value); alert(fm.mem_pw.value); //.. 11. Javascript_goReplace, 배열 만들기, 화면 초기화 기 DOCTYPE html> ::: 11_javascript ::: function goReplace() { var p1 = document.getElementById("p1"); //p1 태그에 있는 텍스트 내용 가지고 오기 var p1_str = p1.innerHTML; //"파이썬"을 "자바"로 치환하기 var p1_change = p1_str.replace("파이썬", "자바"); p1.innerHTML = p1_change; } // 구분자를 이용해서 배열로 만들기 function goSplit() { var str = "a b c d e f"; // 문자열의 구분자로 사용할 수 있는 패턴 찾기 var str_array = str.split(" "); var p1 = document.getEleme.. 10. Javascript_특정 위치의 문자 추출하기(goSlice, goSubstring, goSubstr) DOCTYPE html> ::: 10_javascript ::: // 문자열의 특정 위치의 문자 추출하기 function goSlice(){ var str = "Apple, Banana, Kiwi"; // 첫번째 : 찾을 시작 위치값(0부터 위치) // 두번째 : 끝값 -1까지의 위치 var cut_str = str.slice(7, 13); var p1 = document.getElementById("p1"); p1.innerHTML = cut_str;} function goSubstring(){ var str = "Apple, Banana, Kiwi"; // 첫번째 : 찾을 시작 위치값(0부터 위치) // 두번째 : 끝값 -1까지의 위치 var cut_str = str.substring(7, 13); .. 09. Javascript_문자열 길이확인, 특정찾기 DOCTYPE html> ::: 09_javascript ::: //문자열 길이 확인하기 function goLength(){ var v = "abcd efg hijk 홍길동"; var len = v.length; document.getElementById("p1").innerHTML = len; } // 문자열 찾기 function goIndexOf(){ var p1_str = document.getElementById("p1").innerHTML; // alret(p1_str); // 특정 문자의 시작위치 찾기 var idx = p1_str.indexOf("locate"); document.getElementById("p2").innerHTML=idx;} // 문자열 찾기 function goLast.. 이전 1 2 다음
