Jquery中的事件处理(自动触发事件,禁用按钮,悬停，失焦，滑动效果)
16lz
2021-01-22
1.自动触发事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.Red
{
color:Red;
}
.Green
{
color:Green;
}
.buttons
{
text-align:center;
font-weight:bold;
border:2 solid;
width:100px;
float:left;
margin:5px;
background-color:Gray;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.buttons').bind('click', function () {
alert('you click' + $(this).text());
$('.Green').trigger('click');
});
});
</script>
</head>
<body>
<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>
<p></p>
</body>
</html>
2.点击之后禁用按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.Red
{
color:Red;
}
.Green
{
color:Green;
}
.buttons
{
text-align:center;
font-weight:bold;
border:2 solid;
width:100px;
float:left;
margin:5px;
background-color:Gray;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.buttons').bind('click', function () {
alert('you click' + $(this).text());
$('.buttons').unbind('click');
});
});
</script>
</head>
<body>
<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>
<p></p>
</body>
</html>
3.处理鼠标事件(鼠标点击，释放，划过)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.Red
{
color:Red;
}
.Green
{
color:Green;
}
.buttons
{
text-align:center;
font-weight:bold;
border:2 solid;
width:100px;
float:left;
margin:5px;
background-color:Gray;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.buttons').bind('mousedown', function () {
alert('you mouse button is pressed down' + $(this).text());
});
$('.buttons').bind('mouseup', function () {
alert('The mouse button is released over'+$(this).text());
});
$('.buttons').bind('mouseover', function () {
alert('The mouse button is over' + $(this).text());
});
});
</script>
</head>
<body>
<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>
<p></p>
</body>
</html>
4.元素获得，失去焦点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Name").focus(function () {
alert('Name has been focused');
}
);
$("#Name").blur(function () {
alert('Name lost focus');
});
});
</script>
</head>
<body>
Name <input id="Name" type="text" />
<p></p>
</body>
</html>
5.应用悬停效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.buttons
{
text-align:center;
font-weight:bold;
border:2 solid;
width:100px;
float:left;
margin:5px;
background-color:Gray;
}
.hover
{
cursor:crosshair;
color:Blue;
background-color:cyan;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//把两个事件处理程序添加到指定的元素，一个用于当鼠标进入元素时触发，
//一个用于鼠标离开触发
$('.buttons').hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
</script>
</head>
<body>
<span class="buttons">Click</span>
</body>
</html>
6.'更多'连接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Message').hide();
$("#more").toggle(
function () {
$("#Message").show('slow');
$(this).text('read less');
},
function () {
$('#Message').hide();
$(this).text('Read More');
}
)
});
</script>
</head>
<body>
<div>Welome to My Blog</div>
<span id="more">Click More</span>
<div id="Message">
I'm a software engineer development,i have been work in shanghai for about 6 months.I love this job.
it got a lot of potential than my old job.In order to Earning money,I need to work hard and contribute to my team.
</div>
</body>
</html>
7.以滑动效果替换文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#message1').css({ 'backgroundColor': '#f00', 'text-align': 'center','width':'200px' }).hide();
$("#message2").css({ 'backgroundColor': 'gray', 'text-align': 'center','width': '200px' }).click(function () {
$(this).slideUp();
$("#message1").slideDown();
});
});
</script>
</head>
<body>
<p id="message1">Welome to My Blog</p>
<p id="message2">Welcome to My Facebook</p>
</body>
</html>
8.滚动效果
更多相关文章
- 在PHP中获取幕布元素ID的文本[重复]
- 使用jQuery随机化一系列div元素
- AngularJS使用双向数据绑定将img元素标签中的图像显示为源？
- html5中点击按钮，改变按钮状态效果样式
- 选择父母没有某个类的所有元素（使用'.not（）'）
- 是否可以将HTML元素固定到另一个的底部？
- 如何根据容器更改元素的宽度？
- 通过属性名称获取HTML元素
- Jquery在两个元素之间更改文本