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";
设置或者添加属性值
];
h1objx.setAttribute("class","c11");
获取属性值
var devadd=document.getElementById("adddevid"); devadd.getAttribute('devid'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"
标签节点操作
操作子节点
var ulobjx=document.getElementsByTagName("ul")[02 alert(ulobjx.children.length)得到子结点的个数 3 ulobjx.children[0].setAttribute("class","c11");修改第一个子节点的属性
操作父节点
var spanobjx=document.getElementById("spanidx"); 2 spanobjx.onclick=function(){ 3 alert(spanobjx.parentNode.nodeName);得到父节点的名字 4 spanobjx.parentNode.setAttribute("class",1)">更改父节点的属性 5 }
节点的创建1:
1 2 spanobjx.onclick= 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:
创建标签 2 var inputx="<input type='text' value='东小东' dong='xiaoddd'>" 3 添加结点 beforeBegin afterBegin beforeEnd afterEnd 4 spanobjx.insertAdjacentHTML("afterBegin",inputx);
删除节点:
var divobjx=document.getElementById("dividx"2 divobjx.onclick=3 divobjx.removeChild(divobjx.children[0]) 4 }
屏幕宽高获取
得到当前网页的宽高:
var wid=document.documentElement.offsetWidth; var hei=document.documentElement.offsetHeight; 3 alert(wid+","+hei);
Screen
屏幕整体宽高
screen.width; screen.height;
浏览器最大可用宽高:
screen.availWidth; screen.availHeight;
Windown对象,得到浏览器宽高
window.innerWidth; window.innerHeight;
表单提交按钮模拟
模拟HTML的form表单的提交按钮
1 <script> 2 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
页面跳转:
方法一 2 location.href="https://www.cnblogs.com/dongxiaodong/p/10269788.html"方法二 4 location.assign("https://www.cnblogs.com/dongxiaodong/p/10269788.html");
返回上一页
window.history.go(-1); 返回上一页 window.history.back(); window.location.go(-1); 刷新上一页 window.history.back();location.reload();强行刷新(返回上一页刷新页面)
变量及运算
JS是弱类型语言
局部变量:var函数内定义,在当前函数中使用
全局变量:var函数外定义,在函数外定义,各处共享
全局变量:直接使用【xx=123】,在函数内外定义,各处共享
变量的作用域为函数,函数的作用域链在程序加载时已经确定
声明变量 var vardong=1;int类型 var vardong2="dongxiaodong"string类型 4 var boolx=false; 声明boolean类型
字符串:
字符串可以使用单双引号进行包括,操作及方法与java与诸多相似
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,之后又循环
2 resstr=repx.exec("123459gggDDxxxggggDDD"3 alert(resstr);
类型转换:
字符串转为数字:ii=parseInt("100");
字符串转换为小数:ff=parseFloat("55.26");
数组操作:
var x=[11,15,"dddd",99];array类型,取值arrdong[1] 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("分隔符")); 将数组元素用分隔符隔开拼接成字符串
数组的遍历其中一种方法:
var arrdong=[11,1)">for(var varx in arrdong){ 3 document.write(varx+"=>"+arrdong[varx]+"<br/>"4 }
字典:
1 dict={dong1:"dongxiaodong1",dong2:"dongxiaodong2"}; 2 alert(dict["dong1"]); 字典的遍历 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));绝对值
函数及面向对象
一个带默认参数和返回值的函数定义
function dongfun(x,y=10){ var sum=03 sum=x+y; 4 return sum; 5 }
函数调用
方法1:直接在js里调用
方法2:在HTML中,使用标签属性方式:
onClick="dongfun(20)"
面向对象,简单的实现
类声明 2 var classdong={ 3 name:"dongxiaodong", 4 user:"东小东" 5 dongfunx: 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的序列化和反序列化
json的序列化 2 strj=JSON.stringify({dong1:"dongxiaodong1",1)">}); alert(strj); 4 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(); person1.devname=devadd.getAttribute(); data.push(person1); var senddata = JSON.stringify(data);
JS获取GET参数
var GET = ( 2 var url = window.document.location.href.toString(); var u = url.split("?"if(typeof(u[1]) == "string" 5 u = u[1].split("&" 6 var get = {}; 7 var i u){ 8 var j = u[i].split("=" 9 get[j[0]] = j[1 } 11 get; 12 } else { 13 15 })(); if(GET["user"]) alert("user的值为:"+GET["user"17 else alert("不存在改键值");
JS复制文本
复制函数 copystr(strdata) 3 var Url2=strdata; var oInput = document.createElement('input' 6 oInput.value = Url2; document.body.appendChild(oInput); 8 oInput.select(); 选择对象 9 document.execCommand("Copy"); 执行浏览器复制命令 10 oInput.className = 'oInput'11 oInput.style.display='none'12 alert("复制完成"13 }