여러 객체와 class 객체 그리고 제이쿼리

gdhi·2023년 11월 9일

jquery 제이쿼리

JavaScript + JQuery

목록 보기

5/6

❗ 앞서 배운내용은 스킵, 이 책이 더 맘에든다

📖배열 속성 이용하기

Node.js에서 사용하는 것들, 미리 알고 있어야 한다. 더 어려워 짐

📌forEach()

Node.js에서 자주 사용, 향상된 for문
134 페이지
배열.forEach(callback(요소 값, 요소 인덱스, 순회중인 배열))

👉 Jquary 없어서 안됨

👉 이런 식으로 나오게 된다

📌map()

Node.js에서 자주 사용,
배열.map(callback(요소 값, 요소 인덱스, 순회중인 배열))

📌filter()

Node.js에서 자주 사용,
배열.filter(callback(요소 값, 요소 인덱스, 순회중인 배열))

📌reduce()

Node.js에서 자주 사용,
배열.reduce((callback(누적될 값, item 값이 들어올 변수, item의 index 번호가 들어올 변수, 배열)) => {실행문그룹}, 초기값

📌for...in

많이 쓰진 않는다.

📖사용자 객체 만들기

📌사용자 객체 기본형

var 변수명 = new Object(); : 객체를 만든다 (최상위 객체)

변수명.a = 값 : 속성

변수명.b = function(){실행문;} : 기능(메소드)
❗ 위와 같은 식으로 만들면 단일 객체 생성이라 class로 객체를 만드는게 맞다.

📌리터럴 방식으로 만들기

기본형은 안쓰고 리터럴을 많이 쓴다

📌생성자 함수를 사용해 객체 만들기

기본형, 리터럴은 객체가 하나씩 만들어 지지만 함수를 사용하여 여러개를 만들 수 있다.
function 객체 이름(매개변수){
	this.속성 = 변수,
	this.변수 = function(){실행문}
}

👉 기본형

👉 배열형

📌프로토타입을 이용한 매소드 만들기

생성자를 통한 객체 선언
function 객체 이름(매개변수){
	this.속성 = 변수,
	this.변수 = function(){실행문}
}
객체이름.portotype.매소드 = function(){ 실행문 }

생성 완료

👉 함수 재정의, 오버라이딩 하는 것 같다

⭐📖Class 객체 만들기⭐

객체 만드는 것은 역시 이게 제일 편하다
java를 이해해야 한다.

📌class 만들기

java와 거의 유사

📌class 상속

java와 거의 유사

📖객체 표현식

has 관계, java와 다르게 바로 만들어져 있는 것, 나중에 만들어서 넣는게 아님
var a = {

👉 java의 map

📖DOM(문서) 객체란?

Element node : 태그

Text node : 태그 안에 문자열 값

Attribute node : 태그 안 속성 값

📌CSS 선택자

outerHTML : 선택된 요소 밖의 노드를 가져온다. 잘 안씀

📖클래스(classList) 이용하기

.add() : 추가

.remove() : 삭제

.toggle() : 클래스명이 있으면 삭제, 없으면 추가

.contains() : 클래스명이 있으면 true 없으면 false

📖HTML 요소 생성하기

cloneNode(옵션) : 노드를 복사

👁‍🗨Quiz

🎲Quiz1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font: 12px "나눔고딕";
        }
        #wrap{
            position: relative;
            width: 3000px;
            height: 2000px;
            background-color: cyan;
        }
        #box{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100px;
            background: yellow;
        }
        
    </style>
</head>
<body>
    <div id = "wrap">
        <div id = "box"></div>
    </div>

    <script>
        var box = document.getElementById("box");
        box.onclick = function(){
            var a = document.getElementById("box").style.left = (Math.random()*2900) + "px";
            var b = document.getElementById("box").style.top = (Math.random()*1900) + "px";
            document.getElementById("box").style.transition = "top 1s, left 1s";
            document.getElementById("box").style.background = 
            "rgb(" + Math.random()*255 + "," + Math.random()*255 + "," + Math.random()*255 + ")";
        }        
    </script>
</body>
</html>

🎲Quiz2

토끼와 거북이

📖제이쿼리

javascript에서 getElement나 selectquery 같이 접근하기 위해 쓰던 것을 $로 제이쿼리 라이브러리에 연결해 간단하게 쓸 수 있게 해준다.

📌프로그램 라이브러리란?

자바스크립트를 제이쿼리로 작업하면 소스량이 확 줄어든다.

❗ 다운 받을 필요없이 자바스크립트에서 링크해주면 쓸 수 있다.

📌CDN 사용하기

