Introduction à certaines méthodes de base dans jQuery programmation

Introduction à certaines méthodes de base dans jQuery programmation_jquery

WBOY

Libérer： 2016-05-16 15:45:06

original

1717 Les gens l'ont consulté

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

$('h1').remove();

Copier après la connexion

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 :

Toutes les méthodes de sélection jQuery sont situées dans l'espace de noms $.fn.
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'

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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'

Copier après la connexion

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'

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion