JS의 라이브러리 (jQuery)

Front/js

JS의 라이브러리 (jQuery)

읽히는 블로그 2024. 7. 11. 18:07

▤ 목차

✔ jQuery

⌨ jQuery란?

javaScript 라이브러리이다.

html 속 클라이언트 javascript 작업을 간소화해 생산성을 향상 시켜주도록 설계된 자바스크립트 라이브러리이다.

라이브러리란 프로그램 제작시 자주 사용하는 함수, 서브루틴 등 여러 기능을 모아둔 파일을 의미한다.
재사용성이 높고 프로그램 코드도 간결해진다.

DOM 요소의 속성을 설정한다.
DOM 요소를 생성하거나 삭제, 표시 또는 숨긴다.
클릭 이벤트, 마우스 이동, 동적 스타일 등을 정의한다.
Ajax를 호출한다(비동기적 데이터 교환)

💻 Vanila JS

vanila JS는 외부 라이브러리나 프레임워크를 쓰지 않는 순수한 javaScript를 이르는 말이다.

다른 라이브러리나 프레임워크를 사용했을때보다 빠르고 호환성이 좋을 수 밖에 없지만,

높은 생산성을 달성하기는 쉽지 않다.

jquery 보다도 압도적으로 빠르고 웹표준을 잘 지키는 웹브라우저들에 대해서는 크로스 브라우징이 잘 되는 특성이 있다.

용량도 매우 가볍다. ~~(오히려 압축하는 경우 용량이 더 나가기도..)~~

👏 크로스 브라우징

웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 나오게하는 작업을 말한다.

브라우저마다 렌더링 엔진이 다르기 때문에 표준을 사용하여 모두 정상적으로 작동하도록 설정해줘야한다.

✔ CDN 및 로드방식 차이 알아보기

⌨ CDN

html 문서에 jquery를 연결하는 방법은 여러가지가 있다.

제이쿼리 라이브러리 다운로드하기
URL 이용하기
CDN 사용하기

그중 CDN을 사용하려고 한다.

1번 방식)

https://developers.google.com/speed/libraries?hl=ko#jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

직접 다운로드 받지 않고 CDN으로 가져온다.

위의 url은 https://jquery.com/download/에서 직접 가져온 것이데, 구글 말고 다른 회사의 cdn을 사용할 수 있다.

(다운로드 받은 것과 같이 행동한다.)

2번 방식)

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

가장 최신 버전의 jquery를 사용할 수 있도록 해준다.

💻 $(document).ready 과 window.onload=()=>{}; 차이

