JQuery必備基礎知識（二）

3.2 jQuery效果

注意：

動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。

停止動畫排隊：stop() ;

這樣就可以在動畫執行的時候停止動畫

顯示隱藏：show() / hide() / toggle() ;

關于參數

參數都可以省略，無動畫直接顯示

第一個參數speed : 三種預定速度（show，normal，fast）或者是動畫時長的毫秒數

第二個參數 easing：指定切換效果，默認是’swing’ 還可設為’linear’

第三個參數 fn :回調函數，在動畫完成時執行的函數

滑入滑出：slideDown() / slideUp() / slideToggle() ;

淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

tips: fadeTo()必須要寫速度和透明度，透明度表示淡入后的最大透明度

自定義動畫：animate() ;

第一個參數傳入更改的樣式屬性,以對象形式傳遞，注意復合屬性用駝峰命名,后面3個參數可以省略

注意設置top,left的時候要給div加定位，否則無效

jQuery中有hover()事件，功能類似于css中的hover

hover(function,function)

傳入2個參數，第一個參數是鼠標移入是觸發的函數，第二個是鼠標移出時觸發的函數

只寫一個參數時，鼠標移入移出都會觸發它

4.1 jQuery屬性操作

獲取元素本身自帶的屬性,有利于對表單操作

表單屬性：disabled checked這類屬性操作很順暢

//獲取 prop('屬性名'); //更改 prop('屬性名','屬性值');

//獲取 attr('屬性名'); //更改 attr('屬性名','屬性值');

可以在指定的元素上存取數據，但不會修改DOM元素結構。頁面刷新緩存清除

data('myName','ljc');//向元素添加數據 data('myName');//向元素讀取數據

通過:checked選擇器，可以以數組形式返回被選中的元素

$(function() { $('.all').change(function() { $('.child').prop('checked',$('.all').prop('checked'));//全選按鈕 }) $('.child').change(function() { if($('.child:checked').length == $('.child').length) { $('.all').prop('checked',true);// 如果小按鈕全部被選中，全選勾上 }else { $('.all').prop('checked',false); } }) })

4.2 文本屬性

普通元素內容

這樣獲取到的會帶有標簽

可以通過傳入參數來更改內容

普通元素文本內容

只會獲取文本的內容，不會獲取標簽

表單的值 val()

console.log($("input").val());//獲取表單的內容 $("input").val("123");//改表單的內容

保留2位小數 toFixed(2)

4.3 元素操作

隱式迭代是對同一類元素做同一件事情，但是要做不同事情的話還是需要使用遍歷

$('div').each(function(index, domEle) {});

是dom對象不是jQuery對象，需要轉換成jquery對象才能使用方法

$.each(obj,function(index,domele){})

可以用來遍歷任何對象，主要用來做數據處理，

var sum = 0; var arr = ['red','blue','yellow']; $('div').each(function(index, domEle) { //index是索引號 domEle是dom元素對象 $(domEle).css('color', arr[index]); //轉化為整數，否則輸出0123，以字符串來拼接 sum += parseInt($(domEle).text()); }) console.log(sum);//6 $.each({ name: 'ljc', age: 20 },function(i,ele) { console.log(i); // name age console.log(ele); // 'ljc' 20 })

創建元素

var li = $('

**添加元素(**在后面添加)

$('ul').append(li);

添加元素(在前面添加)

$('ul').prepend(li);

外部添加(在前面添加)

$('div').before(div);

外部添加(在后面添加)

$('div').after(div);

刪除元素

$('ul').remove();//整個ul刪除

刪除元素集合中的子節點

$('ul').empty();//相當于清空ul里的內容

通過html來清空

$('ul').html();

4.4 尺寸，位置操作

返回值是數字型的

如果參數是數字，則修改樣式

參數不寫單位

offset()設置獲取元素偏移

獲取的位置是相對于文檔的偏移坐標，與父級沒有關系

傳入的參數是一個對象

//獲取偏移量 $('div').offset() //更改位置 $('div').offset({ top: 200, left: 100 })

position()獲取帶有定位的偏移

獲取的位置是相對于帶有定位的父級元素

這個方法只能獲取，不能修改

$('div').position()

scrollTop() scrollLeft 設置元素被卷去的頭部和左側

不跟參數是獲取，跟參數是設置

5.1 jQuery 事件

on()綁定事件的好處

可以綁定多個事件，多個處理事件函數

$('div').on({ mouseover : function() {}, click : function() {} }) $('div').on('mouseenter mouseleave',function() { $(this).toggleClass('currrnt'); })//如果執行的程序相同可以采用這種方法

事件委托

$('ul').on('click','li',function() { alert('hello world'); })

對于新創建的元素，click無法綁定，但是on可以

$('div').on('click','p',function() { alert('別點我'); }) $('div').append($('

新來的

解除全部事件

$('div').off()

解除特定事件

$('div').off('click')

解除事件委托

$('div').off('click','li')

只觸發一次的事件

$('div').one('click',function(){})

// 會觸發元素的默認行為 $("div").click(); // 會觸發元素的默認行為 $("div").trigger("click"); //不會觸發默認行為，比如自動獲取焦點 $("input").triggerHandler("focus");//不會獲取焦點

6.1 jQuery 事件對象

和原生js的事件對象基本相同

阻止默認行為 ： event.preventDefault(),return false

阻止冒泡 : event.stopPropagation()

$.extend([deep], target, obj1)

[deep]，深拷貝為true，默認為false 淺拷貝

target要拷貝的對象

obj被拷貝的對象

$(function() { var targetObj = { sex : 'male' }; var obj = { id: 1, name: 'andy' }; $.extend(targetObj,obj);// v把obj 拷貝給 targetObj console.log(targetObj);// {sex: "male", id: 1, name: "andy"} console.log(obj); // {id: 1, name: "andy"} })

如果傳入多個對象，則在后面的對象會覆蓋前面的對象

用來解決命名沖突的問題

jQuery解決方法

把$換成jQuery。jQuery('div')

自定義名字。 var xx = $.noConflict();

7.1 jQuery 插件

引入css.

引入JS

引入html。

jQuery

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。