웹 11일 (23.03.16)

Jane·2023년 3월 16일

html jquery

IT 수업 정리

목록 보기

74/124

1. 제이쿼리

https://jquery.com/

https://jqueryui.com/

라이브러리를 다운받아서 쓰기
웹에 있는 주소를 복사해서 쓰기

1-1. CDN

CDN : 해당 주소를 복사해서 쓰는 것

<script
  src="https://code.jquery.com/jquery-3.6.4.min.js"
  integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
  crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

1-2. jQuery 테스트

jQuery(선택자).함수명(매개변수);

$(선택자).함수명(매개변수);

1-3. jQuery와 JavaScript의 차이

            var myJQ = jQuery("p");
            console.log(myJQ);

            myJQ.css("textDecoration", "underline");

            var elementP = document.getElementsByTagName("p");
            console.log(elementP);

            /*elementP.css();*/

둘은 Prototype 자체가 다르다. 구현 방식이 다르다.
제이쿼리 문법은 제이쿼리에서만 쓸 수 있다.
위 : jQuery p 객체
아래 : JavaScript가 관리하고 있는 p 객체

1-4. jQuery 문법의 특이한 표현 방식

 $("p").css("color", "darkcyan").css("fontSize", "2em").css("fontWeight", "bold").css("textDecoration", "underline");

객체에 대한 함수를 쭉 이어서 쓸 수 있다.

2. jQuery의 선택자

2-1. $(document).ready()

JavaScript : window.onload
여러 개가 있으면 마지막 것으로 덮어쓰게 되므로, 1개만 쓰면 된다.
jQuery : $(document).ready()
여러 개가 있어도 모두 다 실행된다.

        $(document).ready(function () {
            console.log(1);
        });

        $(document).ready(function () {
            console.log(2);
        });

        $(document).ready(function () {
            console.log(3);
        });

$(document).ready를 생략하고, 익명 함수를 적고 시작할 수 있다.

$(function(){
	/*내용을 적는다*/
})

2-2. 선택자 적용하기

val() : form 양식에 있는 value 값

3. jQuery로 DOM 조작하기

3-1. 객체 생성하기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
        $(function () {
            var wrapObj = $("#wrap");

            var divObj = $("<div>jquery div</div>");
            divObj.appendTo(wrapObj);

            divObj.css("background", "#0088FF");

            var aObj = $("<a href='http://www.google.com'> google</a><br>");
            aObj.appendTo(wrapObj);

            var imgObj = $("<img src='./logo.png'>");
            imgObj.appendTo(wrapObj);

            var tempObj = {
                src: "./arm_mbed.png",
                width: 297,
                height: 124,
                border: "5px"
            };

            var imgAObj = $("<img>", tempObj);
            imgAObj.appendTo(wrapObj);
        })
    </script>
</head>

<body>
    <div id="wrap">

    </div>
</body>

</html>

script 내용을 다음과 같이 이어서 쓰는 방식으로 바꿀 수 있다.

        $(function () {
            $("<div>jquery div</div>").appendTo($("#wrap");).css("background", "#0088FF");
        })

3-2. 객체를 관리하는 여러가지 함수

    <div id="wrap">
        <div>contents</div>
    </div>

appendTo() : 자식이 부모 안으로 들어간다. 밑으로 들어간다.
divObj.appendTo(wrapObj);
append() : 부모가 자식을 붙인다.
wrapObj.append(divObj);
prependTo() : 자식이 부모 안으로 들어가되, 맨앞으로 들어간다.
prepend() : 부모가 자식을 붙이되, 맨앞으로 붙인다.
A.insertAfter(B) : A의 객체가 B 객체 뒤에 붙는다.
B.after(A) : B의 객체 뒤에 A가 붙는다.
AinsertBefore(B) : A의 객체가 B 객체 앞에 붙는다.
B.before(A) : B의 객체 앞에 A가 붙는다.

3-3. 객체의 이동

특정 태그의 위치를 잡고, 원하는 위치에 append를 시킨다.

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>


    <script>

        $(document).ready(function () {

            $("#wrap > .contents1 > .p").appendTo($("#wrap > .contents2"));
        });

    </script>

    <style>
        #wrap .contents1 .p {
            background: #ff0000;
        }

        #wrap .contents2 .p {
            background: #ffff00;
        }
    </style>
</head>

<body>

    <div id="wrap">
        <div class="contents1">
            <p class="p">contents1</p>
        </div>

        <div class="contents2">
            <p class="p">contents2</p>

        </div>
    </div>

</body>

</html>

3-4. 객체의 복제

원하는 객체에 clone()을 걸고, 원하는 위치에 append한다.

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>


    <script>

        $(document).ready(function () {

            ($("#wrap > .contents1 > .p").clone()).appendTo($("#wrap > .contents1"));
        });

    </script>

    <style>
        #wrap .contents1 .p {
            background: #ff0000;
        }
    </style>
</head>

<body>

    <div id="wrap">
        <div class="contents1">
            <p class="p">contents1</p>
        </div>

    </div>

</body>

</html>

여러 개 복제하기

        $(document).ready(function () {
          // 객체를 변수에 담아서 붙이기
            var co = $("#wrap > .contents1 > .p").clone();
            co.appendTo($("#wrap > .contents1")); // 2개

          // appendTo 사용 (앞의 객체를 뒤의 객체 안에 넣는다.)
            ($("#wrap > .contents1 > .p").clone()).appendTo($("#wrap > .contents1")); // 4개

          // append 사용 (앞의 객체가 뒤의 객체를 안에 넣는다.)
            $("#wrap > .contents1").append($("#wrap > .contents1 > .p").clone()); // 8개

        });

3-5. 이외의 다양한 함수

each() : 선택자마다 각각 실행 (배열처럼 보일 수도 있다)
- index : 0번째부터...
- item : 선택자 안의 내용
text() : 내용을 쓰고 읽기
text("내용") : "내용"이 나온다.
html() - 선택한 요소의 내용을 설정하거나 return (HTML 마크업 포함)
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_get

this의 사용

$("p").each(function (index, item) {
	console.log($(this).text());

	if (index % 2 == 0) {
		$(this).css("background", "#0088FF");
	} else {
		$(this).css("background", "#FF8800");
	}

});