jQuery次日(操做樣式、屬性、節點、動畫）

02.jQuery操做樣式

1. css操做

• 功能：設置或者修改樣式，操做的是style屬性。
• 操做單個樣式
• 特色：jQ的css方法都是行內樣式；

//name: 須要設置的樣式名稱
//value：對應的樣式值
css(name,value);
//使用案例
$("#one").css("background","gray");//將背景色修改成灰色
複製代碼

• 設置多個樣式

//參數是一個對象，對象種包含了須要設置的樣式名和樣式值
css(obj);
//使用案例
$("#one").css({
   "background":"gray",
   "width":"400px",
   "height":"200px"
});
複製代碼

2. class操做

• 添加樣式類

//name: 須要添加的樣式類名，注意參數不要帶點.
addClass(name);
//例子，給全部的div添加one的樣式。
$("div").addClass("one");
複製代碼

• 移除樣式類

//name:須要移除的樣式雷鳴
removeClass("name");
//例子，給全部的div添加one的樣式。
$("div").removeClass("one");
複製代碼

• 判斷是否有某個樣式類

//name: 用於判斷的樣式的類名，返回值爲true false
hasClass(name)
//例子，判斷第一個div是否有one的樣式類
$("div").hasClass("one");
複製代碼

• 切換樣式類

//name: 須要切換的樣式類名，若是有，移除該樣式，若是沒有，添加該樣式。toggleClass(name);
//例子
$("div").toggleClass("one");
複製代碼

jQuery操做屬性

1. attr操做

• 設置單個屬性

//第一個參數：須要設置的屬性名
//第二個參數：對應的屬性值
attr(name,value);
//用法舉例
$("img").attr("title","xxxx");
複製代碼

• 設置多個屬性

//參數是一個對象，包含了須要設置的屬性名和屬性值
attr(Obj);
//用法舉例
$("img").attr({
    title:"xxx",
    alt:"xxx",
    style:"xxx"
});
複製代碼

• 獲取屬性

//傳須要的獲取的屬性名稱，返回對應的屬性值
attr(name,);
//用法舉例
$("img").attr("title");
複製代碼

• 移除某個屬性
  removeAttr(name)

• 【02-05-美女相冊案例】

2. prop操做

• 在jQuery1.6以後，對於checked、selected、disabled這類boolean類型的屬性來講，不能用attr方法，只能用prop方法

//設置屬性
$("xxx").prop("checked",true);
//獲取屬性
$("xxx").prop("checked");//返回true或者false
複製代碼

• 【02-07-prop方法-表格全選案例】

jQuery動畫

• jQuery提供了三組基本動畫，這些動畫都是標準的、有規律的效果，jQuery還提供了自定義動畫的功能

1. 三組基本動畫

• 顯示（show）與隱藏（hide）是一組動畫：滑入（slideUp）與滑出（slideDown）與滑入滑出切換（slideToggle)，效果與捲簾門相似。淡入（fadeIn）與淡出（fadeOut）與切換（fadeToggle）

show([speed],[callback]);
//speed(可選)：動畫的執行的持續時間
    //1.若是不傳，就沒有動畫效果。若是是slide和fade系列，會默認normal
    //2.毫秒值（好比1000）,動畫在1000毫秒執行完成（推薦）
    //3.固定字符串：slow(200ms)、normal(400ms)、fast(600ms ),若是傳其餘字符串，則默認normal。
//callback(可選)：執行完動畫後執行的回調函數
複製代碼

• 【02-11-下拉菜單案例】
• 【02-12-京東輪播圖】

2. 自定義動畫

• animate:自定義動畫

$(selector).animate({params},[speed],[easing],[callback]);
//{params}: 要執行動畫的css屬性，帶數字(必選)
//speed: 執行動畫時長（可選）
//easing: 執行效果，默認爲swing（緩動）譯：鞦韆  能夠是linear（勻速）譯：線性
//callback：動畫執行完後當即執行的回調函數（可選）
複製代碼

• 【02-14-手風琴案例】

3. 動畫隊列與中止動畫

• 在同個元素上執行多個動畫，那麼對於這個動畫來講，後面的動畫會被放到動畫隊列中，等前面的動畫執行完成了纔會執行（聯想：火車進站）。

//stop方法：中止正在執行的動畫效果
stop(clearQueue,jumpToEnd);
//第一個參數：是否清除隊列
//第二個參數：是否跳轉到最終效果
複製代碼

• 【02-17-音樂導航】

jQuery節點操做

1. 建立節點

//$(htmlStr)
//htmlStr: html格式的字符串
$("<span>這是一個span元素</span>")
複製代碼

2. 添加節點

//添加到子元素的最後面：被添加的對象.append(添加的對象)---添加的對象.appendTo(被添加的對象) 
//添加到子元素的最前面: 被添加的對象.prepend(添加的對象)---添加的對象.prependTo(被添加的對象)
//添加到自身元素的前面: before
//添加到自身元素的後面: after
複製代碼

• 【02-20-微博發佈案例】
• 【02-22-彈幕效果】

3.清空節點與刪除節點

• empty：清空指定節點的全部元素，自身保留

$("div").empty();//清空div的全部內容(推薦使用，會清除子元素上綁定的內容，源碼)
$("div").html("");//使用html方法來清空元素，不推薦使用，會形成內存泄漏，綁定的事件不會被清除。
複製代碼

• remove: 相比於empty,自身也刪除

$("div").remove();
複製代碼

• 【03-12-表格刪除功能】

4.克隆節點

• 做用: 複製匹配的元素

//複製$(selector)所匹配到的元素(深度複製)
//clone(true)-----false: 不傳參數也是深度複製，不會複製事件----true: 是深度複製，會複製事件
//返回值爲複製的新元素,和原來的元素沒有了任何關係了.即修改新元素,不會影響到原來的元素.
$(selector).clone();
複製代碼

------------------------------------------------------記錄於 2019.4.26 jQuery(一)