Java Script/JQuery
JQuery 기본
서으이
2020. 10. 31. 12:26
728x90
반응형
라이브러리란?(library)
자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들
jQuery란?
1. 엘리먼트를 선택하는 강력한 방법과
2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
3. 자바스크립트 라이브러리
즉 모든 브라우저에서 이벤트가 발생할 때 동작하는 클라이언트 자바스크립트 라이브러리(=결과값)
- input box 값이 있는지 없는지 여부. 안에 텍스트 길이가 몇글자
- check box 체크 되었는지 확인
- combo box 선택되었는지 확인
- Grid 화면에 뿌려진 목록이 있는지 확인
- img 이미지가 보이는지 안보이는지
- button 버튼이 지정되었는지 확인
참고) 요소(element, 엘리먼트)
'<태그> 내용 </태그>'에서 밑줄 친 전체를 뜻하는 단어.
즉, 태그를 포함해 태그로 감싼 내용까지 모두 '요소'라고 하며 내용을 포함해 시작 태그와 종료 태그까지를 일컫는다.
레퍼(wrapper)란?
jQuery(엘리먼트 오브젝트 | 'CSS 스타일 선택자')
붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환.
jQuery로 시작하여 괄호()가 열리고 닫치며 어떤 함수를 호출할 때 사용하는 문법
즉, jQuery라는 이름을 가지고 있는 함수를 호출하는 것이고 그 인자로 엘리먼트 오브젝트를 전달하거나 CSS 스타일의 선택자를 전달하는 것
선택자란?
제이쿼리에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있습니다.
이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있습니다.
zetawiki.com/wiki/JQuery_%EC%85%80%EB%A0%89%ED%84%B0
선택한 요소의 저장
제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용할 수 있습니다.
다음 예제는 문서 내의 모든 <li> 요소를 선택하여 변수에 저장한 후, 해당 변수를 사용하는 예제입니다.
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
font-size:12px;
}
.selected,.selected_parent {
background-color: red !important;
color:white;
border:2px solid red !important;
}
input.btn {
width:130px;
}
ul, .on{
float:left;
width:150px;
padding-left:20px;
margin:0;
}
textarea{
float:left;
width: 400px;
height:150px;
font-size:11px;
margin-left:20px;
}
.clear{
clear: both;
}
.sample{
margin-bottom: 20px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<fieldset>
<legend> 기본 </legend>
<div class="sample">
<ul id="tutorials">
<li class="tutorial" id="HTML"> HTML </li>
<li class="tutorial" id="CSS"> CSS </li>
<li class="tutorial" id="javascript"> javascript </li>
<li class="tutorial" id="jquery"> jQuery </li>
<li class="tutorial" id="PHP"> PHP </li>
<li class="tutorial" id="MYSQL"> MYSQL </li>
</ul>
<textarea>
<ul id="tutorials">
<li class="tutorial" id="HTML"> HTML </li>
<li class="tutorial" id="CSS"> CSS </li>
<li class="tutorial" id="javascript"> javascript </li>
<li class="tutorial" id="jquery"> jQuery </li>
<li jclass="tutorial" id="PHP"> PHP </li>
<li class="tutorial" id="MYSQL"> MYSQL </li>
</ul>
</textarea>
<div class="clear"></div>
</div>
<input class="btn" type="button" id="#jquerybtn" value="#jquery" /> - id 선택자 <br />
<input class="btn" type="button" id=".tutorial" value=".tutorial" /> - class 선택자 <br />
<input class="btn" type="button" value="li" /> - 엘리먼트 선택자 <br />
<input class="btn" type="button" value="#jquery, #MYSQL" /> - 다중 선택자 <br />
</fieldset>
<fieldset>
<legend> filter </legend>
<div class="sample">
<ul id="list">
<li> HTML </li>
<li> CSS </li>
<li> javascript </li>
<li> PHP </li>
<li> MYSQL </li>
</ul>
<textarea>
<ul id="list">
<li> HTML </li>
<li> CSS </li>
<li> javascript </li>
<li> PHP </li>
<li> MYSQL </li>
</ul>
</textarea>
<div class="clear"></div>
</div>
<input class="btn" type="button" value="#list li:eq(2)" /> - 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="#list li:gt(1)" /> - 인자 보다 인덱스가 큰 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="#list li:lt(2)" /> - 인자 보다 인덱스가 작은 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="#list li:even" /> - 첫번째, 세번째... 홀 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />
<input class="btn" type="button" value="#list li:odd" /> - 두번째, 네번째.... 짝 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />
<input class="btn" type="button" value="#list li:first" /> - 첫번재 인덱스 엘리먼트에 대한 선택자 <br />
<input class="btn" type="button" value="#list li:last" /> - 마지막 인덱스 엘리먼트에 대한 선택자 <br />
</fieldset>
<fieldset>
<legend> 속성 </legend>
<div class="sample">
<ul id="attribute">
<li target="ABCD">ABCD</li>
<li target="BCDE">BCDE</li>
<li target="CDEF">CDEF</li>
<li target="DEFG">DEFG</li>
<li target="EFGH">EFGH</li>
<li id="FGHI" target="FGHI">FGHI</li>
</ul>
<textarea>
<ul id="attribute">
<li target="ABCD">ABCD</li>
<li target="BCDE">BCDE</li>
<li target="CDEF">CDEF</li>
<li target="DEFG">DEFG</li>
<li target="EFGH">EFGH</li>
<li id="FGHI" target="FGHI">FGHI</li>
</ul>
</textarea>
<div class="clear"></div>
</div>
<input class="btn" type="button" value="[target*="BC"]" /> - 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target="DEFG"]" /> - 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target!="DEFG"]" /> - 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target^="B"]" /> - 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target$="H"]" /> - 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target]" /> - 속성이 존재하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target][id]" /> - 속성들이 존재하는 엘리먼트를 찾아내는 선택자
</fieldset>
<fieldset>
<legend>Form</legend>
<div class="live">
<div>
<input type="text" disabled="disabled" value="disabled" />
<input type="text" value="enabled"/>
</div>
<div><input type="checkbox" checked="checked" /></div>
<div><input type="checkbox" /></div>
</div>
<textarea class="sample">
<div>
<input type="text" disabled="disabled" value="disabled" />
<input type="text" value="enabled"/>
</div>
<div><input type="checkbox" checked="checked" /></div>
<div><input type="checkbox" /></div>
</textarea>
<div class="clear"></div>
<input class="btn" type="button" value="[type="text"]" /> - 폼 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다. <br />
<input class="btn" type="button" value="[type="text"]:disabled" /> - disabled 속성의 값이 disabled인 엘리먼트를 찾아내는 선택자<br />
<input class="btn" type="button" value="[type="text"]:enabled" /> - disabled 속성의 값이 enabled인 엘리먼트를 찾아내는 선택자<br />
<input class="btn" type="button" value="input:checked" /> - 체크박스 중 체크가 된 엘리먼트를 찾아내는 선택자 <br />
</fieldset>
<script>
$('input').on('click', function() {
$this = $(this);
$('*').removeClass('selected');
switch($this.attr('value')) {
case '#jquery':
$('#jquery').addClass('selected');
break;
case '.tutorial':
$('.tutorial').addClass('selected');
break;
case 'li':
$('li').addClass('selected');
break;
case '#jquery, #MYSQL':
$('#jquery, #MYSQL').addClass('selected');
break;
case '#list li:eq(2)':
$('#list li:eq(2)').addClass('selected');
break;
case '#list li:gt(1)':
$('#list li:gt(1)').addClass('selected');
break;
case '#list li:lt(2)':
$('#list li:lt(2)').addClass('selected');
break;
case '#list li:even':
$('#list li:even').addClass('selected');
break;
case '#list li:odd':
$('#list li:odd').addClass('selected');
break;
case '#list li:first':
$('#list li:first').addClass('selected');
break;
case '#list li:last':
$('#list li:last').addClass('selected');
break;
case '[target*="BC"]':
$('li[target*="BC"]').addClass('selected');
break;
case '[target="DEFG"]':
$('li[target="DEFG"]').addClass('selected');
break;
case '[target!="DEFG"]':
$('li[target!="DEFG"]').addClass('selected');
break;
case '[target^="B"]':
$('li[target^="B"]').addClass('selected');
break;
case '[target$="H"]':
$('li[target$="H"]').addClass('selected');
break;
case '[target]':
$('li[target]').addClass('selected');
break;
case '[target][id]':
$('li[target][id]').addClass('selected');
break;
case '[type="text"]':
$('[type="text"]').addClass('selected');
break;
case '[type="text"]:disabled':
$('[type="text"]:disabled').addClass('selected');
break;
case '[type="text"]:enabled':
$('[type="text"]:enabled').addClass('selected');
break;
case 'input:checked':
$('input:checked').parent().addClass('selected');;
break;
}
})
</script>
</body>
</html>
|
cs |
많이 쓰이는 기본 문법
- CSS변경
|
$(selector).css("backgrund", "red");
|
cs |
페이지 로드
|
$(document).ready(function () { });
|
cs |
버튼 밎 이미지, 텍스트 클릭시 이벤트 조작 방법
|
$("#버튼").bind("click", function (e) { });
|
cs |
클래스 변경
|
$("div").addClass("blue"); //추가
$("div").removeClass("blue"); //삭제
$("div").hasClass("blue"); //존재 여부 확인
|
cs |
속성 변경(attr)
|
$("img").attr("tittle", "반갑습니다");
|
cs |
블럭 감추기/보이기
|
$("테스트div").show("blue");
$("테스트div").hide("blue");
|
cs |
728x90
반응형