jQuery 是一個高效、精簡并且功能豐富的 JavaScript 工具庫。它提供的 API 易于使用且兼容眾多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單。

一、獲取元素

jQuery的核心設計思想就是獲取元素，然后對其操作；因此在使用jQuery時，我們首先要學習jQuery是如何獲取元素的，舉幾個比較常用的例子（$是jQuery的簡寫）

• jQuery用CSS選擇器來獲取元素

$(doucument)//獲取整篇文檔 $('.test')//獲取class為test的元素 $('#test')//獲取id為test的元素

• jQuery用它特有的表達式來獲取元素

$('a:first') //獲取網頁中第一個a元素 $('div:visible') //獲取可見的div元素 $('div:gt(2)') // 獲取除前三個以外的所有元素

• jQuery通過過濾器縮小范圍獲取元素

$('div').has('p'); // 選擇包含p元素的div元素 $('div').siblings(); //選擇div的同級元素 $('div').closest('form'); //選擇離div最近的那個form父元素

二、鏈式操作

由于jQuery中的函數最終返回的都是它當前操作的對象，因此jQuery可以進行鏈式操作，這樣的操作使代碼變得更加簡潔易讀。

$('#test').find('.child').addClass('red') --------------------------------------------------------------------------------------------------- $('#test') .find('.child') .addClass('red')//在id為test的元素中找到class為child的元素，添加red樣式

三、創建元素

jQuery區別于其他庫的一個特點就是，jQuery用一個函數就完成了對某元素的取值和賦值。

$('div.demo-container').html();//.html() 方法來獲取class為demo-container的div中的內容 --------------------------------------------------------------------------------------------------- $('div.demo-container').html('<p>All new content. <em>You bet!</em></p>'); //設置（替換） <div class="demo-container">里的所有內容

常見的取值和賦值函數有：

.val()：獲取匹配的元素集合中第一個元素的當前值或設置匹配的元素集合中每個元素的值。

.attr()：獲取匹配的元素集合中的第一個元素的屬性的值 或 設置每一個匹配元素的一個或多個屬性。

.prop()：獲取匹配的元素集中第一個元素的屬性（property）值或設置每一個匹配元素的一個或多個屬性。

.height()：獲取匹配元素集合中的第一個元素的當前計算高度值。設置每一個匹配元素的高度值。

.width()：為匹配的元素集合中獲取第一個元素的當前計算寬度值。給每個匹配的元素設置CSS寬度。

四、移動元素

jQuery提供了兩種方法來完成元素的移動操作：

假設我們現在要移動的元素是div，我們要div元素移動到p元素后面；

• 使用.insertAfter()，直接把div元素移動p元素后面：

　　$('div').insertAfter($('p'));//返回div元素

• 使用.after()，把p元素加到div元素前面：

　$('p').after($('div'));//返回p元素

五、修改元素屬性

jQuery中修改元素屬性方法的有：.attr()方法和.prop()方法

• .attr()：使用.attr()方法的好處在于它可以直接被jQuery對象訪問并且鏈式調用其他jQuery方法；同時.attr()方法減少了瀏覽器兼容性問題。一般來說，如果HTML元素上的屬性是我們自定義的DOM屬性，在更改該屬性時，使用.attr()方法。

• .prop()：.prop()方法設置屬性值非常方便，尤其是對于需要使用一個函數設置多個屬性值或是一次性設置多個屬性值的情況；它與.attr()方法區別在于.prop() 方法返回 property 的值,而.attr()方法返回 attributes 的值。當設置selectedIndex， tagName,nodeName,nodeType,ownerDocument,defaultChecked, 或defaultSelected必須使用這個方法。從jQuery1.6開始，這些屬性可以不再使用.attr()方法來設置。他們沒有相應的屬性（attributes），只有屬性(property)。

本文參考的相關文章：

• http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html
• https://www.jquery123.com/

總結

以上是生活随笔為你收集整理的jquery find 找到frame select_简述jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。