概述
jQuery是一個(gè)輕量級(jí)的js庫,它將js的功能進(jìn)行了封裝(所有的都是函數(shù)),在封裝的基礎(chǔ)上做了進(jìn)一步的兼容(兼容性好)
特點(diǎn)
鏈?zhǔn)秸{(diào)用(里面所有的方法返回的都是一個(gè)jQuery對(duì)象)
豐富的選擇器和篩選器
良好的動(dòng)畫兼容(動(dòng)畫庫很強(qiáng)大 借助了animated.js(主要是css3的動(dòng)畫))
簡單入門
核心對(duì)象 jQuery(是一個(gè)函數(shù)) 簡寫為$
dom對(duì)象轉(zhuǎn)為jQuery對(duì)象將dom對(duì)象傳入jQuery的函數(shù)
將jQuery對(duì)象轉(zhuǎn)為dom對(duì)象? 使用下標(biāo)獲取對(duì)應(yīng)的dom元素
<div>hello</div>
<div>world</div>
<script src="./jquery.min.js"></script>
<script>
// 核心對(duì)象 （都是函數(shù)）
console.log(jQuery);
console.log($);
//相對(duì)于是document.querySelectorAll
console.log(jQuery('div')); //jquery對(duì)象
//將jQuery對(duì)象轉(zhuǎn)為dom對(duì)象使用下標(biāo)獲取就可以了
console.log(jQuery('div')[0]); //dom對(duì)象
//將dom對(duì)象轉(zhuǎn)為jQuery對(duì)象
let dom = document.querySelector('div')
console.log($(dom));
</script>
jQuery的選擇器
所有css選擇器都可以使用
新增相關(guān)選擇器 (odd even first last eq)
//css選擇器
console.log($('ul>li:nth-child(2)'));
//新增的選擇器
console.log($('li:eq(1)'));//eq 傳入的是下標(biāo) 獲取第二個(gè)
console.log($('li:odd'));//根據(jù)下標(biāo) 獲取下標(biāo)為奇數(shù)的
console.log($('li:even'));//根據(jù)下標(biāo) 獲取下標(biāo)為偶數(shù)的
console.log($('li:first'));//獲取第一個(gè)
console.log($('li:last'));//獲取最后一個(gè)
jQuery的篩選器
它是用于篩選獲取的元素的
它可以根據(jù)條件(根據(jù)選擇器) 及關(guān)系篩選(節(jié)點(diǎn)關(guān)系)
相關(guān)篩選器
eq 篩選對(duì)應(yīng)下標(biāo)的元素
last 篩選最后一個(gè)
first 篩選第一個(gè)
parent 父元素
children 子元素
siblings 兄弟元素
prev 前面的兄弟
next 后面的兄弟
prevAll 前面的所有兄弟
nextAll 后面的所有兄弟
find 查找子元素內(nèi)容
jQuery的屬性操作
prop 只能操作原生屬性 (原生屬性 本身自帶屬性)
attr 可以操作任意屬性
//屬性名 屬性值 如果傳遞的參數(shù)只有一個(gè)就是獲取 如果是倆個(gè)就是設(shè)置
$('div').prop('class','box')//設(shè)置
console.log($('div').prop('class'));//獲取
//prop只能操作原生屬性
console.log($('div').eq(0).prop('id'));
//對(duì)應(yīng)不是原生屬性值獲取的是undefined
console.log($('div').eq(0).prop('name'));
//設(shè)置到對(duì)應(yīng)的元素對(duì)象上 element.id element.name
$('div').prop('content','我是內(nèi)容')//設(shè)置
console.log($('div').prop('content'));
//attr 底層實(shí)現(xiàn)setAtrribute getAttribute
$('div').attr('message','ok')
removeProp 刪除prop設(shè)置的屬性 (原生的屬性)
removeAttr刪除屬性 (removeAttribute)
class相關(guān)操作
addClass 添加一個(gè)class
removeClass 移除一個(gè)class
toggleClass 切換 (有就刪除 沒有就添加)
樣式操作
css方法
//樣式操作 獲取樣式 設(shè)置樣式
//傳遞一個(gè)參數(shù)就獲取 傳遞倆個(gè)參數(shù)就是設(shè)置（參數(shù)傳滿了就是設(shè)置）
//可以獲取所有的樣式
console.log($('div').css('backgroundColor'));
console.log($('div').css('height'));
//設(shè)置樣式
$('div').css('width','100px')
DOM操作
增刪改查
append 從后面追到里面
prepend 從前面追到里面
before 插入到當(dāng)前的前面
after 插入到當(dāng)前的后面
empty 清空
remove 刪除
replaceWith 替換
clone 克隆
寬高獲取
width 獲取本身的寬度
height 獲取本身的高度
innerWidth 獲取本身的寬度+填充
innerHeight 獲取本身的高度+填充
outerWidth 獲取本身的寬度+填充+邊框
outerHeight 獲取本身的高度+填充+邊框
獲取位置
offset 獲取當(dāng)前的盒子離頁面的距離
position 獲取當(dāng)前盒子離父元素的距離 (不受margin影響)
事件
jQuery的事件用到的就是觀察者模式,它設(shè)計(jì)了對(duì)應(yīng)的方法
on 監(jiān)聽事件
off 取消事件
one 執(zhí)行一次
jQuery針對(duì)所有的常用事件都實(shí)現(xiàn)了對(duì)應(yīng)的方法
click
dblclick
mouseenter
mouseleave
keydown
keyup
change
hover(總和了mouseleave mouseenter)
...
jQuery實(shí)現(xiàn)對(duì)應(yīng)的事件委托
// 利用事件委托來操作
$('ul').mouseover((e)=>{
//獲取事件源
e = e || window.event
if(e.target.tagName == 'LI'){
//給對(duì)應(yīng)的li添加class
$(e.target).addClass('selected')//給自己添加樣式
$(e.target).siblings().removeClass('selected')//移出兄弟的樣式
}
})
顯示內(nèi)容
html相當(dāng)于innerHTML
text相當(dāng)于innerText
val 相當(dāng)于獲取value
jQuery的動(dòng)畫
animate 動(dòng)畫
//option(需要變化的樣式) 時(shí)間（執(zhí)行時(shí)間） 回調(diào)函數(shù) option里面只傳number類型的值 (可以帶單
位)
$('div').animate({
width:200,
left:200
},2000,()=>{
$('div').animate({
width:100,
top:300,
opacity:0.5
},2000,()=>{
console.log('動(dòng)畫完成了');
})
})
show 顯示 hide 隱藏 toggle 切換
slideUp 上去 slideDown 下去 slideToggle 切換
fadeOut 隱藏 fadein 顯示 fadeToggle 切換 fadeTo 切換到對(duì)應(yīng)透明度
