1. jquery簡介
JQ是一個輕量級的原聲js庫 目前最高版本 3.X 最低支持到 IE9
1. 強大的選擇器 總是能得到一個集合
2. 對DOM的處理非常簡單方便
3. 兼容強大 自身就已經(jīng)做完了基本的兼容處理
4. 鏈式操作 所用的JQ方法 都可以通過 "." 來不斷調(diào)用
5. 強大的 AJAX 封裝庫
$(參數(shù)) 返回值 JQ對象
2.jquery選擇器
1.$('.box') 如果這個同類名標簽 只有一個 直接用就行 $('.box').css();
如果同類名標簽 有多個 $('.box').css() 是給所有的標簽 統(tǒng)一操作
如果需要精準的操作某一個標簽 需要用到 .eq() $('.box').eq(0).css()
2. :first 選中第一個子集 只選擇一個 $('.box div:first')
3. :last 選擇最后一個子集 $('.box div:last')
4. :even 偶數(shù)下標 下標從0開始 $('.box .item:even')
5. :odd 奇數(shù)下標 $('.box .item:odd')
6. :eq 指定下標 $('.box .item:eq(0)' $('.box .item').eq(0);
7. :gt(index) 指定以上標簽被選中 >index 下標的元素 $('.box .item:gt(3)')
8. :lt(index) 指定以下標簽被選中 <index 下標的元素 $('.box .item:lt(3)')
9. :contains(文本內(nèi)容) 選擇包含目標文本內(nèi)容的標簽 $('.box1 .item:contains(666)')
10.:empty 選中內(nèi)容為空的標簽 $('.box .item:empty')
11. :parent 選中非空標簽 $('.box .item:parent')
12. :has() 選擇包含了 對應(yīng)子集的標簽 $('.box .item:has(p)') item 內(nèi) 有 p 標簽
3. jquery樣式和方法綁定
通過 JQ對象的屬性方法 .css() 來獲取或者設(shè)置
JQ 的樣式設(shè)置 .css() 跟原生一樣 都是通過行間樣式進行設(shè)置
1. 單個樣式的設(shè)置 $('.box').css('width', '200px');
2. 多個樣式設(shè)置
$('.box').css({
width: '10px',
height: '100px',
top: top + 'px',
})
DOM 0級 最根本是標簽的屬性方法
box.onclick = function(){} //原生
$('.box').on('click',function(){})
DOM 2級
box.addEventListener('click',function(){},false);
$('.box').click(function(){ })
用JQ獲取class 時 是一個集合 不止有一個元素
所以 點擊方法內(nèi) 如果需要操控元素本身 最好使用$(this);
$('.box').click(function(){
// 給盒子 添加 class
$(this).addClass('on');
// 刪除 class
$(this).removeClass('on');
// 切換 class
$(this).toggleClass('on');
})
$('.box').width() // 內(nèi)容區(qū)域?qū)挾?$('.box').height() // 內(nèi)容區(qū)域高度
$('.box').innerWidth() // clientWidth 內(nèi)容+padding
$('.box').innerHeight() // clientHeight
$('.box').outerWidth() // offsetWidth 內(nèi)容 + padding + border
$('.box').outerWidth(true) // 內(nèi)容 + padding + border + margin
$('.box').outerHeight() //offsetHeight
$('.box').offset().left // 盒子左邊 到 瀏覽器視窗左邊 之間的距離
$('.box').offset().top // 盒子上邊 到 瀏覽器視窗上邊 之間的距離
$('.box').position().left // 到 定位 父級 左邊 之間的距離 如果父級沒定位 則以 body為基準
$('.box').position().top // 到 定位 父級 上邊 之間的距離
4. jq動畫
$('.box').animate(參數(shù)1,參數(shù)2,參數(shù)3)
參數(shù)1 css樣式 對象的形式 鍵值對
參數(shù)2 時間（ms）
參數(shù)3 callback 回調(diào)函數(shù) 動畫結(jié)束后調(diào)用
$('.box').animate({
wdith: '300px',
height: "200px",
},1000,function(){ })
常用動畫
淡入 fadeIn(時間,callback);
callback 可以省略
淡出 fadeOut()
淡入淡出切換 fadeToggle()
向下打開 slideDown()
向上收起 slideUp()
切換打開狀態(tài) slideToggle()
動畫執(zhí)行順序的控制 delay()
$('.box').fadeIn(500).delay(500).slideUp();
動畫停止 stop();
5. jq查詢
1. 設(shè)置 獲取 文本節(jié)點
$('.box').text(); //獲取
$('.box').text('12312312312'); //設(shè)置
2、設(shè)置 獲取 html 內(nèi)容
$('.box').html(); //獲取
$('.box').html('<p></p>'); //設(shè)置
3. 設(shè)置 獲取 表單內(nèi)容
$('input').val(); //獲取
$('input').val('嘿嘿嘿'); //設(shè)置
4. 獲取節(jié)點
獲取所有的子集節(jié)點 $('.box').children()
獲取指定的子集節(jié)點 $('.box').children('.item');
返回第一個指定節(jié)點 $('.box').first();
返回最后一個指定節(jié)點 $('.box').last();
獲取下一個節(jié)點對象 $('.box').next(); 只能獲取一個
獲取后面所有的節(jié)點對象 $('.box').nextAll()
獲取上一個節(jié)點對象 $('.box').prev(); 只能獲取一個
獲取上面所有的節(jié)點對象 $('.box').prevAll()
獲取所有的兄弟元素 $('.box').siblings();
獲取父節(jié)點 $('.box').parent();
獲取定位父節(jié)點 $('.box').offsetParent();
查找后代元素 $('.box').find('p'); 在后代中 查找 p 標簽
獲取 元素 在 父元素 子集中 的位置下標 $('.box').index(); 返回值是 數(shù)值
將JQ對象 轉(zhuǎn)成 DOM對象 $('.box').get(); get里面出入的是 目標下標
設(shè)置自定義屬性 行間屬性
$('.box').attr('index') 讀取
$('.box').attr('index','123') 設(shè)置
刪除行間屬性
$('.box').removeAttr('index');
6. jq事件
1. .on(events,selector,data,function)
2. .events(data,function)
3. .bind(events,data,function)
events : 事件類型
data ： 除了實參外 的 額外參數(shù)
selector ： 選擇器
function : 所要執(zhí)行的方法
bind 和 on 更加的相似 都是給 元素 綁定方法的一種方式
bind 在 JQ 1.7.X版本以下 用的多
1.7.x 以上版本 基本上都用 on
bind 是直接綁定在元素上 類似于 在標簽中直接綁定事件 沒有 selector 參數(shù)
1.7.x 版本以后 官方更加推薦使用 on
3. on 事件代理 有selector參數(shù) (選擇器) 可以進行事件委托
$('ul').on('click','li',function(){
//篩選出 ul 下面 的 li 給其綁定 點擊事件 等同于 $('ul li') 但原理不同
// 原理是 事件冒泡 子元素將事件統(tǒng)一委托給父元素 進行事件處理
// 這樣就不用給每一個子元素 綁定事件 大大的提高了性能
// 給動態(tài)添加的元素 也能綁定上指定事件
})
4. .off() 事件移除 1.7 以上版本
.unbind() 事件移除 1.7 以下的版本
5. $('.box').click(function () {
// this 是 dom對象 代表是 調(diào)用對象的本身
// $(this) 是 JQ 對象 代表 調(diào)用對象本身 但是 可以使用 JQ 的一系列方法
// js原生中的 return false 返會一個bool值
// JQ 中的 return false;
// 1. 返回值
// 2掌唾、阻止事件冒泡
// 3. 阻止默認事件
return false;
})
7. jq創(chuàng)建標簽對象
1. 向末尾添加
$('<p></p>').appendTo('.box');
2. 給目標對象結(jié)尾 添加子元素
$('.box').append($('<p></p>'));
3. 向前添加
$('<p></p>').prependTo('.box');
4. 給目標元素前面 添加子元素
$('.box').prepend($('<p></p>'));
5. 將p元素 插入到 目標元素的后面（兄弟關(guān)系）
$('<p></p>').insertAfter('.box');
6. 將p元素 插入到 目標元素的前面（兄弟關(guān)系）
$('<p></p>').insertBefore('.box');
7. 給目標元素的后面 添加 p 元素
$('.box').after('<p></p>');
8. 給目標元素的前面 添加 p 元素
$('.box').before('<p></p>');
9. 清空內(nèi)容
$('.box').empty();
10. 刪除標簽自身
$('.box').remove();
11. 克隆標簽
$('.box').clone();
