관리 메뉴

moozi

jquery03.html 본문

TIS_2020/응용SW2020_1기

jquery03.html

moozi 2020. 5. 6. 15:23

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>jQuery</title>

    <script src="js/jquery.js"></script>

    <script>

        $(document).ready(function(){

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

                $("#box1").css("background","green");

                //$("#box1").html("박스1");

            });

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

                $("#box2").addClass("box2");

            });

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

                $("#box2").removeClass("box2");

            });

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

                $("img").attr("src""img/math_img_2.jpg");

            });

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

                $("#box1").addClass("on");

            });

            $("#btn6").on("click"function(){

                console.log("test");

                $("#box3").addClass("box3");

            });

 

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

                // chaining

                $(".btn1").parent().next().css({"color":"#f00"});

            });

 

            $(".btn2").on({

                "mouseover focus": function() {

                    $(".btn2").parent().next().css({"color":"#0f0"});

                }

            });

 

            $(".btn1").click(); //click이벤트함수호출   

            $(".btn2").trigger("mouseover");//triggert함수호출.이벤트이름지정

 

            $("#btn7").on("click",function(e){

                e.preventDefault();//다른페이지로 이동을 막는다.

                $("#txt").css("color","red");

            });

 

            $(window).on("scroll",function(){

                console.log($(this).scrollTop());

 

                if($(this).scrollTop()>700){

                    $("#box3").addClass("bounceInLeft animated");

                }

            });

        });

    </script>

 

    <link rel="stylesheet" href="css/animate.css" />    

    <style>

        #box1

            width:300px;

            height:300px;

            backgroundred;

            position:relative;

            transition1s;

            left:0;            

        }

        #box1.on{left:50px;}

        #box2width:300px;height:300px;backgroundblue;}

        .box2background:orange !important;}

 

        #box3

            width:300px;height:300px;backgroundorange;opacity1;

            }

        .box3opacity:0 !important;}

        body{

            height:10000px;

        }

    </style>

</head>

<body>

    <div id="box1">box1</div>

    <button type="button" id="btn1">클릭1</button>

    <button type="button" id="btn5">클릭5</button>

    <div id="box2">box2</div>

    <button type="button" id="btn2">클릭2</button>

    <button type="button" id="btn3">클릭3</button>

    <div>

        <img src="img/math_img_1.jpg">

    </div>    

    <button type="button" id="btn4">클릭4</button>

    <div id="box3">box3</div>

    <button type="button" id="btn6">클릭6</button>

 

    <p>

        <button class="btn1">버튼1</button>

    </p>

    <p>내용1</p>

    <p>

        <button class="btn2">버튼2</button>

    </p>

    <p>내용2</p>

    <a href="http://www.naver.com" id="btn7">클릭7</a>

    <div id="txt">Text</div>

</body>

</html>

'TIS_2020 > 응용SW2020_1기' 카테고리의 다른 글

vuejsAjax01  (0) 2020.05.12
vue.js ajax  (0) 2020.05.12
jquery03.html  (0) 2020.05.06
포트폴리오 url  (23) 2020.04.29
4/29 삼성데모  (0) 2020.04.29
company  (0) 2020.04.29
0 Comments
댓글쓰기 폼