jQuery 프로그래밍_jquery의 일부 핵심 메서드 소개

jQuery 객체를 호출하는 방법은 매우 간단합니다.

$('h1').remove();

대부분의 jQuery 메소드는 위와 같이 호출되며, 이러한 메소드는 $.fn 네임스페이스에 위치합니다.

그러나 선택기의 결과 집합에 의존하지 않는 일부 메서드도 있습니다. 이러한 메서드는 jQuery 네임스페이스 내에 있습니다. 이해하기 어렵다면 다음 두 가지만 기억해주세요.

1. 모든 jQuery 선택기 메서드는 $.fn 네임스페이스에 있습니다.
2. $ 내의 메소드는 일반적으로 실용적인 기능적 메소드이며 선택자에 의존하지 않으며 이러한 메소드의 매개변수와 반환 값도 매우 다릅니다.

$.fn.each 및 $.each와 같은 일부 객체 메서드는 핵심 메서드와 이름이 동일하므로 사용할 때 특별한 주의가 필요합니다.

jQuery의 $ 네임스페이스는 다음과 같은 유용한 메서드를 많이 제공합니다.

문자열에서 공백을 두 번 제거합니다.

$.trim('  lots of extra whitespace  ');
// 返回 'lots of extra whitespace'

배열 및 객체 반복:

$.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);
});

배열에 있는 요소의 인덱스를 반환하거나 요소가 존재하지 않는 경우 -1을 반환합니다.

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

if ($.inArray(4, myArray) !== -1) {
  console.log('找到了');
}

한 개체를 사용하여 다른 개체 확장:

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'

기능 범위 변경:

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에도 유형 감지 방법이 있으며 더 나은 기능을 제공합니다.

var myValue = [1, 2, 3];

// 用 JavaScript 的 typeof 操作符来判断类型
typeof myValue == 'string'; // false
typeof myValue == 'number'; // false
typeof myValue == 'undefined'; // false
typeof myValue == 'boolean'; // false

// 用恒等于 检测 null
myValue === null; // false

// 使用 jQuery 的方法来判断类型
jQuery.isFunction(myValue); // false
jQuery.isPlainObject(myValue); // false
jQuery.isArray(myValue); // true

HTML 요소에 추가 데이터 추가:

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

추가할 데이터 유형은 무엇이든 가능합니다.

$('#myList li').each(function() {
  var $li = $(this), $div = $li.find('div.content');
  $li.data('contentDiv', $div);
});

// 不需要再去找那些 div 了；
// 可以直接从 list 中读取出来
var $firstLi = $('#myList li:first');
$firstLi.data('contentDiv').html('new content');