Jquery 핵심 기능에 대한 간략한 토론_jquery

Jquery에서는 모든 DOM 개체가 Jquery 개체로 캡슐화되며, Jquery 개체만 Jquery 메서드나 속성을 사용하여 해당 작업을 수행할 수 있습니다.

그래서 Jquery는 DOM 객체를 Jquery 객체로 캡슐화할 수 있는 함수를 제공하는데, 이것이 Jquery 핵심 함수인 jquery(), 팩토리 함수라고도 합니다.

jquery 핵심 함수에는 다음과 같이 7개의 오버로드가 있습니다.

jquery() 이 함수는 빈 jquery 객체를 반환합니다.
jquery(elements) 이 함수는 하나 이상의 DOM 요소를 Jquery 객체(또는 jquery 컬렉션)로 변환합니다
jquery(callback) 이 함수는 jquery(document).ready(callback)의 약어입니다. 이 함수는 DOM 문서가 로드된 후 실행될 함수를 바인딩합니다. DOM이 로드될 때 수행되어야 하는 페이지의 모든 jquery 작업이 이 함수에 포함되어야 합니다. 이 기능은 페이지에 여러 번 나타날 수 있습니다.
jquery(표현식,[컨텍스트])
제이쿼리(html)
jquery(html,props)
jquery(html,[ownerDocument])

자세히 살펴보겠습니다

jQuery(표현식, [컨텍스트])

이 함수는 CSS 선택기가 포함된 문자열을 받은 다음 이 문자열을 사용하여 요소 집합을 일치시킵니다.

각각 doc[0] 및 doc[1]을 통해 DOM 개체를 검색할 수 있으며, 나머지는 실제로 jQuery 개체에 고유한 일부 속성과 메서드입니다. jQuery 개체는 DOM 개체를 래핑하고 DOM 요소에 대한 일부 작업도 포함합니다. .jQuery 메소드.

jQuery를 사용하는 과정에서 대부분의 경우 첫 번째 단계이자 가장 중요한 단계는 조작할 DOM 객체를 래핑하는 jQuery 객체를 얻은 다음, 얻은 jQuery 객체의 메서드를 호출하여 처리를 완료하는 것입니다. . DOM 개체에 대한 작업.

예를 들어

1. #first 컨텍스트에서 노드 p가 있는 모든 요소를 ​​찾고 해당 값을 루프에 표시합니다.

$(function() {
    var items = $("p", "#first");
    $.each(items, function(i, n) {
      alert(i);
    });
  });

i는 해당 인덱스, n은 해당 노드

2. p 요소를 모두 찾으세요. 이 요소는 div 요소의 하위 요소여야 합니다.

HTML 코드:

1

2

3

jQuery 코드:
$("div > p");0c6dc11e160d3b678d68754cc175188a

결과:
[ e388a4556c0f65e1904146cc1a846bee둘94b3e26ee717c64999d7867364b1b4a3 ]

3. 문서의 첫 번째 형식에서 모든 라디오 버튼을 찾습니다(예: 유형 값이 radio인 입력 요소).

jQuery 코드:
$("입력:라디오", document.forms[0]);
~         

jQuery(html, [ownerDocument])

제공된 원시 HTML 마크업 문자열을 기반으로 jQuery 객체로 래핑된 DOM 요소를 동적으로 생성합니다.

손으로 쓴 HTML 문자열, 일부 템플릿 엔진이나 플러그인에서 생성된 문자열, AJAX를 통해 로드된 문자열을 전달할 수 있습니다.

jQuery(html, props)

제공된 원시 HTML 마크업 문자열을 기반으로 jQuery 객체로 래핑된 DOM 요소를 동적으로 생성합니다. 일련의 속성, 이벤트 등을 동시에 설정합니다.

매개변수

html문자열

DOM 요소를 동적으로 생성하는 데 사용되는 HTML 태그 문자열

propsMap

새로 생성된 요소에 연결하기 위한 속성, 이벤트 및 메서드

예

설명:

div 요소(및 그 안에 포함된 모든 콘텐츠)를 동적으로 생성하고 body 요소에 추가합니다. 이 함수 내에서 DOM 요소로의 마크업 변환은 임시로 요소를 생성하고 해당 요소의 innerHTML 속성을 지정된 마크업 문자열로 설정하여 수행됩니다. 따라서 이 기능에는 유연성과 한계가 있습니다.

jQuery 코드:

$("<div>", {
 "class": "test",
 text: "Click me!",
 click: function(){
  $(this).toggleClass("test");
 }
}).appendTo("body");

$(document).ready()의 약어입니다.

DOM이 로드되면 DOM 안의 기능을 실행합니다.

jQuery 코드:

 
$(function(){
 // 文档就绪
});

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.