好程序員web前端學習路線分享jQuery學習技巧，jQuery在web前端學習中是一個必不可少的內容，很多小伙伴都在學習這階段的時候遇到問題，今天我們就來聊一下jQuery，讓我們一起來看一看吧！

1、關于頁面元素的引用

通過jquery的$引用元素包括通過id、class、元素名以及元素的層級關系及dom或者xpath條件等方法，且返回的對象為jquery對象(集合對象)，不能直接調用dom定義的方法。

2、jQuery對象與dom對象的轉換

只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區別的，調用方法時要注意操作的是dom對象還是jquery對象。普通的dom對象一般可以通過$轉換成jquery對象。

如：$(document.getElementById("msg"))則為jquery對象，可以使用jquery的方法。

由于jquery對象本身是一個集合。所以如果jquery對象要轉換為dom對象則必須取出其中的某一項，一般可通過索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]這些都是dom對象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下幾種寫法都是正確的：

$("#msg").html;

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

3、如何獲取jQuery集合的某一項

對于獲取的元素集合，獲取其中的某一項(通過索引指定)可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery對象，而get(n)和索引返回的是dom元素對象。對于jquery對象只能使用jquery的方法，而dom對象只能使用dom的方法，如要獲取第三個

元素的內容。

有如下兩種方法：

$("div").eq(2).html;//調用jquery對象的方法

$("div").get(2).innerHTML;//調用dom的方法屬性

4、同一函數實現set和get

Jquery中的很多方法都是如此，主要包括如下幾個：

· $("#msg").html;//返回id為msg的元素節點的html內容。

· $("#msg").html("new content");

· //將“new content” 作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的new content

· $("#msg").text;//返回id為msg的元素節點的文本內容。

· $("#msg").text("newcontent");

· //將“new content” 作為普通文本串寫入id為msg的元素節點內容中,頁面顯示new content

· $("#msg").height;//返回id為msg的元素的高度

· $("#msg").height("300");//將id為msg的元素的高度設為300

· $("#msg").width;//返回id為msg的元素的寬度

· $("#msg").width("300");//將id為msg的元素的寬度設為300

· $("input").val(");//返回表單輸入框的value值

· $("input").val("test");//將表單輸入框的value值設為test

· $("#msg").click;//觸發id為msg的元素的單擊事件

· $("#msg").click(fn);//為id為msg的元素單擊事件添加函數

· 同樣blur,focus,select,submit事件都可以有著兩種調用方法

5、集合處理功能

· $.extend({

· min:function(a, b){return a < b?a:b; },

· max:function(a, b){return a > b?a:b; }

· });//為jquery擴展了min,max兩個方法

· 使用擴展的方法(通過“$.方法名”調用)：

· alert("a=10,b=20,max="+$.max(10,20)+

總結

以上是生活随笔為你收集整理的如何使用jquery_好程序员web前端学习路线分享jQuery学习技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

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