亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

粉絲點擊發送低筋粉幾點送

this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。
$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jQuery的方法和屬性值。

元素選擇器

$(?"element"?)

全選擇器

$(?"*"?)

類選擇器

$(?".class"?)

ID選擇器
$(?"#id"?)

?jQuery提供的存儲接口

jQuery.data(?element,?key,?value?)???//靜態接口,存數據
jQuery.data(?element,?key?)??//靜態接口,取數據???
.data(?key,?value?)?//實例接口,存數據//實例接口,存數據





eg:靜態的
????$('.left').click(function()?{????????var?ele?=?$(this);????????//通過$.data方式設置數據????????$.data(ele,?"a",?"data?test")????????$.data(ele,?"b",?"慕課網"????????)????????//通過$.data方式取出數據????????var?reset?=?$.data(ele,?"a")?+?"</br>"?+?$.data(ele,?"b")????????ele.find('span').append(reset)????})

靜態就是調用接口本身存在的方法，動態就是自身實例的方法，這個實例實現了這個接口定義的方法，理論上來說都是一樣的

eg:實例的
?$('.right').click(function()?{????????var?ele?=?$(this);????????//通過.data方式設置數據????????ele.data("a",?"data?test")????????ele.data("b",?{????????????name:?"慕課網"????????})????????//通過.data方式取出數據????????var?reset?=?ele.data("a")?+?"</br>"?+?ele.data("b").name????????ele.find('span').append(reset)????})

.css()與.addClass()設置樣式的區別

?可維護性：

.addClass()的本質是通過定義個class類的樣式規則，給元素添加一個或多個類。css方法是通過JavaScript大量代碼進行改變元素的樣式

樣式值：

.addClass()本質只是針對class的類的增加刪除，不能獲取到指定樣式的屬性的值，.css()可以獲取到指定的樣式值。

通過.css方法設置的樣式屬性優先級要高于.addClass方法

jQuery的屬性與樣式之樣式操作.css()

通過JavaScript獲取dom元素上的style屬性，我們可以動態的給元素賦予樣式屬性。在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實現了

.css() 方法：獲取元素樣式屬性的計算值或者設置元素的CSS屬性

獲?。?/p>

1. .css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值

   $('p').text( $('.first').css("background-color") )
   

2. .css( propertyNames )：傳遞一組數組，返回一個對象結果

   
   

   //獲取尺寸，傳入CSS屬性組成的一個數組//{width: "60px", height: "60px"}var value = $('.first').css(['width','height']);//因為獲取的是一個對象，取到對應的值$('p:eq(2)').text( 'widht:' + value.width +? ' height:' +value.height )

設置：

1. ?.css(propertyName, value )：設置CSS

   $('.fourth').css("background-color","red")
   

2. .css( propertyName, function )：可以傳入一個回調函數，返回取到對應的值進行處理

   
   

   /獲取到指定元素的寬度，在回調返回寬度值//通過處理這個value，重新設置新的寬度$('.sixth').css("width",function(index,value){

   ? ?a=value.split('px');? ? return (Number(a[0])+190)+a[1];})

   a[1]為空：px?是分隔字符串，px?右邊的內容才是 value[1]?的值，所以是空

   3..css( properties )：可以傳一個對象，同時設置多個樣式

   
   

   //合并設置,通過對象傳設置多個樣式$('.seventh').css({

   ? ? ? ? ? ? 'font-size'? ? ? ? :"15px",

   ? ? ? ? ? ? "background-color" :"#40E0D0",

   ? ? ? ? ? ? "border"? ? ? ? ? ?:"1px solid red"

   ? ? ? ? })

注意事項：

1. 瀏覽器屬性獲取方式不同，在獲取某些值的時候都jQuery采用統一的處理，比如顏色采用RBG，尺寸采用px

2. .css()方法支持駝峰寫法與大小寫混搭的寫法，內部做了容錯的處理

   
   

   
   

