Maison > Article > interface Web > jQuery diverses méthodes
jQuery diverses méthodes
- 巴扎黑original
- 2017-06-26 14:32:141084parcourir
Les mots précédents
Les méthodes diverses sont en fait des méthodes outils, mais comme ce ne sont pas des méthodes définies sur le constructeur jQuery, elles ne peuvent pas être appelées méthodes outils. Cet article présentera en détail les diverses méthodes dans jQuery
Opérations sur les données
[data()]
Cette méthode est utilisée pour stocker tout arbitraire Données associées ou renvoie la valeur stockée dans les données du nom donné qui correspond au premier élément de la collection d'éléments
data( key, value ) data( obj ) data( key ) data()
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
console.log($("body").data("foo"));//52console.log($("body").data());//{foo: 52, bar: Object, baz: Array(3)}Si vous utilisez JavaScript natif, équivalent à
document.body.foo = 52; console.log(document.body.foo);//52
【removeData()】
La méthode removeData() permet de supprimer la valeur liée à .data(). Lorsqu'il est appelé avec l'argument name, .removeData() supprimera cette valeur unique. Lorsqu'il est appelé sans aucun argument, toutes les valeurs seront supprimées. Depuis le cache interne .data() de jQuery n'affecte aucun attribut de données HTML5 dans le document, ces attributs peuvent être supprimés à l'aide de .removeAttr()
Lors de l'utilisation de .removeData("name"), si sans cet attribut nom dans le cache de données interne, jQuery essaiera de trouver un attribut de données sur l'élément. Pour éviter d'interroger à plusieurs reprises l'attribut data-, définissez le nom sur null ou non défini (par exemple .data("name", undefined)) au lieu d'utiliser .removeData()
removeData( [name] ) // [name]:String 要移除的存储数据名removeData( [list] ) // [list]:Array,String 一个数组或空间分隔的字符串命名要删除的数据块
$('body').data("test1", "VALUE-1")
.data("test2", "VALUE-2");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}$('body').removeData("test1");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}Si vous utilisez du javascript natif, cela équivaut à
document.body.foo = 52; console.log(document.body.foo);//52delete document.body.foo; console.log(document.body.foo);
Opération de file d'attente
【 queue()】
Afficher ou faire fonctionner la file d'attente de fonctions qui a été exécutée sur l'élément correspondant
queue( [queueName ] ) //queueName : String 一个含有队列名的字符串。默认是 fx，标准的动画队列 queue( [queueName ], newQueue ) //newQueue:Array 一个替换当前列队内容的函数数组 queue( [queueName ], callback( next ) )//callback( next ):Function() 将要添加到队列中的新函数。当该函数被调用时，会从弹出队列中的下一个元素
var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);var n = div.queue('fx');
console.log(n.length);//2[clearQueue ( )】
Supprimer tous les éléments non exécutés de la file d'attente
clearQueue( [queueName ] )
Définir l'opération
[chacun( )】
Parcourez un objet jQuery et exécutez une fonction pour chaque élément correspondant
each( function(index, function(index, Element)) )
$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});[add()]
La méthode add() ajoute des éléments à la collection d'éléments correspondants. L'argument de la méthode add() peut accepter presque n'importe quel $(), y compris une expression de sélecteur jQuery, un élément DOM ou une référence de fragment HTML
add( selector ) add( elements ) add( html ) add( jQuery object ) add( selector, context )
$('li').add('p')
$('li').add('<p id="new">new paragraph</p>')<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li></ul><div>div</div><button id="btn">按钮</button><script>$('#btn').click(function(){
$('li').add('div').css('background', 'lightgreen');
})</script>[get()]
Obtenez l'élément DOM correspondant en récupérant l'objet jQuery correspondant
<span style="color: #000000;">get( [index ] ) index:Number 从0开始计数，用来确定获取哪个元素<br></span>
$( "li" ).get( 0 )
[index()]
Rechercher la valeur d'index d'un élément donné parmi les éléments correspondants, en comptant à partir de 0
index( [selector或element] )
Si vous ne transmettez aucun paramètre à la méthode .index(), la valeur de retour est la position du premier élément de l'objet jQuery par rapport à ses éléments frères
Si dans un groupe, .index() est appelé sur un élément et que le paramètre est un élément DOM ou un objet jQuery, la valeur de retour de .index() est la position de l'élément transmis par rapport à la collection d'origine.
Si le paramètre est un sélecteur, la valeur de retour de .index() est la position de l'élément d'origine par rapport à l'élément correspondant par le sélecteur. Si aucun élément correspondant n'est trouvé, .index() renvoie -1
$('#bar').index();
listItem.index('li');
$('li').index($('li:gt(0)'));[toArray()]
Renvoie une collection d'objets jQuery Tableau de tous les DOM éléments
toArray() 这个方法不接受任何参数
//[<li id="foo">, <li id="bar">]alert($('li').toArray());
Filtrage d'index
Le sélecteur d'index est une partie de sélection de filtre jQuery de l'appareil. Dans le même temps, il existe également des méthodes liées aux index avec des fonctions similaires, notamment eq(), first(), last()
[eq()]
La méthode eq() correspond aux éléments Quel élément de la collection se trouve à l'index spécifié. La méthode eq() peut accepter un entier comme paramètre, avec 0 comme base. Si l'entier est un nombre négatif, comptez à partir du dernier élément de l'ensemble
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn1">按钮一</button><button id="btn2">按钮二</button><button id="btn3">按钮三</button><script>$('#btn1').click(function(){
$('li').eq(0).css('border','1px solid red');
})
$('#btn2').click(function(){
$('li').eq(-1).css('border','1px solid blue');
})
$('#btn3').click(function(){
$('li').eq(2).css('border','1px solid green');
})</script>[first()]
La méthode first() obtient le premier élément de l'ensemble d'éléments correspondant. Cette méthode n'accepte pas les paramètres
【last()】
La méthode last() obtient le dernier élément du ensemble d'éléments correspondants. La méthode n'accepte pas les paramètres
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn1">按钮一</button><button id="btn2">按钮二</button><script>$('#btn1').click(function(){
$('li').first().css('border','1px solid red');
})
$('#btn2').click(function(){
$('li').last().css('border','1px solid blue');
})</script>[end()]
Terminer le dernier filtrage. opération dans la chaîne actuelle et retour L'état précédent de l'élément correspondant
end() 这个方法不接受任何参数
La méthode end() est principalement utilisée dans les attributs chaînés de jQuery. Lorsque nous n'utilisons pas le chaînage, nous appelons généralement simplement l'objet précédent par le nom de la variable, nous n'avons donc pas besoin de manipuler la pile. Lors de l'utilisation de end(), nous pouvons appeler toutes les méthodes requises à la fois
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');在上面的代码中，首先在链式用法中只在第一个列表中查找样式为 foo 的项目，并将其背景色变成红色。然后 end() 返回调用 find() 之前的状态。因此，第二次 find() 将只会查找
- 中的 '.bar'，而不是继续在
- 中进行查找，结果是将匹配到的元素的背景色变成绿色
内容过滤
jQuery选择器中包括内容过滤选择器，而jQuery中也存在功能类似的内容过滤的方法，包括has()、filter()、is()、not()、map()、slice()
【has()】
has()方法用于筛选匹配元素集合中有相匹配的选择器或DOM元素的后代元素的父元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2<ul> <li>list item 2-a</li> <li>list item 2-b</li></ul></li><li>list item 3</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){ $('li').has('ul').css('border', '1px solid lightblue'); })</script>【map()】
map()方法通过一个函数匹配当前集合中的每个元素
作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><input value="text"><input value="text"><input value="text"><button id="btn">按钮</button><script>$('#btn').click(function(){ $('input').map(function(index,dom){ dom.value += index; }); })</script>【filter()】
filter()方法从匹配的元素集合中筛选出指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){ $('li').filter(':even').css('border','1px solid lightgreen') })</script>filter()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素保留；否则，该元素在匹配集合中被去除
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){ $('li').filter(function(index,dom){if(!(index % 3)){ $(dom).css('border','1px solid lightgreen')return true; } }) })</script>【not()】
not()方法与filter()方法正好相反，它从匹配的元素集合中移除指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){ $('li').not(':even').css('border','1px solid lightgreen') })</script>not()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素被去除；否则，该元素在匹配集合中保留
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){ $('li').not(function(index,dom){if(!(index % 3)){ $(dom).css('border','1px solid lightgreen')return true; } }) })</script>【is()】
is()方法用于判断当前元素是否与参数相匹配，如果匹配，则返回true；否则，返回false。参数可以是一个选择器，DOM元素，jQuery对象或函数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><script>$('li').click(function(){if($(this).is(':contains("2")')){ $(this).css('border','1px solid black') } })</script>is()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回true，is()方法也返回true，如果函数返回false，is()方法也返回false
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><div id="result"></div><script>var i = 0; $('li').click(function(){++i;if($(this).is(function(index,dom){ $('#result').html(dom.innerHTML);if(i%2){return true; } })){ $(this).css('border','1px solid black') } })</script>【slice()】
slice()方法根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象
slice(start[,end])方法接受两个参数：start和end
start是一个整数，从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数
end是一个整数，从0开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从start开始，一直到最后
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){ $('li').slice(2,4).css('background', 'red'); })</script>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!