常用事件和效果
1.click()
在jQuery中为元素绑定点击事件:
("select").change(function(){
});
在js为元素绑定onchange事件
document.getElementById("select").onchange=function(){
};
3.ready()
(function(){
});
在整个html文档加载完成后立即执行
在js中
window.onload=function(){
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用效果</title>
<style>
#div1{
width: 80px;
height: 100px;
background: red;
color:white;
}
#div2{
width: 80px;
height: 100px;
background: blue;
color:white;
display: none;
}
</style>
<script src="js/jquery-1.4.2.js"></script>
<script>
function showOrHide(){
//show()--将元素隐藏设置为显示
//hide()--将元素隐藏设置为隐藏
$("#div1").hide(100);
$("#div2").show(200);
$("#div1").toggle(1000);
$("#div2").toggle(1000);
//fadeIn()淡入
//slideUp()淡出
$("#div1").fadeOut(1000);
$("#div2").fadeIn(1000);
//slideUp()收缩
//slideDown()展开
$("#div1").slideUp();
$("#div2").slideDown();
$("#div1").slideToggle();
$("#div2").slideToggle();
//自定义动画函数
$("#div1").animate({
"width":"150px",
"height":"150px",
"border":"5px double orange"
},2000);
}
</script>
</head>
<body>
<input type="button" value="点我" onclick="showOrHide()">
<div id="div1">div1</div>
<br/>
<div id="div2">div2</div>
</body>
</html>