//多種寫法設置字體大小

$('.fourth').css("font-size","15px")

$('.fifth').css("fontSize","0.9em");

1. 當一個數只被作為值（value）的時候， jQuery會將其轉換為一個字符串，并添在字符串的結尾處添加px，例如 .css("width",50}) 與 .css("width","50px"})一樣

jQuery的屬性與樣式之切換樣式.toggleClass()

.toggleClass( )方法：在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類

1. .toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名

2. .toggleClass( className, switch )：一個布爾值，用于判斷樣式是否應該被添加或移除

3. .toggleClass( [switch ] )：一個用來判斷樣式類添加還是移除的 布爾值

4. .toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數

eg:

//給所有的tr元素加一個class="c"的樣式

? ? $("#table tr").toggleClass("c");

//開始所以tr都沒有c樣式，加了之后所以tr都有c樣式

?//給所有的偶數tr元素切換class="c"的樣式

? ? //所有基數的樣式保留，偶數的被刪除

? ? $("#table tr:odd").toggleClass("c");

.removeClass()

jQuery通過.addClass()方法可以很便捷的增加樣式。如果需要樣式之間的切換，同樣jQuery提供了一個很方便的.removeClass()，它的作用是從匹配的元素中刪除全部或者指定的class

.removeClass( )方法

1. .removeClass( [className ] )：每個匹配元素移除的一個或多個用空格隔開的樣式名

2. .removeClass( function(index, class) ) ： 一個函數，返回一個或多個將要被移除的樣式名

注意事項

如果一個樣式類名作為一個參數,只有這樣式類會被從匹配的元素集合中刪除 。 如果沒有樣式名作為參數，那么所有的樣式類將被移除

.addClass()

當一個節點（或稱為一個標簽）含有多個class時，DOM元素響應的className屬性獲取的不是class名稱的數組，而是一個含有空格的字符串

1. .addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名

2. .addClass( function(index, currentClass) ) : 這個函數返回一個或更多用空格隔開的要增加的樣式名

.addClass()方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上

eg:

<p?class="orgClass">
$("p").addClass("newClass")

//p元素的class實際上是 class="orgClass newClass"樣式只會在原本的類上繼續增加，通過空格分隔

jQuery的屬性與樣式之html()及.text()

.html()方法?

獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容，具體有3種用法：

1. .html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內容
2. .html( htmlString )? 設置每一個匹配元素的html內容
3. .html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數

注意事項：

.html()方法內部使用的是DOM的innerHTML屬性來處理的，所以在設置與獲取上需要注意的一個最重要的問題

.text()方法

得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。，具體有3種用法：

1. .text() 得到匹配元素集合中每個元素的合并文本，包括他們的后代
2. .text( textString ) 用于設置匹配元素內容的文本
3. .text( function(index, text) ) 用來返回設置文本內容的一個函數

注意事項：

.text()結果返回一個字符串，包含所有匹配元素的合并文本

.html與.text的異同:

1. .html與.text的方法操作是一樣，只是在具體針對處理對象不同
2. .html處理的是元素內容，.text處理的是文本內容
3. .html只能使用在HTML文檔中，.text 在XML 和 HTML 文檔中都能使用
4. 如果處理的對象只有一個子文本節點，那么html處理的結果與text是一樣的
5. 火狐不支持innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個屬性的支持，所以可以兼容所有瀏覽器

jQuery的屬性與樣式之.attr()與.removeAttr()

獲取Attribute就需要用attr，獲取Property就需要用prop

的確從p開始計算第一位的，為什么會加上一個a是因為，如果第十位不是a，那么就不會更改，加上a之后，就規定了不僅僅是第十位，還需要是a標簽才能選中

?//不分男女，選中第一類衣服中第9個a元素，并改變顏色

? ? //這里用了nth-child 選擇的他們所有父元素的第n個子元素

? $(".tag dd a:nth-child(10)").css('color','#66CD00');