[번역] jquery 기초 강좌(jquery fundamentals)--(네 번째 부분) jquery 핵심

Jquery 기본 자습서
저자 Rebecca Murphey
원본 링크 주소http://jqfundamentals.com/
With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.
Copyright © 2011
 
 
Jquery 코어
 
$ VS $()
이상의 깔개를 통해 이제 우리는 jquery 대상이 호출되는 방법을 진지하게 분석할 수 있다.예를 들면 다음과 같습니다.

$('h1').remove();

대부분의 jquery 방법이 jquery 대상에 의해 호출되는 것은 위와 같은 방식을 통한다.이 방법들은 $으로 성명되었다.fn 명명 공간의 일부분 또는'jquery 원형'이며 jquery 대상으로 여겨지는 방법입니다.
그러나 몇 가지 방법이 선택된 결과에 작용하는 것이 아니다.이러한 방법도 jquery 명명 공간의 일부이며 jquery 핵심의 방법으로 여겨진다.
신학자에 대해 이것은 매우 곤혹스러운 문제다.다음 사항에 유의해야 합니다.
1,jquery 선택 결과 호출 방법이 $에 놓여 있습니다.fn의 이름 공간에서 자동으로 선택 결과를 수신하고 되돌려줍니다.
2. $명명 공간에서 정의된 방법은 일반적으로 도구 유형의 방법이며 구조 선택에 작용하지 않는다.그것들은 어떤 매개 변수도 자동으로 전달하지 않으며, 되돌아오는 값은 보통 수조이다.
여기에는 $와 같은 대상 방법과 핵심 방법이 같은 명칭을 가진 예가 있다.each와 $.fn.each.이런 상황에서 문서를 읽고 적당한 방법을 찾을 때는 특히 조심해야 한다.
도구 방법
jquery는 $이름 공간에서 몇 가지 도구 방법을 제공합니다.이런 방법들은 일반적인 프로그래밍 작업에 매우 도움이 된다.다음은 몇 가지 도구 방법의 예이다.jquery의 도구 방법을 더 알고 싶으면 http://api.jquery.com/category/utilities/를 방문하세요.
$.trim
시작과 끝의 공백을 제거합니다.

$.trim('    lots of extra whitespace    ');

// returns 'lots of extra whitespace'

$.each
배열 및 객체 반복

$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {

    console.log('element ' + idx + 'is ' + val);

});

$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {

    console.log(k + ' : ' + v);

});

주석:
jqurey에서 $하나를 동시에 가지고 있습니다.fn.each 방법, 선택 결과의 요소를 옮겨다니는 데 사용됩니다.
$.inArray
수조에서 색인할 가치가 있는 값을 되돌려줍니다. 만약 값이 수조에서 -1을 되돌려주지 않는다면.

var myArray = [ 1, 2, 3, 5 ];

if ($.inArray(4, myArray) !== -1) {

    console.log('found it!');

}

$.extend
다음 객체 속성으로 첫 번째 객체의 속성을 변경합니다.

var firstObject = { foo : 'bar', a : 'b' };

var secondObject = { foo : 'baz' };

var newObject = $.extend(firstObject, secondObject);

console.log(firstObject.foo); // 'baz'

console.log(newObject.foo);   // 'baz'

만약 당신이 $를 통과하는 것을 바꾸고 싶지 않다면.extend가 전달하는 모든 대상은 빈 대상을 첫 번째 대상으로 전달합니다.

var firstObject = { foo : 'bar', a : 'b' };

var secondObject = { foo : 'baz' };

var newObject = $.extend({}, firstObject, secondObject);

console.log(firstObject.foo); // 'bar'

console.log(newObject.foo);   // 'baz'

$.proxy
지정한 역할 영역에서 실행할 수 있는 방법을 되돌려줍니다. 즉,this를 전달하는 함수에 두 번째 인자로 설정하는 것입니다.

var myFunction = function() { console.log(this); };

var myObject = { foo : 'bar' };

myFunction(); // logs window object

var myProxyFunction = $.proxy(myFunction, myObject);

myProxyFunction(); // logs myObject object

만약 방법을 포함하는 대상이 있다면, 대상과 방법의 이름을 전달해서 대상 역할 영역에서 실행될 함수를 되돌릴 수 있습니다.

var myObject = {

    myFn : function() {

        console.log(this);

    }

};

$('#foo').click(myObject.myFn); // logs DOM element #foo

$('#foo').click($.proxy(myObject, 'myFn')); // logs myObject

