1. jQuery( html ) Returns: jQuery
jQuery( html ), 실행후 jQuery객체를 반환
Create DOM elements on-the-fly from the provided String of raw HTML.
주어진 html을 가지고 빠르게 문서 원소를 생성한다.
그리고 jQuery객체로서 그 것을 반환한다.
이말은 그것을 이어서 jQuery의 다른 함수와 함께 사용가능하다는 뜻이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("<div><p>Hello</p></div>").appendTo("body");
});
</script>
</head>
<body>
</body>
</html>
2. jQuery( elements ) Returns: jQuery
jQuery( 원소 ) jQuery( 원소.원소.원소 ), 실행후 jQuery객체를 반환
Wrap jQuery functionality around a single or multiple DOM Element(s).
하나 또는 다단계의 문서원소로서 사용할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(document.body).css( "background", "black" );
});
</script>
A shorthand for $(document).ready().
$()은 $(document).ready() 의 짧은 표현으로 사용가능하다.
$(document).ready() 은 문서가 사용가능한 시점을 자동으로 인식하여 주어진 콜백 함수를 동작시킨다.
콜백함수란 지정된 행위가 끝난다음 자동적으로 실행될 함수를 의미한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
Execute a function within the context of every matched element.
매치 되어진 모든 원소에 대해 주어진 콜백 함수를 실행한다. 루프의 의미이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
The number of elements in the jQuery object.
매치되어진 원소들의 갯수를 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
$(document.body).append($("<div>"));
var n = $("div").size();
$("span").text("There are " + n + " divs." +
"Click to add more.");
}).click(); // trigger the click to start
The number of elements in the jQuery object.
매치되어진 원소들의 갯수를 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
$(document.body).append($("<div>"));
var n = $("div").length;
$("span").text("There are " + n + " divs." +
"Click to add more.");
}).trigger('click'); // trigger the click to start
Access all matched DOM elements.
매치되는 모든 문서 원소들을 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function disp(divs) {
var a = [];
for (var i = 0; i < divs.length; i++) {
a.push(divs[i].innerHTML);
}
$("span").text(a.join(" "));
}
8. get( index ) Returns: Element
get( 인덱스 ), 실행후 매치 되는 원소를 반환
Access a single matched DOM element at a specified index in the matched set.
매치되는 원소들 중 주어진 인덱스에 해당하는 하나의 원소만 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
$("span:first").text("Clicked on - " + domEl.tagName);
});
});
</script>
<style>
span { color:red; }
div { background:yellow; }
</style>
</head>
<body>
<span> </span>
<p>In this paragraph is an <span>important</span> section</p>
<div><input type="text" /></div>
</body>
</html>
9. index( subject ) Returns: Number
index( 객체 ), 실행후 숫자를 반환
Searches every matched element for the object and returns the index of the element, if found, starting with zero.
매치되어진 원소들에 대해 주어진 객체와 동일한것을 검색하여,
존재하면 그 원소들중에 몇번째에 해당하는가 하는 인덱스 번호를 반환한다.
인덱스는 0부터 시작한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this);
$("span").text("That was div index #" + index);
});
12. :not(selector) Returns: Array<Element>
아니다, 실행후 원소 배열 반환
Filters out all elements matching the given selector.
주어진 것에 해당하지 않는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
13. :even Returns: Array<Element>
짝수, 실행후 원소 배열 반환
Matches even elements, zero-indexed.
매치된 원소들 중에서 인덱스가 짝수인것 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "#bbbbff");
});
</script>
<style>
table {
background:#eeeeee;
}
</style>
</head>
<body>
<table border="1">
<tr><td>Row with Index #0</td></tr>
<tr><td>Row with Index #1</td></tr>
<tr><td>Row with Index #2</td></tr>
<tr><td>Row with Index #3</td></tr>
</table>
</body>
</html>
14. :odd Returns: Array<Element>
홀수, 실행후 원소 배열 반환
Matches odd elements, zero-indexed.
매치된 원소들 중에서 인덱스가 홀수인것 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("tr:odd").css("background-color", "#bbbbff");
});
</script>
<style>
table {
background:#f3f7f5;
}
</style>
</head>
<body>
<table border="1">
<tr><td>Row with Index #0</td></tr>
<tr><td>Row with Index #1</td></tr>
<tr><td>Row with Index #2</td></tr>
<tr><td>Row with Index #3</td></tr>
</table>
</body>
</html>
15. :eq(index) Returns: Element
eq(인덱스), 실행후 원소 반환
Matches a single element by its index.
매치된 원소들 중에서 주어진 인덱스에 매치되는 원소 한개를 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("td:eq(2)").css("text-decoration", "blink");
});
</script>
19. :animated Returns: Array<Element>
움직인다, 실행후 원소 배열 반환
Matches all elements that are currently being animated.
매치된 원소들 중에서 애니메이션이 동작하고 있는 것들을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
24. :hidden Returns: Array<Element>
안보임, 실행후 원소 배열 반환
Matches all elements that are hidden, or input elements of type "hidden".
보이지 않는 모든 것들을 반환한다. none hidden 등, 추가로 input을 지정하면 인풋타입이 히든인것만 받아온다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// in some browsers :hidden includes head, title, script, etc... so limit to body
$("span:first").text("Found " + $(":hidden", document.body).length +
" hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
25. :visible Returns: Array<Element>
보임, 실행후 원소 배열 반환
Matches all elements that are visible.
보이는 것들을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
});
</script>
<style>
div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }
</style>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>
26. [attribute] Returns: Array<Element>
속성, 실행후 원소 배열 반환
Matches elements that have the specified attribute.
주어진 속성을 가진 것들을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
27. [attribute=value] Returns: Array<Element>
속성=값, 실행후 원소 배열 반환
Matches elements that have the specified attribute with a certain value.
주어진 속성과 주어진 값이 일치 하는 모든것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input[name='newsletter']").next().text(" is newsletter");
});
</script>
28. [attribute!=value] Returns: Array<Element>
속성!=값, 실행후 원소 배열 반환
Matches elements that don't have the specified attribute with a certain value.
주어진 속성과 주어진 값이 일치 하지 않는 모든것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input[name!='newsletter']").next().text(" is not newsletter");
});
</script>
31. [attribute*=value] Returns: Array<Element>
속성*=값, 실행후 원소 배열 반환
Matches elements that have the specified attribute and it contains a certain value.
주어진 속성을 가지며 값이 주어진 값을 포함하는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input[name*='man']").val("has man in it!");
});
</script>
32. [selector1][selector2][selectorN] Returns: Array<Element>
속성들, 실행후 원소 배열 반환
Matches elements that have the specified attribute and it contains a certain value.
속성을 여러개 지정할수도 있다. 매치되는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input[id][name$='man']").val("only this one");
});
</script>
34. :first-child Returns: Array<Element>
첫번째 자식, 실행후 원소 배열 반환
Matches the first child of its parent.
첫번째 자식에 매치되는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
35. :last-child Returns: Array<Element>
마지막 자식, 실행후 원소 배열 반환
Matches the last child of its parent.
마지막 자식에 매치되는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
37. :input Returns: Array<Element>
인풋, 실행후 원소 배열 반환
Matches all input, textarea, select and button elements.
인풋, 텍스트에리어, 셀렉트박스, 버튼들을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var allInputs = $(":input");
var formChildren = $("form > *");
$("div").text("Found " + allInputs.length + " inputs and the form has " +
formChildren.length + " children.")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
38. :text Returns: Array<Element>
텍스트, 실행후 원소 배열 반환
Matches all input elements of type text.
인풋타입이 텍스트인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":text").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
39. :password Returns: Array<Element>
패스워드, 실행후 원소 배열 반환
Matches all input elements of type password.
인풋타입이 패스워드인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":password").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
40. :radio Returns: Array<Element>
레디오, 실행후 원소 배열 반환
Matches all input elements of type radio.
인풋타입이 레디오인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":radio").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
41. :checkbox Returns: Array<Element>
체크박스, 실행후 원소 배열 반환
Matches all input elements of type checkbox.
인풋타입이 체크박스인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":checkbox").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
42. :submit Returns: Array<Element>
서브밋, 실행후 원소 배열 반환
Matches all input elements of type submit.
인풋타입이 서브밋인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":submit").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
43. :image Returns: Array<Element>
이미지, 실행후 원소 배열 반환
Matches all input elements of type image.
인풋타입이 이미지인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":image").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
44. :reset Returns: Array<Element>
리셋, 실행후 원소 배열 반환
Matches all input elements of type reset.
인풋타입이 리셋인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":reset").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
45. :button Returns: Array<Element>
버튼, 실행후 원소 배열 반환
Matches all input elements of type button.
인풋타입이 버튼인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":button").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
46. :file Returns: Array<Element>
파일, 실행후 원소 배열 반환
Matches all input elements of type file.
인풋타입이 파일인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var input = $(":file").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
47. :hidden Returns: Array<Element>
히든, 실행후 원소 배열 반환
Matches all elements that are hidden, or input elements of type "hidden".
인풋타입이 히든인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// in some browsers :hidden includes head, title, script, etc... so limit to body
$("span:first").text("Found " + $(":hidden", document.body).length +
" hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
48. :enabled Returns: Array<Element>
활성화? 사용가능?, 실행후 원소 배열 반환
Matches all elements that are enabled.
활성화된 모든 것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input:enabled").val("this is it");
});
</script>
49. :disabled Returns: Array<Element>
비활성화? 사용불가능?, 실행후 원소 배열 반환
Matches all elements that are disabled.
비활성화된 모든 것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input:disabled").val("this is it");
});
</script>
50. :checked Returns: Array<Element>
체크됏음, 실행후 원소 배열 반환
Matches all elements that are checked.
인풋이 체크된 모든 것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function countChecked() {
var n = $("input:checked").length;
$("div").text(n + (n == 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);
51. :selected Returns: Array<Element>
선택되어짐, 실행후 원소 배열 반환
Matches all elements that are selected.
선택된 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.
주어진 속성명의 값을 가져옴, 매치되는 첫번째 것만 가져옴
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var title = $("em").attr("title");
$("div").text(title);
});
</script>
<style>
em { color:blue; font-weight;bold; }
div { color:red; }
</style>
</head>
<body>
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
</body>
</html>
Set a key/value object as properties to all matched elements.
속성과 값들의 배열을 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Set a single property to a computed value, on all matched elements.
하나의 속성과 콜백함수를 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Remove an attribute from each of the matched elements.
주어진 이름과 매치되는 속성을 제거
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
8. toggleClass( class ) Returns: jQuery
클래스 추가 삭제 반복 실행후 jQuery 객체 리턴
Adds the specified class if it is not present, removes the specified class if it is present.
주어진 클래스를 추가 삭제를 반복한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
선택되어진 객체의 html을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
});
</script>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
</body>
</html>
10. html( val ) Returns: jQuery
실행후 jQuery 객체를 반환
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
매치되는 모든 원소에 주어진 html을 넣는다.
Get the text contents of all matched elements.
선택되어진 객체의 문자열을 반환한다. 태그는 제외된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var str = $("p:first").text();
$("p:last").html(str);
});
</script>
<style>
p { color:blue; margin:8px; }
b { color:red; }
</style>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
</body>
</html>
12. text( val ) Returns: jQuery
실행후 jQuery 객체 반환
Set the text contents of all matched elements.
매치되는 모든 원소에 주어진 텍스트를 집어넣는다. html을 넣는다 해도 텍스트화 된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").text("<b>Some</b> new text.");
});
</script>
<style>
p { color:blue; margin:8px; }
</style>
</head>
<body>
<p>Test Paragraph.</p>
</body>
</html>
Get the content of the value attribute of the first matched element.
첫번째 매치되는 원소의 값을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
Set the value attribute of every matched element.
매치되는 모든 원소에 주어진 값을 적용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.
체크 박스, 셀렉트 박스 레디오 버튼 셀렉트 옵션 등에 값을 적용
레디오나 체크박스 같은 경우는 값을 여러개 지정하여 할수 있다.
멀티플 같은 경우 배열로서 값을 지정할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Reduce the set of matched elements to a single element.
매치되는 원소중 인덱스와 일치하는 것 하나만 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
매치되는 원소에 주어진 클래스가 존재하면 참, 아니면 거짓을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Removes all elements from the set of matched elements that do not match the specified expression(s).
매치되는 원소들중 해당 필터 표현에 맞지 않는 것들은 제거하고 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Removes all elements from the set of matched elements that does not match the specified function.
매치되는 원소들중 해당 필터 함수에 맞지 않는 것들은 제거하고 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
매치되는 원소들중 주어진 표현식과 비교하여 일치 하면 참, 그렇지 않으면 거짓을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").one('click', function () {
if ($(this).is(":first-child")) {
$("p").text("It's the first div.");
} else if ($(this).is(".blue,.red")) {
$("p").text("It's a blue or red div.");
} else if ($(this).is(":contains('Peter')")) {
$("p").text("It's Peter!");
} else {
$("p").html("It's nothing <em>special</em>.");
}
$("p").hide().slideDown("slow");
$(this).css({"border-style": "inset", cursor:"default"});
});
Translate a set of elements in the jQuery object into another set of values in an array (which may, or may not, be elements).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Removes elements matching the specified expression from the set of matched elements.
매치되는 원소들중 표현식과 일치 하는 원소는 제거 하고 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
18. slice( start, end ) Returns: jQuery
Selects a subset of the matched elements.
매치되어진 원소들 중에서 해당 시작인덱스와 끝 인덱스의 범위에 있는 인덱스의 원소들을 모두 배열로 반환한다.
끝 인덱스를 지정하지 않으면 시작인덱스 부터 끝까지 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function colorEm() {
var $div = $("div");
var start = Math.floor(Math.random() *
$div.length);
var end = Math.floor(Math.random() *
($div.length - start)) +
start + 1;
if (end == $div.length) end = undefined;
$div.css("background", "");
if (end)
$div.slice(start, end).css("background", "yellow");
else
$div.slice(start).css("background", "yellow");
Adds more elements, matched by the given expression, to the set of matched elements.
매치된 원소에 새로운 원소나 원소들을 추가한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Get a set of elements containing all of the unique children of each of the matched set of elements.
선택되어진 원소의 자식들을 반환
이해가 잘 안됨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#container").click(function (e) {
$("*").removeClass("hilite");
var $kids = $(e.target).children();
var len = $kids.addClass("hilite").length;
Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
매치된 원소들중에서 비어있지 않는 자식들을 모두 가져옴
이해가 잘 안됨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").contents().not("[@nodeType=1]").wrap("<b/>");
});
</script>
</head>
<body>
<p>Hello <a href="Johnhttp://ejohn.org/">John</a>, how are you doing?</p>
</body>
</html>
Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process.
매치되어진 원소들 중에서 주어진 것에 매치되는 것을 찾아 그것들을 모두 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").find("span").css('color','red');
});
</script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
</body>
</html>
Get a set of elements containing the unique next siblings of each of the matched set of elements.
매치되어진 원소와 형제 관계인 바로 다음 원소를 찾아 객체로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
var txt = $(this).text();
$(this).next().text(txt);
});
Get a set of elements containing the unique parents of the matched set of elements.
매치되어진 원소의 유일한 부모를 찾아 객체로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
매치되어진 원소의 유일한 조상들을 찾아 객체로 반환한다.
The matched elements can be filtered with an optional expression.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Get a set of elements containing the unique previous siblings of each of the matched set of elements.
매치되어진 원소 보다 앞에 있는 유니크한 형제 원소를 찾아 객체로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Get a set of elements containing all of the unique siblings of each of the matched set of elements.
매치되어진 원소들의 모든 형제 원소들을 찾아 반환한다.
Can be filtered with an optional expressions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var len = $(".hilite").siblings()
.css("color", "red")
.length;
$("b").text(len);
Add the previous selection to the current selection.
매치되어진 원소들의 상위의 형제 원소들과 조상 원소 모두를 찾아 추가하여 객체로 반환한다.
이해가 잘 안됨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).
현재 보다 이전의 매치상태로 돌아가서 객체를 반환
잘 이해가 안됨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
jQuery.fn.showTags = function (n) {
var tags = this.map(function () {
return this.tagName;
})
.get().join(", ");
$("b:eq(" + n + ")").text(tags);
return this;
};
});
</script>
<style>
p, div { margin:1px; padding:1px; font-weight:bold;
font-size:16px; }
div { color:blue; }
b { color:red; }
</style>
</head>
<body>
<p>
Hi there <span>how</span> are you <span>doing</span>?
</p>
<p>
This <span>span</span> is one of
several <span>spans</span> in this
<span>sentence</span>.
</p>
<div>
Tags in jQuery object initially: <b></b>
</div>
<div>
Tags in jQuery object after find: <b></b>
</div>
<div>
Tags in jQuery object after end: <b></b>
</div>
</body>
</html>
<Manipulation>
1. html( ) Returns: String
html( ), 실행후 문자열 반환
Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
매치되어진 첫번째 원소의 html을 가져와서 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
});
</script>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
</body>
</html>
2. html( val ) Returns: jQuery
html( val ), 실행후 jQuery 객체 반환
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
Get the text contents of all matched elements.
매치되어진 원소의 태그를 제외한 문자열만 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var str = $("p:first").text();
$("p:last").html(str);
});
</script>
<style>
p { color:blue; margin:8px; }
b { color:red; }
</style>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
</body>
</html>
4. text( val ) Returns: jQuery
text( val ), 실행후 jQuery 객체 반환
Set the text contents of all matched elements.
매치된 원소들에 주어진 문자열을 삽입하고 객체를 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").text("<b>Some</b> new text.");
});
</script>
<style>
p { color:blue; margin:8px; }
</style>
</head>
<body>
<p>Test Paragraph.</p>
</body>
</html>
Insert content before each of the matched elements.
매치되는 모는 원소의 앞에 주어진 내용 삽입
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").before("<b>Hello</b>");
});
</script>
<style>p { background:yellow; }</style>
</head>
<body>
<p> is what I said...</p>
</body>
</html>
Wrap all the elements in the matched set into a single wrapper element.
매치되어진 원소들을 주어진 것에 매치되는 것으로 하나로 감싼다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").wrapAll(document.createElement("div"));
});
</script>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</body>
</html>
17. wrapInner( html ) Returns: jQuery
wrapInner( html ), 실행후 jQuery 객체 반환
Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
매치되어진 원소 속의 내용을 주어진 것으로 감싼다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
});
</script>
<style>
div { border:2px green solid; margin:2px; padding:2px; }
p { background:yellow; margin:2px; padding:2px; }
</style>
</head>
<body>
Plain old text, or is it?
</body>
</html>
Replaces all matched elements with the specified HTML or DOM elements.
매치되어진 원소를 주어진 내용과 치환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Remove all child nodes from the set of matched elements.
매치되어진 모든 것들을 없앤다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Removes all matched elements from the DOM.
매치되는 모든 원소를 옮기다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Clone matched DOM Elements, and all their event handlers, and select the clones.
완벽한 복사
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
1. css( name ) Returns: String
css( name ) 실행후 문자열 반환
Return a style property on the first matched element.
매치된 원소에서 주어진 스타일 속성이 발견되면 그 값을 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
Set a key/value object as style properties to all matched elements.
매치되어진 모든 원소에 주어진 키와 값으로 이루어진 속성들의 배열의 스타일을 적용하고 객체를 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
});
</script>
<style>
p { color:green; }
</style>
</head>
<body>
<p>
Move the mouse over a paragraph.
</p>
<p>
Like this one or the one above.
</p>
</body>
</html>
3. css( name, value ) Returns: jQuery
css( name, value ) 실행후 jQuery 객체 반환
Set a single style property to a value on all matched elements.
하나의 속성과 값을 받아 매치되어진 모든 원소에 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
});
</script>
<style>
p { color:blue; width:200px; font-size:14px; }
</style>
</head>
<body>
<p>
Just roll the mouse over me.
</p>
<p>
Or me to see a color change.
</p>
</body>
</html>
4. offset( ) Returns: Object{top,left}
offset( ) 실행후 탑과 레프트에 해당하는 위치 정보를 반환
Get the current offset of the first matched element relative to the viewport.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
});
</script>
<style>
p { margin-left:10px; }
</style>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
</body>
</html>
Get the current computed, pixel, height of the first matched element.
매치된 첫번째 원소의 높이를 픽셀로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
$("#getp").click(function () {
showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
showHeight("document", $(document).height());
});
$("#getw").click(function () {
showHeight("window", $(window).height());
});
});
</script>
<style>
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; }
div { color:red; font-weight:bold; }
</style>
</head>
<body>
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
<div> </div>
<p>
Sample paragraph to test height
</p>
</body>
</html>
6. height( val ) Returns: jQuery
height( val ) 실행후 jQuery 객체 반환
Set the CSS height of every matched element.
매치되는 모든 원소에 주어진 높이를 적용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").one('click', function () {
$(this).height(30)
.css({cursor:"auto", backgroundColor:"green"});
});
Get the current computed, pixel, width of the first matched element.
매치되는 첫번째 원소의 너비를 픽셀로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function showWidth(ele, w) {
$("div").text("The width for the " + ele +
" is " + w + "px.");
}
$("#getp").click(function () {
showWidth("paragraph", $("p").width());
});
$("#getd").click(function () {
showWidth("document", $(document).width());
});
$("#getw").click(function () {
showWidth("window", $(window).width());
});
});
</script>
<style>
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; }
div { color:red; font-weight:bold; }
</style>
</head>
<body>
<button id="getp">Get Paragraph Width</button>
<button id="getd">Get Document Width</button>
<button id="getw">Get Window Width</button>
<div> </div>
<p>
Sample paragraph to test width
</p>
</body>
</html>
8. width( val ) Returns: jQuery
width( val ) 실행후 jQuery 객체를 반환
Set the CSS width of every matched element.
매치되는 모든 원소에 주어진 너비를 적용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").one('click', function () {
$(this).width(30)
.css({cursor:"auto", "background-color":"blue"});
});
Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
문서가 준비가 되면 그 시점에 함수를 실행시킨다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
<style>p { color:red; }</style>
</head>
<body>
<p>
</p>
</body>
</html>
Binds a handler to a particular event (like click) for each matched element.
지정된 이벤트가 일어날때까지 기다렷다가 함수 실행
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Binds a handler to a particular event to be executed once for each matched element.
지정된 이벤트가 일어날때까지 기다렷다가 한번만 실행
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var n = 0;
$("div").one("click", function(){
var index = $("div").index(this);
$(this).css({ borderStyle:"inset",
cursor:"auto" });
$("p").text("Div at index #" + index + " clicked." +
" That's " + ++n + " total clicks.");
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left;
background:green; border:10px outset;
cursor:pointer; }
p { color:red; margin:0; clear:left; }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Click a green square...</p>
</body>
</html>
4. trigger( type, data ) Returns: jQuery
trigger( type, data ) 실행후 jQuery 객체 반환
Trigger a type of event on every matched element.
매치되는 모든 원소에 지정된 타입의 이벤트를 발생시킨다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
5. triggerHandler( type, data ) Returns: jQuery
triggerHandler( type, data ) 실행후 jQuery객체 반환
This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.
잘은 모르겟지만 실제적인 행위는 하지 않고 그결과만 실행한다는 뜻인것 같음
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
6. unbind( type, data ) Returns: jQuery
unbind( type, data ), 실행후 jQuery 객체 반환
This does the opposite of bind, it removes bound events from each of the matched elements.
bind와 정반대의 역활을 하며 매치되는 모든 원소에 바운드 이벤트를 제거한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick)
.text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
.text("Does nothing...");
});
7. hover( over, out ) Returns: jQuery
hover( over, out ) 실행후 jQuery 객체를 반환
Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.
마우스 오버와 아웃시 행위를 지정할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
Toggle between two function calls every other click.
클릭시 두개의 함수를 반복적으로 실행
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("li").toggle(
function () {
$(this).css("list-style-type", "disc")
.css("color", "blue");
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
});
</script>
<style>
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
</head>
<body>
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
</body>
</html>
Binds a function to the change event of each matched element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
Binds a function to the click event of each matched element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
2. show( speed, callback ) Returns: jQuery
Show all matched elements using a graceful animation and firing an optional callback after completion.
##A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
3. hide( ) Returns: jQuery
Hides each of the set of matched elements if they are shown.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
</body>
</html>
4. hide( speed, callback ) Returns: jQuery
Hide all matched elements using a graceful animation and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
5. toggle( ) Returns: jQuery
Toggles each of the set of matched elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
6. slideDown( speed, callback ) Returns: jQuery
Reveal all matched elements by adjusting their height and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
7. slideUp( speed, callback ) Returns: jQuery
Hide all matched elements by adjusting their height and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
8. slideToggle( speed, callback ) Returns: jQuery
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
});
</script>
<style>
p { width:400px; }
</style>
</head>
<body>
<button>Toggle</button>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
</body>
</html>
9. fadeIn( speed, callback ) Returns: jQuery
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
10. fadeOut( speed, callback ) Returns: jQuery
Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
});
</script>
<style>
p { font-size:150%; cursor:pointer; }
</style>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
</body>
</html>
11. fadeTo( speed, opacity, callback ) Returns: jQuery
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
</head>
<body>
<p>
Click this paragraph to see it fade.
</p>
<p>
Compare to this one that won't fade.
</p>
</body>
</html>
12. animate( params, duration, easing, callback ) Returns: jQuery
A function for making your own, custom animations.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
13. animate( params, options ) Returns: jQuery
A function for making your own, custom animations.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
14. stop( ) Returns: jQuery
Stops all the currently running animations on all the specified elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
15. queue( ) Returns: Array<Function>
Returns a reference to the first element's queue (which is an array of functions).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
16. queue( callback )
Adds a new function, to be executed, onto the end of the queue of all matched elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
17. queue( queue )
Replaces the queue of all matched element with this new queue (the array of functions).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
18. dequeue( ) Returns: jQuery
Removes a queued function from the front of the queue and executes it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
추천 : 