一.事件(重要)
1.jquery绑定事件
jQuery对象.bind(“事件名”,可选参数,事件处理函数)
注意:
1.第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象.
2.事件名不要加on
jquery对象.bind("事件名",function(){
})
需求: 点击 h5标题后,显示h5下的div
点击标题后
演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示事件</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#panel {
width: 300px;
border: 1px solid #0050D0;
}
.head {
padding: 5px;
background: #96E555;
cursor: pointer;
}
.content {
padding: 10px;
text-indent: 2em;
border-top: 1px solid #0050D0;
display: none;
}
</style>
<script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//需求:点击标题后 显示 标题下面的div
$("#panel h5.head").bind("click",function(){
//让标题下面的div显示
$(this).next().show();
});
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
2.取消绑定
1.取消click事件的所有事件处理函数
jQuery对象.unbind("click")
2.取消click事件的事件处理函数f2
jQuery对象.unbind("click",f2);
fn1=function(){} 这个也可以作为函数的参数,相当于
function(){},并且这个函数叫fn1
3.只执行一次事件
对象.one("事件名",事件处理函数);//只执行一次
4.触发某一个事件
对象.trigger("click"); //相当于 对象.click();
5.div的显示和隐藏
div.show("slow");
div.show("normal");
div.show("fast");
可见就隐藏,不可见就显示
if(div对象.is(":visible")){
div对象.hide(3000);
}else{
div对象.show(3000);
}
6.改变绑定事件的类型
mouseover
mouseout
演示代码:
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel").bind("mouseover", function() {
$(this).find("div.content").show();
});
$("#panel").bind("mouseout", function() {
$(this).find("div.content").hide();
});
});
或者合成一句
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel").bind("mouseover", function() {
$(this).find("div.content").show();
}).bind("mouseout", function() {
$(this).find("div.content").hide();
});
});
或者
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel").mouseover(function() {
$(this).find("div.content").show();
}).mouseout(function(){
$(this).find("div.content").hide();
});
});
选项卡的制作
演示代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>网页选项卡</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/19px Arial, Helvetica, sans-serif;
color: #666;
}
扫一扫
2450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
