jquery的主要功能有哪些

jquery的主要功能有：1、存取頁面框架的局部；2、修改頁面的表現；3、更改頁面內容；4、回應事件；5、為頁面新增動畫；6、與伺服器非同步交互；7.簡化常用的JavaScript操作。

本教學操作環境：Windows10系統、jquery3.2.1、Dell G3電腦。

jquery的主要功能有哪些？

jQuery的主要功能

1：存取頁面框架的局部

jQuery大大簡化了DOM取得頁面某個節點或某一類節點的固定方法；

2：修改頁面的表現

由於各個瀏覽器對CSS3標準的支援不同，是的許多CSS3的樣式風格沒能很好的體現。 jQuery的出現很好的解決了這個問題。它透過封裝好的JavaScript程式碼，是的各種瀏覽器能很好的使用CSS3標準。

3：更改頁面內容

透過強大而面向的API，jQuery可以很方便的修改頁面的內容，甚至整個頁面的框架；

4：回應事件

不需要在考慮瀏覽器的兼容性問題，可以更輕鬆的處理事件；

5：為頁面添加動畫

jQuery的庫提供了大量可自定義參數的動畫效果，

6：與伺服器非同步互動

jQuery提供了一整套Ajax相關的操作，大大方便了非同步互動的開發與使用；

# 7：簡化常用的JavaScript操作

jQuery提供了許多附加的功能來簡化常用的JavaScript操作，例如陣列的操作，迭代運算等；

jQuery 的基本功能

jQuery 封裝了DOM 功能，讓DOM 函數的使用變得非常簡潔方便。無論是對網頁元素的取得或是「增刪改查」都進行了更人性化的封裝。以下讓我們簡單了解 jQuery 的基本功能以及 jQuery 設計的優秀之處。

一、取得網頁元素

jQuery 取得的結果是一個物件

• 一些基本方法

$(document); // 选择整个文档对象
$("#myId"); // 选择id = 'myId' 的元素
$(".myClass"); // 选择class = 'myClass' 的元素
$("div.myClass"); // 选择class = 'myClass' 的div元素
$("input[name=first]"); // 选择name = 'first' 的 input 元素

• jQuery 特有的表達式

$("a:first"); // 选择网页中第一个a元素
$("tr:odd"); // 选择表格中的奇数行
$("#myFrom:input"); // 选择表单中的id='myFrom'的input元素
$("div:visible"); // 选择可见的div元素
$("div:gt(2)"); // 选择所有的div元素，除了前3个
$("div:animated"); // 选择当前处于动画状态的div元素

• 進一步過濾div 的選擇結果物件

##

$("div").has("p"); // 选择包含p元素的div元素
$("div").not(".myClass"); //选择class != 'myClass' 的div元素
$("div").filter(".myClass"); // 选择class = 'myClass' 的div元素
$("div").first(); // 选择第1个div元素
$("div").eq(5); // 选择第6个div元素

• 透過div 選擇其他元素

$("div").next("p"); // 选择div元素后面的第1个p元素
$("div").parent(); // 选择div元素的父元素
$("div").closest("from"); // 选择离div最近的from父元素
$("div").children(); // 选择div的所有子元素
$("div").siblings(); // 选择div同级的其他兄弟元素（不包括自己）

#二、鍊式運算

jQuery 最令人稱道的部分

jQuery 可以對同一物件進行連續函數操作

範例：

$("div").find("p").addClass("first").removeClass("second").html("third");
// 分解
$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first") // 添加一个class = 'first'
  .removeClass("second") // 删除一个class = 'second'
  .text("third"); // 将文本改为 third

鍊式運算是jQuery 最方便的特點，因為jQuery 每次執行一個函數運算的傳回值還是原來操作的jQuery 對象，所以可以直接在後面繼續操作。

.end() 方法

.end() 方法，讓回傳值結果退到上一個jQuery 物件

範例：

$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first")
  .removeClass("second")
  .text("third")
  .end() // 将jQuery对象从p退回到div
  .addClass("myDiv"); // 给div添加一个class = 'myDiv'

#三、增刪改查

1. 增

建立新元素：直接在jQuery 直接傳入符合html 格式的字串

let $myDiv = $("<div class=&#39;myDiv&#39;><p>Derek</p></div>"); // 创建新的元素，用变量$myDiv储存
$("body").append($myDiv); // 把$myDiv储存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中

複製元素

.clone()

傳回目前jQuery 物件的複製副本

#包括所有符合元素、符合元素的下層元素、文字節點

2 個參數：

withDataAndEvents 是否同時複製元素的資料和綁定事件，預設false

deepWithDataAndEvents 是否同時複製元素所有子元素的資料和綁定事件，預設值為第1 個參數(withDataAndEvents)的值

2.刪除

#刪除元素

.remove() 不保留被删元素的事件
.detach() 保留被删元素的事件，便于在重新插入文档时使用
.empty() 清空元素内容，但不删除该元素（即删除元素里面的所有节点）

3. 改變

插入/移動元素

$("div").insertAfter($("p")); // 把div元素移动到p元素的后面
$("p").after($("div")); // 把p元素移动到div元素的前面

上述兩種方法的效果是一樣的

但是它們的回傳值是不同的，分別是$('div')和$('p')，所以需要根據後續的運算來進行選擇

另外兩種插入/移動元素的方法

// 在div内部的 末端 插入内容
$("div").append("插入的部分");
$("插入的部分").appendTo("div");
// 在div内部的 顶端 插入内容
$("div").prepend("插入的部分");
$("插入的部分").prependTo("div");

4. 改查合一getter/setter

同一函數，透過傳參的不同來實現改/查功能

$("h1").html(); // html没有传参，实现取出h1的值
$("h1").html("Hello"); // html传参'Hello'，实现对h1进行赋值

jQuery 常見取值/賦值函數

.html() 查/改html 內容

.text() 查/改text 內容

#. attr() 檢視/改某一屬性的值

.width() 檢視/改變某個元素寬度

.heigth() 查詢/改某個元素高度

.val() 檢視/修正某個表單元素的值

注意：

如果結果物件包含多個元素，那麼賦值時，將對其中所有的元素賦值

取值時，則是只取出第一個元素的值

.text()例外，它會取出所有元素的text 內容

推薦學習：《

jQuery影片教學》

以上是jquery的主要功能有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！