용어 뜻:
출처:
jQuery의 코드는 $(셀렉터) 또는 jQuery(셀렉터) 구조로 시작이 된다.
1
2
3
4
5
6
|
id 셀렉터:
$("#셀렉터")=document.getElementById("셀렉터")
class 셀렉터:
$(".셀렉터")=document.getElementsByClassName("셀렉터")
태그 셀렉터:
$("태그명")=document.getElementsByTagName("셀렉터")
| cs |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div id="id_selector">아이디값으로알아보는 셀렉터</div>
<div class="class_selector">클래스값으로 알아보는 셀렉터</div>
<span>태그로 알아보는 셀렉터</span>
태그에 감싸져 있는 내용들을 알기위해서는 $(셀렉터).text() 라는 함수를 적용해야 한다.
$(function(){
//태그 id가 id_selector인 태그로 감싸져있는 문자열찾기
var id_selector = $("#id_selector").text();
//태그 class가 class_selector인 태그로 감싸져있는 문자열찾기
var class_selector = $(".class_selector").text();
//span 태그로 감싸져있는 문자열찾기
var tag_selector = $("span").text();
alert("셀렉터(id)값 : " + id_selector);
alert("클래스(class)값 : " + class_selector);
alert("태그(tag)값 : " + tag_selector);
});
| cs |
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
|
$("셀렉터").html()
셀렉터 태그 내에 존재하는 자식 태그를 통째로 읽어올 때 사용되는 함수
$("셀렉터").text()
셀렉터 태그 내에 존재하는 자식 태그들 중에 html 태그는 모두 제외하고 문자열만 출력하고자 할 때 사용되는 함수
html 태그까지 모두 문자로 인식시켜주는 함수
$("셀렉터").val()
input 태그에 정의된 value 속성의 값을 확인하고자 할 때 사용되는 함수
<div id="getTag">
<h3>11111111<br/><span>22222</span>333333333</h3>
</div>
를 작성한 뒤에
$(function(){
var getTag = $("#getTag").html();
var getText = $("#getTag").text();
alert(getTag);
alert(getText);
});
를 작성한다.
결과는 html 함수는 태그를 포함한 문자열을 가져왔기 때문에 <h3>이나 <span> 태그가 raw로 보이게 되지만
text함수는 태그를 제외한 문자열만 출력했다.
<div id="getTag" style="border-width: 1px;border-style: solid;border-color: red;"></div>
<br/>
<div id="getText" style="border-width: 1px;border-style: solid;border-color: blue;"></div>
를 작성한 뒤에
$(function(){
var setTag = "<input type='text'><br />텍스트태그 동적추가하기";
$("#getTag").html(setTag);
$("#getText").text(setTag);
});
를 작성한다.
결과는 html 함수는 input 모양을 출력해주고 정리가 되어있지만
text 함수는 raw하게 <input type>이라는 String을 출력해준다.
<input type="text" id="txt" value="텍스트값" />
<input type="password" id="pwd" value="패스워드값" />
<input type="checkbox" id="chk" value="체크박스값"/>
를 작성한 뒤에
$(function(){
//get value
var txtValue = $("#txt").val();
var pwdValue = $("#pwd").val();
var chkValue = $("#chk").val();
alert(txtValue);
alert(pwdValue);
alert(chkValue);
});
를 작성한다.
이러면 input 안에 value가 들어가게 된다.
$("#txt").val("텍스트변경하기");
이 코드를 추가하면 텍스트값 이라는 글자가 텍스트변경하기로 바뀐다.
| cs |
hellogk, 2016-10-28, http://hellogk.tistory.com/87, http://hellogk.tistory.com/88
secretroute, 2016-10-28, http://secretroute.tistory.com/entry/jQuery-val-text-html%EC%9D%98-%EC%B0%A8%EC%9D%B4
댓글
댓글 쓰기