* DOM操做css
*1 基本操做html
* html() - 等價於innerHTML屬性面試
* text() - 等價於textContent屬性json
* val() - 等價於value屬性數組
* attr() - 等價於getAttribute()和setAttribute()併發
* removeAttr() - 等價於removeAttribute()app
* 2 CSS操做dom
①* attr()方法 - 設置樣式(刪除原有樣式,設置新樣式)ide
* style屬性和class屬性函數
②* class操做
* addClass() - 添加樣式
* removeClass() - 刪除樣式
* removeClass() - 刪除全部樣式
* removeClass(className) - 刪除指定樣式
* toggleClass(className) - 切換樣式
* 判斷當前元素是否具備className樣式
* 若是有,刪除 - removeClass()
* 若是有,添加 - addClass()
* hasClass(className) - 判斷是否包含指定樣式
③* css()方法
* css(name, value) - 設置一個樣式屬性
* css({name:value,name:value,...}) - 設置多個樣式屬性
*3 遍歷元素
* 祖先元素與後代元素
* 祖先元素 - parents()
* 後代元素 - find(expr)
* 父元素與子元素
* 父元素 - parent()
* 子元素 - children()
* 兄弟元素
* 前一個兄弟 - prev()
* 前面全部的兄弟 - prevAll()
* 後一個兄弟 - next()
* 後面全部的兄弟 - nextAll()
* 全部兄弟 - siblings()
*4 建立元素 - $(HTML代碼)
* 5插入節點
* 內部插入
* append()
* prepend()
* 外部插入
* after()
* before()
* 6替換節點
* replaceWith()
* replaceAll() - 顛倒了的replaceWith()
* 7刪除節點
* remove() - 刪除自身與後代
* empty() - 保留自身,刪除後代
*8 複製節點
* clone(boolean) - 是否複製事件
* 9事件
* ready()方法
* 做用 - 等價於 window.onload
* 與window.onload的區別
* ready()
* 每個HTML頁面中容許存在多個
* 具備簡寫
* $().ready(function(){})
* $(function(){})
* 速度快 - 只加載DOM結構
* window.onload
* 每個HTML頁面中只能存在一個
* 沒有簡寫
* 速度慢 - 加載頁面全部內容
* 10與JS庫衝突
* 緣由 - $符號的使用權
* 原則 - jQuery主動放棄
* 解決
* jQuery.noConflict(); - 表示jQuery主動放棄
* 利用自調函數
(function($){
})(jQuery);
* 利用ready()方法
$(function($){})
25.1 事件
25.1.1 事件的綁定與解綁
* bind(type, data, fn)
* type - 綁定的事件名稱
* data - (可選)做爲event.data屬性值傳遞給事件對象的額外數據對象
* fn - 綁定事件的對應處理函數
* unbind(type, fn)
* type - 解綁的事件名稱
* fn - 解綁事件的對應處理函數
TODO bind()方法綁定多個事件
TODO * type - 若是綁定的是多個事件,中間使用空格隔開
$('h5').bind('mouseover mouseout',function(){
var $div = $(this).next();
if($div.is(':hidden')){
$div.show();
}else{
$div.hide();
}
});
unbind()方法解綁
TODO * 不傳遞任何參數時 - 表示解綁全部事件
TODO * 傳遞一個事件名稱 - 表示解綁指定事件
TODO * 傳遞多個事件名稱 - 表示解綁多個事件
$('h5').unbind('mouseover mouseout');
unbind()方法的fn參數
TODO * 默認狀況下,容許不傳遞
TODO * 傳遞解綁的事件處理函數fn - 必須與 bind() 方法的處理函數是同一個
$('#btn').click(function(){
alert('xxx');
});
// TODO trigger()方法 - 用於模擬用戶觸發指定事件
$('#btn').trigger('click');
* 面試題 - bind()、one()、live()和on()的區別
unbind()、die()和off()的區別
* one() - 事件綁定,只能綁定一次(觸發一次即失效)
* live() - 事件綁定,爲後面添加的元素綁定事件
* jQuery 1.7版本後,被棄用了
* jQuery 1.7版本後,新增delegate()方法,做用與live()相同
* bind() - 事件綁定
* on() - 統一以上全部事件綁定,on()是bind()的底層邏輯
* jQuery 1.7版本後,新增
24.2 動畫
24.2.1 顯示與隱藏 - 同時改變寬度和高度
* show() - 顯示
* show() - 無參版本,沒有動畫效果
* show() - 有參版本,具備動畫效果
* 參數 - slow、normal和fast預約義,自定義時間(毫秒)
* hide() - 隱藏
* hide() - 無參版本,沒有動畫效果
* hide() - 有參版本,具備動畫效果
* 參數 - slow、normal和fast預約義,自定義時間(毫秒)
* toggle() - show() + hide()
* 顯示與隱藏的切換效果
$('h5').click(function(){
$(this).next().slideToggle(3344);
})
* 滑動效果 - 改變高度
* slideUp()
* 注意 - 並無提供無動畫版本
* 不傳遞參數時 - 底層邏輯默認提供一個動畫執行的時間
* slideDown()
* slideToggle() - slideUp() + slideDown()
* 向上滑動與向下滑動的切換效果
$('#navigation ul li:has(ul)').mouseover(function(event){
$(this).children('ul').slideDown();
}).mouseOut(function(){
$(this).children('ul').slideUp();
})
hover(fn,fn)一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。這是一個自定義的方法,它爲頻繁使用的任務提供了一種「保持在其中」的狀態。
$('#navigation ul li:has(ul)').hover(function(){
$(this).children('ul').stop(true,true).slideDown(444);
},function(){
$(this).children('ul').stop(true,true).slideUp("fast");
})
* 淡入淡出 - 改變透明度
* fadeIn() - 淡入
* fadeOut() - 淡出
* fadeTo(speed, opacity) - 將指定元素的透明度改變到指定值
* opacity - 表示設置透明度變化到的值
* fadeToggle() - jQuery 1.4版本之後
* 自定義動畫
* ① animate(params, [duration], [easing], [callback])
* params - 表示用於實現動畫效果的CSS樣式屬性
* 格式 - Object 類型
{ name : value, name : value,... }
* duration - 表示用於實現動畫所執行的時長,單位爲毫秒
* easing - 要使用的擦除效果的名稱(須要插件支持)
* callback - 表示動畫執行完畢後的回調函數
*② animate(params, options)
* params - 表示用於實現動畫效果的CSS樣式屬性
* 格式 - Object 類型
{ name : value, name : value,... }
* options
* 格式 - Object 類型
* 選項
* duration - 表示用於實現動畫所執行的時長,單位爲毫秒
* easing - 要使用的擦除效果的名稱(須要插件支持)
* complete - 表示動畫執行完畢後的回調函數
* queue - 爲true時排隊效果,爲false時併發效果
* 兩種用法的效果
* 併發效果 - 同時改變多個CSS樣式屬性
$('#panel').animate({
left : 400,
top : 400
},3000)
* 排隊效果 - 多個CSS樣式屬性按照前後順序依次改變
$('#panel').animate({
left : 400
},3000).animate({
top : 400
},3000)
* 注意 - 全部與顏色相關的 CSS 樣式屬性不能使用
* background-color
* border-color
* color
* jQuery類數組對象
* 特色 - 容許存儲多個元素,有序排列
* 屬性
* length - 表示長度,指的是當前存儲元素的個數
* 方法
* 循環遍歷方法
* $().each(function(index,domEle){})以每個匹配的元素做爲上下文來執行一個函數。返回 'false' 將中止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。
* $.each(object,function(index,domEle){})通用例遍方法,可用於例遍對象和數組。不一樣於例遍 jQuery 對象的 $().each() 方法,此方法可用於例遍任何對象。回調函數擁有兩個參數:第一個爲對象的成員或數組的索引,第二個爲對應變量或內容。若是須要退出 each 循環可以使回調函數返回 false,其它返回值將被忽略。
* toArray()方法(調用toArray()方法打印內容,打印方法的返回值)
* 將jQuery對象轉換爲真正的數組
* 注意 - 只能操做 jQuery 對象
* $.inArray(value, array)
* 做用 - 表示判斷指定的值在指定數組中的位置(是否存在)(索引值)
var arr = [1,2,3,4,5];
console.log($.inArray(1,arr));//0下角標
* 注: 若是數組包含指定的值 - 返回對應的索引值
* 若是數組不包含指定的值 - 返回固定值 -1
TODO $.inArray()不能判斷對象中是否包含屬性或方法,in能夠
TODO $.inArray()方法
TODO * 做用 - 用於判斷指定 jQuery 對象中是否包含指定的 DOM 對象
TODO * 若是包含,返回對應的索引值
TODO * 若是不包含,返回 -1
var obj = {
name : 'zhangwuji',
age : 18}
console.log($.inArray('name',obj));//-1
console.log('name' in obj);//true
* $.makeArray(obj)
* 做用 - 將類數組對象轉換爲數組對象
* 注意 :類數組對象 - 不單單只是指 jQuery 對象,全部類數組對象均可以
var $inputs = $('input');
console.log($.makeArray($inputs));//array[5]
* JSON格式
* $.pareseJSON() - jQuery提供了將JSON字符串轉換爲JSON對象的方法
var jsonObj = {
name : 'zhangwuji',
age : 18
}
var jsonStr = '{"name":"zhangwuji","age":18}';
console.log(JSON.parse(jsonStr));//obj
console.log(JSON.stringify(jsonObj));//{"name":"zhangwuji","age":18}
console.log($.parseJSON(jsonStr));//obj
* jQuery插件
TODO laydate插件
TODO * 最初設計時,以 jQuery 的插件出現
TODO * 後期發展,脫離了 jQery
TODO laydate 插件
TODO * class="laydate-icon" - 插件提供的
TODO * placeholder - HTML5新增屬性,提供默認提示內容
TODO * 相似於 <input> 標籤中的 value 屬性
TODO * 經過事件屬性實現
TODO * laydate()方法 - 插件提供的
<input placeholder="請輸入日期" class="laydate-icon" onclick="laydate()">
<!-- TODO 老版本提供的 -->
<input placeholder="請輸入日期" id="hello1">
<span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>
* 日期插件
* 基本用法
* 在HTML頁面中引入插件文件
* 爲<input>標籤設置 onclick 事件屬性,值爲 laydate() 方法
1 TODO 參考了基本用法 - 本身想到的
$('#mydate').click(laydate);
2 TODO 插件提供的JS方式
TODO * 直接調用 laydate(options) 方法
TODO * options - Object 類型
TODO * 選項
TODO * elem - 設置對應的元素(#ID)
TODO * format - 設置日期格式
TODO YYYY-MM-DD - 標準日期格式
laydate({
elem : '#mydate',
// TODO YYYY-MM-DD
format : 'YYYY/MM/DD',
istoday : false,
isclear : false,
min : '1999-01-01 00:00:00'
});
jQuery插件
表單驗證插件:常見的有四種(及管網地址)
TODO effect(effect, options, duration, callback)
TODO * effect - 表示設置的動畫效果
TODO * blind
TODO * bounce
TODO * ...
TODO * options - 選項
TODO * duration - 表示動畫執行的時長,單位爲毫秒
TODO * callback - 表示動畫執行完畢後的回調函數
*/
/* $('#effect').effect('blind',{},3000);*/
$('#effect').effect('blind',{},3000);
draggable()方法的選項
* axis - 設置只能在x軸或y軸方向拖動
* containment - 設置在某個區域內拖動
* cursor - 設置拖動時鼠標的樣式
* cursorAt - 設置鼠標的相對定位
* handle - 設置指定元素觸發鼠標按下事件才能拖動
* cancel - 防止在指定元素上拖動
* revert - 當中止拖動時,元素是否被重置到初始位置
* snap - 拖動元素是否吸附在其餘元素
* snapMode - 設置拖動元素在指定元素的哪一個邊緣
* snap設置爲true時該選項有效
* 可選值 - inner|outer|both
$( "#draggable1" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
$( "#draggable4" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable5" ).draggable({ handle: "p" });
$( "#draggable6" ).draggable({ cancel: "p.ui-widget-header" });
$( "#draggable7" ).draggable({ revert: true });
$( "#draggable8" ).draggable({ snap: true });
$( "#draggable9" ).draggable({ snap: "#containment-wrapper", snapMode: "outer" });
dropaable()方法的選項
* accept - 指定可拖動的元素可被接受
* activeClass - 被容許拖放的元素覆蓋時,改變樣式
* hoverClass - 被容許拖放的元素懸停時,改變樣式
droppable()方法的事件
* drop - 該事件在被容許拖放的元素覆蓋時觸發
$( "#droppable" ).droppable({
accept: "#draggable",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" ); }});