1天揖、jq中的hover事件(移入/移除)
寫法參照:
$('#div1').hover(function(){移入事件},function(){移出事件})
2、jq中的阻止默認(rèn)事件跪帝;
1.e.preventDefault();
2今膊、return false; (使用的時(shí)候要放在最底部)
** 3、jq中的阻止事件傳遞(防止冒泡或下沉)**
e.stopPropagation();
** 4伞剑、jq中獲取元素的寬高**
$('#div1').width()
$('#div1').height()
** 5斑唬、jq中移除事件,off(事件類型纸泄,執(zhí)行該事件的回調(diào)函數(shù))**
$(document).off('mouseover',moveFn);
** 6赖钞、jq中獲取元素的下標(biāo)(下標(biāo)從0開始)**
1.獲取當(dāng)前元素在所有同級(jí)別元素的下標(biāo):$(this).index();
2.獲取當(dāng)前元素在同類型元素且同級(jí)別元素的下標(biāo).index($(this))
3.獲取某一組元素中,其中一個(gè)元素的下標(biāo)(下標(biāo)從0開始)
.eq(index);
** 7聘裁、jq中的class類名**
$('input').eq(index).addClass('active');
$('input').eq(index).removeClass('active');
** 9雪营、jq中的創(chuàng)建節(jié)點(diǎn)**
創(chuàng)建:$('<li></li>');
插入:
(插入末尾)$('li').append(a); a.appendTo( $('li'));
(插入前端)$('li').prepend(a); a.prependTo( $('li'));
** 9、jq中刪除節(jié)點(diǎn)**
$('#div1').remove();
** 10衡便、jq中復(fù)制節(jié)點(diǎn)**
$('#div1').clone();
** 11献起、jq中節(jié)點(diǎn)的關(guān)系**
1.children();--獲取匹配元素的中所有的子元素
2.siblings();--獲取同輩標(biāo)簽,可以篩選
3.next();--獲取匹配元素緊鄰的下一個(gè)兄弟元素
4.prev();--獲取匹配元素的緊鄰的前一個(gè)兄弟元素
5.parent();--獲取當(dāng)前匹配元素的父元素
** 12镣陕、jq中的動(dòng)畫**
1谴餐、
show()--> 出現(xiàn)(參數(shù):slow/fast/400)-$('div').show('slow',function(){回調(diào)函數(shù)})
hide()-->隱藏
toggle()--> 開關(guān)
slideDown()-->向下滑動(dòng)
slideUp()--> 向上滑動(dòng)
slideToggle()--> 滑動(dòng)開關(guān)
fadeIn()-->逐漸出現(xiàn)
fadeOut()--> 逐漸消失
fadeToggle()--> 出現(xiàn)消失開關(guān)
fadeTo()-->參數(shù) 1.時(shí)間 2.透明度 (0~1)--$('div').on('click',function(){$('#div1').fadeTo(100,1)});
2、
delay();延時(shí) delay $('#div1').delay(2000)stop()
stop();()停止動(dòng)畫或者清除上一次動(dòng)畫 $('#div1').stop();
** 9呆抑、jq中的easing.js動(dòng)畫**
1. 引入<script type="text/javascript" src="jquery.easing.1.3.js"></script>
用法:
$('#div1').animate({
1岂嗓、動(dòng)畫持續(xù)時(shí)間
duration:100,
2、動(dòng)畫運(yùn)動(dòng)方式
easing:"easeInBounce",
3鹊碍、動(dòng)畫執(zhí)行完畢后的回調(diào)函數(shù)
complete:function(){
alert("動(dòng)畫執(zhí)行完畢");
}
})
** 學(xué)到知識(shí)點(diǎn):**
1厌殉、設(shè)置有分割的線性漸變
background:-webkit-linear-gradient(top,#dfdfdf,#dfdfdf 20%,white 20%,white 40%,#dfdfdf 40%,#dfdfdf 60%,white 60%,white 80%,#dfdfdf 80%,#dfdfdf 100%);
2、設(shè)置垂直居中
top:50%;
left:50%;
transform:translate(-50%,-50%);