-
JS의 라이브러리 (jQuery)Front/js 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("속성명","값");
https://ococ99.tistory.com/193 💻 코드로 보기
👏 요소명 / 클래스명 선택자
<!-- 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에서 사용한 문법은 조금 다르지만 동일한 결과를 출력할 수 있다.
'Front > js' 카테고리의 다른 글
html 에서 javascript 다루기 (0) 2024.07.23 Ajax 사용, DB 읽어와서 웹브라우저에 보이기(레거시 방식 jsp) (2) 2024.07.10 Ajax) get방식/ post 방식 데이터를 받기 (0) 2024.07.10 Ajax( Asynchronous JavaScript and XML / XMLHttpRequest ) (2) 2024.07.09 JavaScript) 모듈이란? (0) 2024.07.08