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

jQuery事件

2015-11-30 22:33 726 查看 
<span style="font-size:18px;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
// 单击事件
$(":button:first").click(function() {
//将当前点击的按钮隐藏
$(this).hide();
});

// 双击事件
$(":button:eq(1)").dblclick(function() {
console.log("fdsfdsfsdf");
//双击的时候将当前的按钮隐藏
$(this).hide();
});

// $(":button:eq(2)").mouseenter(function() {// 鼠标放上去触发
// $(":button:eq(2)").mouseover(function() { // 鼠标放上去触发
// $(":button:eq(2)").mousedown(function() { // 鼠标放上去按下鼠标键触发
// $(":button:eq(2)").mouseout(function() { //鼠标放上去移开触发
// $(":button:eq(2)").mouseleave(function() { //鼠标放上去移开触发
//	$(this).hide();
//});
/*$("[type='image']").hover(function() {
// mouseover
c
},function() {
// mouseout
$(this).attr("src","image/Chrysanthemum.jpg");
});*/

/*
toggle(function() {},fucntion() {});
*/

$("[type='image']").mouseover(function() {
//当鼠标移过的时候将图片路径设置为image/Tulips.jpg
$(this).attr("src","image/Tulips.jpg");
}).mouseout(function(){
//当鼠标移过的时候将图片路径设置为image/Chrysanthemum.jpg
$(this).attr("src","image/Chrysanthemum.jpg");
});

// 键盘按键释放才触发 keyup
// 键盘按钮按下事件:keydown
$(document).keydown(function(event) {
console.log(event.keyCode);
//当是回车键的时候，回车键的ascii值为13
if(event.keyCode==13) {
$(":button:eq(1)").dblclick();//下标为1的按钮触发双击事件
}
});

// 下拉列表：内容发生变化的时候触发
$("#grade").change(function() {
// 创建option元素的jQuery对象
var $option = $("<option value='2'>二年级</option>");
$option.appendTo($(this));//将当前的option追加
});

// 文本框获取焦点focus(),blur(),change()

// 浏览器滚动条滚动触发
var json = {"data":[
{"src":"Chrysanthemum.jpg"},
{"src":"Tulips.jpg"}
]}
alert(json.data[0].src);
$(document).scroll(function(event) {
var $img = $("<img />");
$img.attr("src","image/"+json.data[0].src);
$("#box").append($img);//给id为box的div追加img
});
});
</script>
<style>
[type="image"] {
width:200px;
height:100px;
outline:none;
}

#box {
width:200px;
height:auto;
}
</style>
</head>
<body>
<input type="button" value="单击" />
<input type="button" value="双击" />
<input type="button" value="鼠标放上去" />
<input type="image" src="image/Tulips.jpg" value="鼠标的hover事件" />
<input type="button" value="点击我5" /><br/>
<select id="grade">
<option value="-1">--请选择--</option>
<option value="1">一年级</option>
</select>
<div id="box">
<img src="image/Desert.jpg" />
</div>

</body>
</html></span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航