📍HTML 문서에 제이쿼리 라이브러리 연결하기

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  	<script src = "파일경로/제이쿼리라이브러리파일명.js"><script>
</head>

📖제이쿼리 서식

형식 1

<script>$(document.ready(function(){실행문;}));</script>

형식 2

<script>$(function(){실행문;});</script>

📌명령어 사용법

$('선택자').명령어()

$('선택자').명령어(function(){실행문;});

👉 원래대로라면 document.~ 식으로 쓴걸 엄청 줄여준다

📌선택자

📍기본선택자

요소 선택자 : $('p'), p 태그 선택

아이디 선택자 : $('#main'), id속성값 main과 일치하는 요소

클래스 선택자 : $('.sub'), class 속성값 sub와 일치하는 요소 선택

종속 선택자 : $('div p'), div에 있는 자식 또는 자손인 p 요소 선택

자식 선택자 : $('div>h2'), div 자식인 h2 요소 선택

이웃 선택자 : $('h2+p'), h2 다음에 있는 모든 형제 중 p요소 선택

형제 선택자 : $('h2~article'), h2 바로 뒤에 위치한 형제 article 요소 선택

그룹 선택자 : $('#main, .sub, p'), 아이디 main과 클래스 sub 그리고 p 요소 모두 선택

모든 선택자 : $('*'), 모든 요소 선택

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <p><button id = "btn">버튼</button></p>
    <ul id="list1">
        <li class="a">list1 iteml a</li>
        <li class="b">list1 iteml a</li>
        <li class="c">list1 iteml b</li>
        <li class="d">list1 iteml b</li>
    </ul>
    <p class="num">class a</p>
    <q>normal 01</q>
    <p class="b">class b</p>
    <p>normal 02</p>
    <em id = "first">변경 전</em>
    <p id = "second">아무것도 없습니다.</p>
    <p class="olde"><b>변경되었습니다.</b></p>
    <script>
        $(function(){
            $('#btn').click(function(){
                $('.a').css('color', 'red');
                $('#list1').css('background-color', 'yellow');
                $('#first').text('jquery 시작');
                $('.num+q').css('background-color', 'pink');
                $('.num~p').css('background-color', 'orange');
            });
        });
    </script>
</body>
</html>

👉 속성 추가를 2개 이상 하고 싶으면 ,대신 :를 사용하여 "color" : "white", "width" : "100px" 이런 식으로 사용하면 된다

📍제이쿼리 선택자

:even : 인덱스가 짝수 번째인 요소 선택

:odd : 인덱스가 홀수 번째인 요소 선택

:eq(index) : 인덱스가 x(x+1번 째)인 요소 선택

:gt(index) : 인덱스가 x(x+1번 째)뒤에 있는 요소 모두 선택

:lt(index) : 인덱스가 x(x+1번 째)앞에 있는 요소 모두 선택

:first : 첫 번째 요소 선택

:last : 마지막 요소 선택

:only-child : 부모 요소 안에 자식 요소가 하나인 요소 선택

$('ul>li:eq(2)').css('background-color', 'hotpink');

$('ul>li:gt(2)').css('background-color', 'hotpink');

$('ul>li:even').css('background-color', 'hotpink');

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <p><button id = "btn">버튼</button></p>
    <ul id="list1">
        <li class="a">list1 iteml a</li>
        <li class="b">list1 iteml a</li>
        <li class="c">list1 iteml b</li>
        <li class="d">list1 iteml b</li>
    </ul>
    <p class="num">class a</p>
    <q>normal 01</q>
    <p class="b">class b</p>
    <p>normal 02</p>
    <em id = "first">변경 전</em>
    <p id = "second">아무것도 없습니다.</p>
    <p class="olde"><b>변경되었습니다.</b></p>
    <script>
        $(function(){
            $('#btn').click(function(){
                $('#first').text('jquery 시작');
                $('.num+q').css('background-color', 'pink');
                $('.num~p').css('background-color', 'orange');
                $('ul>li:eq(2)').css('background-color', 'hotpink');
                // $('ul>li:gt(2)').css('background-color', 'hotpink');
                // $('ul>li:lt(2)').css('background-color', 'hotpink');
                // $('ul>li:even').css('background-color', 'hotpink');
                // $('ul>li:odd').css('background-color', 'hotpink');
                // $('ul>li:first').css('background-color', 'hotpink');
                // $('ul>li:last').css('background-color', 'hotpink');
            });
        });
    </script>
</body>
</html>

📍기타 선택자

:has(요소) : 특정 요소를 포함하는 요소 선택

