2014. 5. 21. 13:14ㆍ개발관련기록/JQuery
15장_manipulation
** Selector로 선택된 엘리먼트가 여러개일 때
* 값의 설정은 모든 엘리먼트에..
* 값의 획득은 첫번째 엘리먼트 것만..
1. CSS 관련
가. addClass(), removeClass(), toggleClass()
<div id="a" class="test"></div>
$("#a").addClass("main");
<div id="a" class="test main"></div>
$("#a").removeClass("test");
<div id="a" class="main"></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
button.default {font-size:9pt; background-color:aqua;width:80px;border:solid 1px gray;}
button.over { background-color: purple; color:yellow;}
</style>
<title>371p_selector1.html</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#a button.default").mouseenter(function(){
$(this).addClass("over");
}).mouseleave(function(){
$(this).removeClass("over");
});
$("#b button.default").click(function(){
$(this).toggleClass("over");
});
});
</script>
</head>
<body>
<div id = "a">
<button id= "intro" class = "default">기업소개</button>
<button id= "ceo" class = "default">CEO</button>
<button id= "biz" class = "default">사업영역</button>
<button id= "contact" class = "default">연락처</button>
</div>
<div id = "b">
<button id= "intro" class = "default">기업소개</button>
<button id= "ceo" class = "default">CEO</button>
<button id= "biz" class = "default">사업영역</button>
<button id= "contact" class = "default">연락처</button>
</div>
</body>
</html>
토글 클래스를 이용한 재미난 소스이다.
버튼을 체크 박스 형식의 UI로 만들었다.
나. css(name, value) : 416p 사용방법도 제공!
: css 값을 설정하거나 값을 획득함.
$("#a").css("color", "blue"); //값 설정
var c = $("#a").css("color"); //설정된 값 획득
2. attr(name,value) : 412p
: Attribute 값 설정 및 획득
가. attr(name) : 값 획득
나. attr(name,value) : 값 설정
attr(name, function(i, val) {})
attr(object);
$("input[id^='q']").attr("answer", function(i, attr) {
return attr+ data[i].a;
});
$("#link").attr("href", "http://naver.com").attr("target", "new");
$("#link").attr({"href": "http://naver.com", "target": "new"});
var options = {};
options.href = "http://naver.com";
options.target = "new";
$("#link").attr(options);
다. removeAttr(name) : Attribute 제거
3. html(), text(), val()
가. html() : 문자열 있는 그대로 처리 --> html태그 --> 태그 인식
나. text() : 문자열을 html encoding --> html태그 --> 인코딩
<br> --> <br>
다. val() : value Attribute 값을 획득/설정
html() : 값 획득
html(val) : 값 설정
html(function(i,html) {})
4. remove(), empty()
가. remove()는 자기 자신을 제거
나. empty() 자기 자신의 포함한 후손들을 제거
html("")과 동일 기능
추가 Tip : empty()를 사용해야 한다.
HTML("") 사용은 모메리 누수가 발생한다.
5. $ 함수로 Element 생성
: $()함수의 인자로써 완결된 태그 문자열을 입력하면 ELement 생성하고
최상위 엘리먼트를 선택함.
6. 엘리먼트 추가 : 430페이지 참조
- 기존 문서에서 선택한 Element를 appendTo :
Element 복제가 아니라 이동
왜냐하면!! 한 ELement의 부모 Element는 단하나!!
clone() : 이벤트와 data를 복제하지 않음
clone(true) : 이벤트와 data를 복제함
여기서 이야기 하는 data라는게 어떤의미인가?
var obj1 = $("#a");
//obj1.abc = $("#b');
obj1.data("abc",$("#b"));
obj1.click(function(){
var b = obj1.data("abc");
});
$("<div><span></span><button>상세조회</button></div>")
.find("span").css("font-size", "10pt").html(str)
.next().attr("id", "detail" + item.productid)
.attr("pid", item.productid).click(function() {
var productid = $(this).attr("pid");
alert(productid + "번의 상품 상세 정보 조회!!");
}).end().end().appendTo("#list");
var d = $("<div><span></span><button>상세조회</button></div>")
.find("span").css("font-size", "10pt").html(str)
.next().attr("id", "detail" + item.productid)
.attr("pid", item.productid).click(function() {
var productid = $(this).attr("pid");
alert(productid + "번의 상품 상세 정보 조회!!");
}).end().end()
$("list").append(d);
* 속도 이야기
- 문서 객체 삽입
InnerHTML > html() > appendTo()
그렇다고 appendTo()를 사용하지 말라는게 아니다.
조금씩 데이터를 가져 올 떄는 크게 영향을 주지 않는다.(appendTo())
대량의 데이터를 한꺼번에 넣을 경우 발생되는 속도의 이야기다.
참고로 InnerHTML += "" 뭐 이런식으로 사용하지 않도록 주의 한다.
'개발관련기록 > JQuery' 카테고리의 다른 글
| [Jquery]강의 4일차(삼성 SDS) (0) | 2014.05.22 |
|---|---|
| [Jquery] 강의 3일차 (삼성 SDS) - 오후16장 Event (0) | 2014.05.21 |
| [Jquery] 강의 2일차 14장 설명 요약본 (0) | 2014.05.20 |
| [JQuery]강의 2일차 (삼성 SDS) (0) | 2014.05.20 |
| [Jquery]강의 1일차(삼성 SDS) (0) | 2014.05.20 |