零JQ筆記 | 備忘1-4
mouseenter 與 mouseover
條件:目標點為外層元素,mouseenter在內層裏移到子元素不會觸發,只有從別的元素移到目標點才會觸發;mouseover在內層移到任意子元素都會觸發;
原理:mouseenter 無冒泡機制,mouseover有冒泡機制
<style>
div{ width: 200px;}
.box,.box2{ background: #727272; color: #ffffff;}
.div,.div2{border:1px solid #cccccc;padding:15px;}
</style>
<div class="div">
<div class="box">0</div>
</div>
<div class="div2">
<div class="box2">0</div>
</div>
<script>
var i = 1;
var j = 1;
$('.div').mouseenter(function () {
$('.box').html(i++)
})
$('.div2').mouseover(function () {
$('.box2').html(j++)
})
</script>
mouseleave 與 mouseout 類似
hover方法用的是: mouseenter mouseleave方法,so,當需觸發hover方法第2個fn時,使用trigger('mouseleave');
事件對象:
1)e.type,獲取事件的類型:
$('#a').click(function (e) {
e.preventDefault()
console.log(e.type); // click
})
2)e.target 獲取觸發事件的元素;
$('#a').click(function (e) {
e.preventDefault()
console.log(e.target);
//<a href="http://baidu.com" id="a">aaa</a>
})
3)e.relatedTarget
標準DOM發生元素可通過e.target訪問,相關元素通過e.relatedTarget訪問
对于"mouseenter"、"mouseover"等事件而言,relatedTarget属性返回被离开的DOM元素。
对于"mouseout"、"mouseleave"事件而言,relatedTarget属性返回被进入的DOM元素。
对于"focus"事件而言,relatedTarget属性返回失去焦点的DOM元素(如果有的话)。
对于"blur"事件而言,relatedTarget属性返回获得焦点的DOM元素(如果有的话)。
如果当前事件没有涉及到其他元素,则返回null或undefined(视情况而定)。
<script src="jquery-1.11.1.js"></script>
<style>
*{ margin: 0; padding: 0;}
.wrap{padding:10px;border:1px solid #ccc;}
.box,p{padding:20px;border:1px solid #ccc;}
</style>
<div class="wrap" id="wrap">
wrap,父元素 id=wrap
<div class="box" id="box">box相臨元素 id=box</div>
<a href="#">綁定事件點a</a>
<p id="p">p相臨元素 id=p</p>
</div>
<script>
$('a').bind('mouseout', function (e) {
console.log(e.relatedTarget.id);//離開a後到哪個元素即哪個元素
})
</script>
4)e.which
鼠標左中右及鍵盤鍵值
$('a').mousedown(function (e) {
console.log(e.which);
})
$('a').keyup(function (e) { //获取键盘的按钮值
console.log(e.which)
})
$('a').keyup(function (e) {
console.log(e.metaKey); //按ctrl
})
1、事件綁定移除
bind、unbind、one、on、off、delegate、undelegate
2、常用模擬
trigger(type,[data]);可傳參;
$('.a').bind('myClick', function (elem,n1,n2) {
alert(n1+n2)
})
$('.a').trigger('myClick',[2,3])
下面方法自動觸發input元素綁定focus事件,也會使焦點本身得到,瀏覽器默認行為,如有多個input元素,則觸發最後一個;
$('input').trigger('focus')
$('input').triggerHandler('focus')
//只觸發focus事件,焦點不會得到,即同時會取消瀏覽器對此事件的默認行為
3、命名空间
$('.box').bind('click',function(){
console.log('default')
})
$('.box').bind('click.fn1',function(){
console.log('fn1')
})
$('button').click(function(){
$('.box').trigger('click!') //加!表示匹配所有不包命名空间的click,即fn1不会被执行;
})
4、动画
1个animate,同步执行,走斜线
$(this).animate({'left','200px','top','200px'})
2个animate,先后执行,走直角
$(this).animate({'left','200px'})
.animate({'top','200px'})
若最后一切,切换css样式,而不是隐藏元素,则需要回调函数
$('.box').on('click', function () {
$(this).animate({
left:'500',height:'200',opacity:1
},2000)
.animate({
top:'200px',width:'200'
},2000).css('border','5px solid blue')
//最后一步css(),但这里动画一开始便会被执行,
//若想动画结束后再执行,使用回调
})
$('.box').on('click', function () {
$(this).animate({
left:'500',height:'200',opacity:1
},2000)
.animate({
top:'200px',width:'200'
},2000, function () {
$(this).css('border','5px solid blue')
})
})
$('#btn').on('click', function () {
$('.box').slideDown('normal', function () {
$(this).css('border','5px solid blue')
console.log($(this));
})
})
一、停止元素动画
stop(clearQueue)
clearQueue,gotoEnd,true或false,
clearQueue: 代表是否要清空未扫行完的动画队列
gotoEnd: 代表是否直接将正在执行的动画跳转到末状态
stop(),立即停止当前正在进行,如下面还有动画则继续执行;
鼠标快速移动:
$('#btn').hover(function () {
$('.box').stop().slideDown()
}, function () {
$('.box').stop().slideUp()
})
stop(true),当前元素接下来尚未执行完的动画队列清空;
$('.box').hover(function () {
$(this).stop()
.animate({ //只带一个参数只能处理到这里
height:150
},200)
.animate({ //处理这里需要stop(true)
width:300
},300)
}, function () {
$(this).stop()
.animate({
height:22
},200)
.animate({
width:60
},300)
})
gotoEnd用于让正在执行的动画直接到达结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态况,可使用stop(false,true)
stop(true,true),停止当前动画并直接到达当前动画末状态,并清空队列。
jq只能设置正在执行动画的最终状态,没提供直接到达【未执行动画】队列的方法,以下无论怎么设置都无法在改变width或height时,将此div末状态变成300 x 150,且opacity:2
$('.box').on('mouseover', function () {
$('.box').animate({
width:300
}) .animate({
height:180
})
.animate({
opacity:0.2
})
})
二、判断元素是否处于动画状态
if(!$(elem).is(':animated')){
//如果当前没有进行动画
}
<div id="box" style="width: 100px; height: 100px; background: #f00; position: absolute;"></div>
<script src="jquery1.11.1.js"></script>
<script>
$(function() {
// 开始动画
$("#box").animate({left: 500}, 5000);
$(document).on("click", function() {
// 在选择器中使用
if($("#box:animated").length) {
$("body").append("<p>#box 尚在动画</p>");
}
// 在 is 中使用
if(!$("#box").is(":animated")) {
$("body").append("<p>#box 动画停止</p>");
}
});
});
</script>
animate()方法替代:
//show()
$('.box').animate({
height:'show',width:'show',opacity:'show'
},400)
//fadeIn(400)
$('.box').animate({
opacity:'show'
},400)
//slideDown()
$('.box').animate({
height:'show'
},400)
延迟动画:
$(this).animate({
left:400
}).delay(1000)
.animate({
width:'200px'
})
1)1组元素动画:当在一个animate()应该多个时,动画是同时发生,以链式写法应用动画时,按顺序发生;
2)多组元素:默认情况下,动画同时发生,当以回调应用时,按回调顺序发生
非动画队列也按顺序,需要写在回调里
简单图片切换:
<div class="v-show clearfix">
<div class="v-caption clearfix">
<h4>图片</h4>
<div class="v-caption-tip">
<span class="on">1</span>
<span>2</span>
<span>3</span>
</div>
<div class="v-caption-btn">
<span class="prev">上一页</span>
<span class="next">下一页</span>
</div>
<em><a href="#">更多</a></em>
</div>
<div class="v-content">
<ul class="ul-pic">
<li><img src="1.jpg" alt=""/></li>
<li><img src="2.jpg" alt=""/></li>
<li><img src="3.jpg" alt=""/></li>
<li><img src="1.jpg" alt=""/></li>
<li><img src="2.jpg" alt=""/></li>
<li><img src="3.jpg" alt=""/></li>
<li><img src="2.jpg" alt=""/></li>
<li><img src="3.jpg" alt=""/></li>
</ul>
</div>
</div>
1、要点击的项为.next .prev,所以可以此点为基点向上找元素;
2、每次切换的宽度为ul父级的宽度即可;
3、page代表第一板,每板有3个图片,即总板数为li个数/3,向上取整;
4、!_show.is(':animated')限制在非运动时点击才生效;
5、-=,+=表示每次点击都累加或累减;
var _parent = $('.v-caption-btn span').parents('div.v-show');
var _show = _parent.find('.ul-pic');
var _content = _parent.find('div.v-content');
var v_width = _content.width();
var len = _show.find('li').length;
var page = 1;
var i = 3;
var page_count = Math.ceil(len / i);
$('.next').on('click', function () {
if (!_show.is(':animated')) {
if (page == page_count) {
_show.animate({
left: 0
}, 'normal');
page = 1;
}
else {
_show.animate({
left: '-=' + v_width //注意:-=
}, 'slow');
page++;
}
_parent.find('span').eq((page - 1)).addClass('on').siblings().removeClass()
}
})
$('.prev').on('click', function () {
if (!_show.is(':animated')) {
if (page == 1) { //第一板切换到最后一板
_show.animate({
left: '-=' + v_width * (page_count - 1)
}, 'slow');
page = page_count
}
else {
_show.animate({
left: '+=' + v_width //注意:+-
}, 'slow');
page--;
}
_parent.find('span').eq((page - 1)).addClass('on').siblings().removeClass()
}
})
css主要设置ul父级relative,ul为absolute;
.v-content{overflow:hidden;position:relative}
.v-show{position:absolute}
*{margin:0;padding:0;font-size:16px}ul{float:left}.ul-pic{position:relative}img{width:150px;vertical-align:top}li{list-style:none;float:left;margin:10px;border:1px solid #ccc;padding:1px}.v-show{width:524px;margin:0 auto;border:1px solid #ccc;}.ul-pic{width:2000px}.v-caption-btn,.v-caption-tip,h4{float:left;margin-right:20px}.v-caption em{float:right}.on{color:red}.clearfix:after{content:'';width:0;height:0;display:block;clear:both;visibility:hidden}