javascript基础回顾

最新推荐文章于 2024-09-11 20:25:47 发布

Vic·Tory

最新推荐文章于 2024-09-11 20:25:47 发布

阅读量625

点赞数

分类专栏： WEB 文章标签： javascript

本文链接：https://blog.csdn.net/theVicTory/article/details/54743503

版权

WEB 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

今天对javascript基础进行了依次回顾，下面将一些简单易忘的知识点进行整理：

1、DOM对象的使用

文档对象模型DOM（DocumentObject Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。常用的DOM操作有：

var hobby = document.getElementsByTagName("input");    //通过标签名获取结点对象组  
var otest = document.getElementById("test");          //通过id获取结点
var hobby = document.getElementsByName("hobby");      //通过name属性获取对象组

var text=otest.getAttribute("title");                  //获取对象的属性
otest.setAttribute("title","web前端技术");              //设置对象的属性
otest..removeAttribute('style');                       //删除对象的属性
otest.style.color="red";                               //设置对象的颜色属性
otest.className="newClass";                            //设置对象的类名
var childName=otest.childNodes.nodeName;               //获取子结点的标签名


var s1=x.firstChild.nodeName;                         //获取结点x的第一个子结点
var s1=x.lastChild.nodeName;                          //获取结点x的最后一个子结点
var z=x.previousSibling;                              //获取结点x的上一个兄弟结点
var y=x.nextSibling;                                  //获取结点x的下一个兄弟结点

var newnode = document.createElement("li");        //创建一个li结点
var newtext= document.createTextNode("PHP");       //创建一个文本结点
newnode.appendChild(newtext);                     //将文本结点添加到父节点li中
p.insertBefore(y,newnode);                        //在y结点之前插入newnode，p为父节点
p.removeChild(y);                                 //删除p的子结点y
p.replaceChild(newnode,oldnode);                  //替换结点

innerHTML方法获取网页元素内容，例如一个p标签中<p id=”para”>网页内容</p>，如果直接document.write(document.getElementById(“para”));会输出网页的DOM结构：[object HTMLParagraphElement]。只有用innerHtml输出才会是“元素内容”四个字。用innerHTML修改网页内容时直接innerHtml=“修改后内容”即可。

2、JS数组

数组对象方法

arr.concat(arr1,arr2,…);	连接多个数组添加到arr后面
arr.join(“-”);	将数组转化为字符串，并用“-”分隔
arr.reverse();	数组倒序
arr.slice(start,end);	返回从start到end的子数组
arr.sort(sortMethod);	按照sortMethod函数进行排序

排序函数应该具有两个参数 a 和 b，其返回值如下：若返回值<=-1，则表示 a 在排序后的序列中出现在 b 之前。例如倒序排序：

function sortNum(a,b) {

        return b-a;

  }

var myarr = newArray("80","16","50","6","100","1");

document.write(myarr.sort(sortNum));

例2、从字符串中截取出成绩求和：

var scoreStr = "赵小明:87;李小花:81;小红:97;小天:76;小张:74;小小:94;小西:100;小伍:76;小迪:64;小曼:76";

 var scoreArr=scoreStr.split(';');    //将字符串以;为分割符分为子字符串数组
 var sum=0;
 for(var i=0;i<scoreArr.length;i++){
      var subStr=scoreArr[i];
      var index=subStr.indexOf(':');
      var subArr=scoreArr[i].slice(index+1);    //截取子字符串从：后到末尾的部分
      sum+=parseInt(subArr);                //将字符转化为int并求和
 }
 document.write("--班级总分为："+sum);

3、鼠标事件

onclick	单击
onmouseover	鼠标悬浮
onmouseout	鼠标移开
onchange	内容改变
onselect	被选中
onfocus	光标聚焦
onblur	光标离开
onload	加载
onunload	关闭

可以将鼠标点击事件添加到html标签里，也可以在JS代码中将事件绑定给对象

<script type="text/javascript">
  function openwin(){        //之后通过标签绑定该函数
     window.open('http://www.imooc.com','_blank');
  }
