본문 바로가기

Web/JQuery

Jquery 실습 하기

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<link type="text/css" href="css/hot-sneaks/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript">
    function solve_1(){
        var $p_sample_2 = $("p.sample[data-id=2]");
        $p_sample_2.text("완전 중요 데이터");
        $p_sample_2.css("color","#ff0000");
    }
   
    function solve_2(){
        var $p_sample_2 = $("p[data-id=2]");
        $p_sample_2.text("완전 중요 데이터");
        $p_sample_2.css("color","#ff0000");
    }
   
    function solve_3(){
        var $p_sample_2 = $("p").filter("[data-id=2]");
        $p_sample_2.text("완전 중요 데이터");
        $p_sample_2.css("color","#ff0000");
    }
   
    function solve_4(){
        var $p_sample_2 = $("div div div p");
        $p_sample_2.text("완전 중요 데이터").css("color","#ff0000");
    }
   
    function solve_5(){
        var $p_sample_2 = $("p:eq(1)");
       
        $p_sample_2.text("완전 중요 데이터").css("color","#ff0000");
    }
</script>


<title>5가지의 Function 중 하나만 써도 된다.</title>
</head>
<body>
    <div>
        <div class="sample" data-id="1" onclick="solve_4();">
            <button>데이터 1</button>
        </div>
        <div class="content">
            <p class="sample" data-id="1">
                데이터 2
            </p>
        </div>
        <div>
            <div>
                <p class="sample" data-id="2">
                    데이터 3
                </p>
            </div>
        </div>
        <div class="sample" data-id="2">
            데이터 4
        </div>
    </div>
</body>
</html> 


결과화면


 


'Web > JQuery' 카테고리의 다른 글

Jquery 참고 하기  (0) 2013.07.29
Jquery Post 전송하기  (0) 2013.07.25
Ajax  (0) 2013.04.15
Jquery Hichart 쓰기  (0) 2013.04.05
JQuery 접근하는 방법  (0) 2013.01.21