Introduction à certaines méthodes de base dans jQuery programmation_jquery

La méthode d'appel de l'objet jQuery est très simple :

$('h1').remove();

La plupart des méthodes jQuery sont appelées comme ci-dessus. Ces méthodes sont situées dans l'espace de noms $.fn. Ces méthodes sont appelées méthodes d'objet jQuery.

Mais il existe également certaines méthodes qui ne dépendent pas du jeu de résultats du sélecteur. Ces méthodes sont situées dans l'espace de noms jQuery. Ces méthodes sont appelées méthodes principales de jQuery. Si vous avez du mal à comprendre, n'oubliez pas les deux éléments suivants :

1. Toutes les méthodes de sélection jQuery sont situées dans l'espace de noms $.fn.
2. Les méthodes dans $ sont généralement des méthodes fonctionnelles pratiques. Ces méthodes ne reposent pas sur des sélecteurs, et les paramètres et les valeurs de retour de ces méthodes sont également très différents.

Certaines méthodes d'objet auront les mêmes noms que les méthodes principales, telles que $.fn.each et $.each, vous devez donc prêter une attention particulière lorsque vous les utilisez.

L'espace de noms $ de jQuery fournit de nombreuses méthodes utiles :

Supprimez deux fois les espaces d'une chaîne :

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

Itérer sur des tableaux et des objets :

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

Renvoie l'index d'un élément du tableau, ou -1 si l'élément n'existe pas

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

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

Utiliser un objet pour étendre un autre objet :

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'

Si vous ne souhaitez pas modifier la valeur du premier objet, passez simplement un objet vide dans le premier paramètre de $.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'

Modifier la portée d'une fonction :

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

myFunction(); // logs window object

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

Combiné avec des événements pour voir comment modifier la portée de la fonction :

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

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

JavaScript lui-même a une méthode de détection de type, jQuery l'a aussi, et il le fait mieux :

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

Ajouter des données supplémentaires aux éléments HTML :

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

Les données à ajouter peuvent être de tout 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');