소스

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            //체이닝 기법으로 .css해서 사용 ('키',"값")모두 문자열
            $("h1,h3").css('color','hotpink');
            $(".cl1").css('color','red').css("background-color",'gray');
            $("#i1").css('color','red').css("background-color",'green');
            
            $("div h1").parent().css('color','green').css("background-color",'gray');
            $('body').children().css("border","1px solid gray");
            $('body').children().children().css("border","1px solid red");
            
            $('div>h1').next().css("background-color",'yellow');
            $('div>h1').next().next().css("background-color",'yellow');
            $('div>h1').next().next().prev().css("background-color",'yellow');
            $('#i3').next().css("border","1px solid red");
            $('#i3+h3').next().css("border","1px solid red");
            $('#i3~h3').css("border","1px solid red");//.next()하면 이상..
            $('#i3').siblings().css("border","1px solid red");//형제요소
            //하나씩풀어서 공부하기
        });
    </script>
</head>
<body>
    <h1 id="i1">제이쿼리</h1>
    <h3>제이쿼리3</h3>
    <h3 id="i3">제이쿼리3</h3>
    <h3>제이쿼리3</h3>
    <h3>제이쿼리3</h3>
    <div>
        <h1>div안에 h1</h1>
        <h3>div안에 h1</h3>
        <h3>div안에 h3</h3>
    </div>
    <p class="cl1">제이쿼리를 사용해서 제어합니다</p>
    
</body>
</html>
cs

아래의 결과는 

$(function(){
            //체이닝 기법으로 .css해서 사용 ('키',"값")모두 문자열
            $("h1,h3").css('color','hotpink');
            $(".cl1").css('color','red').css("background-color",'gray');
            $("#i1").css('color','red').css("background-color",'green');
            
            $("div h1").parent().css('color','green').css("background-color",'gray');
            $('body').children().css("border","1px solid gray");
            $('body').children().children().css("border","1px solid red");
            
            $('div>h1').next().css("background-color",'yellow');
            $('div>h1').next().next().css("background-color",'yellow');
            $('div>h1').next().next().prev().css("background-color",'yellow');
            $('#i3').next().css("border","1px solid red");
            $('#i3+h3').next().css("border","1px solid red");
            $('#i3~h3').css("border","1px solid red");//.next()하면 이상..
            $('#i3').siblings().css("border","1px solid red");//형제요소
            //하나씩풀어서 공부하기
        });

해당부분을 한줄씩 플어서 나온 결과를 가져올것이다.


결과

 $("h1,h3").css('color','hotpink');

h1태그와 h3태그 모두 

 $(".cl1").css('color','red').css("background-color",'gray');

클래스 cl1 이름을 갖는 

$("#i1").css('color','red').css("background-color",'green');

아이디 i1 이름을 갖는

$("div h3").css('color','green').css("background-color",'gray');

div아래의 h3태그 모두에게 해당(변형해보았다)

$("div h1").parent().css('color','green').css("background-color",'gray');

부모를 가리키는 parent() 이 추가 되어 div 전체가 선택


...등 한줄씩 실행



저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

ex05.html(선택자)  (0) 2016.10.06
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex02.html  (0) 2016.10.06
JQuery 시작  (0) 2016.10.06

+ Recent posts

티스토리툴바