一辆亏、選擇器
1风秤、css語(yǔ)法匹配
標(biāo)簽 | 類 | id | 交集
群組 | 后代 | 兄弟
偽類 | 屬性
2、索引匹配 (從 0 開始計(jì)數(shù))
:eq(index) 匹配一個(gè)給定索引值的元素
:gt(index) 匹配所有大于給定索引值的元素
:lt(index) 匹配所有小于給定索引值的元素
:even 匹配所有索引值為偶數(shù)的元素扮叨，從 0 開始計(jì)數(shù)（即索引值0缤弦、2、4...）
:odd 匹配所有索引值為奇數(shù)的元素彻磁，從 0 開始計(jì)數(shù)（即索引值1碍沐、3、5...）
二衷蜓、文本抢韭、屬性與類
1、文本
html([val|fn])
text([val|fn])
val([val|fn|arr])
fn(index,oldStr){return '新值'}
2恍箭、屬性
attr(name|pro|key,val|fn)
添加屬性 $('a').attr({
'href':'https://www.baidu.com'
});
查詢屬性 $('a').attr('href')
removeAttr(name)
prop(n|p|k,v|f)
removeProp(name)
解決jq加載過程中頁(yè)面樣式變化導(dǎo)致閃爍問題
<body hidden>//加上hidden屬性jq會(huì)自動(dòng)幫你隱藏
//頁(yè)面加載完畢移除屬性
$(function () {
$('body').removeAttr('hidden');
})
3、類
addClass(class|fn)
removeClass([class|fn])
toggleClass(class|fn[,sw])
三瞧省、事件
1扯夭、on綁定
on(事件名,{key:value}形式參數(shù),回調(diào)函數(shù))
$('.box').on('click', {num: 10}, function(ev) {
//ev為jq事件 , 兼容js事件
console.log(ev.data.num);
//通過ev.data.num訪問參數(shù)
console.log(ev.clientX,ev.clientY);
})
// 數(shù)據(jù)由ev.data存儲(chǔ)
//可以綁定多個(gè)事件
2、非on事件
.事件名({key:value}形式參數(shù),回調(diào)函數(shù))
$('.box').click({num: 10}, function(ev) {
console.log(ev.data.num)
})
// 數(shù)據(jù)由ev.data存儲(chǔ)
3鞍匾、解綁
$('.box').off()
// 解綁所有
3交洗、冒泡與默認(rèn)事件
阻止冒泡:
ev.stopPropagation();
阻止默認(rèn)事件:
return false | ev.preventDefault()
四、文檔操作
1橡淑、內(nèi)部插入
append(content|fn) $('body').append($div);
appendTo(content) $div.append($('body'));
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]) 返回自身,以后可以使用,但綁定方法與數(shù)據(jù)清除
detach([expr]) 返回自身,以后可以使用,綁定方法與數(shù)據(jù)不會(huì)被清除
6斗埂、復(fù)制
clone([Even[,deepEven]])
五、動(dòng)畫
參數(shù)介紹:
s : 時(shí)間
e: 運(yùn)動(dòng)曲線
fn: 運(yùn)動(dòng)完的回調(diào)函數(shù)
1凫海、基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
2呛凶、滑動(dòng)
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
3、淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
4行贪、自定義
animate(p,[s],[e],[fn])
六漾稀、結(jié)構(gòu)關(guān)系
子集們: children([expr])
父集: parent([expr])
父集們: parents([expr])
下一個(gè)兄弟: next([expr])
下面所有的兄弟: nextAll([expr])
上一個(gè)兄弟: prev([expr])
上面所有的兄弟: prevAll([expr])
兄弟們: siblings([expr])
七、輪播圖
<style type="text/css">
.wrap {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
ul {
width: 1200px;
height: 200px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
}
li {
width: 300px;
height: 200px;
float: left;
font: bold 100px/200px arial;
text-align: center;
color: white;
}
</style>
<div class="wrap">
<ul>
<li style="background:red;">1</li>
<li style="background:orange;">2</li>
<li style="background:pink;">3</li>
<li style="background:cyan;">4</li>
</ul>
</div>
<div>
<input type="button" value="圖1" />
<input type="button" value="圖2" />
<input type="button" value="圖3" />
<input type="button" value="圖4" />
</div>
四個(gè)按鍵綁定方法
$('input').click(function () {
ul產(chǎn)生自定義動(dòng)畫
$('ul').animate({
left絕對(duì)定位移動(dòng)li寬度*自身索引像素(點(diǎn)圖二就是左移300*1px)
left:-$(this).index()*$('li').width()
},1000)
})
