본문 바로가기
JavaScript/jQuery

제이쿼리 기초1

loy124 2020. 1. 10.
반응형
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <p>p tag</p>

    <div>
        <p>div in p tag1</p>

        <p class="cls">div in p tag2</p>
    </div>

    <script>
        /*
         */
        /*
            $('div p').click(function() {
                alert('div p tag click');
            })
            */
        /*
             $('div .cls').click(function() {
             alert('div p tag click');
         })
         */

        $('p').on("click", function() {
            //전부 가린다
            //$('p').hide();
            //클릭한것만 가린다
            //$(this).hide();

            //$(this).css(프로퍼티명, 프로퍼티 값) //setter
            $(this).css("background", "#ff0000"); //setter
            var color = $(this).css("background"); //getter
            alert(color);
        });
    </script>
</body>

</html>

기본 스크립트 :

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>

    <!-- mouseover, mouseout -->
    <!-- <h3 class="cls" onmouseover="mouseOver()" onmouseout="mouseOut()">h3 tag</h3> -->
    <!-- javascript > jquery 우선순위가 javascript가 더 높다 -->
    <h3 class="cls" style="background-color: green;">h3 tag</h3>
    <script>
        function mouseOver() {
            console.log("범위에 들어왔습니다");
        }

        function mouseOut() {
            console.log("범위에 나갔습니다");
        }

        $(document).ready(function() {
            $(".cls").mouseover(function() {
                //console.log("범위에 들어왔습니다.")
                //$(".cls").css("background", "#ffff00");
                //여러개가 있을땐 this
                $(this).css("background", "#0000ff");
            });
            $(".cls").mouseout(function() {
                //console.log("범위에 들어왔습니다.")
                //$(".cls").css("background", "#0000ff");
                //여러개가 있을땐 this
                $(this).css("background", "#ffff00");
            });
        });
    </script>

</body>

</html>

$("안에들어가는 태그 or 아이디 or 클래스").함수()로 조작한다

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <p>p tag</p>
    <p id="pid">p tag id pid</p>
    <p class="cls">p tag class cls</p>
    <p name="_name">p tag name _name</p>

    <button>click</button>
    <script>
        $(document).ready(function() {
            $("p").click(function() {
                console.log($(this).text());
            });

            $("button").click(function() {
                //$('p').hide();
                //$("*").hide();
                //$('p#pid').hide();
                //$('p.cls').hide();
                $('p[name=_name]').hide();
            })
        });
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <!-- JQuery -> Ajax (Json) -> Server(Java) (list, hashamp) -->

    <ul id="list">
        <li>Coffee
            <ol type="1">
                <li>black</li>
                <li>milk</li>
            </ol>
        </li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    <button id="btn">선택 or 감추기</button>
    <button id="btn1">보이기</button>

    <script>
        $(function() {
            $("#btn").click(function() {
                //$("#list").hide();
                //$("ul li:first").hide();
                //$("#list li:first").hide();
                //$("ul ol li:first").hide();
                //$("ul ol li:first-child").hide();
                $("ul ol li:nth-child(2)").hide();
            });
            $("#btn1").click(function() {
                $("ul ol li:nth-child(2)").show();
            })
        });
    </script>

</body>

</html>
반응형
저작자표시

'JavaScript > jQuery' 카테고리의 다른 글

제이쿼리 기본 태그 조작법  (0) 2020.01.13
제이쿼리 , JSP 간 연동1  (0) 2020.01.13
제이쿼리 filter, blur, hide, show, toggle  (0) 2020.01.13
제이쿼리 테이블에 값 넣기  (0) 2020.01.13
제이쿼리 기초 2  (0) 2020.01.10

'JavaScript/jQuery' 관련글

티스토리툴바