22-11-02-jQuery & Ajax (1)

라이브러리

자주 사용하는 코드를 재사용할 수 있는 형태로 가공하여 프로그래밍 효율을 높여주는 코드를 뜻한다.

자바스크립트의 라이브러리 중 하나인 jQuery가 있다.

jQuery

자바스크립트 라이브러리
아직까지는 jQuery 사용하는 곳이 존재한다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

• jQuery 사용하기

<section>
  <h2>hello</h2>
</section>
<script>
	$('h2').click(function() {alert('hi')});
  	$('h2').css('background-color','pink');
  	$('.main-cont').html('<strong>hello wolrd!!!</strong>');
</script>

jQuery 필터

<ul>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
</ul>
<script>
  	// 해당 번째수 선택 (0부터 시작)
	$('li').eq(0).css('color','pink');
  	$('li:eq(2)').css('color','pink');
  	
  	// gt : 큰 숫자 선택 (6보다 큰 수부터)
  	$('li:gt(6)').css('color','pink');
  
  	// even : 짝수 선택 (0, 2, 4,...)
  	$('li:even').css('color','pink');
</script>

• attributeEquals : 특정 값과 동일한 값을 가진 지정된 속성이 있는 요소 선택 [이름='값']

<input name="mansd-news" /><br>
<input name="milkmanews" /><br>
<input name="letterman2qasd" /><br>
<input name="newmilkass"/>
 
<script>
  // input 태그에 man이 존재하는 경우 val 값으로 변경해주기
  $("input[name*='man']").val('has man in it!');
	$("ul").has("li").addClass("full");
</script>

실행방법

$('') 부분에 코드가 적용 될 부분을 작성

// 값 읽어오기
$('one').val();
// 값 쓰기
$('one').val('hello');

let $value = $('one');

$('#four').click(function() {
  	// 입력된 값 가져오기
	let value = $('#one').val();
  	// 초기화 시켜주기 (빈 값으로)
  	$('#one').val('');
  	// input 태그에 작성 - val
  	$('#two').val(value);
  	// p태그에 작성 - text
  	$('#three').text(value);
})

변수 앞에 $ 사용하는 이유 -> 뒤에 연결되는 메서드 체이닝이 jQuery로 가능하다는 것을 명시

메소드	특징
.text()	텍스트 내용 받아오기
.html()	html코드 설정하거나 받아오기
.val()	form 요소 값 설정하거나 받아오기

DOM 탐색

jQuery에서도 DOM 탐색이 가능하다

$('div').children();
$('div').parent();
// 뒤에 추가
$('div').append('hello');
// 앞에 추가
$('div').prepend('hello');
// 지우기
$('div').remove();
// 클래스 있으면 빠지고 없으면 생김
$('h1,h2,p').toggleClass('blue');