본문 바로가기

IT Study/Web

[JQuery] fadein, fadeout, toggle 기본 예제 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768Insert title here fade infade outtoggle $(function () { var speed = 3000; $("#fadein").click(function () { $("#div1").fadeIn(speed); $("#div2").fadeIn(speed); $("#div3").fadeIn(speed); }); $("#fadeout").click(function () { $("#div1").fadeOut(speed); $("#div2").fadeOut(sp.. 더보기
[JQuery] 기본 문법 - 마우스 이벤트 처리 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192Insert title here Name: Email: p Tag 숨기기보여주기toggle $(function () { $("input").focus(function () { $(this).css("background-color","olive"); }); $("input").blur(function (){ $(this).css("background-color","white"); }); $("#hi.. 더보기
[JQuery] 기분 문법 3 - list 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758Insert title here p tag p tag id test p tag class cls Coffee Black Milk Tea Soda Button $(function () {/* $("p").click(function () { console.log( $(this).text() ); }); */});$(document).ready(function name() { $("button").click(function () {// alert("click");// $("p").hide();// $("*").hide().. 더보기
[JQuery] 기분 문법 2 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172Insert title here p{ background-color: olive;}h1{ background-color: blue;}p tag id testp tag 1p tag 2 div 안의 p tag h1 class cls h1 class cls1 $(function () {// alert("asdasd");}); $(document).ready(function () { //document가 모두 준비가 된 상태에서 실행 $('#test').click(funct.. 더보기
[JQuery] 기본 문법 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697Insert title here 여기가 p태그 입니다. 여기가 p태그이며, id는 demo입니다 여기가 p태그이며, class는 cls입니다 여기가 h3태그이며, class는 cls입니다 입력: 버튼 사과 배 /*JavaScript*/function myfunc() { /* var text = document.getElementById("demo").innerHTML; docum.. 더보기
[JavaScript] DOM - Node 예제 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263Insert title here AudiBMWSaabVolvo 버튼 function myfunc() { var c = document.getElementById("mySel").childNodes; document.getElementById("demo").innerHTML = c[1].text;} 여기가 태그 커피 홍차 pNode 버튼 function pNode() { var nName = document.getElementById("myli").parentNode.nodeName; alert("n.. 더보기
[JavaScript] DOM 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 Insert title here DOM Lesson one p tag Hello World myfunc function myfunc() { var mytext = document.getElementById("intro").childNodes[0].nodeValue;// alert(mytext); var divtext = document.getElementById(".. 더보기
[JavaScript] Node 응용 예제 2 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647Insert title hereth{ background-color: green; color: white;}포털 사이트 "열기"버튼을 클릭하면 해당 홈페이지를 새창에서 볼 수 있습니다. 네이버 http://www.naver.com/ 열기 다음 http://www.daum.net/ 열기 줌 http://zum.com/ 열기 function link(url) { var parent = url.parentNode.parentNode.childNodes; //alert(parent[3].innerHTML); //주소값 받아옴 window.open(parent[3.. 더보기
[JavaScript] Node 응용 예제 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253Insert title here 단가 x 수량 일람표 개수 제품 A 제품 B 제품 C var A = 300;var B = 450;var C = 520;var table1 = document.getElementById("table1");for(i = 1 ; i 더보기
[JavaScript] 기본 문법 - Node관련 예제 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899Insert title here 여기가 h1태그 여기가 p태그 버튼 function myfunc() { var mytext = document.getElementById("intro").childNodes[0].nodeValue; //childNodes가 없기때문에 intro자신을 가리킴 document.getElementById("demo").innerHTML = myt.. 더보기