JS 관련

[jQuery] show(), css(), toggle(), hide()

이미지 보이기 이미지 축소 이미지 확대 이미지 추가 이미지 숨기기/보이기 ​ ​ ​ ​ $(document).ready(function(){ $("img").click(function(){ alert("이미지를 클릭했습니다."); $(this).hide(); }); }); 지난번 포스팅에서 제이쿼리문을 작성하는 두가지 방법중 하나입니다. 굳이굳이 이렇게 한번 해봤습니다,,, 해당 코드는 "img" -> 태그를 클릭하면 이벤트가 발생합니다. "이미지를 클릭했습니다."라는 메세지를 출력시키며 $(this)자신을 hide()숨깁니다. 클릭해볼까요? ​ ​ function showImg(){ $("img").show(); } 이 함수는 이미지 보이기 버튼을 클릭하면 실행됩니다. 함수가 실행되면 이미지가 show..

[jQuery] 제이쿼리 작성방법

제이쿼리를 작성하기 전에는 앞선 포스팅과 같이 js파일을 다운받아야합니다. 이와 같이 스크립트의 속성으로 경로를 지정해주면 제이쿼리가 연결이됩니다. ​ 또한 제이쿼리의 작성방법은 크게 2가지가 있습니다. $(document).ready(function(){ //작성 }); 스크립트 영역안에 이와 같이 작성하는 방법입니다. ​ $(function(){ //작성 }) 하지만 저는 주로 이와같은 방법으로 작성할 예정입니다. ​ 또한 위의 작성방식에서 $는 jquery하는 의미입니다! ​ ​ ​ 그럼 간단한 코드를 볼까요? jQuery 시작! 1.셀렉터(css 표현식) 2.DOM 3.이벤트 메서드 4.이펙트 매서드 5.ajax 리스트 강조하기 ​ ​ ​ function highlight(){ $("#list01..

[jQuery] 제이쿼리가 뭔데??

https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 우선 위 사이트를 들어가보면 jQuery 홈페이지가 나오게 됩니다. 사이트에서 보면 제이쿼리가 뭔지 설명이 나와있는데요. 가장 중요한 단어가 JavaScript library입니다. 즉..

[JavaScript] DOM( 태그 생성 및 삭제 )

아이디 비밀번호 주소 전화번호 아이디 비밀번호 주소 전화번호 삭제 input영역에 입력된 값을 테이블 안에 넣는 코드 입니다. ​ ​ ​ function tableVal(){ // form 태그들 가져와서, index 0인 form 태그 -> forms로 불러왔기때문에 NodeList임... 그래서 [0]이 있어야 호출가능 var doc = document.forms[0]; // doc.id.value = doc이라는 form태그가 가진, name='id'인 태그의, value 값 var vals = [doc.id.value, doc.pw.value, doc.addr.value, doc.phone.value]; // 유효값 처리 for (var i = 0 ; i < vals.length; i++) { i..

[JavaScript] Dom(태그 이동시키기)

문제1. test01 태그에 "dom test"라는 내용을 가진 div태그 생성하기 클릭 문제2. test01 태그 안에 생성된 div 태그들을 test02 태그 안으로 이동하기 클릭 *test01 *test02 ​ ​ ​ function addTest(){ var div = document.createElement("div"); div.textContent = "dom test" + (tmp++); document.getElementById("test01").appendChild(div); } 해당 함수는 태그를 생성하는 함수입니다. "dom test1"과 같은 텍스트를 포함하는 태그를 "test01"영역안에 생성합니다. (appendChild 자식이니까 안에 생성!) ​ ​ ​ function mov..

[JavaScript] DOM( 태그 추가하기 / 이동하기 )

태그 추가하기 appendChild insertBefore appendChild를 이용한 엘리먼트 이동 부모태그 div태그 ​ ​ ​ function addAppend(){ var fieldset = document.getElementById("addele"); var p = document.createElement("p"); p.textContent = "자식요소들 중 가장 마지막에 들어갑니다." + (count++); fieldset.appendChild(p); } appendChild버튼을 누르면 해당 함수가 실행됩니다. 해당 함수는 id가 addele인 태그 해당코드에서는 fieldset이 되겠네요. fieldset영영의 가장 마지막에 p.textContent = "자식요소들 중 가장 마지막에 들..

[JavaScript] DOM( 이미지 속성 변경 )

◀ ▶ ​ ​ ​ var anchs = document.querySelectorAll("a"); var img = document.querySelector("img"); var cnt = 1; anchs[0].onclick=function(){ var imgAlt = img.getAttribute("alt"); if (imgAlt == "img01") { cnt = 3; img.setAttribute("alt", "img0"+cnt); img.setAttribute("src", "resources/image/img0"+cnt+".png"); }else{ --cnt; img.setAttribute("alt", "img0"+cnt); img.setAttribute("src", "resources/image/..

[JavaScript] DOM( img바꾸기 )

img01 img02 img03 이미지 생성 이미지 삭제 ​ ​ ​ ​ ​ ​ function createImg(){ // 1. 이름이 rdoBtn인 요소들을 가지고 온다. var radioButton = document.getElementsByName("rdoBtn"); var radioVal = ""; // 2. 가져온 요소들을 반복하면서, 체크되어있는 라디오버튼의 value를 가지고온다. for(var i = 0; i < radioButton.length; i++){ if(radioButton[i].checked){ radioVal = radioButton[i].value; } } // 3. img 태그를 만들어서, "resources/image/"+라디오버튼.value를 널어주자. // img 태..

[JavaScript] DOM( createElement / createAttribute )

createElement("String tagName") -> 엘리먼트 객체 생성 createTextNode("String text") -> text 객체 생성 ​ createAttribute("String attrName") -> 속성(Attribute) 생성 setAttributeNode(Attribite attr) -> 속성 추가 ​ setAttribute("String attr", "String value") -> 위의 두줄을 하나로 ​ ​ 엘리먼트 생성하기 createElement는 태그를 생성하는 메소드입니다. createElement("div")는 를 생성합니다. 위의 코드에서는 주석처리 되어있지만 createAttribute는 태그에 속성을 추가합니다. div.setAttribute("st..

[JavaScript] DOM(parentNode / childNodes)

부모탐색, 자식탐색 child01 child02 child03 부모탐색 자식탐색 1. "test01을 포함하는 부모태그"의 배경색을 지정하자 2. "세번째 div 태그에 포함된 test04"의 폰트 크기를 20pt로 적용하자 test01 test02 test03 test04 ​ ​ ​ function searchPar(){ var child02 = document.getElementsByTagName("p")[1]; var parent = child02.parentNode; console.log(parent); alert(parent.nodeName); parent.style.backgroundColor='pink'; } 부모탐색 버튼을 누르면 해당 함수가 실행됩니다. child01 child02 chi..