Learning how Script Tags and Document Ready Work
jQuery는 JavaScript tool에서 가장 유명하다.
jQuery를 사용하기 위해서는 첫번째로 scriptelement를 추가해야 한다.
document ready function을 생성하기.
<script>
$(document).ready(function() {
});
</script>
HTML의 코드 위에 작성해서 사용할 수 있다.
Target HTML Elements with Selectors Using jQuery
jQuery는 항상 시작이 $로 시작이되고, selector를 이용해서 HTML의 element를 선택할 수 있다.
$("button").addClass("animated bounce");
를 하면 Animate CSS를 등록을 따로 해놓으면 웹페이지가 로딩될때 HTML의 element인 button을 선택해 animation을 실행한다.
Target Elements by Class Using jQuery
만약 Element를 class를 이용해서 접근하기 위해서는
$(".text-primary").addClass("animated shake");를 해주면 된다.
앞서 말한것 처럼 .은 class 앞에 사용하고, text-primary인 class에 animated shake를 하겠다 라는 말이다.
Target Elements by ID Using jQuery
Element를 ID를 이용해 접근하기 위해서는
$("#target6").addClass("animated fadeOut");로 하면 된다.
target6의 ID를 가진 Element는 animated fadeOut이 된다.
Target the same element with multiple jQuery Selectors
<script>
$(document).ready(function() {
$("button").addClass("animated")
$(".btn").addClass("shake")
$("#target1").addClass("btn-primary")
});
</script>
button이라는 모든 element에 animated 클래스를 추가를 할 수 있다.
btn 클래스에 모두 shake 클래스를 추가
target1 ID에 btn-primary클래스를 추가
즉 selectors를 이용해 여러개의 elements를 한번에 선택이 가능하고, 클래스를 추가 할 수 있다.
그렇다면 클래스를 제거는 어떻게 할까?
$("#target2").removeClass("ban-default");
$("button").removeClass("btn-default");
로 클래스를 제거할 수 있다.
Change the CSS of an Element Using jQuery
$("#target1").css("color", "blue");를 통해 css의 property의 값도 변경이 가능하다.
Disable an Element Using jQuery
Remove an Element Using jQuery
.remove()를 통해 element 제거가 가능하다.
$("#target4").remove()
Use appendTo to Move Elements with jQuery
$("#target4").appendTo("#left-well")
div의 id가 left-well인 경우 target4를 해당 div로 옮길 수 있다.
Clone an Element Using jQuery
.clone()을 통해 element복제가 가능하다.
$("#target5").clone().appendTo("#left-well");
Target the Parent of an Element Using jQuery
모든 HTML의 element는 모두 parent를 가지고 있다. 그렇기 때문에 inherits properties를 가지고 있음.
<body>
<div class="container">
$(.container).parent()는 body element를 나타낸다.
Target the Children of an Element Using jQuery
.children()을 사용하면 해당 element의 children의 element를 가져올 수 있다.
$("#right-well").children().css("color", "orange");
Target a Specific Child of an Element Using jQuery
그렇다면 많은 child element에서 특정 element를 가져오는 방법은 어떻게 될가
target:nth-child(n)를 통해 가져올 수 있다.
$(".target:nth-child(2)").addClass("animated bounce");
Target Even Numbered Elements Using jQuery
$(".target:even").addClass("animated shake");
$(".target:odd").addClass("animated shake");
Use jQuery to Modify the Entire Page
$(body).addClass("animated')
$(body).addClass("hinge")
를 통해 전체 화면 수정이 가능하다.
'Programming > 웹프로그래밍' 카테고리의 다른 글
| [jQuery] JSON APIs와 Ajax를 이용해 데이터 가져오기 (0) | 2016.05.29 |
|---|---|
| [JavaScript] JavaScript Array, 정규식 (0) | 2016.05.14 |
| [JavaScript] Responsive Design With Bootstrap (0) | 2016.05.14 |
| HTML, CSS 종합 정리 (0) | 2016.05.13 |
| [NodeJS] 파라미터 전달 - GET, POST (1) | 2016.05.09 |