:contains('text 노드') : 특정 text를 포함한 요소 선택

:empty : 빈 요소 선택

:parent : 다른 요소를 포함한 요소를 찾는다. 빈칸 하나만 들어 있어도 선택됨

:header : 제목 요소를 찾는다

:not(조건) : 조건에 해당되지 않는 요소만 선택

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h3>제목2</h3>
    <header>제목3</header>
    <button id = "btn" type = "button">클릭</button>
    <ol>
        <li>첫번째 내용</li>
        <li>두번째<span>text</span>내용</li>
        <li>세번째 내용</li>
        <li></li>
        <li>네번째 내용<strong>text</strong>내용</li>
        <li>다섯번째 <span>text</span>내용<span>text</span>내용</li>
        <li>여섯번째 내용</li>
    </ol>
    <script>
        $(function(){
            $('#btn').click(function(e){
                $('li:has(span)').css('border', '3px solid red');
                $('span:only-child').css('background-color', 'skyblue');
                $('li:contains("세번")').css('border', '3px solid #111');
                $('li:empty').text('jQuery');
                $(':header').css('background-color', 'pink');
                $('li:not(:first-child)').css('background-color', 'yellow');
            });
        });
    </script>
</body>
</html>

📍속성 선택자

$('[속성]') : 속성이 있는 특정 요소 선택

$('[속성 = "값"]') : 속성이 값인 요소 선택

$('[속성 *= "값"]') : 속성에 값이 포함 되어 있는 요소 선택

$('[속성 $= "값"]') : 속성에 값으로 끝나는 요소 선택

$('[속성 ^= "값"]') : 속성에 값으로 시작하는 요소 선택

$('[속성 != "값"]') : 속성에 값이 아닌 요소 선택

$('[속성1 = "값1"][속성2 = "값2"]') : 두 조건이 맞으면 요소 선택

:only-child : 부모 요소 안에서 자식이 하나인 요소 선택

📖기본 콘텐츠의 변경

📌요소의 속성 변경하기

$(선택자).attr("속성명") : 선택자의 속성의 해당 값을 가져온다

$(선택자).attr("속성명", "속성값) : 선택자의 속성값을 변경한다

$(선택자).removeAttr("속성명") : 선택자의 속성값을 제거한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <p></p>
    <div id = "EZ"></div>
    <img src = "images/4x.gif">
    <button id = "btn">클릭</button>
    <script>
        $(function(){
            $('p').text('힘내세요!'); // text
            $('div').html('<h1>힘내세요!</h1>'); // html
            console.log($('img').attr('src')); // getAttribute
            $('btn').click(function(){
                // Attribute 내용 바꾸기
                $('img').attr('src', '../Day01/images/4x.gif');
                // Attribute 내용 지우기
                $('div').removeAttr('id');
            });
        });
    </script>
</body>
</html>

📌요소의 스타일 변경하기

앞에서 함

📌클래스 사용하기

$(선택자).addClass() : 선택자에 class 추가

$(선택자).hasClass() : 선택자에 특정한 class가 있는지 찾기

$(선택자).removeClass() :선택자에 class 제거

$(선택자).toggleClass() : 선택자에 class 추가 제거 반복

👉 클래스 추가

👉 클래스 삭제

📖DOM 객체 변형하기

📌객체의 추가하기

$(선택자).prepend("<></>") : 선택자의 내부 맨 앞에 자식요소 추가

$(선택자).append("<></>") : 선택자의 내부 맨 뒤에 자식요소 추가

$(선택자).before("<></>") : 선택자 앞에 요소 노드 추가

$(선택자).after("<></>") : 선택자 뒤에 요소 노드 추가

👉 요소가 추가 됐으므로 복리로 추가 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        p{
            width: 100%;
            height: 50px;
            background-color: yellow;
            border: 3px solid black;
            line-height: 50px;
            padding-left: 20px;
        }
    </style>
</head>
<body> 
    <button id = "btn">버튼</button>
    <p>본문의 내용입니다.</p>        
    <script>
        $(function(){
            $('#btn').click(function(){
                // 빌드업 패턴
                // 내 요소 안 첫번째 추가
                $('p').prepend('<ins>추가된 내용</ins>')
                // 내 요소 안 마지막 추가
                .append("<b>참조바랍니다.</b>")
                // 내 요소 밖에 앞에 추가
                .before('<h1>제목</h1>')
                // 내 요소 밖에 뒤에 추가
                .after('<p class = "last">end</p>');
            });
        });
    </script>
</body>
</html>

gdhi

이전 포스트

간단한 웹 사칙연산 계산기 만들기

다음 포스트