gabiadesign | 디자이너가 공부하는 jquery – 01
32231
single,single-post,postid-32231,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
img_j01

디자이너가 공부하는 jquery – 01

library

라이브러리란? 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들이다.

 

jQuery란?

1. 엘리먼트를 선택하는 강력한 수단을 제공한다.
2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공한다
3. 자바스크립트로 만들어진 라이브러리

 

기본예제

 

자바스크립트와 jQuery 비교

jQuery JavaScript

$(document).ready(function() {

});

또는

$(function () {
});

 window.onload=function(){
}
 $(“p”).css(“background-color”, “#f60”);

 var p=document.getElementsByTagName(“p”);

p.style.backgroundColor=”#f60″;

 $(“#navi”).css(“background-color”, “#f60”);

 var navi=document.getElementById(“navi”);

navi.style.backgroundColor=”#f60″;

$(“#element1”).on(‘click’, function() {
// do something on click
}또는
$(“#element1”).click(function() {
// do something on click
});
 var x = document.getElementById(“element1”);
if (x.addEventListener) { // IE 9 이상, 타브라우저
x.addEventListener(“click”, myFunction);
} else if (x.attachEvent) { // For IE 8 and earlier versions
x.attachEvent(“onclick”, myFunction);
}

 document.getElementById(“element1”)

.addEventListener(‘click’,doSomething,false);

$(‘#outer’).on(‘mouseup’, function (event) {
alert(‘This alert should not show up!’);
}, false);
document.getElementById(‘outer’).addEventListener(‘mouseup’, function (event) {
alert(‘This alert should not show up!’);
}, false);
 $(“.class1.class2”).eq(0).text(1254);  document.querySelectorAll(‘.class1.class2’)[0].textContent = 1254;
 document.querySelectorAll(‘.class1.class2’)[0].innerHTML = 1254;

 

 

wrapper

jQuery(엘리먼트 오브젝트 | ‘CSS스타일 선택자’) – 함수를 호출할때
괄호 밖이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환한다.

 

 

선택자

참고 : https://api.jquery.com/id-selector/

선택자란?
jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다.

 

기본 선택자
#jquerybtn – id 선택자
.tutorial – class 선택자
li – 엘리먼트 선택자
#jquery, #MYSQL – 다중 선택자

filter 선택자
#list li:eq(2) – 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
#list li:gt(1) – 인자 보다 인덱스가 큰 엘리먼트를 찾아내는 선택자
#list li:lt(2) – 인자 보다 인덱스가 작은 엘리먼트를 찾아내는 선택자
#list li:even – 첫번째, 세번째… 홀 수의 인덱스 값을 가진 엘리먼트에 대한 선택자
#list li:odd – 두번째, 네번째…. 짝 수의 인덱스 값을 가진 엘리먼트에 대한 선택자
#list li:first – 첫번재 인덱스 엘리먼트에 대한 선택자
#list li:last – 마지막 인덱스 엘리먼트에 대한 선택자

속성 선택자
[target*=”BC”] – 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자
[target=”DEFG”] – 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자
[target!=”DEFG”] – 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자
[target^=”B”] – 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자
[target$=”H”] – 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자
[target] – 속성이 존재하는 엘리먼트를 찾아내는 선택자
[target][id] – 속성들이 존재하는 엘리먼트를 찾아내는 선택자

form 선택자
[type=”text”] – 폼 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다.
[type=”text”]:disabled – disabled 속성의 값이 disabled인 엘리먼트를 찾아내는 선택자
[type=”text”]:enabled – disabled 속성의 값이 enabled인 엘리먼트를 찾아내는 선택자
input:checked – 체크박스 중 체크가 된 엘리먼트를 찾아내는 선택자