01-获得jQuery对象
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<body>
<input type="text" id="username" value="jack"/>
</body>
<script>
//通过原生js
//alert(document.getElementById("username").value)
//通过jquery 获取jquery对象
//var $username=$("#username");
var $username=jQuery("#username");
alert($username.val());
</script>
</html>02-DOM和jQuery对象的转换
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<body>
<input type="text" id="username" value="jack"/>
</body>
<script>
//dom >>>>jquery $(dom对象)
//1.获取dom对象
//var obj=document.getElementById("username");
//2.转化
//var $user=$(obj);
//alert($user.val());
//alert($user.value);错误的
//jquery>>>>dom
//1.获取jquery独享
var $u=$("#username");
//2.转换
//2.1 方式1
//var obj=$u.get(0);
//2.2 方式2
var obj = $u[0];
alert(obj.value);
</script>
</html>03-页面加载
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
onload=function(){
alert(12);
}
/*onload=function(){
alert(34);
}*/
$(function(){
alert("abc");
})
$(function(){
alert("ab1c");
})
$(function(){
alert("ab3c");
})
</script>
</head>
<body>
</body>
</html>04-事件绑定
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
//派发事件
$("#bId").click(function(){
alert(123)
});
});
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" />
</body>
</html>05-常见事件
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});
var i = 0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function(){
//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
}).mouseout(function(){
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起：mouseup");
});
$("#e03").click(function(){
$("#buttonMsg").html("单击：click");
}).dblclick(function(){
$("#buttonMsg").html("双击：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>
2525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
