jQuery樣式操作

操作CSS方法

1、獲取樣式屬性的值

$(selector).css('樣式屬性名')

2、設定樣式屬性的值物件方式：屬性名和屬性值用冒號隔開， 屬性可以不用加引號

$(selector).css({'樣式屬性' : '值'})

3、函式傳值方式：屬性必須加引號，值如果是數字可以不用跟單位和引號

$(selector).css('樣式屬性','值')

設定樣式類方法

作用等同于以前的 classList，可以操作類樣式， 注意操作類里面的引數不要加點 .

tab欄切換案例：

參考案例：JavaScript 操作元素案例練習

jQuery核心代碼：

$(function(){
	//1、點擊上部li，當前li添加current類，其余兄弟移除current類
	$('.tab_list li').click(function(){
		$(this).addClass('current').siblings().removeClass('current');
		//2、點擊同時，得到當前li的索引號
		var index=$(this).index();
		//3、讓下部相應索引號的item顯示，其余item隱藏
		$('.tab_con .item').eq(index).show().siblings().hide();
	});
})

類操作與className區別：

• 原生 JS 中 className 會覆寫元素原先里面的類名
• jQuery 里面類操作只是對指定類進行操作，不影響原先的類名， addClass相當于追加類名

jQuery屬性操作

操作元素固有屬性

1、獲取元素的固有屬性值

$(selector).prop('屬性')

2、設定元素的固有屬性值

$(selector).prop('屬性名','屬性值')

操作元素自定義屬性

1、獲取元素自定義屬性值

$(selector).attr('屬性名') //類似于原生getAttribute（）

2、設定元素自定義屬性值

• 物件方式：

$(selector).attr({'屬性名':'屬性值'})

• 鍵值對方式：

$(selector).attr('屬性名','屬性值')//類似于原生setAttribute（）

• 回呼函式方式：

$(selector).attr('屬性名',function(){
   					return '屬性值' 
   				})

3、洗掉元素自定義屬性

$(selector).removeAttr('屬性名')

資料快取

data（）方法：

• 用來設定和獲取元素上的值，不影響DOM結構，
• 類似給元素系結了一個變數，而變數存在記憶體中，html中是看不到，
• 一旦頁面重繪，之前存放的資料都將被移除，

1、添加資料

$(selector).data('name','value') 

2、獲取資料

$(selector).data('name') 

jQuery元素操作

jQuery內容文本值

主要針對元素的內容還有表單的值操作

1、操作HTML：作用類似于innerHTML

• 獲取html代碼

$(selector).html() 

• 設定html代碼

$(selector).html('html代碼')

2、操作文本：作用類似于innerText

• 獲取標簽文本

$(selector).text() 

• 設定標簽文本

$(selector).text('文本')

3、操作值：相當于原生value

• 獲取val值

$(selector).val() 

• 設定val值

$(selector).val('值')

遍歷、創建、添加、洗掉元素

遍歷元素： 給同一類元素做不同操作，就需要用到遍歷

$(selector).each(function (index, domEle) { })

• $(selector).each() 方法遍歷匹配的每一個元素，主要用DOM處理，
• each 每一個 里面的回呼函式有2個引數： index是每個元素的索引號; demEle 是每個DOM元素物件，不是jquery物件
• 要使用jquery方法，需要給這個dom元素轉換為jquery物件 $(domEle)

$.each(object，function (index, element) { })     

• $.each()方法可用于遍歷任何物件，主要用于資料處理，比如陣列，物件
• 里面的函式有2個引數： index 是每個元素的索引號; element 遍歷內容

創建元素： 動態創建了一個<li>元素

$('<li></li>')   

添加元素：

• 內部添加元素，生成之后，它們是父子關系
• 外部添加元素，生成之后，他們是兄弟關系

洗掉元素：

• empty () 和 html(’ ') 作用等價，都可以洗掉元素里面的內容，只不過 html 還可以設定內容

jQuery影片效果

顯示隱藏

引數說明：

1. 引數都可以省略， 無影片直接顯示
2. speed：三種預定速度之一的字串(‘slow’,‘normal’, ‘fast’) 或 表示影片時長的毫秒數值(如：1000)
3. easing：(Optional)用來指定切換效果，默認是’swing’（先快后慢），可用引數’linear’（勻速）
4. fn: 回呼函式，在影片完成時執行的函式，每個元素執行一次

滑動和事件切換

滑動：

引數說明同上

事件切換： hover([over,]out)

• over:滑鼠移到元素上要觸發的函式（相當于mouseenter）
• out:滑鼠移出元素要觸發的函式（相當于mouseleave）
• 如果只寫一個函式，則滑鼠經過和離開都會觸發它

tab下拉選單案例（jQuery事件切換實作）：

jQuery核心代碼：

$('.nav>li').hover(function(){
	$(this).children('ul').stop().slideToggle();
});

影片佇列： 影片或者效果一旦觸發就會執行，如果多次觸發，就造成多個影片或者效果排隊執行

停止排隊： stop() 方法 用于停止影片或效果

• stop() 寫到影片或者效果的前面， 相當于停止結束上一次的影片

淡入淡出

引數說明同上

自定義影片

animate(params,[speed],[easing],[fn])

引數說明：

• params: 想要更改的樣式屬性，以物件形式傳遞，必須寫
• 屬性名可以不用帶引號， 如果是復合屬性則需要采取駝峰命名法
• 其余引數同上，且都可以省略

jQuery尺寸、位置操作

jQuery尺寸

• 以上引數為空，則是獲取相應值，回傳的是數字型
• 如果引數為數字，則是修改相應值
• 引數可以不必寫單位

jQuery位置

offset()： 設定或獲取元素偏移

• offset() 方法設定或回傳被選元素相對于檔案的偏移坐標，跟父級沒有關系
• 該方法有2個屬性 left、top，offset().top 用于獲取距離檔案頂部的距離，offset().left 用于獲取距離檔案左側的距離
• 可以設定元素的偏移：offset({ top: 10, left: 30 });

position() ： 獲取元素偏移

• position() 方法用于回傳被選元素相對于帶有定位的父級偏移坐標，如果父級都沒有定位，則以檔案為準
• 該方法有2個屬性left、top，position().top 用于獲取距離定位父級頂部的距離，position().left用于獲取距離定位父級左側的距離
• 該方法只能獲取，不能設定

scrollTop()/scrollLeft() ： 設定或獲取元素被卷去的頭部和左側

• scrollTop() 方法設定或回傳被選元素被卷去的頭部
• 不跟引數是獲取，引數為不帶單位的數字則是設定被卷去的頭部