https://jsfiddle.net/boilerplate/jquery --> 간단히 코드 작성후 테스트 가능
1. JQuery
- JavaScript 라이브러리
- HTML 태그를 선택하고, 해당 태그의 액션을 수행함
- Head 또는 Body에 작성가능.
<Head> .... $("태그명" 등 html요소).액션명(); ... </Head>
1.1. 기본 문법
- $("html태그명" 등 html요소).action()
- 예 :
- $(this).hide() : 현재 요소를 숨깁니다.
- $("p").hide() : 모든 <p> 요소를 숨깁니다.
- $(".test").hide() : 클래스가 "test"인 모든 요소를 숨깁니다.
- $("#test").hide() : 아이디가 "test"인 요소를 숨깁니다.
1.2. Document Ready
- 문서가 로딩되기전에 작업을 수행하면, 오류가 날 수 있음
예) 아직 생성되지 않은 태그를 hide, 이미지 사이즈 가져오기 등
- 따라서, 문서가 로딩되고 난 후에 동작하는것이 바람직함.
- $(document).ready() 로 동작.
$(document).ready(function(){
// jQuery methods go here...
});
1.3. Selector
- $() 괄호안에 해당하는것으로, id, class, type, attribute, 태그명 등 html 요소를 찾음 (CSS와 동일)
- id 를 검색하기 위해서는, $("#id") 으로, #을 붙여야 하며, id는 페이지 내에서 유일해야함.
- class를 검색하기 위해서는, $(".class명") 처럼, .클래스명 으로 작성
1.4. Action
1.4.1. Event
- $()이후 작성하는 액션으로, 이벤트 관련한 항목들 정리
- 사용 예
- $("p").click(); : P 태그 클릭
- $("p").click(function(){ 함수 내용 }); : 클릭시 호출할 함수
- $("input").focus(function(){ $(this).css("background-color", "#cccccc");}); : 인풋 필드에 포커스 on 되었을경우. focus 대신 blur 사용시, 포커스 잃었을경우
1.4.2. hide, show
- 요소를 감추거나 보일때 사용. 인자값으로 speed, callback이 있음.
=> hide(speed,callback);
1.4.3. toggle
- 감춰진 요소는 보여주고, 보여진 요소는 감추는 메소드. 인자값은 hide, show와 동일
1.4.4. fade
- fadein, fadeOut,fadeToggle, fadeTo 가 있으며, 인자값은 speed, callback
예 : $("button").fadeIn()
- fateTo 는, 투명도 조절이 가능함. speed, opacity, callback의 인자값을 가짐
1.4.5. slide
- slideDown, slideUp, slideToggle 이 있으며, 인자값은 speed, callback
1.4.6. animate
- 인자값으로 params, 속도, callback을 가짐
- params의 경우, CSS 속성으로, 여러개를 줄 수 있음
예:
$("div").animate({left:'250px'}); : 오른쪽으로 이동함 (left 0 -> 250으로 이동)
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
=> 다중 속성 적용
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
=> +=을 이용하여 상대값을 적용
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
=> div를 먼저 변수로 할당받고, 해당 변수.animate를 통해 동작
1.4.6. stop
- 애니메이션을 비롯한 특별한 효과가 끝나기 전에 정지함.
- 인자값 : stopAll,gotoEnd
- 예 : $("#panel").stop();
1.4.7. Chaining
- 여러 액션을 이어서 동작하기 위함.
- action1().action2()..... 처럼 .액션 으로 이어서 동작하면 됨.
- 왼쪽 -> 오른쪽 순으로 순차적으로 실행됨.
1.4.8. 컨텐츠와 어트리뷰트
- 항목을 가져오거나, 설정함
- 컨텐츠 : text(), html(), val()
- 어트리뷰트 : attr()
1.4.8.1. 컨텐츠
- $("#text1").text () : 아이디가 text1인 항목의 태그 안의 text를 가져오거나 설정
- $("#text1").html() : 아이디가 text1인 항목의 태그 안의 html을 가져오거나 설정
- $("#input1").val() : 아이디가 input1인 항목의 서식필드 값을 가져오거나 설정
<p id="test">This is some <b>bold</b> text in a paragraph.</p>의
$("#test").html(); => This is some <b>bold</b> text in a paragraph.가 표시됨.
$("#test").text(); => This is some bold text in a paragraph. 가 표시됨
======== val
<input id="test1" value="aa" />
$("#test1").val(); : aa 값을 가져옴
$("#test1").val("bb");으로 할 경우, 값이 bb로 변경됨.
1.4.9. Remove, empty
- Remove : 요소와 해당 자식요소까지 모두 삭제
- empty : 선택된 요소의 자식 제거
예 : $("div").remove() : div의 모든 자식요소 삭제
$("p").remove(".italic") : p 자식중, 클래스가 italic인 자식 삭제
1.4.10. CSS
- addClass()
- removeClass()
- toggleClass()
- css()
1.4.10.1. add, remove,toggleClass
- css 항목을 추가, 삭제, 토글
- 다음의 style이 있다고 할때,
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
$("h1, h2, p").addClass("blue"); : h1, h2, p 태그에 blue 속성 적용
$("h1, h2, p").removeClass("blue"); : h1, h2, p 태그에 blue 속성 제거
$("h1, h2, p").toggleClass("blue"); : h1, h2, p 태그에 blue toggle 적용
1.4.10.1. css
- 하나 이상의 스타일 속성을 설정하거나 반환함.
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
이 있고,
$("p").css("background-color"); 를 수행할경우, 3개중 가장 첫번째 항목을 반환함.
======== 설정 =============
$("p").css("background-color","yellow"); 를 수행할경우, 위의 3개 모두 yellow로 변경됨
=========다중 설정==========
$("p").css({"background-color": "yellow", "font-size": "200%"});
처럼, , 를 통해 다중 설정이 가능함.
1.4.11. 노드 탐색
- 태그는 통상 부모, 자식, 형제의 트리구조로 구성되어 있으므로, 노드 탐색이 가능함.
1.4.11.1. 상위 탐색
- parent : 상위 부모 노드 리턴
- parents() : 상위 모든 부모 리턴 (루트까지)
- parentsUntil() : 검색조건에 맞는 부모까지 리턴
=> $("p").parentsUntil("div"); => p의 부모중 div까지 리턴
1.4.11.2. 하위탐색
- children : 1단계 자식 노드들 리턴
=> $("p").children ("div"); => p의 자식중 div만 리턴
- find() : 하위 자식 모두 리턴
=> $("p").find("*"); => p의 하위항목 모두 리턴
1.4.11.1. 동위 탐색
- siblings() : 모든 동위 노드
- next() : 다음 노드 1개
- nextAll() : 다음 노드 모두
- nextUntil() : 검색 조건에 맞는 다음 노드들
- prev() : 이전 노드 1개
- prevAll() : 이전 모든 노드들
- prevUntil() : 검색 조건에 맞는 노드들
1.4.12. 필터
- first() : 조건의 첫번째 항목 리턴
- last() : 조건의 마지막 항목 리턴
- eq() : 괄호 안에 숫자를 입력하며, 해당 인덱스의 항목 리턴
- filter() : 괄호 안에 조건을 입력하고, 해당 조건에 맞는 항목 리턴
=> $("p").filter(".intro"); => p태그 중 class가 intro인 항목
- not() : 괄호 안에 조건을 입력하고, 해당 조건이 아닌 항목 리턴
2. Ajax with JQuery
- HTTP get, post를 사용하여 외부 서버와 통신을 하기 위함.
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 추가
2.1. load
- 서버 혹은 파일로부터 데이터를 로드
- $("html요소").load(url,data,callback);
- url만 필수이며, data, callback은 선택사항임.
- callback 함수의 경우, responseTxt, statusTxt,xhr의 인자값이 필요함
- responseTxt : 호출 성공시, 반환값
- statusTxt : 호출 성공 여부 판단. "success"나 "error"
- xhr : XMLHttpRequest 객체
- 예 :
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
2.2. get, post
- get : 서버로부터 데이터를 가져옴
- post : 서버로부터 데이터를 가져오며, 데이터를 캐시하지 않음. 요청시 데이터 전송하기도 함
- $.get(URL,callback); 및 $.post(URL,data,callback);으로 호출함. 둘다 URL은 필수이며, 나머지는 옵션
2.2.1. get
- 예 :
$.get("url주소", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
2.2.2. post
- 예 :
$.post("url주소",
{
// 상황에 맞는 데이터.
name: "Donald Duck",
city: "Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
2.3. no conflict
- jquery에서는 $를 사용하는데, 다른 프레임워크에서도 동일하게 $를 사용할 시 둘중 하나는 동작하지 않음.
- no conflict를 통해 $ 대신 다른 문자열로 치환하여 작성 가능함.
- 예 :
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
또한, 함수 내에서 제한적으로 사용되도록 할 수 있음.
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
https://palpit.tistory.com/239?category=843240
'FrontEnd' 카테고리의 다른 글
| vue js 내용정리 (1. 설치 ~ 2.3.8. 컴포넌트 - 이벤트 발생시 사용자 정의함수 호출) (0) | 2022.03.25 |
|---|---|
| FrontEnd 개발 관련 내용정리 (0) | 2022.03.25 |
| HTTPS 상에서 Front-end 페이지 테스트 (0) | 2022.03.24 |
| AWS with JavaScript (0) | 2022.03.24 |
| FrontEnd 개발 관련 내용정리 (개인) (0) | 2022.03.24 |