window.onload	$(document).ready (= jQuery(document).ready) (= $(function())
모든 요소들이 로드된 이후 호출	DOM이 로드된 후 호출
- 페이지의 모든 요소들이 로드되어야 호출된다. - 한 페이지에서 하나의 window.onload()함수만 적용 가장 나중에 호출된 함수만 적용된다. - <body onload = "">를 사용할 수 있다. <body onload = "">가 더 강력하다.	- 외부 리소스, 이미지 로딩과 상관없이 DOM만 로드되면 바로 실행된다. - $(function(){}) 와 같다.

	window.onload = function(){console.log("window onload 1");}
	window.onload = function(){console.log("window onload 2");}
	window.onload = function(){console.log("window onload 3");} 
	$(document).ready(function(){console.log("document ready 1")});
	$(document).ready(function(){console.log("document ready 2")});
	$(document).ready(function(){console.log("document ready 3")});

👏 중요

$(document).ready()는 여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.

두 함수의 시점의 차이가 있다.

.ready() 호출 시점 : DOM Tree 생성 완료 후

.onload() 호출 시점 : 모든 페이지 구성 요소 페인팅 완료

✔ jQuery 이용 HTML 요소 선택(css)

⌨ 형식

// 선택한 요소에 지정한 스타일 적용
$("css 선택자").css("스타일 속성명","값");

//선택한 요소에 지정한 속성을 적용
$("css선택자").attr("속성명","값");

💻 코드로 보기

👏 요소명 / 클래스명 선택자

<!-- html 파일 -->
<p class="my">초 여름의 시작</p>
<p>더위를 이길 체력 충전</p>

jQuery(document).ready(function(){
	$("p").css("border", "1px solid #f00"); // 태그 요소를 선택
	$(".my").css("border", "1px dotted cyan"); //클래스(후위 선택자)
}

👏 속성 선택자

<!-- html 파일 -->

<div id="kbs">
	<a href="htpps://naver.com">naver target : X</a><br>
	<a href="htpps://naver.com" target="_blank">naver target : O</a><br>
</div>
<br>
<div id="mbc">
	<a href="htpps://daum.com">daum target : X</a><br>
	<a href="htpps://daum.com" target="_blank">daum target : O</a><br>
</div>

$(document).ready(function(){
	$("div > a[target]").css("background-color","#fff");
	$("div > a[href !='htpps://www.naver.com']").css("font-size","24px"); //해당 주소값이 아닐 경우
	
	$("div[id^='mb']").css("background-color","gold"); //정규표현식) id 속성값 : 첫글자(^=)
	$("div[id$='s']").css("background-color","silver"); //정규표현식) id 속성값 : 마지막($=)
	$("a[href*='daum']").css("color","red").css("font-size","40px");
    //href 속성값에 daum이 포함된 경우
});

[정규 표현식]

https://dotheright.tistory.com/165

🪄 실행 중 요소 추가

<!-- html-->
<b>문서에 실행 도중 요소 추가</b>
<hr>
운영체제 종류<br>
<ul>
	<li><i>윈도우</i></li>
	<li>리눅스</li>
	<li>맥</li>
	<li>우분투</li>
</ul>
<div id="show"></div>

$(function(){
	//$('b').prepend('<h2>요소 추가(기존 요소 앞)</h2>');
	$('<h2>요소 추가(기존 요소 앞)</h2>').prependTo('b'); //위와 결과 동일
	
	//$('b').append('<h6>요소 추가(기존 요소 뒤)</h6>');
	$('<h6>요소 추가(기존 요소 뒤)</h6>').appendTo('b');
	
	//요소 수 만클 반복처리
	let ss = "";
	$('li').each(function(){
		//ss +=$(this).text() + ", "; //this 현재 반복대상 요소 text() == innerText
		ss +=$(this).html() + ", "; //this 현재 반복대상 요소 html() == innerHTML
	});
	//$("#show").text(ss);
	$("#show").html(ss);
});

$('b') 는 javascript에서 document.getElementsByTagName('b')와 동일한 결과를 가져온다.

html()은 텍스트의 태그를 인식한다. (즉, 태그를 반영한다.)

text()는 태그를 글자 자체로 인식한다.

🪄 wrap()

<!-- html 파일 -->
<h1>이벤트 기본 이해</h1>

아래와 같이 작성되면 i태그에 감싸진다.

jQuery(document).ready(function(){
	$('h1').wrap('<i>');
}

<i><h1>이벤트 기본 이해</h1></i>

✔ 이벤트

<!-- html 파일 -->
<form>
<label for="txtData">자료입력 : </label> <!-- input을 위한 label이다. -->
<input type="text" id="txtData">
<input type="submit" id="btnOk" value="확인 버튼">
</form>

✨ focus / blur

	$('input').focus(function(){ //onfocus
		$(this).addClass('focusOk');
	});
	$('input').blur(function(){ //onblur
		$(this).removeClass('focusOk');
	});

✨ animate

$('#btnOk').click(function(){
		$('#txtData').animate({
			width: '200px',
			height: '50px'
		},5000);
	});
    
    $('#btnOk').click(function(event){
		event.preventDefault(); //submit 기능 해제
		$('#txtData').animate({
			width: '200px',
			height: '50px'
		},500);
	});

✨ on

위와 동일한 코드이지만 on메서드를 사용하면 ('이벤트', function()) 형식으로 사용한다.

$('a').on('click',function(e){
		e.preventDefault();
		$('#txtData').val('a 태그로 다른 작업');
	});

값을 원하는 input 에다가 넣으려면 val() 메서드를 사용하면 된다.

✨ bind/ unbind

	//on방식
	$('#kbs').on("click",function(){
		console.log($('#kbs').html());
	});

	$('#mbc').bind("click",function(){ //이벤트 연결 후 해제 가능
		console.log($('#mbc').html());
		$('#mbc').unbind("click");
	});

bind를 하면 이벤트가 연결되고 unbind를 하면 이벤트가 풀린다.

😊정리

html 속 클라이언트 javascript 작업을 간소화해 생산성을 향상 시켜주도록 설계된 자바스크립트 라이브러리이다.

javascript에서 사용한 문법은 조금 다르지만 동일한 결과를 출력할 수 있다.