- 자바스크립트에서 자주 쓰는 구문을 함수로 미리 정의해놓음(라이브러리화)
$ : 함수이름
제이쿼리에 이미 정의되어있는 함수를 호출하기만 하면 되는 것
css
css 정의하는 함수 (style)
<script>
$(document).ready(function(e){
var $header=$("header");
$header.css("border","solid 4px red");
});
</script>
<script>
$(document).ready(function(e){
var $divs=$("div");
$divs.css("border","solid 4px red");
});
</script>
contents
자식객체(텍스트노드를 포함한 모든 객체)를 알아내는 함수
children 자식요소(텍스트노드를 제외한 태그노드만)를 알아내는 함수
size
개체수를 알아내는 함수 (leng)
<script>
$(document).ready(function(e){
var $nodes1=$("body").contents();
alert("body의 자식객체수:"+$nodes1.size())
});
</script>
eq
몇번째 항목인지 알아내는 함수 (item)
<script>
$(document).ready(function(e){
var $divs=$("div:eq(2) div");
$divs.css("border","solid 4px red");
});
</script>
first
첫번째 자식요소를 알아내는 함수 (firstChildren)
<script>
$(document).ready(function(e){
var $firstChild=$("body").contents().first();
var $secondChild=$("body").contents().eq(1);
$secondChild.css("border","solid 4px red");
});
</script>
parent
부모요소(바로 위에 하나만)를 알아내는 함수
parents 모든 부모요소를 알아내는 함수 (parentsNode)
<script>
$(document).ready(function(e){
var $header=$("#header");
$header.parent().css("border","solid 4px red");
});
<script>
$(document).ready(function(e){
var $data1=$("#data_1");
$data1.parents().css("border","solid 4px red");
});
</script>
prev, next
형제요소(텍스트노드는 제외함)를 알아내는 함수 (previousSibling)
<script>
$(document).ready(function(e){
var $content=$("#content");
$content.prev().css("border","solid 4px red");
});
</script>
<script>
$(document).ready(function(e){
var $content=$("#content");
$content.next().css("border","solid 4px red");
});
</script>
제이쿼리에서 요소 추가는 $(추가할 내용)
$가 JS의 createElement의 역할
InsertBefore
<script>
$(document).ready(function(e){
var $page=$("#sample_page");
var $firstNode=$page.contents().first();
var $p1=$("<p>추가내용</p>");
$p1.css("border","solid 4px red");
$p1.insertBefore($firstNode);
});
</script>
html
요소를 특정 위치에 바로 넣어주는 함수, 단 기존의 모든 내용이 다 없어지므로 +$변수명.html을 넣어줌 (innerHTML)
<script>
$(document).ready(function(e){
var $page=$("#sample_page");
$page.html("<p>추가내용이 좀 많네요</p>"+$page.html());
});
</script>
<script>
$(document).ready(function(e){
var $page=$("#sample_page");
$page.html($page.html()+"<p>추가내용이 좀 많네요</p>");
});
</script>
clone
요소를 복제하는 함수 (cloneNode)
제이쿼리에서 속성 변경은 $변수명.text("바꿀 내용") (실무에서는 대부분 html로 해결) (nodeValue)
append
요소를 합치는 함수
<script>
$(document).ready(function(e){
var $page=$("#sample_page");
var $firstNode=$page.contents().first();
var $p1=$("<p>추가내용</p>")
$p1.css("border","solid 4px red");
$p1.insertBefore($firstNode);
var $p2=$p1.clone();
$p2.text("추가내용2");
$page.append($p2);
});
</script>
remove
요소를 제거하는 함수 (remove)
<script>
$(document).ready(function(e){
$("#content").remove();
});
</script>