jQuery(3)

9mond·2023년 8월 14일

1. 요소의 css 속성 제어

1-1. 속성값 읽기

HTML태그 요소에 적용된 특정 속성값을 얻기 위해서는 css() 함수를 사용한다.

	$("요소").css("속성이름", "값");

1-2. 속성값 변경/추가

HTML태그 요소에 특정 css값을 지정할 경우, attr()함수와 용법이 동일해진다.

	let 변수 = $("요소").css("css속성이름"):

	$("요소").css({
		"속성":"값",
		"속성":"값",
		"속성":"값"
	});

1-3. css클래스의 적용여부 알기

HTML태그 요소의 특정 클래스 적용 여부는 hasClass()메서드의 리턴값(boolean)으로 파악할 수 있다.

	let 변수 = $("요소").hasClass("클래스이름");

1-4. 클래스의 적용과 해제

요소에 특정 css클래스를 적용할 경우, addClass()함수를 사용한다.
두 개 이상의 클래스를 한 번에 적용할 경우 공백으로 구분하여 지정한다.

	$("요소").addClass("클래스이름");

HTML태그 요소에 적용된 특정 css클래스를 제거할 경우 removeClass()함수를 사용한다.
두 개 이상의 클래스를 한 번에 적용할 경우 공백으로 구분하여 지정한다.

	$("요소").removeClass("클래스이름");

1-5. 적용과 해제의 반복처리

어떤 요소에 특정 클래스의 적용과 해제를 반복적으로 처리하는 것을 토글처리라고 한다.
토글처리를 위해서는 해당 클래스가 적용되어 있는지를 검사하여 적용되어 있다면 addClass(), 적용되어 있지 않다면 removeClass()함수를 호출해야 한다.

	if( $("요소").hasClass("클래스이름") ){
		$("요소").removeClass("클래스이름");
	} else {
		$("요소").addClass("클래스이름");
	}

-> 구문축약 가능

	$("요소").toggleClass("클래스이름");

2. not()함수

2-1. this 용법

여러 개의 요소를 의미하는 css셀렉터를 사용하여 이벤트를 정의한 경우, 대상 요소들은 모두 동일한 이벤트를 발생시킬 수 있다.
이 때 $(this)는 현재 이벤트가 발생한 단 하나의 요소를 가르킨다.

2-2. this를 부정하는 not(this)

$("요소") 객체의 not(this)함수는 여러 HTML요소들 중 이벤트가 발생한 자신을 제외한 나머지 객체들을 가르킨다.

2-3. not()함수의 기능

~ 중에서 ~ 은 제외라는 의미
this 키워드에 대해서 뿐만 아니라 다른 jQuery객체나 다른 객체를 지정하기 위한 selector에 대해서도 적용할 수 있다.

 	1)
	$(".btn").not($("#mybtn")).css(...);
	-> #mybtn을 제외한 .btn에 css적용

	2)
	$(".btn").not(".btn:eq(2)").css(...);
	-> .btn에 2번째 항목을 제외한 .btn에 css적용

3. 탐색(traversing)

3-1. 특정 요소를 기준으로 하여 주변을 탐색하기

<style>
        /* 테이블의 모든 칸에 동일한 크기와 정렬 지정 */
        td { width: 100px; height: 100px; text-align: center; }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>1번</td> <td>2번</td> <td>3번</td>
        </tr>
        <tr>
            <td>4번</td> <td>5번</td> <td>6번</td>
        </tr>
        <tr>
            <td>7번</td> <td>8번</td> <td>9번</td>
        </tr>
    </table>

next() : 현재 요소를 기준으로 다음 요소를 리턴한다.

$("td:eq(4)").next().css("background","yellow");	// 6번

prev() : 현재 요소를 기준으로 이전 요소를 리턴한다.

$("td").eq(4).prev().css("background","SlateBlue");		// 4번

parent() : 현재 요소의 상위 요소를 리턴한다.

$("td:eq(4)").parent().css("color","blue");		// td(4)의 부모인 tr이 선택. 4, 5, 6번		
$("td:eq(4)").parent().next().css("color","red");	// tr의 next이므로 7, 8, 9번
$("td:eq(4)").parent().prev().css("color", "MediumSeaGreen");	// 1, 2, 3번

