###JavaScript中对象分类
###事件
###选择器回顾:
1.定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var i = 0;
//开启定时器每隔1秒调用- -次myfn方法
//直接调用方法写括号,把方法作为参数传递时不写括号
var time1 = setInterval(myfn, 1000);
function myfn() {
console.log(i++);
if(i>10){
// 停止定时器
clearInterval(time1)
}
}
// 第二种
var time2 = setInterval(function(){
console.log("第二种:"+i)
if(i>10){
// 停止定时器
clearInterval(time2)
}
},2000);
//只执行一次的定时器
setTimeout(function(){
alert("时间到");
},3000);
</script>
</body>
</html>
2.定时器练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mydiv"></div>
<script type="text/javascript">
//实现每隔1秒钟 往mydiv里面添加一-张图片当10秒后停止添加
var timer = setInterval(function(){
mydiv.innerHTML+="<img width='150' height='100' src='../images/img8.jpg'>";
}, 1000);
//创建一个10秒后执行的定时器
setTimeout (function(){
clearInterval(timer);
},10*1000);
</script>
</body>
</html>
3.鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color:red;
}
</style>
</head>
<body>
<div onmouseover= " overfn()" onmouseout= " outfn()" onmousedown= " downfn()"
onmouseup= "upfn()" onmous emove= " movefn()">
</div>
<script type="text/javascript">
function downfn(){
console.log("鼠标按下");
}
function upfn(){
console. log("鼠标抬起");
}
function movefn(){
console.log("鼠标移动");
}
function overfn(){
//快捷写法 clog
console.log("鼠标移入");
}
function outfn(){
console.log("鼠标移出");
}
</script>
</body>
</html>
4.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type= "text/javascript">
//页面加载完成事件!
onload =
function(){
i1.value="abc";
function downfn(){
//得到按键编码
console.1log("键盘按下:"+event.keyCode);
function upfn(){
//把按键编码转成字符
console.log("键盘抬起:"+String.fromCharCode(event.keyCode)) ;
}
</script>
</head>
<body>
<input type= "text" onkeydown= "downfn()" onkeyup="upfn()" />
<script type="text/javascript">
function downfn(){
console.log("键盘按下");
}
function upfn(){
console.log("键盘抬起");
}
</script>
</body>
</html>
5.值改变事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="属性事件绑定"
onclick="alert('事件触发!')"/>
<input type="button" value="动态绑定" id="btn" />
<select id="s" onchange="changefn()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option >广州</option>
</select>
<script type="text/javascript">
//动态绑定事件 工作中使用多,可以将js代码和html代码分离
btn.onclick = function(){
alert("动态绑定成功!");
}
function changefn(){
//当值改变时得到下拉选里面的值
alert(s.value);
}
onresize = function(){
console.log("窗口尺寸改变了");
}
</script>
</body>
</html>
6.事件传递
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
border:1px solid red;
}
</style>
</head>
<body>
<div onclick="alert('div')">
<p onclick="alert('p')">
<input type="button" value="按钮" onclick="alert('按钮')"/>
</p>
</div>
</body>
</html>
7.引入jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">
</div>
<input type="text" />
<!-- 引入jq框架 script标签如果引入了文件就不能在标签体内继续写代码否则不执行 -->
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//通过id选择器选择到页面中的div然后修改里面的文本为abc
$("#d1").text("abc");
//原生js写法
/* var d1 = document.getElementById("d1");
d1.innerText="abc"; */
//val() 等效js中的value属性 不能混用
$("input").val("测试");
//js获取对象的方式
var js = document.getElementById("d1");
//jq获取对象的方式
var jq = $("#d1");
</script>
</body>
</html>
8.对象转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1"/>
<input type="button" value="js转jq" id="b1"/>
<input type="button" value="jq转js" id="b2"/>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// jQuery中的动态绑定事件的方式
$("#b1").click(function(){
//得到js对象
var js = document.getElementById("i1");
//js对象转成jq对象
var jq = $(js);
//jq.val() 获取文本框的值
alert(jq.val());
});
$("#b2").click(function( ){
//得到js对象
var jq = $("#i1");
//jq对象转成js对象,jq对象实际上就是一个数组
var js = jq[0];
alert(js.value);
});
</script>
</body>
</html>
未完待续…