js部分知识点（2）

叁歲伎倆 2022-06-15 00:43 127阅读 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>  
..........未完待续，，，，，，，，，，，，