js部分知识点(2)



对象:一类中的具体实例
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:
2:
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%


}




实现开关灯

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





修改div中的内容(双标签)
innerHTML:对象中的所有内容(文本内容和标签内容)一般指的双标签或者盒子(容器)
innerText:对象中所有的文本内容
function fn(){
var obj=document.getElementById("d1");


obj.innerHTML="new div";
obj.innerText="
}


这是div




案例:网页版的计算器
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


}




+

=







移动瞄准案例
Event clientX;
Evebt
function fn(e){
var obj=document.getElementById("dl");
var x=e.clientX;
var y=e.clientY;
obj.innerHTML="坐标"+x+","+y;
}


坐标0.0


onchange:当发生改变的时候做的事件

   


对象:一类中具体的实例
<标签>
案例:点出漫天小星星(点到哪里哪里就弹出小星星)
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);(添加的放在最后面)






..........未完待续,,,,,,,,,,,,



































































你可能感兴趣的:(前端)