文本就绪事件
$(document).ready(function(){})?：ready事件
<script type="text/javascript">
$(document).ready(function(){
//文本就绪
})
</script>
$(function(){}) ：ready事件
<script type="text/javascript">
$(function(){
//文本就绪
})
</script>
鼠标事件
$("").click(function(){})：鼠标单击事件
<script type="text/javascript">
$(function(){
$("#input1").click(function(){
alert("click事件");
});
//鼠标单击id为input1的元素时弹窗显示
})
</script>
$("").mouseover(function(){})，$("").mouseout(function(){})：鼠标移入移出事件
<script type="text/javascript">
$(function(){
$("#input1").mouseover(function(){
$(this).css("color","pink");
});
$("#input1").mouseout(function(){
$(this).css("color","red");
});
//鼠标移入id为input1的元素上面字变粉移出变红
})
</script>
$("").mousedown(function(){})，$("").mouseup(function(){})：鼠标按下松开事件
<script type="text/javascript">
$(function(){
$("#input1").mousedown(function(){
$(this).css("color","pink");
});
$("#input1").mouseup(function(){
$(this).css("color","red");
});
//鼠标按下id为input1的元素上面字变粉，松开变红
})
</script>
键盘事件?
$("").keydown(function(){})，$("").keyup(function(){})：键盘按下松开事件
<script type="text/javascript">
$(function(){
var txt;
$("#input2").keyup(function(){
txt=$(this).val();
$("#id2").empty().append(txt.length);
});
//键盘松开时获取input2的值，把文本长度插入到id2
})
</script>
表单事件?
$("").focus()：获取焦点
<script type="text/javascript">
$(function(){
$("#input2").focus();
//焦点对准input2
})
</script>
$("").select()：选中事件
$(function(){
$("#input1").select(function(){
alert("选中了");
});
//input1被选中
})
</script>
$("").change()：具有多个选项的表单中使用，如单选，复选框，下拉列表等
<script type="text/javascript">
$(function(){
$("input[type='radio']").change(function(){
console.log($(this).val());
});
//输出被选中的多选框的value值
})
</script>
绑定事件
?$("").on()：可以给动态添加的元素绑定事件
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("#div1").append("<div>456</div>");
});
//鼠标单击btn1时，给div1追加新标签
$("#div1").on("click","div",function(){
$(this).append('hello');
});
//鼠标单击新标签时，给新标签追加hello
})
</script>
</head>
<body>
<input id="btn1" type="button" value="a"/><br>
<div id="div1">123</div>
</body>
</html>
this?
this始终指向触发当前事件的对象
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("#div1").append("<div>456</div>");
});
$("#div1").on("click","div",function(){
$(this).append('hello');
//触发当前时间的对象是div1里面的div元素，因此this指向改div元素
//所以hello字符串追加到div标签里面
});
})
</script>
</head>
<body>
<input id="btn1" type="button" value="a"/><br>
<div id="div1">123</div>
</body>
</html>
|