Jquery基礎知識

• jquery是一個功能強大的第三方庫,目前被廣泛使用, 微軟更是將其作為官方庫; 內部封裝適配多瀏覽器,執行速率高於原生

 

1、寫得少，做得多

2、執行速度快

 

jqurey通過選擇器獲取標籤

$('#myId') //選擇id為myId的網頁元素

$('.myClass') // 選擇class為myClass的元素

$('li') //選擇所有的li元素

$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素

$('input[name=first]') // 選擇name屬性等於first的input元素

 

 

jquery選擇器對選擇器過濾

1. $('div').has('p'); // 選擇包含p元素的div元素

2.$(‘div’).not(‘.myClass’); //選擇class不等於myClass的div元素

3.$('div').eq(5); //選擇第6個div元素

 

選擇集轉移：

$('#box').prev(); //選擇id是box的元素前面緊挨的同輩元素

$('#box').prevAll(); //選擇id是box的元素之前所有的同輩元素

$('#box').next(); //選擇id是box的元素後面緊挨的同輩元素

$('#box').nextAll(); //選擇id是box的元素後面所有的同輩元素

$('#box').parent(); //選擇id是box的元素的父元素

$('#box').children(); //選擇id是box的元素的所有子元素

$('#box').siblings(); //選擇id是box的元素的同級元素

$('#box').find('.myClass'); //選擇id是box的元素內的class等於myClass的元素 後代

 

 

jqurey判斷元素有無

1. 長度大於0就代表該元素是存在的
2. 長度大於0就代表該元素是存在的3.``` $ div = $（“。box”）;

 

 

jquery樣式操作:標籤屬性操作

1.讀和寫 通過css

$(“div”).css(“width”)讀取

$(“div”).css({“width”:”300px”})寫入

 

2.操作樣式類名

1.addClass 新增某個類的屬性

2.removeClass 移除一個或者多個類的屬性

3.toggleClass 重複切換某個類的屬性(如果有該屬性就刪除了,如果沒有就新增)

 

繫結click事件：

1.$('#btn1').click

2.獲取元素的索引值index()

3.$(this) 使用的是jquery物件

 

Jquery的動畫

$(‘#div1’).animate(style,speed,easing,callback)

speed - 設定動畫的速度,毫秒.normal,fast,slow

easing - 規定要使用的 easing 函式,swing,linear

callback- 規定動畫完成之後要執行的函式