JavaScript基础汇总

来源：互联网发布：比特币挖矿软件下载编辑：程序博客网时间：2024/06/08 14:01

document.write("JS进阶篇");在文档中写内容

变量命名必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字
以下关键字也不能用于命名：
这里写图片描述

声明变量语法: var 变量名;

操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号

二维数组的定义

var myarr=new Array();  //先声明一维 for(var i=0;i<2;i++){   //一维长度为2   myarr[i]=new Array();  //再声明二维    for(var j=0;j<3;j++){   //二维长度为3   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j   } }

if小写，大写字母（IF）会出错！

Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。

函数调用
第一种情况:在

 <script type="text/javascript">    function add2()    {         sum = 1 + 1;         alert(sum);    }  add2();//调用函数，直接写函数名。</SCRIPT>

第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

<html><head><script type="text/javascript">   function add2()   {         sum = 5 + 6;         alert(sum);   }</script></head><body><form><input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件，直接写函数名</form></body></html>

这里写图片描述

鼠标事件：
1.鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
2.鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
3.当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
4.选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
5.通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
6.事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。
7.当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

获取元素的值设置和获取方法为：
例：赋值：document.getElementById(“id”）.value = 1；
取值：var = document.getElementById(“id”）.value；

加减乘除简单程序

<!DOCTYPE html><html> <head>  <title> 事件</title>    <script type="text/javascript">   function count(){    var oTxt1 = document.getElementById("txt1").value;    var oTxt2 = document.getElementById("txt2").value;    var oSlt = document.getElementById("select").value;    var result = "";    switch(oSlt) {        case "+":            result = parseFloat(oTxt1) + parseFloat(oTxt2);            break;        case "-":            result = parseFloat(oTxt1) - parseFloat(oTxt2);            break;        case "*":            result = parseFloat(oTxt1) * parseFloat(oTxt2);            break;        default:            result = parseFloat(oTxt1) / parseFloat(oTxt2);    }    document.getElementById("fruit").value = result;   }  </script>  </head>  <body>   <input type='text' id='txt1' />    <select id='select'>        <option value='+'>+</option>        <option value="-">-</option>        <option value="*">*</option>        <option value="/">/</option>   </select>   <input type='text' id='txt2' />    <input type='button' value=' = ' onclick=count() /> <!--通过 = 按钮来调用创建的函数，得到结果-->    <input type='text' id='fruit' />    </body></html>

这里写图片描述

get/setFullYear() 返回/设置年份，用四位数表示。
1.结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)
2. 不同浏览器，时间格式有差异。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>获得星期</title><script type="text/javascript">  var mydate=new Date();  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];  document.write("今天是：" + weekday[mydate.getDay()]);</script></head><body></body></html>

getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”

<script type="text/javascript">  var mydate=new Date();  document.write("当前时间："+mydate+"<br>");  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);  document.write("推迟一小时时间：" + mydate);</script>

使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写
使用toLowerCase()方法，将字符串所有大写字母都变成小写的字符串

charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
stringObject.charAt(index)
这里写图片描述

返回最后一个字符：mystr.charAt(mystr.length-1)

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

split() 方法将字符串分割为字符串数组，并返回此数组。

mystr.split("-")+ "<br />"//以字符"-"分隔字符串对象mystr。mystr.split("")+ "<br />"//将字符串对象mystr每个字符分割。mystr.split("",3)//将字符串对象mystr分割成字符，分割3次。

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

  document.write(mystr.substring(7));提取第7个字符之后的字符串  document.write(mystr.substring(2,6));提取第2至第6之间的字符串

substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。“`
stringObject.substr(startPos,length)

![这里写图片描述](http://img.blog.csdn.net/20170305225159615?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTgzOTM3MTY2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)![这里写图片描述](http://img.blog.csdn.net/20170305225216386?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTgzOTM3MTY2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)ceil() 方法可对一个数进行向上取整。`Math.ceil(x)`floor() 方法可对一个数进行向下取整。`Math.floor(x)`round() 方法可把一个数字四舍五入为最接近的整数。`Math.round(x)`random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。`Math.random();`![这里写图片描述](http://img.blog.csdn.net/20170305225946114?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTgzOTM3MTY2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。`arrayObject.concat(array1,array2,...,arrayN)`join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。`arrayObject.join(分隔符)`reverse() 方法用于颠倒数组中元素的顺序。`arrayObject.reverse()`slice() 方法可从已有的数组中返回选定的元素。`arrayObject.slice(start,end)`![这里写图片描述](http://img.blog.csdn.net/20170306124305302?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTgzOTM3MTY2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)sort()方法使数组中的元素按照一定的顺序排列。`arrayObject.sort(方法函数)`1.如果不指定<方法函数>，则按unicode码顺序排列。2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。<script type="text/javascript">  function sortNum(a,b) {  return a - b; //升序，如降序，把“a - b”该成“b - a”} var myarr = new Array("80","16","50","6","100","1");  document.write(myarr + "<br>");  document.write(myarr.sort(sortNum));</script>结果：80,16,50,6,100,11,6,16,50,80,100

<!DOCTYPE  HTML><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>系好安全带,准备启航</title><script type="text/javascript">  //通过javascript的日期对象来得到当前的日期，并输出。  var currentDate = new Date();  var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];  document.write(      currentDate.getFullYear() + "年" +       (currentDate.getMonth() + 1) + "月" +       currentDate.getDate() + "日" + " " +       weekday[currentDate.getDay()]      );  //成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦  var sorceStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";  var sourceArr = sorceStr.split(";");  //document.write(sourceArr);//test   //从数组中将成绩撮出来，然后求和取整，并输出。   var score = new Array();   var sum = 0;   for (var i = 0; i < sourceArr.length; i ++) {       sum += parseInt(sourceArr[i].substr(sourceArr[i].indexOf(":")+1));       //document.write("<br>" + sum);//test   }   document.write("--班级总分为:" + sum);   document.write(",班级平均分为(保留整数):" + Math.round(sum/sourceArr.length))</script></head><body></body></html>

这里写图片描述

clearInterval() 方法可取消由 setInterval() 设置的交互时间。clearInterval(id_of_setInterval)

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。setTimeout(代码,延迟时间);

setTimeout()和clearTimeout()一起使用，停止计时器。clearTimeout(id_of_setTimeout)

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。window.history.[属性|方法]

back()方法，加载 history 列表中的前一个 URL。

window.history.back();window.history.go(-1);

forward()方法，加载 history 列表中的下一个 URL。

window.history.forward();window.history.go(1);

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。window.history.go(number);

location用于获取或设置窗体的URL，并且可以用于解析URL。location.[属性|方法]

这里写图片描述

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
这里写图片描述

   var browser=navigator.appName;   var b_version=navigator.appVersion;   document.write("Browser name"+browser);   document.write("<br>");   document.write("Browser version"+b_version);

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)navigator.userAgent
这里写图片描述

screen对象用于获取用户的屏幕信息。screen对象用于获取用户的屏幕信息。
这里写图片描述

window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1. 单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。

屏幕可用高和宽度
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

DOM基础
这里写图片描述
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如标签的链接属性href=”http://www.imooc.com”。

这里写图片描述

返回带有指定名称的节点对象的集合。document.getElementsByName(name)
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。document.getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

这里写图片描述

全选跟全不选的程序

function checkall(){            var hobby = document.getElementsByTagName("input");            for(i = 0;i < hobby.length;i++){                    if(hobby[i].type == "checkbox"){                      hobby[i].checked = true;   }                  }        }        function clearall(){            var hobby = document.getElementsByName("hobby");            for(i = 0;i < hobby.length;i++){                hobby[i].checked = false;}        }

通过元素节点的属性名称获取属性的值。elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。elementNode.childNodes

firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。node.firstChild
lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。node.lastChild

获取指定节点的父节点。elementNode.parentNode

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。nodeObject.nextSibling
previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。nodeObject.previousSibling

在指定节点的最后一个子节点列表之后添加一个新的子节点。appendChild(newnode)

insertBefore() 方法可在已有的子节点前插入一个新的子节点。insertBefore(newnode,node);
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]);

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。nodeObject.removeChild(node)

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 node.replaceChild (newnode,oldnew )

createElement()方法可创建元素节点。此方法可返回一个 Element 对象.document.createElement(tagName)

通用JavaScript程序（可视区）

var w= document.documentElement.clientWidth || document.body.clientWidth;var h= document.documentElement.clientHeight || document.body.clientHeight;

通用JavaScript程序（网页尺寸）

var w=document.documentElement.scrollWidth || document.body.scrollWidth;var h=document.documentElement.scrollHeight || document.body.scrollHeight;

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
offsetHeight = clientHeight + 滚动条 + 边框。
通用JavaScript程序（网页尺寸）

var w= document.documentElement.offsetWidth || document.body.offsetWidth;var h= document.documentElement.offsetHeight || document.body.offsetHeight;

这里写图片描述

0 0