jquery CDN jquery
1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
versions:2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
페이지 로딩후 이벤트 jquery
<script>
$(document).ready(
function(){
alert("로딩 완료");
}
);
</script>
<script>
$(function(){
alert("심플버전");
});
</script>
jquery 엘리먼트 선택
-태그
$('tr')
$('div')
-id
$('#id')
-class
$('.class')
-태그.클래스 태그 태그
$('div.class a span')
jquery 필터
필터 : 특정 아이템을 제거하고 필요한 것만 남김
필터 => ":" 로 표시
:even => 짝수번째 엘리먼트
:odd => 홀수번째 엘리먼트
:first => 첫번째 엘리먼트
:last => 마지막 엘리먼트
:eq => 특정 엘리먼트 선택시
jquery css 프로퍼티 사용
- css 호출
$('#simple').css('height');
$('#simple').css('width');
$('#simple').css('font-size');
- css 입력
$('#simple').css('height','300px');
$('#simple').css('width','200px');
$('#simple').css('font-size','12px');
$('#simple').css('background-color','#ff0000');
- css 다중 입력
$('#simple').css({'height':'300px','width':'200px'});
jquery css 클래스 추가/삭제
$('#simple').addClass('클래스네임');
$('#simple').removeClass('클래스네임');
hide, show, toggle jquery
$('#simple').show(); //보이기
$('#simple').hide(); //숨기기
toggle 이용한 보이기,숨기기
$('#simple_btn').click(
function(){
if($('#simple').is(':visible')){
$('#simple').hide();
//$(this).hide();
}else{
$('#simple').show();
//$(this).show();
}
}
);
toggle 이용한 value값 변경
$('#simple_btn').click(
function(){
if($('#simple').is(':visible')){
$('#simple').val("hide");
//$(this).val("hide");
}else{
$('#simple').val("hide");
//$(this).val("show");
}
}
);
jquery 엘리먼트 추가/삭제
- 형제 노드로 추가할 경우
$('<input type="button" value="추가" id="btn">').insertAfter('#simple');
$('<input type="button" value="추가" id="btn">').insertBefore('#simple');
- 자식 노드로 추가할 경우
$('<strong>시작</strong>').prependTo('#simple');
$('<strong>끝</strong>').appendTo('#simple');
- 엘리먼트 삭제
$('#simple').remove();
$('#simple').remove(':contains("텍스트")');
jquery 내용 바꾸기
$('span').html("변경");
$('span').innerHTML("변경");
$('span').text("변경");
jquery 부가적인 함수
.slideToggle();
.fadeIn();
.fadeOut();
.mouseover();
.mouseout();
.hover(); - [mouseover, mouseout]
.end() : 선택식을 한단계 전으로 돌린다.
.filter() : 필터
.prev() : 앞의 형제노드
this 선택자 jquery
자기 자신을 호출할때나, 같은 태그가 반복될시
$("span", this).text('추가');
$("span", this).remove().text('삭제');
jquery checkbox 모두선택
if($("#simple_chkbox").attr("checked")){
$("input[name=chk]:checkbox").attr("checked", true);
}else{
$("input[name=chk]:checkbox").attr("checked", false);
}
jquery style 사용
$("#simple").attr("style", "display:none");
jquery 기본 css 셀렉터
* : 모든 엘리먼트와 일치
E : 태그명이 E인 모든 엘리먼트와 일치
E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F) : 태그명이 F인 자손을 하나 이상 가지고 태그명이 E인 모든 엘리먼트와 일치
E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생락은 *.C와 동일함
E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함
E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V] : 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V] : 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V] : 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V] : 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
jquery 위치 기반 셀렉터 jquery
- 페이지에서 처음으로 일치하는 엘리먼트
:first
- 페이지에서 마지막으로 일치하는 엘리먼트
:last
- 첫번째 자식 엘리먼트
:first-child
- 마지막 자식 엘리먼트
:last-child
- 형제가 없는 모든 엘리먼트
:only-child
※ n은 1부터 시작
- n번째 자식 엘리먼트
:nth-child(n)
- 짝수 또는 홀수 자식 엘리먼트
:nth-child(even|odd)
- 전달된 공식에 따른 n번째 자식 엘리먼트
:nth-child(Xn+Y)
- 페이지 전체의 짝수 / 홀수 번째 엘리먼트
:even / :odd
n은 0부터 시작
- n번째로 일치하는 엘리먼트
:eq(n)
- n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
:gt(n)
- n번째 엘리먼트(포함되지 않음 ) 이전의 엘리먼트와 일치
:li(n)
jquery 필터 종류
|
:animated |
현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다 |
|
:button |
모든 버튼을 선택한다 |
|
:checkbox |
체크박스 엘리먼트만 선택한다 |
|
:checked |
선택된 체크박스나 라디오 버튼만을 선택한다 |
| :contains(foo) |
텍스트 foo를 포함하는 엘리먼트만 선택한다 |
|
:disabled |
인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다 |
|
:enabled |
인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다 |
|
:file |
모든 파일 엘리먼트를 선택한다 |
| :header |
헤더 엘리먼트만 선택한다 |
|
:hidden |
감춰진 엘리먼트만 선택한다 |
|
:image |
폼 이미지를 선택한다 |
|
:input |
input 엘리먼트만 선택 |
|
:not(filter) |
필터의 값을 반대로 변경 |
|
:parent |
빈 엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 선택 |
| :password |
패스워드 엘리먼트 선택 |
|
:radio |
라디오 버튼 엘리먼트 선택 |
|
:reset |
리셋 버튼 엘리먼트만 선택 |
|
:selected |
선택된 엘리먼트만 선택 |
|
:submit |
전송 버튼을 선택 |
|
:text |
텍스트 엘리먼트만 선택 |
|
:visible |
visible 엘리먼트만 선택 |
jquery Command
|
size() |
엘리먼트 개수를 리턴 |
|
get(index) |
집합에서 하나 또는 모든 엘리먼트를 반환, index 생략하면 전체 배열을 반환 |
|
index(element) |
집합에서 element를 찾고, 집합에서 엘리먼트의 인덱스를 반환한다. |
|
add() |
엘리먼트를 추가한다. html, 셀렉터, 엘리먼트, 배열 등을 넣을 수 있다. |
|
not() |
집합에서 엘리먼트를 제거한다. |
|
filter() |
표현식이나 필터링 함수를 이용해서 필터링한다. |
|
slice(시작, 끝) |
집합에서 연속하는 일부분을 반환한다. 0부터 시작 |
|
find() |
전달된 표현식과 일치하는 엘리먼트를 반환한다 |
|
is() |
전달된 표현식과 일치하는 엘리먼트가 있는지 확인한다. [ex : true, false] |
|
children() |
엘리먼트의 자식으로 구성된 배열 반환 |
| contents() |
콘텐츠로 구성된 배열을 반환 |
|
next() |
바로 다음에 나오는 형제 엘리먼트를 반환 |
|
nextAll() |
바로 다음에 나오는 모든 형제 엘리먼트 반환 |
|
parent() |
바로 위 부모로 구성된 배열 반환 |
|
parents() |
엘리먼트의 조상 엘리먼트 배열 반환 |
|
prev() |
바로 이전의 형제 배열 반환 |
|
prevAll() |
이전의 모든 형제 배열 반환 |
|
siblings() |
모든 형제 엘리먼트 배열을 반환 |
|
end() |
이전 확장 집합으로 돌아간다. |
|
andself() |
집합 두개를 하나로 합친다. |
|
each() |
모든 엘리먼트를 순회하면서 호출 |
| attr() |
어트리뷰트 값을 가져온다. |
파일 이름바꾸기.exe
VisiPics-1-30 (중복사진 제거).zip
pclzip.lib.php
실시간t세션저장.php