Js的外部引用
外部文件中不用添加<script>标签，引用书写位置需在使用之前
<script type="text/javascript" src="xx.js"></script>
DOM操作
获取节点对象：
通过标签的id属性值进行查找，结果唯一
divobjx=document.getElementById("divid")
通过标签的name属性值进行查找，返回数组，排序与文档出现顺序相关
var nameobjx=document.getElementsByName("namedong");
通过标签名进行查找, 返回数组，排序与文档出现顺序相关
var divobjx=document.getElementsByTagName("div");
HTML属性操作：
得到标签中value属性的值，操作标签有<input>、<select>、<textarea>等
var xx=document.getElementById("inputid").value;
得到name属性的值
var textx=document.getElementById("inputid").name;
通过任意属性名获取属性值
var h1objx=document.getElementsByName("h1namex")[0];
alert(h1objx.getAttribute("class"));
修改标签属性值
imgobj=document.getElementsByTagName("img")[0];
imgobj.src="img/0.jpg";
设置或者添加属性值
var h1objx=document.getElementsByName("h1namex")[0];
h1objx.setAttribute("class","c11");
获取属性值
var devadd=document.getElementById("adddevid");
devadd.getAttribute('devid');
devadd.getAttribute('devname');
删除属性
h1objx.removeAttribute("class");
修改（添加）其CSS样式：
更改或添加css样式的值必须使用双引号扩起，如【opacity="0.2"】、【width="10px"】
document.getElementById("inid").style.backgroundColor="red";
Class属性操作
1 /*class="c1 c2"*/
2 divobjx=document.getElementsByTagName("div")[0];
3 divobjx.classList.add("c3");//添加
4 divobjx.classList.remove("c1");//删除
5 alert(divobjx.classList);//得到class的列表值
标签内容操作：
得到标签包裹内容
1 textx=document.getElementById("divid").textContent;// 得到标签包裹的所有文字内容
2
3 alert(document.getElementsByTagName("div")[0].innerText);//得到标签包含的内容，但标签可能会被浏览器解释
4 alert(document.getElementsByTagName("div")[0].innerHTML);//得到标签包含的内容，内容转为字符串，不会被浏览器解释
更改标签包裹内容
1 document.getElementById("dongid").innerHTML="<h1>dongxiaodong<h1>"
2 document.getElementById("dongid"). innerText ="dongxiaodong"
标签节点操作
操作子节点
1 var ulobjx=document.getElementsByTagName("ul")[0];
2 alert(ulobjx.children.length)//得到子结点的个数
3 ulobjx.children[0].setAttribute("class","c11");//修改第一个子节点的属性
操作父节点
1 var spanobjx=document.getElementById("spanidx");
2 spanobjx.onclick=function(){
3 alert(spanobjx.parentNode.nodeName);//得到父节点的名字
4 spanobjx.parentNode.setAttribute("class","c11");//更改父节点的属性
5 }
节点的创建1：
1 var spanobjx=document.getElementById("spanidx");
2 spanobjx.onclick=function(){
3 //创建标签方法一
4 //var inputx="<input type='text' value='东小东' dong='xiaoddd'>"
5 //创建结点方法二
6 var inputx=document.createElement("input");
7 inputx.type="text";
8 inputx.value="东小东";
9 inputx.dong="xiaoddd";
10 //添加结点
11 spanobjx.appendChild(inputx);//
12 }
节点创建2：
1 //创建标签
2 var inputx="<input type='text' value='东小东' dong='xiaoddd'>"
3 //添加结点 beforeBegin afterBegin beforeEnd afterEnd
4 spanobjx.insertAdjacentHTML("afterBegin",inputx);
删除节点：
1 var divobjx=document.getElementById("dividx");
2 divobjx.onclick=function(){
3 divobjx.removeChild(divobjx.children[0])
4 }
屏幕宽高获取
得到当前网页的宽高：
1 var wid=document.documentElement.offsetWidth; 2 var hei=document.documentElement.offsetHeight; 3 alert(wid+","+hei);
Screen
屏幕整体宽高
1 var wid=screen.width; 2 var hei=screen.height; 3 alert(wid+","+hei);
浏览器最大可用宽高：
1 var wid=screen.availWidth; 2 var hei=screen.availHeight; 3 alert(wid+","+hei);
Windown对象,得到浏览器宽高
1 var wid=window.innerWidth; 2 var hei=window.innerHeight; 3 alert(wid+","+hei);
表单提交按钮模拟
模拟HTML的form表单的提交按钮
1 <script>
2 function fsub(){
3 fomrobjx=document.getElementById("formx");
4 fomrobjx.submit();//表单提交
5 }
6 </script>
浏览器前进与后退按钮模拟（History）
1 history.back();//相对于浏览器的后台方向 2 history.forward;//相对于浏览器的前进方向 3 history.go(-1);//通过索引进行页面跳转
URL操作及页面跳转
Location，获取相关值
1 alert(location.hostname);//主机名称，如（localhost) 2 alert(location.pathname);//返回路径和文件名 3 alert(location.port);//主机端口 4 alert(location.protocol);//web协议，http或者https 5 alert(location.href);//返回当前URL
页面跳转：
1 //方法一
2 location.href="https://www.cnblogs.com/dongxiaodong/p/10269788.html";
3 //方法二
4 location.assign("https://www.cnblogs.com/dongxiaodong/p/10269788.html");
变量及运算
JS是弱类型语言
局部变量：var函数内定义，在当前函数中使用
全局变量：var函数外定义，在函数外定义，各处共享
全局变量：直接使用【xx=123】,在函数内外定义，各处共享
变量的作用域为函数，函数的作用域链在程序加载时已经确定
1 //声明变量 2 var vardong=1;//int类型 3 var vardong2="dongxiaodong"//string类型 4 var boolx=false; //声明boolean类型
字符串：
字符串可以使用单双引号进行包括，操作及方法与java与诸多相似
1 var strx="12345678923东aBc";
2 alert("字符串的长度："+strx.length);//中文长度为1
3 alert(strx.indexOf("23x"));//从头查找字符串位置，有则返回位置，无则返回-1
4 alert(strx.lastIndexOf("23"));//从尾部查找
5 alert(strx.match("23"));//有则返回字符串，无则返回空
6 alert(strx.replace("东","东小东"));//内容替换，参数（原，新）
7 alert(strx.substring(0,2));//提取字符串，区间为[0,2)
8
9 alert("aBc".toLocaleLowerCase());//全部转换为小写字母，另外大写：toLocaleUpperCase()
10
11 alert("dd,xx,nn,bb".split(",")[0]);//字符串分隔
12
13 alert(" dongxiaodong ".trim());//去掉前后空格
14 alert("定时时间到".charAt(0));//得到第一个字符：定
正则表达式：
基本语法类似于PHP
内容查找（test）
1 repx=/gg*D/;
2 resbool=repx.test("123459gggDDxxxggggDDD");
3 alert(resbool);
内容提取（exec）
或者匹配的第一个值，如果需要全部则使用 repx=/gg*D/g;,执行一句则获取到下一个，直到返回null,之后又循环
1 repx=/gg*D/;
2 resstr=repx.exec("123459gggDDxxxggggDDD");
3 alert(resstr);
类型转换：
字符串转为数字：ii=parseInt("100");
字符串转换为小数：ff=parseFloat("55.26");
数组操作：
1 var x=[11,15,"dddd",99];//array类型,取值arrdong[1]
2 var y=[3,2,1,"a","c"];
3 alert(y.length)//得到数组长度
4 alert(x.concat(y));//数组的合并
5 alert(y.sort());//排序
6 alert(x.reverse())//翻转
7 y.push("dddd");//追加元素，等价于：arrdong[y.length]="xx";
8 alert(y.join("分隔符")); //将数组元素用分隔符隔开拼接成字符串
数组的遍历其中一种方法：
1 var arrdong=[11,15,"dddd",99];//array类型,取值arrdong[1]
2 for(var varx in arrdong){
3 document.write(varx+"=>"+arrdong[varx]+"<br/>");
4 }
字典：
1 dict={dong1:"dongxiaodong1",dong2:"dongxiaodong2"};
2 alert(dict["dong1"]);
3 //字典的遍历
4 for(var varx in dict){
5 alert(varx+"=>"+dict[varx]);
6 }
JS的运算：
其大部分运算相似与Java和PHP等，如（if,while,for等）
任何类型与字符串相加，都会转换为字符串，呈现拼接效果
三元运算：
【？ : 】结果变量=条件？满足则为结果1：结果2；
数学运算相关：
1 alert(Math.round(2.5));//四舍五入 2 alert(parseInt(Math.random()*100));//随机数，本来区间为0至1 3 alert(Math.max(11,22,99,33,101,999,0.1));//得到最大值,对应于min() 4 alert(Math.abs(-100));//绝对值
函数及面向对象
一个带默认参数和返回值的函数定义
1 function dongfun(x,y=10){
2 var sum=0;
3 sum=x+y;
4 return sum;
5 }
函数调用
方法1：直接在js里调用
方法2：在HTML中，使用标签属性方式：
onClick="dongfun(20)"
面向对象，简单的实现
1 //类声明
2 var classdong={
3 name:"dongxiaodong",
4 user:"东小东",
5 dongfunx:function(){
6 alert("---方法：dongfunx---")
7 }
8 };
9 //访问类属性
10 alert(classdong.name);
11
12 //添加类属性并方法
13 classdong.dongnew="小小";
14 alert(classdong.dongnew);
15
16 //访问类方法
17 classdong.dongfunx();
滚动条设置
返回顶部
document.body.scrollTop=0;
Json的序列化和反序列化
1 //json的序列化
2 strj=JSON.stringify({dong1:"dongxiaodong1",dong2:"dongxiaodong2"});
3 alert(strj);
4
5 //json的反序列化
6 objjsonx=JSON.parse(strj);
7 alert(objjsonx["dong2"]);
8 alert(objjsonx.dong1);
序列化方法2
var data = [];
var person1 = new Object();
person1.devid=devadd.getAttribute('devid');
person1.devname=devadd.getAttribute('devname');
data.push(person1);
var senddata = JSON.stringify(data);