유형 검사
'javascript 기초'에서 언급한 바와 같이 jquery는 구체적인 가치 유형을 정하기 위한 기본적인 도구를 제공합니다.
예4.1: 모든 가치 유형 검사

var myValue = [1, 2, 3];

// Using JavaScript's typeof operator to test for primative types

typeof myValue == 'string'; // false

typeof myValue == 'number'; // false

typeof myValue == 'undefined'; // false

typeof myValue == 'boolean'; // false

// Using strict equality operator to check for null

myValue === null; // false

// Using jQuery's methods to check for non-primative types

jQuery.isFunction(myValue); // false

jQuery.isPlainObject(myValue); // false

jQuery.isArray(myValue); // true

데이터 방법
jquery에 대한 진일보한 운용에 따라 이런 상황이 자주 발생하는 것을 발견할 수 있다. 원소의 데이터를 원소와 함께 저장하고 싶다.일반적인javascript에서는 DOM 요소에 속성을 추가해서 실현할 수 있지만, 일부 브라우저에서 메모리 유출 문제에 직면하게 될 것이다.jquery는 데이터와 요소를 연결해서 저장하는 단도직입적인 방법을 제공합니다. 또한 메모리 문제를 유지할 수 있습니다.
예4.2: 요소와 관련된 데이터 저장 및 복구

$('#myDiv').data('keyName', { foo : 'bar' });

$('#myDiv').data('keyName'); // { foo : 'bar' }

너는 하나의 요소에 어떤 유형의 데이터를 저장할 수 있다. 이것은 복잡한 응용 개발을 할 때 아무리 중요해도 지나치지 않다.이러한 목적을 달성하기 위해서, 우리는 대다수 상황에서 달러를 사용한다.fn.데이터는 다른 요소의 정보를 저장합니다.
예를 들어, 우리는 하나의 항목과 내부의div 라벨 사이에 관계를 맺으려고 한다.이 항목을 조작할 때마다 연결을 만들 수 있지만, 더 좋은 해결책은 연결을 한 번만 맺은 다음div 탭을 가리키는 바늘을 $를 통과하는 것입니다.fn.데이터는 이 항목에 저장됩니다.
예4.3: 원소 간에 $.fn.데이터 저장 상호간의 관계

$('#myList li').each(function() {

    var $li = $(this), $div = $li.find('div.content');

    $li.data('contentDiv', $div);

});

// later, we don't have to find the div again;

// we can just read it from the list item's data

var $firstLi = $('#myList li:first');

$firstLi.data('contentDiv').html('new content');

$를 제외하고는.fn.데이터는 하나의 키 값으로 데이터를 저장할 수 있으며, 여러 키 값을 포함하는 대상을 저장해서 데이터를 저장할 수도 있다.
기능 및 브라우저 스누핑
jquery는 대부분의 자바스크립트 브라우저 팁을 없앴지만, 브라우저 환경을 알아야 할 때가 많다.
jquery는 이 목적을 실현하기 위해 $를 제공합니다.support 대상과 찬성하지 않는 $를 제공합니다.brower 객체이러한 객체에 대한 자세한 내용은 http://api.jquery.com/jQuery.support/ 및 http://api.jquery.com/jQuery.browser/를 참조하십시오.
    $.support 대상은 주로 브라우저가 어떤 특성을 지원하는지 확인하는 데 사용됩니다.그것은 보통 서로 다른 브라우저가 자바스크립트를 개성화하는 데 대한 지원으로 여겨진다.
    $.브라우저 대상은 $입니다.support의 보충은 곧 jquery에서 제거될 것으로 예상됩니다.그것은 브라우저 브랜드와 버전에 대한 직접적인 탐색을 제공했다.
다른 라이브러리 충돌 방지
다른 자바스크립트 라이브러리의 $변수를 사용하면 실행 충돌이 발생합니다.충돌을 피하기 위해서, jquery를 페이지에 불러오고, 페이지에서 jquery를 활용하기 전에, jquery를 비충돌 모드로 전환해야 합니다.
jquery가 비충돌 모드에 들어갈 때 $대신 변수 이름을 설정할 수 있습니다.
예4.4: jquery를 비충돌 모드로 설정

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>var $j = jQuery.noConflict();</script>

사용자가 실행한 익명 함수를 표준 $로 계속 감싸줄 수 있습니다.작가가 다른 라이브러리가 $를 차지했는지 알지 못할 때, 이런 방식은 컨트롤 제작에 있어서 표준적인 모델이다.
예4.5: 자체 실행 익명 함수에서 $

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

jQuery.noConflict();

(function($) {

   // your code here, using the $

})(jQuery)

</script>