?您要知道!!

??jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。

? ?微軟公司甚至把jQuery作為他們的官方庫。對于網頁開發者來說，學會jQuery是必要的。因為它讓你了解業界最通用的技術，

? ?為將來學習更高級的庫打下基礎，并且確實可以很輕松地做出許多復雜的效果。

?

?

我們先來學習一下jQuery的語法結構:

$(selector).action();

1.工廠函數$()

在jQuery中,"$"美元符號等價于jQuery,即$()=jQuery(),$()的作用是將DOM對象轉化為jQuery對象,只有將DOM對象裝化為jQuery對象后,才能使用jQuery的方法

注意!!!!!!:

當$()參數是DOM對象時,該對象不需要使用雙引號包裹起來,如果獲取的是document對象,則寫作$(document)

2.選擇器

jQuery幾乎支持CSS中的所有選擇器,如:標簽選擇器,類選擇器,ID選擇器,后代選擇器

語法:

$(selector)

選擇表達式可以是CSS選擇器：

1 $(document)//選擇整個文檔對象
2 $('#myId')//選擇ID為myId的網頁元素
3 $('div.myClass')//選擇class為myClass的div元素
4 $('input[name=first]')//選擇name屬性等于first的input元素

(1).首先我們來學習jQuery的第一個方法addClass();

addClass()方法是jQuery中用于進行CSS操作的方法之一,它的作用是向被選元素添加一個或多個樣式,它的語法結構如下

語法 jQuery 對象.addClass([樣式名])
其中,樣式名可以是一個也可以是多個,多個樣式名需要用空格隔開

實現的功能：

增加一條樣式規則： .addClass(‘myClass’)

增加多條樣式規則： .addClass(‘myClass yourClass’)

(2).jQuery的css方法

語法:
css("屬性","屬性值");

?定義和用法

? css() 方法返回或設置匹配的元素的一個或多個樣式屬性。

實例 1

將所有段落的顏色設為紅色：

$("button").click(function(){$("p").css("color",function(){return "red";});});

實例 2

逐漸增加 div 的寬度：

$("div").click(function() {$(this).css("width", function(index, value) {return parseFloat(value) * 1.2;}); });

(3).jQuery對象和DOM對象的相互轉換

jQuery對象轉成DOM對象： 兩種轉換方式將一個jQuery對象轉換成DOM對象：[index]和.get(index); (1)jQuery對象是一個數據對象，可以通過[index]的方法，來得到相應的DOM對象。 如：var $v =$("#v") ; //jQuery對象 var v=$v[0]; //DOM對象 alert(v.checked) //檢測這個checkbox是否被選中 (2)jQuery本身提供，通過.get(index)方法，得到相應的DOM對象 如：var $v=$("#v"); //jQuery對象 var v=$v.get(0); //DOM對象 alert(v.checked) //檢測這個checkbox是否被選中
DOM對象轉成jQuery對象:?
對于已經是一個DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。$(DOM對象)?
如：var v=document.getElementById("v"); //DOM對象?
var $v=$(v); //jQuery對象?
轉換后，就可以任意使用jQuery的方法了。?
通過以上方法，可以任意的相互轉換jQuery對象和DOM對象。需要再強調注意的是：DOM對象才能使用DOM中的方法，jQuery對象是不可以用DOM中的方法。?

下面是其它的相關使用方法：
1、DOM對象轉jQuery對象?
普通的Dom對象一般可以通過$()轉換成jQuery對象。?

如：$(document.getElementById("msg"))?
返回的就是jQuery對象，可以使用jQuery的方法。?

2、jQuery對象轉DOM對象?
由于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;

?

轉載于:https://www.cnblogs.com/fanziyang/p/5511604.html

總結

以上是生活随笔為你收集整理的初识jQuery(适合初学者哟.........)的全部內容，希望文章能夠幫你解決所遇到的問題。

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