Introduction to some core methods in jQuery programming

Introduction to some core methods in jQuery programming_jquery

WBOY

Release： 2016-05-16 15:45:06

Original

1718 people have browsed it

The method of calling the jQuery object is very simple:

$('h1').remove();

Copy after login

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:

All jQuery selector methods are located in the $.fn namespace.
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'

Copy after login

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

Copy after login

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('找到了');
}

Copy after login

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'

Copy after login

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'

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

Add additional data to HTML elements:

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

Copy after login

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');

Copy after login