js部分知识点（2）

最新推荐文章于 2020-12-28 15:11:02 发布

Carrie_zzz

最新推荐文章于 2020-12-28 15:11:02 发布

阅读量347

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/Carrie_zzz/article/details/72498802

版权

前端专栏收录该内容

73 篇文章 0 订阅

订阅专栏

对象：一类中的具体实例
var obj={name:"张三丰",age：24，taiji:function ab(){},zuofan:function(){}};
obj.name
属性：name,age
方法：taiji,zuofan

在js角度看标签都是对象

IE:javascript:jscript
Livescript=>javascript->ECMAscript,BOM,DOM
标签：HTML属性，CSS属性
HTML：对像属性=值
CSS;对象.style.CSS属性=“值”
获取对象的方法
id:document.getElementByld("id名")
事件
用户的动作
Onclick:点击
Onmouseover:鼠标放上
onmouseout:鼠标离开
ondblclick:双击事件
onmousedown:鼠标按下
onmouseup:鼠标抬起
onmousemove:鼠标移动
表单事件：
onfocus:获得焦点
onblur:失去焦点
onsubmit:提交事件
onchange:当发生改变的时候
onreset：重置事件

键盘事件
onKeyup:键盘抬起
onKeydown:键盘按下
onKeypress:键盘按键一次
窗口事件：onload事件
页面加载完成之后立即执行的事件
两种方式：
1：<script>window.οnlοad=init;</script>
2:<body οnlοad="init()"</body>
Event：保存事件发生时的相关信息

当事件发生的时候：event
Event.clientX:事件发生时的X坐标
Event.clientY:事件发生时的Y坐标
Event.target:事件源
function fn(){
//获取div对象

var obj=document.getElementBiId("d1");
//修改对象的属性
//记得要遵守js语法规则
obj.style.fontSize="60px";
obj.style.color="yellow";

}

function fn(){
var obj=document.getElementById("img1");
var w=obj.width;
obj.width=w*1.2;//每次点增大20%

}
<body>
<img widyh="100" src="images/big.jpg">
<input type="button" value="点击变大" οnclick="fn()">

实现开关灯

function fn1(){
var.obj=document.getElementById("d1");
obj.src="images/bulbon.gif";
}
function fn2(){
var.obj=document.getElementById("d1");
obj.src="images/bulboff.gif";
}

<body>
<img src="images/bulboff.gif"id="dl"ommouseover="fn1()"οnmοuseοut="fn2()">
</body>
修改div中的内容（双标签）
innerHTML：对象中的所有内容（文本内容和标签内容）一般指的双标签或者盒子（容器）
innerText:对象中所有的文本内容
function fn(){
var obj=document.getElementById("d1");

obj.innerHTML="new div";
obj.innerText="
}
<body>
<div id="d1">
这是div

</div>
<input type="button"value="点击修改样式"οnclick="fn()"
</body>
案例：网页版的计算器
function jisuan(){
//获取第一个input对象的value的值
var obj1=document.getElementById("text1").value;
var obj2=document.getElementById("text2").value;
var obj3=document.getElementById("text3");
var jieguo=obj1+obj2

}

<body>
<input type="text"id="text1">
+
<input type="text"id="text2">
=
<input type="text"id="text3">
<input type="button"value="点击计算"οnclick="jisuan()">

</body>

移动瞄准案例
Event clientX;
Evebt
function fn(e){
var obj=document.getElementById("dl");
var x=e.clientX;
var y=e.clientY;
obj.innerHTML="坐标"+x+","+y;
}
<body>
<div id="dl" οnmοusemοve="fn(event)">
坐标0.0
</div>
</body>
onchange:当发生改变的时候做的事件
<head>
<textarea οnchange="fn()">
abcd
</textarea>
<select οnchange="fn()">
<option>a</option>
<option>b</option>
</select>
</head>
对象：一类中具体的实例
<标签>
案例：点出漫天小星星（点到哪里哪里就弹出小星星）
document.createElement("标签名")
document.body.appendChild(对象);
document.body:是body标签对象
document.documentElementhtml:标签对象
alert(）--->可以用来调试（简单直观）
1:让页面出星星
（1）：创建一个对象
var body=document.createElement("img");
（2）：添加src属性
obj.src="xingxing.gif"
（3）：放到body里
document.bodyappentChild(obj);(添加的放在最后面）

<body οnclick="start">

</body>
..........未完待续，，，，，，，，，，，，