jQuery jQuery () 함수 설명

49747 단어
jQuery() 함수는 jQuery 라이브러리의 가장 핵심 함수로 jQuery의 모든 것은 이 함수를 바탕으로 한다.이 함수는 주로 HTML DOM 요소를 가져오고 jQuery 대상으로 봉인하여 jQuery 대상이 제공하는 다른 속성과 방법을 사용하여 DOM 요소를 조작하는 데 사용됩니다.
jQuery () 함수는 다양한 유형의 매개 변수를 스마트하게 jQuery 대상으로 봉인할 수 있는 기능이 매우 강하다.
구문jQuery() 함수의 기능이 매우 강하기 때문에 사용법도 비교적 복잡하다. 그 주요한 사용법은 다음과 같다.
사용법 1:
jQuery( selector, [ context ] )

선택기 문자열selector에 해당하는 HTML DOM 요소를 jQuery 객체로 캡슐화합니다.선택적 매개변수context는 DOM 요소를 찾을 범위를 지정합니다.
사용법 2:
// jQuery 1.4       obj   :       ,     jQuery  
jQuery( [ obj ] )

지정된 객체obj를 jQuery 객체로 캡슐화합니다.이 대상은 DOM 요소(Element)일 수도 있고, DOM 요소 그룹이 될 수도 있으며, jQuery 대상(복제)일 수도 있고, 다른 대상이 될 수도 있다.이 인자를 생략해서 빈 jQuery 대상을 되돌릴 수도 있습니다.
사용법 3:
jQuery( html, [ ownerDocument ] )

임시 DOM 요소는 HTML 태그 문자열html에 따라 동적으로 만들어지고 jQuery 객체로 패키지됩니다.옵션 매개 변수ownerDocument는 임시 DOM 요소가 만들어진 문서(예: 프레임 페이지)를 지정하는 데 사용됩니다.
사용법 4: jQuery 1.4에서 새로 추가되었습니다.
// v1.4   
jQuery( html, properties )

HTML 태그 문자열html과 추가 속성, 이벤트 및 메서드를 포함하는 properties 객체에 따라 임시 DOM 요소를 동적으로 만들고 jQuery 객체로 봉인합니다.
사용 방법 5:
jQuery( callback )

현재 문서 로드가 완료되면 지정된 함수callback를 실행합니다.이 용법은ready() 함수로 다음과 같은 용법의 약자입니다:jQuery(document).ready(callback).
매개 변수
앞의 문법 부분에 정의된 매개 변수의 명칭에 따라 대응하는 매개 변수를 찾으십시오.
매개 변수
묘사
selector
Number 유형에 지정된 선택기 문자열로 해당 DOM 요소를 찾습니다.
context
선택적/Object 유형은 선택기 문자열의 검색 범위를 지정합니다. DOM 요소, DOM 요소 그룹, 문서, jQuery 대상입니다.이 인자를 생략하면 기본적으로 현재 문서입니다.
obj
선택적/Object 유형에 지정된 객체로, jQuery 객체로 패키지화할 수 있습니다.DOM 요소, DOM 요소 배열, 문서, jQuery 객체 등이 될 수 있습니다.
html
Object 유형이 지정한 HTML 탭 문자열, 예를 들어'
','
','
'(탭에도 탭을 삽입할 수 있으며 html 문법에 부합되기만 하면 됩니다).
ownerDocument
Number 유형은 DOM 요소가 임시로 작성되는 문서를 지정합니다. 기본값은 현재 문서입니다.
properties
Object 유형에 지정된 객체로, DOM 요소의 속성, 이벤트 및 메서드를 지정할 수 있습니다.예를 들어: {name: "username", "click":function () {}
callback
Number 유형에 지정된 함수로, DOM 문서 로드가 완료되면 즉시 실행됩니다.
반환값
jQuery () 함수의 반환 값은 jQuery 형식으로 jQuery 대상을 되돌려줍니다.
예시 & 설명jQuery() 함수가 비교적 복잡하기 때문에 여기서 비교적 큰 편폭을 사용하여 상술한 용법을 일일이 소개할 것이다.
사용법 1
//           p  DOM  
$("p");

//   id   username DOM  
$("#username");

//       test   DOM  ,(  :class="test")
$(".test");

//     p    test   DOM  
$("p .test");

실행 코드
사용법
var dom = document.getElementById("username");
//  DOM     jQuery  
$(dom);

var doms = document.getElementsByName("book_id");
//  DOM       jQuery  
$(doms);

//  body     jQuery  
$(document.body);

실행 코드
사용법
//       span     DOM  ,      jQuery  
//            
$('<span/>');
$('<span></span>');
$('<span>'); //           

//     p  ,      test   span  
$('<p><span class="test"></span></p>');

//       
var html = '<table>';
html += '<tr>';
html += '<td>   1</td>';
html += '<td>   2</td>';
html += '</tr>';
html += '<tr>';
html += '<td>   3</td>';
html += '<td>   1</td>';
html += '</tr>';
html += '</table>';
$(html);

실행 코드
사용법
//          jQuery  
var tempLink = $('<a/>', {
    id: 'goback',
    title: 'CodePlayer',
    html: 'CodePlayer', //         ,   innerHTML  
    href: 'http://www.365mini.com/',
    click: function(){
        //              
    }
});
//    body       
tempLink.appendTo("body");


$('<input/>', {
    type: 'checkbox',
    val: 'def', //        value    textarea     
    click: function(){
        alert("      ");
    }
}).appendTo("body");

실행 코드
사용법 5
$(function(){
    //               
    alert("      !");
});

//     ready()         

$(document).ready(function(){
    //               
    alert("      !");
});

실행 코드

좋은 웹페이지 즐겨찾기