jQuery 스텔스 교체 및 체인 호출

2188 단어 jQuery
jQuery 스텔스 교체 및 체인 호출
jQuery를 배운 후에 보통 원생 JS를 쓰기를 원하지 않는다. 심지어 한때는 jQuery가 JS의 대명사가 되었다.원인은 다른 것이 없어서 충분히 간단하고 편리하다.이 간단하고 편리한 배후에서 두 가지 공신이 빠질 수 없다. 그것이 바로 은식 교체와 체인 호출이다.
암시적 교체
원생 JS의 경우 일반적으로 우리가 특정한 요소의 스타일을 설정할 때 순환 설정을 사용해야 하는데 jQuery가 사용할 때 이런 점을 고려할 필요가 없다. 간단한 예는 다음과 같다.
//    .primary          #188eee

//    JS
var primary = document.getElementsByClassName('primary');
for(var i = 0, len = primary.length; i < len; i++) {
    primary[i].style.color = '#188eee';
}

// jQuery
$('.primary').css('color', '#188eee');

이것은 jQuery의 방법 내부에 은밀한 교체가 존재하기 때문에 일치하는 모든 요소를 순환하고 해당하는 방법을 실행한다.우리가 더 이상 수동적으로 따를 필요가 없어서 우리가 사용하기 편리하다.
스텔스 교체를 제외하고 jQuery는 each 방법을 제공하여 필요할 때 호출하기 편리하게 한다.비유는 각 요소를 다르게 처리합니다.
$("li").each(function(i){
   $(this).addClass('item-'+i);
 });

주: jQuery는 대상이나 그룹을 훑어보는 데 사용되는 전역적인 each 방법이 있습니다
체인 프로그래밍
이전에 우리는 어떤 요소에 대해 일련의 조작을 해야 했다. 단지 한 사람만 할 수 있었고 jQuery는 체인식 조작을 제공했다. 조작을 하면 그야말로 더 이상 시원할 수 없다. 아래와 같다.
//    
$('div').hide(); //        div  
$('div').text('new content'); //    div      
$('div').addClass("updatedContent"); //    div       updatedContent class  
$('div').show(); //        div  

//    ，  
$('div').hide().text('new content').addClass("updatedContent").show();

//    
$('div')
  .hide()
  .text('new content')
  .addClass("updatedContent")
  .show();

그 원리는 모든 방법의 마지막으로this 대상을 되돌려주는 것이다. 우리는 간단한 코드로 설명할 수 있다.
//    
function Person(opt) {
    this.name = opt.name;
    this.age = opt.age
}

//    getName   
Person.prototype.getName = function() {
    console.log(this.name);
    return this; //    this   
}

//    sayHello   
Person.prototype.sayHello = function() {
    console.log('hello the world');
    return this; //    this   
}

//       next   Person  
var next = new Person({
    name: 'next'
});

//      getName   sayHello   
next.getName().sayHello();

 
이 블로그는 IMWeb에 전재됩니다. 전재하려면 출처를 밝혀 주십시오!!
한 페이지에서 여러 jQuery 버전을 공존하는 방법
jQuery 선택기 전체

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage