input의 value 읽어오기

function myFunc() {
    var result = $("#my-input").val();
    // val메서드가 접근한 요소의 value를 반환해준다.
    // 반환된 값은 result 변수에 저장되고
    alert(result); // 출력
}
<input type="text" id="my-input" value="나의 값">
<button onclick="myFunc()">클릭</button>

 

버튼을 클릭하면 알림창에 해당 값인 "나의 값"이 출력된다.

 

 

 

input의 value 변경하기

function myFunc() {
    $("#my-input").val('우리 값');
}
<input type="text" id="my-input" value="나의 값">
<button onclick="myFunc()">클릭</button>

 

버튼을 클릭하면 input의 값이 변경되는 걸 확인할 수 있다.

 

 

 

 

getter, setter

var result = $("#my-input").val(); - getter (가져오는 함수, 반환값 사용)
$("#my-input").val('우리 값'); - setter (설정하는 함수)
메서드 오버로딩 (이름이 갖고, 매개변수 타입이나 갯수나 다른 메서드가 여러개)
method overloading - 메서드 과적하는 것

 

text() - getter

text('값') - setter

html() - getter

html('값') - setter

'JQuery' 카테고리의 다른 글

[JQuery] ready 함수  (0) 2024.11.13
[JQuery] prev, prevAll, next, nextAll, siblings, even, odd  (0) 2024.11.11
[JQuery] $ 메서드와 css 메서드 선택자  (0) 2024.11.08
[JQuery] 세팅과 사용  (1) 2024.11.07

ready

Specify a function to execute when the DOM is fully loaded.
DOM이 완전하게 로드되면 실행할 함수를 지정한다.
ready(handler) , ready 메서드에 콜백함수 지정해라
handler : function() {...}
DOM이 완전하게 로드되면 ready 메서드에 지정한 콜백함수 실행된다.

 

 

 

<script>
    console.log('hello'); // 가능
    $("#my-div").css("backgroundColor", "red"); // 불가능
</script>
<body>
    <div id="my-div">내 div</div>
</body>

 

다음과 같이 DOM 생성 완료가 아직 안된 상태에서 my-div 가 만들어지지 않았는데, 접근한다? 저 코드는 불가능하다. 스크립트가 위에 있기 때문이다.

 

 

    <script>
        function myFunc() {
            $("#my-div").css("backgroundColor", "red");
        }
    </script>
</head>
<body>
    <div id="my-div">

    </div>
    <button onclick="myFunc()">클릭하기</button>
</body>

 

다음과 같이 버튼을 눌러서 특정 함수를 실행할 경우에는 실행이 된다.

 

 

<body>
    <div id="my-div">내 div</div>
</body>
</html>
<script>
    console.log('hello'); // 가능
    $("#my-div").css("backgroundColor", "red"); // 가능
</script>

 

만일 스크립트를 html 밑에 작성할 경우 실행이 된다. div가 이미 만들어졌고 그 다음에 접근하는 것이기 때문에.

 

 

 

그럼 첫번째 상황일 경우 어떻게 접근해야 할까?

$(document).ready(function() {
   $("#my-div").css("backgroundColor", "red"); // 가능
})

 

다음과 같이 ready 함수를 쓴다. ready 메서드에 콜백함수는 DOM이 완전하게 로드되면 실행한다.

 

 

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("my-div").style.backgroundColor='red';
}) // 익명함수 형태의 콜백함수, 즉시 실행함수

 

dom 방식으로는 다음과 같이 작성한다. addEventListener 메서드에 'DOMContentLoaded' 를 이용한다.

 

 

 

$(function() {  //ready랑 똑같음
    $("#my-div").css("backgroundColor", "red");
})

 

Jquery 버전을 좀 더 간단하게 줄인 코드이다. 위에 ready를 사용한 것의 축약 버전이다. 코드가 짧아서 좋지만 가독성은 떨어지는 편이다.

'JQuery' 카테고리의 다른 글

[JQuery] val메서드, getter, setter  (0) 2024.11.18
[JQuery] prev, prevAll, next, nextAll, siblings, even, odd  (0) 2024.11.11
[JQuery] $ 메서드와 css 메서드 선택자  (0) 2024.11.08
[JQuery] 세팅과 사용  (1) 2024.11.07

prev, prevAll

<ul>
    <li>리스트1</li>
    <li>리스트2</li>
    <li id="li3">리스트3</li>
    <li>리스트4</li>
    <li>리스트5</li>
</ul>
<button onclick="myFunc()">클릭하기</button>
$("#li3").prev().css("backgroundColor","red");
//previous

 

prev는 이전 요소를 선택하는 기능을 한다. 리스트3 을 선택해서, 이전 요소의 배경색을 빨간색으로 선택하면 이전 요소인 리스트2의 배경색이 빨갛게 변한다.

 

 

 

$("#li3").prevAll().css("backgroundColor","red");

