2014. 5. 20. 10:16ㆍ개발관련기록/JQuery
- 강의 요약
메인 교제 184의 내용
프로토 타입을 설명 하기 위함
프로토 타입이란?
Prototype Chain
객체를 사용할 떄 공용으로 사용되는 함수가 있다면 프로토 타입이란 함수를 만들어서 사용해야 한다.
가장 기본적인 Jquery 사용 template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
</body>
</html>
엘리먼트(element)와 tag의 차이 존재함
<div name = "abc"> -> tag ->1
<h1> 안녕?</h1> ->2
</div> -> tag ->3
1,2,3 라인을 걸쳐 div element라고 그런다.
*Selector
<body>
<div id = "first">
<div id ="a">김수한무</div>
<div>거북이와 두루미</div>
<div class = "main">삼천갑자</div>
<div class = "main test">동박삭</div>
</div>
<div id = "second">
<div id = "a">중복된 ID는 어찌 선택 될까?</div>
<div class = "main">치치카프</div>
<div class = "main test">사리사리센터</div>
</div>
</body>
ID > TAG > Class >.....> attribute selector
1 2 3 4
tip : 크다라고 한 쪽이 속도가 빠르다.
되도록이면 ID 속성으로 찾는게 더 좋다.
- 2번 방법 : $("div")
- 1번 방법 : $("#a")
주의 아이디를 중복되게 적으면 안된다. 주의 위의 내용은 일부러 저렇게 한거임
왜냐하면 무조건 한개만 찾기 떄문이다.
- 3번 방법 : $(".main")
- 4번 방법 : 너무 속도 느립니다.
짜잘한 tip 크롭 브라우져에서 context의 내용은 어느 범위에서 찾았는가의 의미이다.
- 해당 부분은 크롬 브라우져의 console의 내용에서 찾을수 있다.
* 속성 선택자(attribute selector) 379페이지 참고
요소 : Element
속성 : Attribute
1.[속성]
- 속성이 있느냐 없느냐만 가지고 판단한다.
ex)
<input type = "text"...readonly disable/>
$("input[readonly]")
2. 요소[속성 = 값]
<a herf = "http://www.naver.com">네이놈</a>
....
$("[href = 'http://www.naver.com']")
*필터 Select
1. $("input[type = 'text']")
2. $(":'text']")
1과 2의 의미는 같다. 하지만 동작은 약간 차이가 있다.
2의 경우는 Form Tag로 둘러 쌓인 부분만 동작한다. 반면 1의 경우는 모든 속성을 찾는다.
1. $("[id = 'a']")
2. $("#a")
1과 2의 차이는 분명하다. 2의 경우는 분명 하나의 값을 구하는데 1번의 경우는 여러 값을 가져 온다.
속도 측면도 많은 차이가 존재 한다. 2의 부분은 ID Selector이므로 속도가 빠르나, 1의 부분은 속도가 매우 느리다.
* 재미난 Tip *****
for 구문 loop, while loop를 이용한 배열 loop를 사용할 수 있는데
each 구문을 이용한 loop를 사용할 수 있다.
for , while이 속도가 더 빠르다 그런데 each 구문이 왜 있을까???!?!?!??
답변 : Closure 문제에 대한 해결이 쉬워지기 때문이다. Javascript개발자는 이런 사실을 알고 있었다.
for 구문이나 while구문을 사용하게 되면 closure의 문제가 발생 가능한 경우가 더 높아진다.
따라서 앞으로 개발은 이런식으로 진행하고자 한다.
for , while 구문을 이용해서 작업을 하되,
closure 문제가 생기면 해당 구문을 each 구문으로 해결하도록 한다.
1 : $.each(arr,function(i,item){})
2 : $(selector).each(function(i,item){})
속도 1 > 2
1과 같은 형식으로 작성을 하도록 한다. 그리고 이런 방법으로 실행하면 Closure의 문제가 발생하지 않는다.
*Closure 문제 생기도록 소스 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var btns = $("button")
for (var i = 0 ; i< btns.length ; i++){
$(btns[i]).click(function(){
alert(i+1 + "번째 버튼 클릭~!")
});
}
});
</script>
</head>
<body>
<button id = "bynA"> A </button>
<button id = "bynB"> B </button>
<button id = "bynC"> C </button>
</body>
</html>
모든 버튼을 눌렀을때 4번째 버튼이라는 창이 뜬다. 이것은 잘못된 부분이다.
Closure의 문제가 발생된 부분인데, a버튼을 클릭하면 1번째, b 버튼을 클릭하면 2번째 , c 버튼을 클릭하면 3번째 버튼이라는 메세지가 나와야 한다.
자 그럼 이것을 each 구문으로 해결해 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").each(function(i,item){
$(this).click(function(){
alert( (i+1) + "번째 버튼 클릭~!");
})
});
/*
var btns = $("button")
for (var i = 0 ; i< btns.length ; i++){
$(btns[i]).click(function(){
alert(i+1 + "번째 버튼 클릭~!")
});
}
*/
});
</script>
</head>
<body>
<button id = "bynA"> A </button>
<button id = "bynB"> B </button>
<button id = "bynC"> C </button>
</body>
</html>
391P
13.9 객체 병합
var a= {name : "홍길동", tel : "222-3333", score : 90};
var b= {name : "홍길동", age : 20, address : "서울", tel : "010-1111-1111"};
$.extend(a,b)
console.dir(a);
위의 결과가 아래처럼 나온다.(크롬 console창에 적어 보면 아래와 같이 병합 된다.)
그럼 이런것은 어디에 쓰는가?
예를 들어 본다.
function addContact(name,address,email,tel){
}
addCOntact("홍길동",null,null,"010-222-333");
위의 모양이 더럽다
function addContact(options){
var defaults = {name : "무기명",age : 20, tel: "전번없음", address : "주소없음"}
$.extend(defaulf,options);
}
addCOntact({name : "홍길동", tel : "010-222-1111"});
이렇게 만들 수 있다.
- 유용한 팁
예를 들어 html 문서의 크기가 매우 클 경우 div 태그를 선택하면 굉장히 느리다.
따라서 문서에서 찾는 방법에 대해 개선이 필요 하기 때문에 찾는 범위를 좁혀 놓고 select 한다.
자식, 후손을 선택해서 조회 하면 더 빠르게 조회 가능하다.
- 짜짤한 팁
blog.javarouka.me
- 자바 스크립트 퀴즈 모음 한번 가 볼것
'개발관련기록 > JQuery' 카테고리의 다른 글
| [Jquery] 강의 3일차(삼성 SDS) (0) | 2014.05.21 |
|---|---|
| [Jquery] 강의 2일차 14장 설명 요약본 (0) | 2014.05.20 |
| [Jquery]강의 1일차(삼성 SDS) (0) | 2014.05.20 |
| [jquery]를 이용한 Simpleweb (0) | 2014.03.18 |
| [JQuery] JQuery TreeView 만들기(트리뷰) (0) | 2014.03.18 |