J QUERY
제이쿼리 기본 Selector
저스크라이크헤븐
2019. 11. 28. 16:26
사용예제
|
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
70
71
72
73
|
<p class="cls">클래스가 있는 p태그</p>
<p id="demo">아이디가 있는 p태그</p>
<button id="none">다 없애라</button>
<button id="show">p.cls 없애라</button>
<button id="first">첫번째 p</button>
<p>list 1</p>
<ul>
<li>html</li>
<li>css</li>
<li>JQ</li>
</ul>
<p>list 2</p>
<ul>
<li>html</li>
<li>css</li>
<li>JQ</li>
</ul>
<button id="first_ul">ul의 첫째</button>
<button id="all_ul">전체 ul의 첫째</button>
</body>
<script>
//제이쿼리 객체와 자바스크립트 객체는 서로 다르다
//init이 있으면 제이쿼리 객체
$("#first_ul").click(function(){
$("ul li:first").hide();
turnBack();
});
$("#all_ul").click(function(){
$("ul li:first-child").hide();
turnBack();
});
console.log($("*"));
$("#none").click(function(){
$("*").hide();//숨겨라
turnBack();
});
$("#show").click(function(){
$("p.cls").hide();
turnBack();
})
$("#first").click(function(){
$("p:last").hide(); //p태그들 중에 첫번째 놈만 사라져라
turnBack(); //first,last은 되지만 나머지들은 안된다.
})
function turnBack(){
window.setTimeout(function(){
$('*').show();
},2000);
} //스크립트까지 전부 보인다.
//onclick=test(this)
function test(obj){
console.log(obj) //현재 이벤트 객체
console.log(this); //윈도우 객체
}test();
//현재 선택한 태그
$("p").click(function(){
console.dir(this); //현재 이벤트 js객체
var $obj=$("#demo");
$(this).css("color","red");
});
|