Jquery屬性操作
1.屬性
attr(attrName [,attrValue]) 操作所有屬性（自定義和內(nèi)置的） prop(attrName [,attrValue))操作HTML元素內(nèi)置屬性 removeAttr(attrNam) 刪除屬性 removeProp(attrName)并不能刪除HMTL元素上的屬性
2.CSS類
addclass()添加一個(gè)class值
removeClass()刪除一個(gè)class值
toggleClass()切換一個(gè)class值(有則刪掉該class，沒有則加上，其他class不動(dòng))
hasClasss()判斷是否有指定class
3.HTML代碼/文本/值
html([html]) 相當(dāng)于innerHTML
text([text)相當(dāng)于innerText
val([value]) 設(shè)置/獲取表單控件的值
Jquery樣式操作
1.CSS操作
css(atr,[value])設(shè)置/獲取CSS值
參數(shù)可以是一個(gè)對(duì)象的形式
css({atr: value,})
2.位置
offset()[.left/.top]元素在頁面中的坐標(biāo)
設(shè)置只需要傳一個(gè)對(duì)象即可
{"left:num,top:num"}
position()[.left/.top]元素在第一個(gè)定位的祖先元素內(nèi)的坐標(biāo) (只讀隔心！)
scollTop ...
scollLeft ...
3.尺寸
width()/height()內(nèi)容尺寸
innerwidth()/ innerHeight()內(nèi)容尺寸+ padding
outerWidth()/ outerHeight() 盒子的尺寸
如圖: [圖片上傳失敗...(image-961bff-1572771228666)]
Jquery篩選操作
1. 過濾操作
first ()
last()
eq()
not()
filter()
slice ()
has()
3.串聯(lián)
add0把選中的元素加入當(dāng)前集合 · addBack0把調(diào)用該方法的元素加入當(dāng)前集合 ·end0返回最后一次破會(huì)性操作之前的DoM · contents0返回所有子節(jié)點(diǎn)的集合
4 jQuery DOM對(duì)象操作
·each0遍歷 ·map0返回新的集合 · length集合中元素的數(shù)量index（返回該元素在父元素中的索引位置 get（【index】返回集合指定索引的dm對(duì)象，還可以吧 iquerydom集合轉(zhuǎn)為純數(shù)組沒參數(shù)
文檔處理
1.內(nèi)部插入
append(content|fn) appendTo(content) prepend(content|fn) prependTo(content)
2.外部插入
after(content|fn) before(content|fn) insertAfter(content) insertBefore(content)
3.包裹
wrap(html|ele|fn) unwrap() wrapAll(html|ele) wrapInner(html|ele|fn)
4.替換
replaceWith(content|fn) replaceAll(selector)
5.刪除
empty() remove([expr]) detach([expr])
6.復(fù)制
clone([Even[,deepEven]])
jQuery事件
1.事件綁定
-
on(event,fn) 標(biāo)準(zhǔn)的事件綁定方式
on({}) 可以同時(shí)綁定多個(gè)事件
one(event,fn) 只能綁定一次事件
把事件名作為對(duì)象
2.解除事件綁定
- off(["event"]) 可以去除所有所意，也可以解除指定事件
３.事件委派
-
on(event,selector,fn) 給父元素添加事件
給新添加的元素綁定與之前存在的元素相同的方法（利用冒泡）
4. 控制事件觸發(fā)
trigger()
triggerHandler()
① trigger返回的是 jqDOM可以連貫操作 ② trigger可以觸發(fā)元素自帶的事件( input自帶的事件判没， focus凛虽，submit...) ③ trigger會(huì)觸發(fā)集合中所有元素的事件啊送；trigger值觸發(fā)集合中第一個(gè)元素的事件
5.事件列表（新增）
ready 頁面中DOM加載完畢（不同于onload）
focusin 獲取焦點(diǎn)偿短，綁定給輸入框的父元素
focusout 失去焦點(diǎn) ，綁定給輸入框的父元素
mouseenter 代替mouseover
moouseleave 代替mouseout
hover moouseleave和mouseenter集合
6.事件對(duì)象
pageX 鼠標(biāo)x坐標(biāo)
pageY 鼠標(biāo)y坐標(biāo)
target 當(dāng)前觸發(fā)事件的元素
which 鍵盤按鍵的ASCII碼
type 事件類型（事件名稱）
preventDefault阻止默認(rèn)操作（例如a標(biāo)簽跳轉(zhuǎn)删掀，致使頁面刷新） [圖片上傳失敗...(image-5eaf9b-1572771228665)]
Jquery動(dòng)畫
基本效果
hide([time,fn]) 隱藏
show([time,fn]) 顯示
-
toggle([time,fn])
- 基本效果的CSS屬性變化：透明度變化，元素大小相關(guān)的樣式 padding, border width/height外邊距
- fn() 表示動(dòng)畫結(jié)束執(zhí)行的函數(shù)
滑動(dòng)效果
slidedown 顯示
slideup 隱藏
slidetoggle
垂直方向的變化
淡入淡出效果
fadeOut() 隱藏
fadeIn() 顯示
fadeToggle()
fadeTo(time,opicity,fn)
自定義動(dòng)畫
- animate({},time,fn)
{}中為需要變化的值
取值可以是toggle导街，可變化可恢復(fù)原樣
stop() 暫停動(dòng)畫
finish() 結(jié)束動(dòng)畫（提前完成）
delay(time) 延遲動(dòng)畫（動(dòng)畫連續(xù)調(diào)用時(shí)加在中間披泪，會(huì)等time時(shí)間執(zhí)行后面的）
動(dòng)畫設(shè)置
jQuery. fx. off 清除所有動(dòng)畫，恢復(fù)為默認(rèn)效果
jQuery. fx interval 動(dòng)畫幀數(shù)
動(dòng)畫隊(duì)列
所有的動(dòng)畫操作會(huì)加入到隊(duì)列中搬瑰，依次執(zhí)行
其他操作不會(huì)加入動(dòng)畫隊(duì)列
jQuery動(dòng)畫與CSs3動(dòng)畫
·兼容性款票，CS53的動(dòng)畫和過渡需要E9+控硼， jQuery可以使用版本的
CSS3的動(dòng)畫或者過渡必須給元素指定具體的CSS屬性值
jQuery工具方法
1.數(shù)組對(duì)象方法
$.each（Aray,fn）遍歷數(shù)組或類數(shù)組對(duì)象
$.grep（Array, fn）過濾數(shù)組
$.map（ Array, fn）從數(shù)組取出信息，返回新的數(shù)組
$.makeArray(likeArray) 把類數(shù)組對(duì)象轉(zhuǎn)化為純數(shù)組
$inArray(val艾少，Array) 判斷元素在數(shù)組中的位置卡乾，不存在返回-1
$.merge() 合并數(shù)組
toArray() jQuery DOM方法，把jQueryDOM直接轉(zhuǎn)化為純數(shù)組
2.函數(shù)方法
- $.proxy() 改變函數(shù)中this指向
3.類型判斷
$.type()判斷類型
$.isFunction()判斷是否是函數(shù)/方法
$.isEmptyobject()判斷是否是空的對(duì)象
$.Plainobject()判斷是否是純的對(duì)象（構(gòu)造函數(shù)是obeject)
$.window()判斷是否是 window對(duì)象
$.isNumeric()判斷是否是數(shù)字(NaN雖然是number類型缚够，但這個(gè)是false)
4.字符串
$.trim()取出兩邊的空格
-
$.param() 把對(duì)象序列化成字符串
{name:"lili",age:18} ----> name=lili&age=18
5. 版本
- $.fn.jquery
jQuery插件
1. select2 下拉框搜索插件
官網(wǎng) http://select.org/
用法
$(dom).select2()
$(dom).select2({
width:,
data:,
ajax:,
...
})
2.datetimepicker 時(shí)間日期插件
用法
//設(shè)置語言
$.datetimepicker.setLocal("zh");
//調(diào)用插件
$(dom).datetimepicker({
datepicker:,
timepicker:,//false||true
format:"Y-m-d H:i"http://H表示24小時(shí)制幔妨，h表示12小時(shí)制
value:,
...
})
3.全屏滾動(dòng)插件
官網(wǎng) https://alvarotrigo.com/fullPage/zh/
Github說明 https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs
用法
<!--HTML部分-->
<div id="fulPage">
<div class="section"></div>
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<div class="section"></div>
</div>
<!--自定義的導(dǎo)航，寫在包裹元素的外面-->
?
<!--JS部分-->
<script>
$("#fullPage").fullpage({
navigation:true,
sectionsColor:[]
...
})
</script>
4.lazeload 圖片懶加載
-
用法：
$("#lazyWrapper img").lazyload()
