728x90
반응형
jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.
jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"> </script>를 입력해주면 jQuery를 사용하겠다라는 말이 된다. 사용하는 script로직 이전에 넣어줘야한다. 순서에 유의하지 않으면 jQuery문법이 html에서 먹지않는다.
제어 대상 찾기 예제
<body>
<ul>
<li>WEB</li>
<li>HTML</li>
<li class=active>CSS</li>
<li id=javascript>Javascript</li>
<li>SAPUI5</li>
</ul>jQuery
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"> </script>
<script>
$("li").css("color", "gray");
$(".active").css("color", "skyblue");
$("#javascript").css("font-size", "20px").css("color", "green"); //css사용뒤 또 css사용가능
</script>
</body>태그, Class, Id 모두 사용가능하다.
Javascript
<script>
var aLiTag = document.queryselectorAll("li");
for (var i=0; i<aLiTag.length; i++){
aLiTag[i].style.color = "red";
}
</script>
</body>자바스크립트에선 이런식으로 변수를 선언해서 데이터를 변수에 넣은 뒤 사용했다. jQuery에서는 변수선언을 하지 않고 $로 바로 사용할 수 있는 편리함이 있다.
속성 예제
daum 텍스트를 클릭하면 daum 페이지가 나온다. 버튼을 클릭한뒤 다시 daum 텍스트를 클릭하면 naver 페이지가 나오게 한다.
<body>
<ul>
<li><a id=target target="_blank" href="https://www.daum.net">daum</a></li>
</ul>
<button onclick="changeHref();">change</button>jQuery
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"> </script>
<script>
function changeHref() {
$("#target").attr("href", "https://www.naver.com");
}
</script>
</body>Javascript
<script>
var oTag = document.querySelector("#target");
oTag.setAttribute("href", "https://www.naver.com");
</script>
</body>728x90
반응형
'Fiori > UI5' 카테고리의 다른 글
| [JavaScript] To Do List 예제 (1) | 2023.03.07 |
|---|---|
| [JavaScript] 회원정보 예제 (1) | 2023.03.07 |
| [JavaScript] JSON (0) | 2023.03.07 |
| [JavaScript] 이벤트 (0) | 2023.03.07 |
| [JavaScript] Element 속성 (0) | 2023.03.07 |
댓글