prevAll은 이전 전체 요소들을 선택하는 기능을 한다. 리스트3의 이전 요소들인 리스트1과 리스트2의 배경색이 변한다.

 

 

 

 

next, nextAll

$("#li3").next().css("backgroundColor","red");

next는 선택한 요소의 다음 요소를 선택하는 기능이다. 선택된 리스트3의 다음 요소인 리스트4의 배경색이 변경된다.

 

 

 

$("#li3").nextAll().css("backgroundColor","red");

nextAll은 선택한 요소의 다음 요소 전체를 선택한다. 리스트3의 다음 요소들인 리스트4, 리스트5 모두 배경색이 변한다.

 

 

 

 

siblings

$("#li3").siblings().css("backgroundColor","red");
//siblings - 형제, 자매 (이전 요소 모두, 다음 요소 모두)

siblings는 형제, 자매라는 뜻으로, 이전 요소 모두와 다음 요소 모두를 선택하는 기능을 한다. 선택된 리스트3의 형제 요소들 모두 배경색을 변경한다.

 

 

 

 

eq

$("ul>li").eq(2).css("backgroundColor","red");
//eq(2) - 리스트의 3번째 (0부터 시작함)

eq 메서드는 해당 모든 리스트 중에서 몇번째 요소를 선택할지 정할 수 있다. 0번째 요소 부터 시작하며, 첫번째 리스트는 eq(0)이라고 적어야 하니 주의해야 한다. 리스트3을 선택하기 위해 eq(2)로 작성했다.

 

 

 

 

even

$("ul>li").even().css("backgroundColor","red");
// 0, 2, 4 ... 짝수번째 선택

0번, 2번, 4번 같은 짝수번째 요소를 선택할 때 사용한다.

 

 

 

 

odd

$("ul>li").odd().css("backgroundColor","red");
// 1, 3, 5 ... 홀수번째 선택

1번, 3번 5번 같은 홀수번째 요소를 선택할 때 사용한다.

'JQuery' 카테고리의 다른 글

[JQuery] val메서드, getter, setter  (0) 2024.11.18
[JQuery] ready 함수  (0) 2024.11.13
[JQuery] $ 메서드와 css 메서드 선택자  (0) 2024.11.08
[JQuery] 세팅과 사용  (1) 2024.11.07

JQuery

document 객체 라이브러리이며 DOM 제어를 위한 라이브러리이다.

 

 

 

예시

$("#my-div").css("backgroundColor", "red");

css 메서드는 디자인을 바꾸는 style 속성을 변경하는 메서드이다.

$는 JQuery 메서드의 별칭이고 JQuery에서 html 요소를 선택하는 함수이다.

해당 코드는 아이디가 my-div인 요소를 선택해서 css 메서드로 배경색깔을 빨간색으로 바꾸는 코드이다.

 

 

jQuery("#my-div").css("backgroundColor", "red");

위에서 말한 것 처럼 $는 JQuery 메서드의 별칭이다. 따라서 다음과 같이 작성도 가능하다.

 

 

document.getElementById("my-div").style.backgroundColor='red';

위에서 작성한 JQuery 코드를 DOM 형식으로 작성한 결과이다.

'JQuery' 카테고리의 다른 글

[JQuery] val메서드, getter, setter  (0) 2024.11.18
[JQuery] ready 함수  (0) 2024.11.13
[JQuery] prev, prevAll, next, nextAll, siblings, even, odd  (0) 2024.11.11
[JQuery] 세팅과 사용  (1) 2024.11.07

https://cdnjs.com/libraries/jquery

 

jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

JavaScript library for DOM operations - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

여기서 주소 복사 후 주소창에 검색해서 다른이름으로 원하는 폴더 안에 저장한다.

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #my-div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
    <!-- 받은 jquery 파일 불러오기 -->
    <script src="./js/jquery.min.js"></script>

    <script>
        // 색상을 빨강으로 변경
        function func() {
            $("#my-div").css("backgroundColor", "red");
        }
    </script>
</head>
<body>
    <div id="my-div">

    </div>
    <button onclick="func()">클릭하기</button>
</body>
</html>

 

스크립트로 받은 jquery 파일을 불러온다. 다음과 같이 jquery를 이용해 css를 건드려 div의 색상을 빨강으로 변경할 수 있다.

 

 

 

    <!-- 받은 jquery 파일 불러오기 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 

만약 위 방법이 번거롭다면, 그냥 저 사이트에 있는 주소 그대로 복사 붙여넣기 해도 된다.

'JQuery' 카테고리의 다른 글

[JQuery] val메서드, getter, setter  (0) 2024.11.18
[JQuery] ready 함수  (0) 2024.11.13
[JQuery] prev, prevAll, next, nextAll, siblings, even, odd  (0) 2024.11.11
[JQuery] $ 메서드와 css 메서드 선택자  (0) 2024.11.08

+ Recent posts

티스토리툴바