기초함수

1. jQuery함수 $(...) 

jQuery 함수 $(...)

jQuery(expression,context)

CSS 셀렉터를 받아 매치된 엘리먼트 집합의 jQuery 객체를 리턴한다.

예제1

div 엘리먼트 안의 모든 p 엘리먼트를 추출하여 테두리를 붙인다.

$("div > p").css("border", "1px solid gray");

예제2

document 첫번째 form 안에 있는 모든 input 태그 타입이 radio 인 것을 추출한다.

$("input:radio", document.forms[0]);

예제3

AJAX 응답으로부터 받은 XML에서 모든 div를 추출한다

$("div", xml.responseXML);

jQuery(html)

예제1

div를 비롯한 콘텐츠를 동적으로 생성하고 body에 추가한다.

$("<div><p>Hello</p></div>").appendTo("body")

예제2

input 요소를 type 요소없이 만들 수 없다. 

이것은 Microsoft의 read / write - once 규칙에 따른 것으로, 자세한 내용은 MSDN을 참조한다.

// IE에서 작동하지 않음

$("<input/>").attr("type", "checkbox");

// IE에서 작동

$("<input type='checkbox'/>");

jQuery(elements)

이 함수의 인수는 XML Documents와 Window 개체와 같이 DOM 엘리먼트가 아닌것도 받아들인다.

예제1

body의 배경색을 바꾼다 (css 메서드는 DOM Element에 없는 jQuery개체이다)

$(document.body).css( "background", "black" );

예제2

myForm 내의 모든 엘리먼트를 표시하지 않는다 ( 배열에는 모든 것을 한꺼번에 표시하지 않는 hide 함수는 존재하지 않는다)

$(myForm.elements).hide()

jQuery(callback)

$(document).ready()의 약어

DOM Document로드가 끝난 때 바인딩 해 놓은 함수가 실행된다. 

이 함수는 $ (document) ready ()와 같게 동작한다.

이 함수는 기술 적으로는 다른 $ () 함수와 마찬가지로 모두 가능하다, 쓰임새는 없다.

예제1

DOM 준비가 가능하면 작업을 수행한다.

$(function(){

  // Document is ready

});

예제2

$별칭을 사용하여 jQuery 코드가 안정적으로 동작하므로 전역 변수에 의지하지 않고 인수 $를 기술하도록한다. 

jQuery(function($) {

  // Your code using failsafe $ alias here...

});

 

2. jQuery Object 조작

편집하기

each(callback)

일치한 전체의 Element에 대하여 함수를 실행한다.

이것은 일치하는 Element를 찾을 때 마다 1번씩 매번 함수가 실행되는 것을 의미한다.

함수에서 this 포인터는 각 Element를 의미한다.

예제1

div를 찾아서 color 프로퍼티를 변경한다.

1. $(document.body).click(function () {
       $("div").each(function (i) {
2.         if (this.style.color != "blue") {
3.           this.style.color = "blue";
4.         } else {
5.           this.style.color = "";
6.         }
7.     });
8. });

전체소스 : each_1.html

예제2

DOM Element 대신 jQuery  오브젝트를 사용하는 경우 $(this)를 기술

1. $("span").click(function () {
2.   $("li").each(function(){
3.     $(this).toggleClass("example");
4.   });
5. });

전체소스: each_2.html

 

예제3

id가 stop인 div가 발견된 시점에 false를 반환하여 루프를 빠져나온다.

1. $("button").click(function () {
2.   $("div").each(function (index, domEle) {
3.     // domEle == this
4.     $(domEle).css("backgroundColor", "yellow"); 
5.     if ($(this).is("#stop")) {
6.       $("span").text("Stopped at div index #" + index);
7.       return false;
8.     }
9.   });
10. });

전체소스: each_3.html

eq(position)

0 부터 length-1 가운데 일치하는 위치에 있는 엘리먼트만 찾아온다.

예제1

P 태그 집합중 위치가 2번째인 Element색상을 바꾼다.

1. $("p").eq(1).css("color","red")

전체소스:  eq_1.html

get()

jQuery 오브젝트가 가지고 있는 Element 전체를 배열 형태로 반환한다.

jQuery 객체가 아니라 DOM Element를 조작하는데 도움이된다.

예제1

div 요소를 get() 배열로 반환한다. 그리고 reverse() 내장함수를 이용하여 배열을 반전 표시한다.

 

1. function disp(divs) {
2.   var a = [];
3.   for (var i = 0; i < divs.length; i++) {
4.     a.push(divs[i].innerHTML);
5.   }
6.   $("span").text(a.join(" "));
7. }
8. disp( $("div").get().reverse() );

 

전체소스:  get_1.html

get(index)

DOM Element의 집합으로부터 인덱스를 지정해 하나의 Element를 참조한다.

이것에 의해 jQuery 오브젝트일 필요가 없는 케이스로 특정의 DOM Element 그 자체를 조작하는 것이 가능.

예제1

 

1. $("*", document.body).click(function (e) {
2.   e.stopPropagation();
3.   var domEl = $(this).get(0);
4.   $("span:first").text("Clicked on - " + domEl.tagName);
5. });

 

전체소스:  get_index_1.html

 

index(subject)

jQuery 오브젝트 내에서 인수로 지정된 Element 인덱스를 리턴한다.

만약 jQuery 오브젝트 내에 존재하지 않으면 -1을 리턴한다.

예제1

페이지의 div의 인덱스를 리턴한다.

 

1. $("div").click(function () {
2.   // this is the dom element clicked
3.   var index = $("div").index(this);
4.   $("span").text("That was div index #" + index);
5. });

 

전체소스:  index.html

 

length()

jQuery 오브젝트 Element 수를  유지한다. size 함수와 같은 값을 리턴

예제1

div를 카운팅하고 div를 추가한다.

 

1. $(document.body).click(function () {
2.   $(document.body).append($("<div>"));
3.   var n = $("div").length;
4.   $("span").text("There are " + n + " divs." +
5.                  "Click to add more.");
6. }).trigger('click'); // trigger the click to start

전체소스:  length.html

[출처] jQuery 함수 $(...)|작성자 하늘호수

http://blog.naver.com/ctlim2?Redirect=Log&logNo=50086952309