javaScriptDOM

最新推荐文章于 2024-09-14 18:52:56 发布

董佳宇

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量34

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_69119074/article/details/130044661

版权

内置对象:1.字符串2.数组3.日期4.Math

字符串：

var a=10;
var s="abc:d:e:fg";//创建了一个字符串对象
alert(s.length);
console.log(s.length);//在网页的检查的Console中打印出来，向浏览器控制台输出日志信息，便于程序调试
console.log(s.charAt(0));
console.log(s.indexOf("c"));//0,1,2只返回第一次出现位置
console.log(s.lastIndexOf("c"));
console.log(s.substring(0,4));//substring（开始位置，结束位置）		console.log(s.substr(0,4));//substr(开始位置，截取长度)
console.log(s.split(":"));

数组：

三种：

var a=new Array();
a[0]=0;
a[1]=1;
a[2]=2;
a[3]=3;
console.log(a);

var a =new Array(1,2,3,4,5);
console.log(a);

var a=[1,2,3,4,5];//尤其注意Java中是{}，javaScript是[]。
console.log(a);

var a=[1,2,3,4,5];
console.log(a.length);
console.log(a.join(":"));//把数组转为一个字符串
console.log(a.reverse());
var a=["3","1","7","2"];
console.log(a.sort(numberSort));//排序不是按照数字的大小进行排序的
//自定义的排序规则函数
function numberSort(a,b){
return a-b;
}

日期：

var date= new Date();
console.log(date.getFullYear());//年
console.log(date.getMonth()+1);//从零开始需要加一
console.log(date.getDate());
console.log(date.getDay());//周日为0
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());

Math:

Math.abs(x) 绝对值计算； 

Math.pow(x,y) 数的幂；x的y次幂 

Math.sqrt(x) 计算平方根； 

Math.ceil(x) 对一个数进行上舍入 

Math.floor(x) 对一个数进行下舍入。 

Math.round(x) 把一个数四舍五入为最接近的整数 

Math.random() 返回 0 ~ 1 之间的随机数 

Math.max(x,y) 返回 x 和 y 中的最大值 

Math.min(x,y) 返回 x 和 y 中的最小值

事件：

事件是属于html标签中的内容，可以操作标签产生事件，通过事件去调用指定函数

οnclick="fun()"鼠标左键单击事件

οnfοcus="fun()"输入框获取到鼠标焦点时触发聚焦事件

οnblur="fun()"输入框失去到鼠标焦点时触发失焦事件

οnmοuseοver="fun()"鼠标移入到标签上时触发悬浮事件

οnmοuseοut="fun()"鼠标离开标签时触发

οnlοad="fun()"网页内容加载完才会调用

οnchange="fun()"当标签失去焦点且内容发生改变时触发

HTMLDOM：

内置对象：字符串对象，数组，日期，算数
html dom对象Document Object Model-->文档对象模型
javaScript 是一种面向对象的语言，操作页面时，把网页中的每一个标签，都是为一个对象，
把这一类标签对象统称为dom对象，
那么javaScript要想对网页中的标签进行操作，那么就需要获取到要操作的标签
要操作，先得到。
document对象表示我们整个html网页文件,网页加载完毕后，生成document对象
document.getElementById()根据标签的id获取唯一的一个标签对象

拿到标签对象后三种方式：

1.对标签的属性进行操作

var tobj1=document.getElementById("txt1");
var tobj2=document.getElementById("txt2");
tobj2.value = tobj1.value;
tobj1.value="按钮";
tobj1.type="button";

2.对标签体中的内容进行操作

var divObj1=document.getElementById("box1");
var divObj2=document.getElementById("box2");
alert(divObj1.innerHTML);//获取到标签体内所有内容包括标签
divObj2.innerHTML=divObj1.innerHTML;

3.对标签的css属性进行操作

var divObj1=document.getElementById("box1");
divObj1.style.backgroundColor="red";
divObj1.style.width="100px";
divObj1.style.height="100px";

DOM练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function oper(){
                // 在js中要获得第一个文本框标签对象
     var tobj1=document.getElementById("txt1");
     var tobj2=document.getElementById("txt2");
                tobj2.value = tobj1.value;
                tobj1.value="按钮";
                tobj1.type="button";
            }
function changeBgColor(color){
     var bobj =document.getElementById("bid");
                bobj.bgColor=color;
            }
        </script>
    </head>
    <body bgcolor="aqua" id="bid">
        <div>【
      </div>
      <input type="text" id="txt1" value=""/>
      <input type="text" id="txt2" value="" />
      <input type="button" value="操作" onclick="oper()"/>
      <input type="button" value="红色" onclick="changeBgColor('red')" />
      <input type="button" value="绿色" onclick="changeBgColor('green')" />
      <input type="button" value="蓝色" onclick="changeBgColor('blue')" />
    </body>
</html>