常用的jquery方法有哪些-js教程-PHP中文網

首頁

web前端

js教程

常用的jquery方法有哪些

一个新手

Sep 18, 2017 am 09:49 AM

jquery哪些方法

jquery效果

1.隐藏/显示  hide（），show（），toggle（）
2.淡入/淡出  fadeIn（），fadeOut（），fadeToggle（），fadeTo（）

fadeTo（speed，opcity）这个不常用，但是效果好。opcity取0~1之间的值

3.滑动  slideUp（），slideDown（），slideToggle（）
4.动画  animate（）       $().animate(参数,speed,callback);

注：动画的属性名称必须使用marginLeft这种而不是margin-left
可以设置相对值。如："left":"+=10px"
animate()可以设置队列动画，即动画的不同属性按顺序写，他就会按顺序执行

5.stop（stopAll,goToEnd）

 该方法在动画执行完之前就可以结束动画。适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
    stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画
    goToEnd 参数规定是否立即完成当前动画。默认是 false。

6.jquery 鏈

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

註：以上方法都擁有回呼函數，如果 callback 如果是匿名函數可以立即執行，函數名稱是toggle結束了執行

jquery HTML

##返回內容

1.html(),text(),val()(这三种方法同样存在回调函数)

html或者text或者val（function（i，origvalue）{}）
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
区别：html（）可以返回标签结构，其他两个只返回文本

2.attr()和prop的区别 (这种方法同样存在回调函数)

我觉得attr用与获取和设置自定义的属性。prop用于获取标签固有的属性
attr（function（i，origvalue）{}）

3.添加文本append（），prepend（）。before（），after（）

前两个是在所选元素里面的前后添加
后两个是在所选元素的外部的前后添加

4.删除元素/内容    remove（），empty（）

前者删除被选元素及其子元素
后者删除被选元素的子元素

5.操作css       addClass（”class1,class2,,,”）,removeClass(),css()    注：css方法和animate（）方法不同，css方法属性使用的是margin-left而不是marginLeft
6.元素尺寸

width（），height（），innerWidth（），innerHeight（），outerWidth（），outHeight（）
width()，height（）==元素的宽高（不包括padding， margin，和border）
innerWidth（），innerHeight（）==元素的宽高+padding（不包括margin和border）
outerWidth（），outHeight（）==元素的宽高+padding+border（不包括margin）

jquery遍歷

#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” 的所有
元素：
**

jquery Ajax

語法：$.ajax({name:value, name:value, … })

ajax非同步請求的五個步驟第一步：

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

第二步：設定參數

url：”“， type:”“， success: ，error：等

第三四步：

xmlhttp.open(“GET”,”url”,true); 
  例如：”a.php?t=” +Math.random()” 
   xmlhttp.send();

第五步：

xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState==4 &&
xmlhttp.status==200) 
      { 
          document.getElementById(“myp”).innerHTML=xmlhttp.responseText; 
      } }

get和post不一樣： get是提交到網址列。 post是提交到後台php頁面。所以若是get方法，url請這樣寫：例如：”a.php?name=zhangsan&age=14”

最後再來處理伺服器給我們回傳的資料

xmlhttp.responseText; 获得字符串形式的响应数据。 xmlhttp.responseXML;  
获得 XML形式的响应数据。

ajax處理php/xml/jsp等文件是一樣的。主要看返回的資料是什麼樣子的，然後進行對應的處理

由於許多的js框架都在使用$作為簡寫的符號。如果使用多個框架將會使得jquery停止運行

解決方案：jQuery noConflict() 方法

1.建立自己的表示符號取代$

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

2.在外邊使用jQuery表示，裡邊用$

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

jquery JSONP

利用script標籤的src屬性沒有網域的限制特點；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    </head><body><p id="box"></p><script>$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    //data就是服务器返回给我们的数据，我们只需要对他进行处理即可
    var html = &#39;<ul>&#39;;    
    for(var i = 0; i < data.length; i++)
    {
        html += &#39;<li>&#39; + data[i] + &#39;</li>&#39;;
    }
    html += &#39;</ul>&#39;;

    $(&#39;#box&#39;).html(html); 
});
</script>
</body>
</html>

以上是常用的jquery方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。