분류 전체보기 썸네일형 리스트형 제이쿼리 attr() 와 prop() 차이 attr() prop() .attr(attributeName) .prop(propertyName) HTML의 속성(attribute)를 다룸 (HTML로 기록되어 있는 속성의 내용) Js 객체의 속성(property)를 다룸 (JavaScript가 취급하는 정보) return : string return :string, boolean, date, function 등 Id, class, name 등과 같이 상태가 변해도 변하지 않는 속성을 다룰때 사용 상태에 따라 값이 변하는 속성을 다룰 때 사용 Ex) 브라우저에서 checkbox 체크/해제 Ex) .attr(‘checked’) -> checked, undefined 실제 html에서 attr을 이용해서 checked입력 ex) .prop(‘checked.. 더보기 제이쿼리 요소 또는 속성 가져오기 및 변경하기 Ex) var str=$("input").attr("type") input 태그의 속성인 type의 값을 가져와 str에 저장한다. Ex) $("input").attr("type","button") input 태그의 속성인 type의 값을 text에서 button으로 바꾼다. 더보기 제이쿼리 Hide & Show & toggle Hide – 해당 요소를 사라지게 하는 기능(display:none) Show – 해당 요소를 보이게 하는 기능(display:inline) speed: 사라지거나 보여지는 속도를 의미한다. ex) $("ul").show(1000); callback: 이벤트 마지막에 작동하는 함수 Toggle – 두 기능을 한번에(switch) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 .. 더보기 제이쿼리 자주쓰는 EVENT 표현식 설명 click() 클릭 시 발생 dblclick() 더블 클릭 시 발생 mouseenter() 마우스가 특정 영역으로 들어왔을 경우 발생 mouseleave() 마우스가 특정 영역 밖으로 나갓을 경우 발생 mousedown() 마우스 버튼 눌럿을 경우 발생 mouseup() 마우스 버튼 떼었을 경우 발생 hover() 마우스 오버 시 발생(mouseenter 와 mouseleave를 결합한 형태), on 메소드로 사용할 수 없다. focus() 포커스가 들어왔을 시 발생 blur() 포커스를 잃었을 경우 발생(웹 접근성 상 사용 금지) on() 특정 요소에 이벤트를 추가(한 요소에 여러 이벤트를 추가 하고 싶을 경우) off 메소드를 사용해서 이벤트 제거 가능 사용예제 1 2 3 4 5 6 7 .. 더보기 제이쿼리 기본 Selector 사용예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 클래스가 있는 p태그 아이디가 있는 p태그 다 없애라 p.cls 없애라 첫번째 p list 1 html css JQ list 2 html css JQ ul의 첫째 전체 ul의 첫째 //제이쿼리 객체와 자바스크립트 객체는 서로 다르다 //init이 있으면 제이쿼리 객체 $("#first_ul").click(function(){ .. 더보기 제이쿼리(J QUERY) 란? 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. J-QUERY 사이트 https://jquery.com/ J-QUERY 다운로드 http://jquery.com/download/ J-QUERYAPI 문서 http://api.jquery.com/ 제이쿼리 사용법 -제이쿼리 파일을 다운받아 추가하거나 인터넷이 연결되는 곳이면 사이트 주소를 이용하여 사용 가능하다. 기본 문법 $(셀렉터).이벤트(동작할 함수); 사용예제 $( “#demo” ).click( function(){ } ); 더보기 setInterval(), clearInterval(), setTimeout() 함수 setInterval() – 특정 시간간격으로 특정 함수를 계속해서 실행 clearInterval() – setInterval 특성을 삭제 setTimeout() – 특정 시간이 지난 후 특정 함수를 실행 증가 정지 2초후 경고창 0 var myTime; var x=0; var msg=document.getElementById("msg"); function interval(){ //setInterval(함수, 몇초의 한번하는지) myTime=window.setInterval(function(){ x++; msg.innerHTML=x; },1000); //1초마다 호출 }//End interval function stop(){ clearInterval(myTime); x=0; msg.innerHTML=x;.. 더보기 alert , confirm , prompt 함수 alert 창 confirm 창 prompt 창 function popup(){ alert("경고창"); } function conf(){ var result=confirm("정말로 삭제할거야?") //선택한 값에 따라 true,false 값이 반환된다. if(result==true){ alert("삭제 완료 됨") } } function promp(){ var name=prompt("당신 이름은?"); // if(name==""||name==null){ alert("당신 이름이 뭐냐고?"); }else{ alert(name+"님 반가워"); } } alert 실행 confirm 실행: 확인을 선택하면 true, 취소면 false가 반환된다. prompt 실행 더보기 이전 1 2 3 4 5 다음