children() : 현재 요소의 하위 요소들을 배열로 리턴한다.

$("td:eq(4)").parent().next().children().css("text-decoration", "underline");	// 7, 8, 9
$("td:eq(4)").parent().next().children().eq(1).css("font-weight", "bold");		// 8

eq() : 현재 요소의 하위 요소 중에서 n번째 요소를 선택한다. n값은 0부터 시작한다.

$("td:eq(4)").css("background","tomato");		// 5번
$("td").eq(2).css("background","powderblue");	// 3번

find() : HTML 요소가 인접해 있지 않더라도 하위 태그 중에서 가장 가까운 요소를 검색한다.

<body>
    <ul id="first">
        <li class="foo">list item1</li>
        <li>list item2</li>
        <li class="bar">list item3</li>
    </ul>
    <ul id="second">
        <li class="foo">list item1</li>
        <li>list item2</li>
        <li class="bar">list item3</li>
    </ul>
    <script>
        $("#first").find(".foo").css("background-color", "tomato").end()
                    .find('.bar').css("background-color", "orange");
    </script>
</body>

4. 엘리먼트 제어

4-1. 자식으로 삽입

append(), appendTo(), html(), prepend(), prependTo(), text()
https://api.jquery.com/category/manipulation/dom-insertion-inside/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
        p{background: tomato;}
    </style>
</head>
<body>
    <p id="user_p">jQuery는 : </p>
    <script>
       $("p") .append("<strong>재미있다</strong>");

    // document.getElementById("user_p").innerHTML = document.getElementById("user_p").textContent + "<strong>재미있다</strong>";
    </script>
</body>

4-2. 형제로 삽입

after(), before(), insertAfter(), insertBefore()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>   
</head>
<body>
    <p> jQuery는 : </p>
    <script>
        $("p").after("<strong>재미있다</strong>");
    </script>
</body>

4-3. 부모로 감싸기

unwrap(), wrap(), wrapAll(), wrapInner()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
            div {
        border:2px blue solid;
        margin:2px;
        padding:2px;
    }
    p {
        background:yellow;
        margin:2px;
        padding:2px;
    }
    strong {
        color:red;
    }
    </style>
</head>
<body>
    <span>Span text</span>
    <strong>What about me?</strong>
    <span>Another one</span>
    <script>
        $("span").wrap("<div><div><p><em><b>  </b></p></div></div>");
    </script>
</body>

4-4. 삭제

detach(), empty(), remove(), unwrap()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
        p{background: tomato; margin: 6px 0;}
    </style>
</head>
<body>
    <p>Hello</p>
    how are
    <p>you?</p>
    <button>call remove()</button>
    <script>
        $("button").click(function(){
            $("p").remove();
        });
    </script>
</body>

4-5. 치환

replaceAll(), replaceWith()
https://api.jquery.com/replaceAll/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
        p{background: powderblue; margin: 6px 0;}
    </style>
</head>
<body>
    <p>Hello</p>
    <p>javascript</p>
    <p>World</p>
    <script>
        $("<b>jQuery</b>").replaceAll("p");
    </script>
</body>

4-6. 클래스

addClass(), hasClass(), removeClass(), toggleClass()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
         p {
            margin: 4px;
            font-size:16px;
            font-weight:bolder;
            cursor:pointer;
        }
        .blue {
            color:blue;
        }
        .highlight {
            background:powderblue;
        }
    </style>
</head>
<body>
    <p class="blue">click to toggle</p>
    <p class="blue highlight">highlight</p>
    <p class="blue">on these</p>
    <p class="blue">paragraphs</p>

    <script>
        $("p").click(function(){
            $(this).toggleClass("highlight");
        });
    </script>
</body>

4-7. 속성제어

val()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
        p{color: green; margin: 8px;}
    </style>
</head>
<body>
    <input type="text" value="some text"/>
    <p></p>
    <script>
       $("input") .keyup(function(){
        let value = $(this).val();
        $("p").text(value);
       })
    </script>
</body>

9mond

개발자

이전 포스트

랜덤화면

다음 포스트

jQuery(4)

1개의 댓글

happy

2023년 8월 14일

좋은 글 감사합니다. 자주 방문할게요 :)

답글 달기