</script>
</head>
<body>
  <form>
    <input type="button" value="点击我" onclick="openwin()"/>
  </form>
</body>

4、时间对象

新建一个时间对象 var t=new Date();，然后可以通过对象t来调用时间对象的相应方法。主要有get获取、set设置两种，t.get/setDate():获取/设置日期，t.get/setFullYear()：获取/设置年份，Month:月份，Hours：小时，Minutes：分钟，Seconds：秒，Time：从1970至今的毫秒时间。

var mydate=new Date(); 
mydate.setFullYear(81);             //设置年份
var myyear=mydate.getFullYear();    //获取年份
document.write("年份:"+myyear);

5、字符串对象

var char=”引号内就是字符串”	新建字符串对象
char.length	获取字符串长度
char.toUpperCase();/toLowerCase()	大小写转换
char.charAt（i-1)	获取第i个字符
char.indexOf(‘sub’,start);	返回字符串‘sub’自start后第一次出现的索引,其中start参数可选
char.split(‘s’,n)	以s字符分割字符串，并返回前n个结果数组，n可选
char.substring(start,end)	截取从start到end字符串，end可选
char .substr(pos,length)	从pos位置开始截取长度为length字符串

var mystr="86-010-85468578";
var r=mystr.split("-");                //以-为界分割字符串并返回为r[]数组
document.write(r[0]      + "<br />");
document.write( r[1]     + "<br />");
document.write( r[2]               );

6、Math对象

Math的属性有Math.PI（圆周率），Math.E（算术常量e），Math.LN2（ln2）。

Math的方法

Math.abs(x);	x的绝对值
Math.tan(x);	求tan（x）
Math.atan(x);	求反正切值
Math.ceil(x);	将x向上舍入
Math.floor(x);	将x向下舍入
Math.round(x);	四舍五入
Math.max(x,y);	返回最大值
Math.min(x,y);	返回最小值
Math.pow(x,y);	返回x的y次幂
Math.log(x);	返回lnx
Math.sqrt(x);	x开平方
Math.random();	返回0-1内随机数

<script type="text/javascript">
    //输出十以内的随机数
    document.write(Math.round(Math.random()*10)+"<br/>");
</script>

7、Window对象

Window的innerWidth/Height属性代表窗口大小。

window对象可以直接使用，例如Window.alert(“”);可简写为alert（“”);

window有三种对话框：alert()简单弹出警示框，confirm()可以选择“确定/取消”并返回true或false，prompt()可以返回输入框。

window.open(‘地址‘，’打开方式‘，’打开参数‘);打开新页面，打开方式有’_balank’在新窗口打开，’_self’在本页面打开，’_top’从最高层节点打开页面。打开参数例如“width=800px，height=500px，menubar=yes”。

window.close();关闭页面

Window.history对象保存浏览器访问过的页面，属性window.history.length保存访问过的页面数。方法window.history.back();返回之前页面，window.history.forward()向前返回页面，window.history.go(n);向前第n个页面，n为负值向后返回。

Window.screen对象保存浏览器窗口属性：width（宽度）、height（高度）、colorDepth（颜色位数）。

Window.navigator对象保存浏览器相关信息，appName浏览器名、userAgent属性保存浏览器种类。

Window.location保存浏览器url相关属性，主机host、完整链接href、路径pathName、端口号port、协议protocol

        function GoBack() {    //向后一个页面
            history.go(-1);
        }
        function GoForward() {        //向前一个页面，window可省略
            history.go(1);
        }

        document.write(navigator.appName);    //输出浏览器名称
        
        document.write(window.location.href);    //输出url本身

var myinterval=setInterval（“function（）”，time）；每隔time时间执行function函数，停止循环clearInterval（myinterval）；

var mytimeout=setTimeout（“function（）”，time），延迟time时间执行，停止clearTimeout（mytimeout）；

   function clock(){
      var time=new Date();               	  
      document.getElementById("clock").value = time;
   }
    myint=setInterval(clock,1000) ;          //定时器，每个一秒执行一次clock
 
    clearInterval(myint);                    //清除定时器myint