[jQuery]사용방법, 문법, 요소 값 변경/ 접근, 스타일 제어

Front-end/jQuery

[jQuery]사용방법, 문법, 요소 값 변경/ 접근, 스타일 제어

PolarJin 2024. 10. 15. 15:05

크로스브라우징 문제를 해결하기 위해 제이쿼리가 등장. 편의성을 높임

*크로스브라우징: 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업. HTML5, CSS3, JavaScript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법. 브라우저마다 랜더링 엔진이 다르기 때문에 크로스브라우징 작업이 필요.

*크로스브라우징 문제: 여러 웹 브라우저 간의 호환성 문제로 인해 발생.

▶︎ jQuery 라이브러리 추가

jQuery 문법 사용을 위한 2가지 방법

둘 중 하나의 방식을 선택해서 하면 된다.

1. jQuery 파일을 다운받아 로드

<script src="js/jquery-3.4.1.min.js"></scipt>

2. CDN(Content Delievery Network)방식으로 압축되지 않은 버전 jQuery 라이브러리 가져오기

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

▶︎ jQuery를 사용하는 방법

jQuery 문법

📌 $(요소명 | 선택자)
: $(..)안에 선택자를 넣어 원하는 HTML요소를 선택하여 jQuery객체(하나의 요소 또는 여러 개의 요소)로 반환

//1. 태그 가져오기
	//$를 인식할 수 없는 에러 -> 라이브러리 추가했는지 생각해볼 것
    let li_tags = $('li');
    console.log(li_tags);
    
    li_tags.css('color','red');

jQuery 문법

📌 $(요소명 | 선택자).동작 메소드();
: 요소선택자를 이용하여 원하는 HTML요소를 선택하고 동작 메소드를 정의하여 선택된 요소에 원하는 동작을 설정

//동작 메소드
	//2. 텍스트 가져오기/변경하기
    //JS -> innerText
    //jQuery -> text()
    let span_tag = $('span')
    //값 가져오기
    console.log(span_tag.text());
    //값 변경하기
    span_tag.text("Hello World!");

jQuery 요소 값 변경/ 접근

📌 .html(htmlString)
:HTML code(contents 포함)를 접근하거나 초기화하는 메소드
📌 .text(String)
:HTML요소의 contents(내용)만 접근하거나 초기화하는 메소드

JS-> innerHTML
jquery -> html()태그 요소를 추가하고 싶을 때 사용

//3. HTML contents 수정하기
let abc = $('#abc');
abc.html('<p>바나나</p>');

jQuery 요소 값 변경/접근

📌 $('h1').html();
:h1 요소의 HTML code(contents 포함)에 접근 => get 역할
📌 $('h1').html('<a href="#">jQuery</a>');
:h1 요소 안에 내용을 'jQuery'라는 내용을 가진 a태그로 변경 => set역할

jQuery 스타일제어

📌 .css(스타일속성, 값)
선택한 요소의 스타일 속성을 접근하거나 설정하는 메소드

//6. css변경하기
	$('span').css('color','green')

jQuery 스타일 제어

$('li').css('color','blue');
:li요소들의 글자색을 파란색으로 변경한다.

▶︎ jQuery추가 기능

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

<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.7.0.js"
        integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
    <style>
        .newClass {
            color: red;
        }
    </style>
</head>

<body>
    <div id="area">
        <span>base</span>
    </div>
    <button id="append">append</button>
    <button id="prepend">prepend</button>
    <button id="after">after</button>
    <button id="before">before</button>
    <button id="remove">remove</button>
    <button id="empty">empty</button>
    <button id="addClass">addClass</button>
    <button id="removeClass">removeClass</button>
    <script>
        // 1. HTML Element 추가하기
        $('#append').click(() => {
            $('#area').append("<span>hello</span>") //append() : 요소 내부 content 뒤에 (자식으로)값 추가
        })

        $('#prepend').click(() => {
            $('#area').prepend("<span>hello</span>") //prepend() : 요소 내부 content 앞에 값 추가
        })
        $('#after').click(() => {
            $('#area').after("<span>hello</span>") //after() : 요소 뒤에 (형제요소로) 값 추가
        })
        $('#before').click(() => {
            $('#area').before("<span>hello</span>") //before() : 요소 앞에 값 추가
        })

        // 2. HTML Element 삭제하기

        $('#remove').click(() => {
            $('#area').remove("<span>hello</span>") //remove() : 태그 요소 삭제
        })
        $('#empty').click(() => {
            $('#empty').empty("<span>hello</span>") //empty() : 요소 내부 content 삭제, 태그요소는 그대로 유지
        })

        // 3. 요소 속성으로 class 추가/삭제
        $('#addClass').click(() => {
            $('#area').addClass('newClass')
        })

        $('#removeClass').click(() => {
            $('#area').removeClass('newClass')
        })

        //4. 부모/자식 요소 접근
        let p = $('#area > span').parent() //parent 부모요소에 접근가능
        console.log(p)//div태그 아래 있는 span 태그에 접근해서 다시 부모요소로 접근.

        let c = $('#area').children()//children 자식요소에 접근 
</script>
</body>

</html>