Heim > Web-Frontend > js-Tutorial > Hauptteil

Was sind die am häufigsten verwendeten JQuery-Methoden?

一个新手
Freigeben: 2017-09-18 09:49:52
Original
2397 Leute haben es durchsucht

JQuery-Effekt

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

6.jQuery-Kette

$("#p1").css("color","red")
 .slideUp(2000)
 .slideDown(2000);
jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行。
Nach dem Login kopieren

Hinweis: Die oben genannten Methoden verfügen alle über Rückruffunktionen. Wenn der Rückruf eine anonyme Funktion ist, kann er sofort ausgeführt werden

jquery HTML

Inhalt zurückgeben

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

jquery traversal

1.父   parent(),parents(); 
2.子   children(),find() 
3.同胞 siblings(),pre(),next() 
4.过滤  first(),last(),eq(),filter(),not() 
  $(“p”).filter(“.url”);返回带有类名 “url” 的所有
元素: 
  $(“p”).not(“.url”);返回不带有类名 “url” 的所有
元素:
**
Nach dem Login kopieren
jquery Ajax

* *

Syntax: $.ajax({name:value, name:value, … })


Fünf Schritte einer asynchronen Ajax-Anfrage Erster Schritt:

var xmlhttp;if (window.XMLHttpRequest)
{    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}else{    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Nach dem Login kopieren
Schritt 2: Parameter einstellen

url:”“, type:”“, success: ,error:等
Nach dem Login kopieren
Schritt 34:

xmlhttp.open(“GET”,”url”,true); 
  例如:”a.php?t=” +Math.random()” 
   xmlhttp.send();
Nach dem Login kopieren
Fünfte Schritte:

xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState==4 &&
xmlhttp.status==200) 
      { 
          document.getElementById(“myp”).innerHTML=xmlhttp.responseText; 
      } }
Nach dem Login kopieren
Get unterscheidet sich von Post: get wird an die Adressleiste gesendet. Der Beitrag wird an die PHP-Hintergrundseite gesendet. Wenn es sich also um eine Get-Methode handelt, schreiben Sie die URL bitte wie folgt: Zum Beispiel: „a.php?name=zhangsan&age=14“

Abschließend verarbeiten wir die vom Server zurückgegebenen Daten

xmlhttp.responseText; 获得字符串形式的响应数据。 xmlhttp.responseXML;  
获得 XML形式的响应数据。
Nach dem Login kopieren
Ajax verarbeitet PHP/XML/JSP und andere Dateien auf die gleiche Weise. Es hängt hauptsächlich davon ab, wie die zurückgegebenen Daten aussehen, und verarbeitet sie dann entsprechend


Da viele JS-Frameworks $ als Abkürzungssymbol verwenden. Wenn Sie mehrere Frameworks verwenden, wird jquery nicht mehr ausgeführt

Lösung: jQuery noConflict()-Methode

1 Erstellen Sie Ihr eigenes Darstellungssymbol anstelle von $

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
Nach dem Login kopieren
2. Verwenden Sie jQuery, um es nach außen auszudrücken, und verwenden Sie $

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});
Nach dem Login kopieren

jquery JSONP

Bei Verwendung des src-Attributs des Skript-Tags gibt es keine Einschränkung der Domainname;

Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten JQuery-Methoden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage