[jquery]jquery 사용하기

HTML 문서의 탐색, 이벤트 처리, 애니메이션, Ajax 상호작용 등을 간편하게 할 수 있도록 도와주는 JavaScript 라이브러리이다. java script코드를 간결하고 직관적인 문법으로 볼 수 있다.

document.getElementById('div1')
document.querySelectorAll('#div1')
아래와 같이 간소화 할 수 있다.
$('#div'): #div를 call 한다.

 

jquery 사용방법  

•  jquery 라이브러리를 다운받아서 사용설정해야한다.
  <script src="jslibrary/jquery-3.7.1.js"></script>
  <script src="jslibrary/jquery-3.7.1.slim.min.js"></script> ~>공백,엔터를 없앤 파일, 서버의 부담이 적다.
• cdn에서 자동으로 다운받도록 설정한다.
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

jquery 자매 사이트

▪ https://jquery.com/
▪ https://jqueryui.com/
▪ https://jquerymobile.com/

 

예제

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

 

 

참고 : [html/css] Selector(선택자) 총 정리

[html/css] Selector(선택자) 총 정리

형식:

 $('선택자').html('<태그>내용</태그>') 

 $('선택자').css('속성', '속성값') 

$('선택자'). css({
속성: "속성값",
color : 'orange'
})

 $('선택자').on('동작', function(){} 

 $("요소[속성= '속성값']:요소상태") 

ex) $("input[name = 'package']:checked")

$(function(){}); ==
$(document).ready(function(){});

:window.onload 의 역할을 수행 - DOMContentLoaded 이벤트 사용(객체가 생성되어 준비되는 시점에 호출됨.)

 

문자열 데이터를 XML문서로 반환하기

①

let xmlDoc = $.parseXML(data)

 

②

 

let  xmlDoc   =  new DOMParser().parseFromString(data, 'text/xml');