jQuery에서 $() 함수의 사용법 소결

jQuery는 현재 전방 개발에서 없어서는 안 될 구성 요소일 것입니다.그것은 DOM 대상의 봉인, 통일된 이벤트 메커니즘, 그리고 일련의 도구 함수를 제공했다.면접에서 갑자기 jQuery$()에 몇 가지 용법이 있느냐는 질문을 받았기 때문에 순간 멍해졌다.비록 이런 문법은 공을기가 "희향두의 희는 몇 가지 문법이 있습니까?"라고 묻는 것과 비슷하다.그래도 이 기회를 빌려 지식을 정리하고 기회를 틈타 배워라!
우선 우리는 jQuery를 도입해야 한다. 만약 당신이 아직 jQuery를 들어보지 못했다면 다른 글을 옮기거나 당신의 사이트에 이것을 도입하세요.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

jQuery의 $() 함수 문서는 다음과 같습니다.http://api.jquery.com/jQuery/jQuery의 $() 함수 사용법은 다음과 같습니다.
컨텍스트를 지정할 수 있는 DOM 선택
DOM 창설, 소속된document, 속성, 이벤트, 심지어 모든 jQuery 방법을 지정할 수 있습니다.
DOM 로드 완료 이벤트 수신은 $(document).ready()의 간단한 쓰기 방식입니다.
DOM 선택
가장 많이 사용되는 것은 선택자를 통해 선택하는 것이다.

jQuery( selector [, context ] )

봤어?두 번째 선택할 수 있는 매개 변수는 상하문을 지정할 수 있습니다. 그 종류는 DOM 대상일 수도 있고 jQuery 대상일 수도 있습니다.예를 들어, ul 아래에 있는 모든 li를 찾습니다.

$ul = $('ul');
$li = $.('li', $ul);

다음과 같습니다.

$li = $ul.find('li');

선택자 외에 DOM 대상, DOM 대상 그룹, jQuery 대상, 심지어 일반 대상을 매개 변수로 사용할 수 있다.그것들은 jQuery 대상으로 포장될 것이다.
DOM 생성
jQuery로 DOM을 만드는 것도 흔한 작업이다. 예를 들어 ul 아래에 하나를 만드는 것도 흔하다li.

//     
jQuery( html [, ownerDocument ] )
//   
$('<li>').appendTo($ul);

두 번째 선택할 수 있는 매개 변수를 주의하십시오. 기본값은 현재 jQuery가 불러온 문서입니다.IFrame에서 만들고자 하는 요소는 DOM 요소를 만들려면 jQuery가 window.document.createElement를 사용하기 때문에 DOM 요소를 지정해야 합니다.여기에 새로운 원소가 속하는 document 대상을 알아야 한다.예를 들면 다음과 같습니다.

$("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document)

DOM 요소를 만들 때 document 뿐만 아니라 요소 속성도 지정할 수 있습니다.

//     
jQuery( html, attributes )
//   
$('<a>', {
    href: 'http://jquery.com'
});
//             ：
$( "<a href='http://jquery.com'></a>" );

더 재미있는 것은 jQuery 1.8 처음에 요소를 만들 때 속성뿐만 아니라 모든 방법$.fn.을 지정할 수 있습니다. 예를 들어,

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

DOM 로드 완료
일반적으로 JavaScript는 DOM 로드가 완료된 후에 실행해야 합니다. 그렇지 않으면 DOM 작업이 무효화될 수 있습니다.jQuery는 DOM 로드 완료를 쉽게 감지할 수 있는 방법을 제공합니다.

//     
jQuery( callback )
//   
$(function(){
    // DOM     
});

$(callback)의 작용은 완전히 $(document).ready(callback)에 해당한다.두 자의 반환 값은 모두 문서를 포함하는 jQuery 대상입니다.따라서 양자의 차이는 후자가 체인식으로 쓸 수 있다는 데 있다. $(document).ready(x).ready(x)....나란히 알을 낳다.
여기서 $(document).ready와$(window).load의 차이점을 살펴보겠습니다.
전자는 HTML 문서가 로드되고 DOM이 준비되면 호출됩니다.
후자는 HTML 문서가 로드되고 DOM이 완료되면 페이지 렌더링이 완료(iframe, img 로드 완료)된 후 호출됩니다.
주석이 없는 한 본 블로그 글은 모두 오리지널입니다. 전재는 링크 형식으로 본문의 주소를 표시하십시오.http://harttle.com/2015/08/06/jquery-object.html