您的位置：首页 > Web前端 > JQuery

jQuery 用法二

2017-01-04 20:28 591 查看

续上节

4、事件的焦点:: blur(挡元素失去焦点时触发)，通常blur事件被用在表格元素中；例如：input,但是在近来的浏览器中，已经将范围扩大到所有的元素类型中，网页中一个元素可以失去焦点通过键盘tab键，或者鼠标点击

<input id="target" type="text" value="Field 1">
<div id="other">
Trigger the handler
</div>

$( "#target" ).blur(function() {
alert( "Handler for .blur() called." );
});
$( "#other" ).click(function() {
$( "#target" ).blur();
});

5、浏览器事件：：resize scroll error

当窗口大小改变时触发;

$( window ).resize(function() {
$( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});

当鼠标滚动时触发：

<div id="log">
Trigger the handler
</div>
<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>

$( "#target" ).scroll(function() {
$( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
});

6、事件的冒泡::

<div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<style>
div{
width:200px;
height；200px;
background:green
}
</style>

$('body').bind('click',handle1);
$('div').bind('click',handle2);
function handle1(){
console.log('body');
}
function handle2(){
console.log('div');
}

点击页面空白处，会发现只调用了handle1;点击div后，handle1和handle2同时被调用，即冒泡机制；

阻止冒泡：

function handle2(){
console.log('div');
event.stopPropagation();
}

使用stopPropagation()来阻止向上冒泡；再次点击div时，发现body不再打印；

7、自定义事件::

clickbtn =$('#ClickMeBtn');
clickbtn.click(function () {
var e = jQuery.Event('MYEvent');
clickbtn.trigger(e);
});
clickbtn.bind('MYEvent',function(event){
console.log(event);
})

四、jQuery效果（隐藏/显示、淡入/淡出、滑动、回调）
隐藏/显示::hide/show 、 toggle

淡入/淡出:: fadeIn/ fadeOut 、 fadeToggle

滑动：slideIn/slideOut 、 slideToggle

回调：

例子1：animate

<div id="clickme">
Click here
</div>
<img id="book" src="../img/12.jpg" alt="" width="100" height="123"
style="position: relative; left: 10px;">

$(document).ready(function(){
$('#clickme').click(function(){
$('#book').animate({
opacity:0.25,
left:'+=50',
height:'toggle'
},5000,function(){
$('#clickme').text('动画完成')
})
})

})

例子2：
<ul>
<li id="lili"></li>
</ul>

$( "li" ).animate({
opacity: .5,
height: "50%"
}, {
step: function( now, fx ) {
var data = fx.elem.id + " " + fx.prop + ": " + now;
$( "body" ).append( "<div>" + data + "</div>" );
}
});

easing:
$( "#clickme" ).click(function() {
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>Animation complete.</div>" );
});
});淡入：
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeIn demo</title>
<style>
span {
color: red;
cursor: pointer;
}
div {
margin: 3px;
width: 80px;
display: none;
height: 80px;
float: left;
}
#one {
background: #f00;
}
#two {
background: #0f0;
}
#three {
background: #00f;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

<script>
$( document.body ).click(function() {
$( "div:hidden:first" ).fadeIn( "slow" );
});
</script>

</body>
</html>

滑动：

$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});

slideDown slideUp 和slideToggle 用法一样。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航