JS Jquery 기본 지식 정리.2

김종민·2023년 7월 25일
0

js

목록 보기
4/25
post-thumbnail

1. 태그 선택하기 - $('selector')

jQuery에서는 $('selecto')로 선택자를 지정할 수 있다.

const h1Elem1 = document.querySelector('h1');	// JavaScript로 태그 선택
const h1Elem2 = $('h1');						 // jQuery로 태그 선택

h1Elem1 === h1Elem2

2. 태그 속성과 HTML 값을 확인하고 변경하기

1. attr() - 태그 속성의 값을 가져오고 변경하기

1. attr() 사용방법

$('selector').attr('태그의 속성 key명', '세팅할 value')

2. attr()를 이용해서 값 가져오기

$('div1').attr('style')

3. attr()를 이용해서 값 변경하기

$('div1').attr('style', 'color : red')

html(), text() - 태그 내부의 텍스트 값을 가져오고 변경하기

  • .html() : 해당 태그 내부의 html 태그가 반영된 텍스트 값이며 html 영역의 html 값을 알기 위한 함수이다. 화면에 html이 적용된다.

  • .text() : 해당 태그 내부의 텍스트 값이며 html 코드 자체를 화면에 출력한다.

val() - 입력 태그의 값을 가져오고 변경하기

jQuery의 .val()는 JavaScript의 .value와 역할이 비슷하다. 주로 select와 input의 값을 얻기 위해 사용된다.

val() 사용방법

$('selector').val('변경할 값');

val()를 이용해서 값 가져오기

let txt1 = document.getElementById('txt1').value;	  // JavaScript로 값 가져오기
let txt2 = $('#txt1').val();						   // jQuery로 값 가져오기 

val()를 이용해서 값 변경하기

txt1.value = 'text2';			// JavaScript로 값 변경하기
$('#txt1').val('text2');		 // jQuery로 값을 가져옴과 동시에 변경하기
profile
웹 퍼블리셔의 코딩 일기

0개의 댓글

관련 채용 정보