J Query 개요
- https://jquery.com/
- 자바스크립트를 좀 더
- $(선택자) jquery 함수로 html 문서객체를 호출하면 참조값은 배열에 담겨온다.
배열이지만 jquery기능이 추가된 배열로 return 됨. - 선택된 문서객체에 대한 동작을 한다.
- 선택된 문서객체들은 jquery의 동작(기능)이 담겨 있는 array에 담기게 되고, 하나하나의 요소들에게 동작을 입혀준다.
- 값을 넣어주는 동작을 할 경우, action이 한번끝나면 jquery기능이 합쳐진 배열로 돌려준다.(다음 동작 가능)
값을 읽어오는 동작을 할 경우, 다음 동작을 할 수 없다.
//선택된 문서객체들은 모두 동작에 영향을 받는다.
$(선택자).action1(값).action2(값). ...;
DOM Traversal and Manipulation
//javascript로 표현
<div>div1</div>
<div>div1</div>
<div>div1</div>
<div>div1</div>
for(var i=0; i<4; i++){
document.querySelectorAll("div")[i].innerText="gura";
}
//jquery 로 표현
for(var i=0; i<4; i++){
$("div").text("gura");
}
Event Handling
//button을 클릭했을때 어떤 동작을 실행하려는 경우
<button id="one"> contents </button>
//1. javascript 버전
document.querySelector("#one").addeventListenr("click", function(){});
//2. jquery 버전 1.
$("#one").on("click", function(){});
//2. jquery 버전 2.
$("#one").click(function(){});
jquery Selector(선택자)
- HTML 문서객체에 접근하여 요소를 찾기 위해 CSS 선택자를 사용한다
- 선택된 HTML 문서객체들은 배열(array)에 담긴다.
- 선택자에 올 수 있는 것들의 예시 "<li></li>" , document , this , "div" , ".my-class" , "#one"
//선택자 연습
<body>
<p id="one">p1</p>
<p class="my-class">p2</p>
<p class="my-class">p3</p>
<input type="text" id="two"/>
<input type="text"/>
<select id="three">
<option value=""></option>
<option value="piano">피아노</option>
<option value="reading">독서</option>
<option value="tennis">테니스</option>
</select>
<script src="./js/jquery-3.3.1.js"></script>
<script>
//.action("값"); 은 값을 넣어주는 동작을 한다.
//1. 모든 p 요소를 선택해서 글자색을 파란색으로 바꾸기
$("P").css("color", "blue");
/*
2. class명이 my-class인 요소를 선택해서 innerText를 "김구라"로,
배경색을 노란색으로
*/
$(".my-class").text("김구라");
//3. 아이디가 one인 요소를 선택해서 글자크기 늘리기
$("#one").css("font-size","30px");
//4. 아이디가 two인 요소를 선택해서 value 값"해골" 넣기
$("#two").val("해골");
//5. select 요소의 value 값을 강제 지정할 수 있다.
$("#three").val("reading");
//.action(); 은 값을 읽어오는 동작을 한다.
//2.#one인 innerText값 읽어오기
$("#one").text();
//3. value값 읽어오기
$("#two").val();
//4. css의 font-size 값 읽어오기
$("#two").val();
</script>
</body>
jquery 작성위치
기본적인 작성 위치는 vanillaJS와 같다.
(참고 : https://sallykim5087.tistory.com/6)
그러나 jquery 문서를 로딩해주지 않으면 jquery 문법을 사용할 수 없기 때문에 반드시 jquery 문서 로딩 후에 jquery를 작성 해주어야한다.
<head>
<!-- 작성위치 1 -->
<!-- jquery 로딩 -->
<script src="./js/jquery-3.3.1.js"></script>
<!-- js 작성 위치2 -->
</head>
<body>
<p>p요소입니다.</p>
<!-- js 작성 위치3 -->
</body>위의 코드를 보면
'작성위치1'에서는 아직 jquery가 로딩되지 않았기 때문에 코드를 작성하더라도 동작하지 않는다.
'작성위치2'에서는 문서가 아직 로딩되지 않았기 때문에 동작하지 않는다.
'작성위치3'에서는 Jquery와 문서가 모두 로딩되었기 때문에 동작한다.
'작성위치2'에 jquery를 작성하더라도 사용하더라도 함수를 사용해 페이지가 모두 로딩된 후에 jquery를 동작하게 할 수 있다.
.ready(function(){});
//페이지의 모든 요소들이 로딩된 후, 함수 안에 있는 코드가 실행됨
$(window).ready(function((){/*코드입력*/});
//DOM요소들만 로딩되면 함수 안에 있는 코드가 실행됨.
$(document).ready(function(){/*코드입력*/});
$(function(){/*코드입력*/});
jquery API / 옵션
jquery API
- jquery api : https://api.jquery.com/
- 블로그 : https://sallykim5087.tistory.com/69
jquery 옵션
- 옵션의 종류는 api 문서에서 어떤 것을 넣을 수 있는지 찾아 볼 수 있다.
- 옵션을 설정하지 않으면 default 옵션이 적용된다.
옵션 전달방법
1. plain object 로 전달하기
$("#one").hide({
duration: 1000;
});
2. value로 전달하기
옵션을 여러개 전달할 수 있다.
$("#one").hide({
duration: 1000,
complete: function(){
alert("QHd");
}
});
예약어
$(this)
이벤트가 일어난 바로 그 시점의 html문서객체를 지칭함.
$(".box").on("mousedown", function(){
$(this).fadeOut(1000);
});
$(window)
$(document)
'J QUERY' 카테고리의 다른 글
| 슬라이드 만들기 2 (0) | 2019.11.26 |
|---|---|
| 슬라이드 만들기1 (0) | 2019.11.26 |
| Jquery Event 연습2 (0) | 2019.11.25 |
| Jquery Event 연습1 (0) | 2019.11.25 |
| J query 동작 / Event / Effect (0) | 2019.11.25 |
