《날카로운 개발 jQuery 내핵 상해와 실천》(1)

jQuery 소개

jQuery 디자인 취지는'Write Less, Do More'로 더 적은 코드로 더 많은 일을 한다는 것이다.

jQuery 프로젝트는 주로 jQuery Core(코어 라이브러리), jQuery UI(인터페이스 라이브러리), Sizzle(CSS 선택기)와 QUnit(테스트 세트) 네 부분으로 구성되어 있다.

jQuery의 특징:

jQuery는 빈번한 DOM 조작을 위해 브라우저 호환성에 대한 해결 방안을 제공하고 더욱 간략한 API를 봉인했다.

체인 조작을 지원하여 JS 코드를 더욱 우아하게 작성한다.

jQuery는 이와 관련된 방법과 속성을 모두 jQuery 대상에 봉하여 전역 변수 오염을 피한다.

마지막으로 빼놓을 수 없는 것은 jQuery의 확장이다. 현재angularJS,vueJS가 횡행하는 시대에도 풍부한 jQuery 플러그인을 빌려야 하는 경우가 많다.

jQuery 관련 웹 주소:

jQuery 프레임워크 홈페이지

jQuery 프로젝트 그룹 홈페이지

jQuery 공식 플러그인 라이브러리

jQuery의 집

jQuery Rain

jQuery HelloWorld

    
       
       
    
    
        
        
        
            $(function(){
               console.log('jquery is ready!'); 
            });
        
    

$는 jQuery의 별명이고$()는 jQuery()와 같다.

jQuery는 DOM 문서를 조작해야 하기 때문에 DOM을 불러온 후에 jQuery 코드를 실행해야 합니다.다시 말하면 모든 jQuery 관련 작업은 DOM ready 이벤트가 터치된 후에 해야 한다.

//   document   ，  ready  （       helloworld   ）
$(document).ready(function(){
    //jQuery do something
});

jQuery 객체 및 DOM 객체

많은 초보자들이 js 파일을 열면 자바스크립트의 원본 코드인지 jQuery 코드인지 곤혹스러워한다.JavaScript DOM API와 jQuery API의 차이를 구분하지 못했기 때문에 jQuery 대상은 무엇입니까?

구별하다

DOM(Document Object Model) 문서 객체 모델은 주로 원본 자바스크립트가 노출된 인터페이스에 의존하여 액세스하고 조작한다.예를 들어getElementByTagName(),getElementById() 등 내장된 방법.한편, jQuery 대상은 DOM 대상을 한 겹으로 포장하는 것이다. 더 정확히 말하면 jQuery 대상은 하나 이상의 DOM 대상을 봉인한 후에 새로운 대상을 만든다.

jQuery 대상과 DOM 대상에 차이가 있기 때문에 jQuery 대상으로 DOM 대상을 직접 호출하는 방법은 잘못된 것이고 반대로도 마찬가지다.

jQuery 객체에서 DOM 객체 전환

에서 언급한 바와 같이 jQuery 대상은 한 개 이상의 DOM 대상을 포함하는 클래스 그룹 대상이다.그래서 jQuery 대상에서 DOM 대상을 직접 표시합니다:

//   jQuery validate               
var li = $li[0];

이외에 jQuery 대상이 제공하는 get 방법을 통해 얻을 수 있다.

var li = $li.get(0);

DOM 객체에서 jQuery 객체로 이동

상대적으로 DOM 대상이 jQuery 대상으로 바뀌는 것은 비교적 간단하다. jQquery의 구조 함수를 직접 호출하면 된다.

//         DOM  
var li = document.getElementByTagName('li');
var $li = $(li);

jQuery ready()와 JavaScript load() 이벤트 비교
HTML 문서가 로드되는 순서:

해석 HTML 구조

외부 자바스크립트 스크립트와 css 스타일 파일 불러오기

javascript 스크립트 해석 및 실행

구성 HTML DOM 모델

외부 이미지 등 외부 파일 로드

페이지 로드 완료

jQuery.ready() 이벤트는 DOM 구조를 그리면 터치하고 원생load() 이벤트는 모든 자원이 준비된 후에 터치합니다.다시 말하면 페이지가 대량의 외부 파일을 불러올 때 load() 방법을 실행하는 데 오래 걸리고 jQuery.ready() 모든 자원이 불러올 때까지 기다릴 필요가 없다.

또한 jQuery.ready() 이벤트는 여러 번 정의할 수 있다.

jquery 구조 함수

jQuery는 모든 조작을 하나의 jQuery 구조 함수에 봉하여 통일된 조작 입구를 형성하고 조작 문턱을 간소화했다.jQuery 구조 함수의 주요 호출 방식은 다음과 같은 네 가지가 있다.

/***
 *
 *    ：jQuery(expression)
 *              ，            ，            jQuery    。
 */
jQuery('#testDiv');


/***
 *
 *    ：jQuery(html)
 *     HTML   ，jQuery          DOM   jQuery  
 */
jQuery('');


/***
 *
 *    ：jQuery(elements)
 *          DOM  ，jQuery     jQuery     
 */
jQuery('li').css('backgroud-color','#FFF');


/***
 *
 *    ：jQuery(fn)
 *       ，    `$(document).ready()`    
 */
$(function(){
    $('ul').css('color','red');
});

jQuery 체인 구문

    
        
        
        
    
    
                
        
        
            $(function(){
                //      
                $('<input type="button" value="click me">'+
                  '<input type="button" value="triggle click">'+
                  '<input type="button" value="detach handler">'+
                  '<input type="button" value="show/hide text">').appendTo($('body'));
                //        click  
                $('input[type="button"]').eq(0).click(function(){
                    alert('click me!');
                //        click  ，          
                }).end().eq(1).click(function(){
                    $('input[type="button"]:eq(0)').trigger('click');
                //        click  ，            
                }).end().eq(2).click(function(){
                    $('input[type="button"]:eq(0)').unbind('click');
                //        toggle  ，         
                }).end().eq(3).click(function(){
                    $('.txt').toggle('slow');
                });
            });
        
    

jQuery는 end(),eq(),filter() 등 방법을 제공하여 체인식 조작을 진행했다.그러나 코드의 읽기 가능성을 위해 같은 줄에서 호출하는 방법은 3개를 넘지 않도록 권장하며, 코드가 너무 길면 줄을 바꾸거나 축소하는 것을 고려할 수 있다.

jQuery 선택기

부인할 수 없다. 강력한 선택기도 jQuery가 가장 유행하는 js 프레임워크가 될 수 있는 원인 중 하나이다.만약 jQuery의 선택기가 원생 JSgetElementById()처럼 허약하다면 프로젝트에서 jQuery를 사용할 수 있을까요?

jQuery 선택기는 실제적으로 특수한 의미를 나타내는 문자열로 id,tagName, css1~3, xpath 표현식을 지원합니다.그리고 jquery 구조 함수를 호출하여 이 문자열을 전송하면 DOM 대상을 선택하여 jQuery 대상으로 봉인할 수 있습니다.

jquery 선택기의 필터 및 선택

jQuery 필터는 기능에 따라 주로 선택과 선별로 나뉜다.

필터 작용의 선택기는 지정된 조건이 일치하는 요소에서 콜론:으로 요소를 선별하고 기본적으로 모든 요소*에서 필터를 한다.

$(':[title]');//    $('*:[title]')

선택 기능의 선택기는 기본 범위가 없습니다.