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

moozi

6/9 jquer01.html 본문

TIS_2016/HTML5_2기

6/9 jquer01.html

moozi 2016. 6. 9. 12: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>-->

    <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"}];//객체배열

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

                var output="";

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

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

                document.body.innerHTML+=output;

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

            

        });

    </script>

</head>

<body>

    <h1>Jquery</h1>

    <h2>Jquery</h2>

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

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

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

</body>

</html>

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

6/9 jquery01.html  (0) 2016.06.09
6/9 javascriptBasic2  (0) 2016.06.09
javascript 연습문제05 풀이  (0) 2016.06.09
6/8 수업예제파일  (0) 2016.06.08
javascript 연습문제05  (0) 2016.06.08
'TIS_2016/HTML5_2기' Related Articles more
Comments