Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

6/9 jquery01.html 본문

TIS_2016/HTML5_2기

6/9 jquery01.html

moozi 2016. 6. 9. 15:23

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Jquery</title>

    <!-- jquery사용 ---------------------------------------------->

    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>

    <!-- jquery CDN 사용 -------------------------------------->

<!-- <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>-->

   <style type="text/css">

        .bg1{

            background-color: crimson;

        }

    </style>

   

   

    <script>

        $(document).ready(function(){

            //document.write("jquery");

            

            $("h1").css("color","olive");

            //document.getElementsByTagName("h2")[0].style.color="olive";

            //document.querySelector("h2").style.color="olive";

            

            $("#header1").css("color","aqua");

            $(".header2").css("background-color","red");

            

            var links=[{name:"hanbit",url:"http://hanb.co.kr"},

                       {name:"naver",url:"http://www.naver.com"}];//객체배열

            

            var output="";

            $.each(links,function(index,item){                

                output+="<a href='"+item.url+"'>"+item.name+"</a><br>";

                $("#div1").html(output);

                //document.body.innerHTML+=output;

            });//index:배열인덱스.item:배열요소

            

            $("p").each(function(index,item){

                $(item).css("background-color","orange");

            });

                        

            $("#btn1").click(function(){

                $("#header3").addClass("bg1");

            });

            

          

        });

    </script>

    

</head>

<body>

    <h1>Jquery</h1>

    <h2>Jquery</h2>

    <h1 id="header1">JQuery</h1>

    <h1 class="header2">JQuery</h1>

    <div id="div1"></div>

    <h1 id="header3">JQuery</h1>

    <input type="button" id="btn1" value="클릭1"><br>

    <p>JQuery</p>

    <p>JQuery</p>

    <p>JQuery</p>

    <p>JQuery</p>

    

</body>

</html>

'TIS_2016 > HTML5_2기' 카테고리의 다른 글

6/9 예제파일  (0) 2016.06.09
jquery연습문제01  (0) 2016.06.09
6/9 javascriptBasic2  (0) 2016.06.09
6/9 jquer01.html  (0) 2016.06.09
javascript 연습문제05 풀이  (0) 2016.06.09
'TIS_2016/HTML5_2기' Related Articles more
Comments