반응형
자바스크립트 기반 오픈소스 (.js)
jQuery, Bootstrap, moment, AJAX, AngularJS, react, vue 등
시각화 : chart.js, d3.js 등
jQuery - JavaScript Library
오픈소스 사용방법
1. jQuery 라이브러리를 제공하는 해당사이트 직접 링크
<script
src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous"></script>2. jQuery 라이브러리를 직접 다운 받아서 사용(추천)
[사이트] https://jquery.com/download/
→ Download the compressed, production jQuery 3.6.4
→ 우클릭 → 다른이름으로 링크 저장
→ jquery-3.6.4.min.js 다운
jQuery 시작
selector
jQuery를 사용하여 선택하거나 조작할 HTML 요소를 지정하는 문자열
context
매개변수는 선택기의 컨텍스트로 사용할 DOM 요소를 선택적으로 지정하는 매개변수
jQuery.fn.init
- jQuery.fn.init 객체의 새 인스턴스를 반환
- init 객체의 새 인스턴스를 반환함으로써, jQuery 함수는 jQuery 메서드를 연결하여 사용할 수 있는 강력한 기능인 체이닝을 가능하게함 → 하나의 함수 호출 체인을 사용하여 단일 요소 또는 요소 집합에 대해 여러 jQuery 메서드를 호출할 수 있게 함
체이닝(Chaining)
하나의 객체에 메소드를 연이어 호출하여 사용하는 기법
window.jQuery = window.$ = jQuery;
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
// selector : 선택자
// context : selector가 적용하는 범위를 한정
// 예제 ------------------------------------
$(document).ready(()=>{
$("div").click(()=>{
// this를 제외하고 쓸 경우 모든 h1, p 태그의 text값이 출력
var header = $("h1", this).text();
var paragraph = $("p", this).text();
alert(header + "\\n" + paragraph);
});
});
val()함수 → alert 이용하여 해당 id 태그의 값 출력
// JavaScript 접근
alert(document.getElementById("선택자").value)
// jQuery 접근
alert($("#선택자").val())
이벤트명() 함수 → 이벤트 추가
// JavaScript 접근
document.addEventListener('DOMContentLoaded', () => {
const buttonA = document.querySelector('선택자')
buttonA.addEventListener('click', () => {
window.open("blank.html", "popwin", "width=350,height=300")
})
}
// jQuery 접근
$(document).ready(()=>{
$("#btn_idcheck").click(()=>{
window.open("blank.html", "popwin", "width=350,height=300")
})
})
text()함수와 html()함수 → 태그의 요소 접근
let txt = "<img src='../images/devil.png'>"
// JavaScript 접근
document.getElementById("text").innerText=txt //문자열 그대로 들어가기때문에 문자열로 출력
document.getElementById("html").innerHTML=txt //태그형태로 들어가기때문에 이미지 출력됨
// jQuery 접근
$("#text").text(txt) //문자열 그대로 들어가기때문에 문자열로 출력
$("#html").html(txt) //태그형태로 들어가기때문에 이미지 출력됨
CSS() 함수 → 해당 태그의 스타일에 접근
- Javascript에서 스타일 접근 : document.getElementById("").style
- jQuery에서 스타일 접근 함수 : css()함수
- css(속성명) : getter 개념
- css(속성명, 속성값) : setter 개념
- css({속성명:속성값, 속성명:속성값, 속성명:속성값, ...}) 여러개의 속성을 한꺼번에 세팅(JSON)
//<body>에 있는 <button>요소들 중에서 0번째 접근
$("button:eq(1)").click(()=>{
// getter 함수
let width = $("#box").css("width")
alert(width)
})
$("button:eq(0)").click(()=>{
// setter 함수
$("#box").css("background", "red")
})
$("button:eq(2)").click(()=>{
// JSON : KEY와 Value 구성
let width=800
$("#box").css({
"width" : width,
"height" : 600,
"background" : "url(../images/k7.png)",
"border" : "50px dotted blue"
})
})
attr() 함수 → 해당 태그 속성의 값에 접근
$("button:eq(0)").click(()=>{
// <img>요소의 title속성값을 title변수에 넣기
let title = $("img").attr("title")
alert(title)
})
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| jQuery(2) (0) | 2023.03.30 |
|---|---|
| jQuery 예습 (0) | 2023.03.28 |
| JavaScript(9) - API 사용하기(2) (0) | 2023.02.21 |
댓글