espriter

- 표의 cell을 클릭하면 특정 내용이 출력됩니다. - 더블 클릭하면 alert이 발생됩니다. - 키보드로 입력하면 아스키코드로 변환해줍니다. - 마우스 over를 통해서 몇번 over 되었는지 출력합니다. - 요소를 추가하고 요소 추가 기능을 비활성화 할 수 있습니다. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ DOCTYPE html> Insert title here function tdclick(arg){ alert(arg); } $(document).ready(function(){ /* $("td").click(function(){ alert($(this).text()); }); */ $("td").click(aa); $("#good").dblclick(function(){ alert($(this).te..

Development/JS 2018. 2. 27. 18:22

- 자료 입력을 했을 때 DOM을 활용하여 append 합니다. - 링크를 다른 형태(event.preventDefault)로 변형합니다. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ DOCTYPE html> Insert title here .myfocused{background-color: #bbb;} $(document).ready(function(){ //$("h1").css("color", "#a12"); //$("h1").css("text-decoration", "underline"); $("h1").css({"color":"#a12", "text-decoration":"underline"}); $("#message").wrap(""); //선택 요소 감싸기 //event focus $("input")...

Development/JS 2018. 2. 27. 18:21

jQuery를 활용하여 표에 효과를 주고, 요소를 추가하는 예제입니다. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ DOCTYPE html> Insert title here $(document).ready(function(){ //var p = document.getElementsByTagName("p"); var p =$("p"); p[0].style.color = "red"; // p 태그에 빨간색(js 형식) p[1].style.color = "blue"; // p의 2번째 태그에 파란색(js 형식) p[2].style.color = "green"; // p의 3번째 태그에 초록색(js 형식) $("p").eq(1).css("color", "aqua"); //// p의 1번째 태그에 아쿠아색(jq 형식) /..

Development/JS 2018. 2. 27. 18:20

jQuery를 활용하여 태그를 select 하여 효과를 주는 예제입니다. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ DOCTYPE html> Insert title here $(document).ready(function(){ $("div > a[target]").css("background", "#aaa"); //[속성]에다가 값을 줌 $("div > a[href='http://naver.com']").css("background", "#0ff"); //[네이버 링크]에다가 값을 줌 $("div > a[href!='http://naver.com']").css("background", "#888"); //[네이버 링크] 외에 //패턴 : regular expression $("div[id^='content-1'..

Development/JS 2018. 2. 27. 18:19

jQuery는 자바스크립트 라이브러리로서 자바스크립트보다 훨씬 간소하여 활용하기 편리하다. jQuery를 불러오기 위한 방법은 여러가지가 있는데 우선 자체 서버에 jQuery 파일을 올려두고 쓰는 방법이 있고, 구글 등에서 제공하는 CDN 링크를 걸어두는 방법이 있다. jQuery의 문서는 $(document).ready(function(){본문}); 의 형태로 시작된다. ▼▼▼▼▼▼▼▼ ▼▼▼▼▼▼▼▼ DOCTYPE html> JQuery 적용 방법 .korea{font-family: "궁서체"} $(document).ready(function(){ $("*").css("border", "1px solid #ff0000"); // 문서 전체에 css 적용 $('span').css("border", '3..

Development/JS 2018. 2. 26. 18:12

AJAX를 활용하여 검색 포탈의 검색어 추천 기능과 같이 기존에 저장된 DB와 유사한 값을 불러옵니다. DB에 입력값이 연결되기 까지의 시간을 지정할 수 있습니다. ▼▼▼▼▼▼▼▼ ▼▼▼▼▼▼▼▼ DOCTYPE html> 자동완성 ** 이름 검색(Ajax) ** 검색어 : 선택된 직원명 : ▲▲▲▲▲▲▲▲ ▲▲▲▲▲▲▲▲ ▼▼▼▼▼▼▼▼ ▼▼▼▼▼▼▼▼ ▲▲▲▲▲▲▲▲ ▲▲▲▲▲▲▲▲ ▼▼▼▼▼▼▼▼ ▼▼▼▼▼▼▼▼ var xhr; var checkFirst = loopSend = false; var lastKeyword = ""; function sijak(){ //console.log("a"); if(checkFirst == false){ setTimeout("sendKeyword()", 1000);..

Development/JS 2018. 2. 26. 18:11

AJAX를 활용하여 CSV 파일을 불러오는 예제입니다. ▼▼▼▼▼▼▼▼ ▼▼▼▼▼▼▼▼ DOCTYPE html> Insert title here var xhr; function func(){ xhr = new XMLHttpRequest(); xhr.open("get", "csvdata.txt", true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status== 200){ process(); }else{ alert("요청 실패: " + xhr.status); } } } xhr.send(null); } function process(){ var datas = xhr.responseText; var rowData = data..

Development/JS 2018. 2. 26. 18:10

AJAX를 활용하여 텍스트에 커서를 마우스 오버 할 때 DB에서 불어온 내용을 호출하는 예제입니다. SQL 파일은 Github(03_02_AJAX_db_json) 항목에 있습니다. DOCTYPE html> Insert title here 부서별 직원자료 총무부 영업부 전산부 관리부 var xhr, popup, disp; function goFunc(element){ ele = element; //console.log(ele.id); disp = document.getElementById("disp"); popup = document.getElementById("popup"); xhr = new XMLHttpRequest(); xhr.open("post", "a4.jsp", true); xhr.onread..

Development/JS 2018. 2. 26. 18:09