Maison > interface Web > js tutoriel > Quelles sont les méthodes jquery couramment utilisées ?

Quelles sont les méthodes jquery couramment utilisées ?

一个新手
Libérer: 2017-09-18 09:49:52
original
2403 Les gens l'ont consulté

effet jquery

1.隐藏/显示  hide(),show(),toggle()
2.淡入/淡出  fadeIn(),fadeOut(),fadeToggle(),fadeTo()
Copier après la connexion
fadeTo(speed,opcity)这个不常用,但是效果好。opcity取0~1之间的值
Copier après la connexion
3.滑动  slideUp(),slideDown(),slideToggle()
4.动画  animate()       $().animate(参数,speed,callback);
Copier après la connexion
注:动画的属性名称必须使用marginLeft这种而不是margin-left
可以设置相对值。如:"left":"+=10px"
animate()可以设置队列动画,即动画的不同属性按顺序写,他就会按顺序执行
Copier après la connexion
5.stop(stopAll,goToEnd)
Copier après la connexion
 该方法在动画执行完之前就可以结束动画。适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
    stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画
    goToEnd 参数规定是否立即完成当前动画。默认是 false。
Copier après la connexion

6.chaîne jquery

$("#p1").css("color","red")
 .slideUp(2000)
 .slideDown(2000);
jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行。
Copier après la connexion

Remarque : les méthodes ci-dessus ont toutes des fonctions de rappel. Si le rappel est une fonction anonyme, il peut être exécuté immédiatement. Le nom de la fonction est basculé et exécuté

.

jquery HTML

Retourner le contenu

1.html(),text(),val()(这三种方法同样存在回调函数)
Copier après la connexion
html或者text或者val(function(i,origvalue){})
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。
区别:html()可以返回标签结构,其他两个只返回文本
Copier après la connexion
2.attr()和prop的区别 (这种方法同样存在回调函数)
Copier après la connexion
我觉得attr用与获取和设置自定义的属性。prop用于获取标签固有的属性
attr(function(i,origvalue){})
Copier après la connexion
3.添加文本append(),prepend()。before(),after()
Copier après la connexion
前两个是在所选元素里面的前后添加
后两个是在所选元素的外部的前后添加
Copier après la connexion
4.删除元素/内容    remove(),empty()
Copier après la connexion
前者删除被选元素及其子元素
后者删除被选元素的子元素
Copier après la connexion
5.操作css       addClass(”class1,class2,,,”),removeClass(),css()    注:css方法和animate()方法不同,css方法属性使用的是margin-left而不是marginLeft
6.元素尺寸
Copier après la connexion
width(),height(),innerWidth(),innerHeight(),outerWidth(),outHeight()
width(),height()==元素的宽高(不包括padding, margin,和border)
innerWidth(),innerHeight()==元素的宽高+padding(不包括margin和border)
outerWidth(),outHeight()==元素的宽高+padding+border(不包括margin)
Copier après la connexion

traversée jquery

traversée jquery

1.父   parent(),parents(); 
2.子   children(),find() 
3.同胞 siblings(),pre(),next() 
4.过滤  first(),last(),eq(),filter(),not() 
  $(“p”).filter(“.url”);返回带有类名 “url” 的所有
元素: 
  $(“p”).not(“.url”);返回不带有类名 “url” 的所有
元素:
**
Copier après la connexion

jquery Ajax

* *

Syntaxe : $.ajax({name:value, name:value, … })
Cinq étapes de requête ajax asynchrone
Première étape :

var xmlhttp;if (window.XMLHttpRequest)
{    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}else{    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Copier après la connexion

Étape 2 : Définir les paramètres

url:”“, type:”“, success: ,error:等
Copier après la connexion

Étape 34 :

xmlhttp.open(“GET”,”url”,true); 
  例如:”a.php?t=” +Math.random()” 
   xmlhttp.send();
Copier après la connexion

Cinquième étapes :

xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState==4 &&
xmlhttp.status==200) 
      { 
          document.getElementById(“myp”).innerHTML=xmlhttp.responseText; 
      } }
Copier après la connexion

Get est différent de post : get est soumis à la barre d'adresse. Le message est soumis à la page php d’arrière-plan. Donc s'il s'agit d'une méthode get, veuillez écrire l'url comme ceci : Par exemple : "a.php?name=zhangsan&age=14"

Enfin, nous traiterons les données renvoyées par le serveur

xmlhttp.responseText; 获得字符串形式的响应数据。 xmlhttp.responseXML;  
获得 XML形式的响应数据。
Copier après la connexion

Ajax traite php/xml/jsp et les autres fichiers de la même manière. Cela dépend principalement de l'apparence des données renvoyées, puis les traite en conséquence


Parce que de nombreux frameworks js utilisent $ comme symbole d'abréviation. Si vous utilisez plusieurs frameworks, jquery cessera de fonctionner

Solution : méthode jQuery noConflict()

1 Créez votre propre symbole de représentation au lieu de $

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
Copier après la connexion
< 🎜. >2. Utilisez jQuery pour l'exprimer à l'extérieur, et utilisez $

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});
Copier après la connexion

jquery JSONP

En utilisant l'attribut src de la balise script, il n'y a aucune restriction sur le nom de domaine

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal