Introduction to some core methods in jQuery programming_jquery

The method of calling the jQuery object is very simple:

$('h1').remove();

Most jQuery methods are called as above. These methods are located in the $.fn namespace. These methods are called jQuery object methods.

But there are also some methods that do not depend on the result set of the selector. These methods are located within the jQuery namespace. These methods are called jQuery core methods. If you find it difficult to understand, just remember the following two items:

1. All jQuery selector methods are located in the $.fn namespace.
2. The methods within $ are generally some practical functional methods. These methods do not rely on selectors, and the parameters and return values ​​of these methods are also very different.

Some object methods will have the same names as core methods, such as $.fn.each and $.each, so you need to pay special attention when using them.

jQuery’s $ namespace provides many useful methods:

Remove whitespace from a string twice:

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

Iterate over arrays and objects:

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

Returns the index of an element in the array, or -1 if the element does not exist

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

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

Use one object to extend another object:

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'

If you don’t want to change the value in the first object, just pass an empty object in the first parameter of $.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'

Change the scope of a function:

var myFunction = function() { console.log(this); };
var myObject = { foo : 'bar' };

myFunction(); // logs window object

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

Combined with events to see how to change the scope of the function:

var myObject = {
  myFn : function() {
    console.log(this);
  }
};

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

JavaScript itself has a type detection method, jQuery also has it, and it does it better:

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

Add additional data to HTML elements:

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

The data to be added can be of any type:

$('#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');