JavaScript百宝箱

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属性操作

/*class="c1 c2"*/
divobjx=document.getElementsByTagName("div")[0];
divobjx.classList.add("c3");//添加
divobjx.classList.remove("c1");//删除
alert(divobjx.classList);//得到class的列表值

标签内容操作：

得到标签包裹内容

textx=document.getElementById("divid").textContent;// 得到标签包裹的所有文字内容

alert(document.getElementsByTagName("div")[0].innerText);//得到标签包含的内容，但标签可能会被浏览器解释
alert(document.getElementsByTagName("div")[0].innerHTML);//得到标签包含的内容，内容转为字符串，不会被浏览器解释

更改标签包裹内容

document.getElementById("dongid").innerHTML="<h1>dongxiaodong<h1>"
document.getElementById("dongid"). innerText ="dongxiaodong"

标签节点操作

操作子节点

var ulobjx=document.getElementsByTagName("ul")[0];
alert(ulobjx.children.length)//得到子结点的个数
ulobjx.children[0].setAttribute("class","c11");//修改第一个子节点的属性

操作父节点

var spanobjx=document.getElementById("spanidx");
spanobjx.onclick=function(){
    alert(spanobjx.parentNode.nodeName);//得到父节点的名字
    spanobjx.parentNode.setAttribute("class","c11");//更改父节点的属性
}

节点的创建1：

var spanobjx=document.getElementById("spanidx");
spanobjx.onclick=function(){
    //创建标签方法一
    //var inputx="<input type='text' value='东小东' dong='xiaoddd'>"
    //创建结点方法二
    var inputx=document.createElement("input");
    inputx.type="text";
    inputx.value="东小东";
    inputx.dong="xiaoddd";
    //添加结点
    spanobjx.appendChild(inputx);//
}

节点创建2：

//创建标签
var inputx="<input type='text' value='东小东' dong='xiaoddd'>"
//添加结点 beforeBegin afterBegin  beforeEnd afterEnd
spanobjx.insertAdjacentHTML("afterBegin",inputx);

删除节点：

var divobjx=document.getElementById("dividx");
divobjx.onclick=function(){
    divobjx.removeChild(divobjx.children[0])
}

屏幕宽高获取

得到当前网页的宽高：

var wid=document.documentElement.offsetWidth;
var hei=document.documentElement.offsetHeight;
alert(wid+","+hei);

Screen

 屏幕整体宽高

var wid=screen.width;
var hei=screen.height;
alert(wid+","+hei);

浏览器最大可用宽高：

var wid=screen.availWidth;
var hei=screen.availHeight;
alert(wid+","+hei);

Windown对象,得到浏览器宽高

var wid=window.innerWidth;
var hei=window.innerHeight;
alert(wid+","+hei);

表单提交按钮模拟

模拟HTML的form表单的提交按钮

<script>
    function fsub(){
        fomrobjx=document.getElementById("formx");
        fomrobjx.submit();//表单提交
    }
</script>

 浏览器前进与后退按钮模拟（History）

history.back();//相对于浏览器的后台方向
history.forward;//相对于浏览器的前进方向
history.go(-1);//通过索引进行页面跳转

URL操作及页面跳转

Location，获取相关值

alert(location.hostname);//主机名称，如（localhost)
alert(location.pathname);//返回路径和文件名
alert(location.port);//主机端口
alert(location.protocol);//web协议，http或者https
alert(location.href);//返回当前URL

页面跳转：

//方法一
location.href="https://www.cnblogs.com/dongxiaodong/p/10269788.html";
//方法二
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类型
var boolx=false; //声明boolean类型

字符串：

字符串可以使用单双引号进行包括，操作及方法与java与诸多相似

var strx="12345678923东aBc";
alert("字符串的长度："+strx.length);//中文长度为1
alert(strx.indexOf("23x"));//从头查找字符串位置，有则返回位置，无则返回-1
alert(strx.lastIndexOf("23"));//从尾部查找
alert(strx.match("23"));//有则返回字符串，无则返回空
alert(strx.replace("东","东小东"));//内容替换，参数（原，新）
alert(strx.substring(0,2));//提取字符串，区间为[0,2)
    
alert("aBc".toLocaleLowerCase());//全部转换为小写字母，另外大写：toLocaleUpperCase()

alert("dd,xx,nn,bb".split(",")[0]);//字符串分隔
    
alert("  dongxiaodong   ".trim());//去掉前后空格
alert("定时时间到".charAt(0));//得到第一个字符：定

正则表达式：

基本语法类似于PHP

内容查找（test）

repx=/gg*D/;
resbool=repx.test("123459gggDDxxxggggDDD");
alert(resbool);

内容提取（exec）

或者匹配的第一个值，如果需要全部则使用 repx=/gg*D/g;,执行一句则获取到下一个，直到返回null,之后又循环

repx=/gg*D/;
resstr=repx.exec("123459gggDDxxxggggDDD");
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"];
alert(y.length)//得到数组长度
alert(x.concat(y));//数组的合并
alert(y.sort());//排序
alert(x.reverse())//翻转
y.push("dddd");//追加元素，等价于：arrdong[y.length]="xx";
alert(y.join("分隔符")); //将数组元素用分隔符隔开拼接成字符串

数组的遍历其中一种方法：

var arrdong=[11,15,"dddd",99];//array类型,取值arrdong[1]
for(var varx in arrdong){
    document.write(varx+"=>"+arrdong[varx]+"<br/>");
}

字典：

dict={dong1:"dongxiaodong1",dong2:"dongxiaodong2"};
alert(dict["dong1"]);
//字典的遍历
for(var varx in dict){
    alert(varx+"=>"+dict[varx]);
}

JS的运算：

其大部分运算相似与Java和PHP等，如（if,while,for等）

任何类型与字符串相加，都会转换为字符串，呈现拼接效果

三元运算：

 【？ : 】结果变量=条件？满足则为结果1：结果2；

数学运算相关：

alert(Math.round(2.5));//四舍五入
alert(parseInt(Math.random()*100));//随机数，本来区间为0至1
alert(Math.max(11,22,99,33,101,999,0.1));//得到最大值,对应于min()
alert(Math.abs(-100));//绝对值

函数及面向对象

一个带默认参数和返回值的函数定义

function dongfun(x,y=10){
    var sum=0;
    sum=x+y;
    return sum;
}

函数调用

方法1：直接在js里调用

方法2：在HTML中，使用标签属性方式：

onClick="dongfun(20)"

面向对象，简单的实现

//类声明
var classdong={
    name:"dongxiaodong",
    user:"东小东",
    dongfunx:function(){
     alert("---方法：dongfunx---")
   }
};
//访问类属性
alert(classdong.name);

//添加类属性并方法
classdong.dongnew="小小";
alert(classdong.dongnew);
    
//访问类方法
classdong.dongfunx();

滚动条设置

返回顶部

document.body.scrollTop=0;

Json的序列化和反序列化

//json的序列化 
strj=JSON.stringify({dong1:"dongxiaodong1",dong2:"dongxiaodong2"});
alert(strj);

//json的反序列化
objjsonx=JSON.parse(strj);
alert(objjsonx["dong2"]);
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);    

 JS获取GET参数

var GET = (function(){
    var url = window.document.location.href.toString();
    var u = url.split("?");
    if(typeof(u[1]) == "string"){
        u = u[1].split("&");
        var get = {};
        for(var i in u){
            var j = u[i].split("=");
            get[j[0]] = j[1];
        }
        return get;
    } else {
        return {};
    }
})();
if(GET["user"]) alert("user的值为："+GET["user"]);
else alert("不存在改键值");

JS复制文本

//复制函数
function copystr(strdata)
{
    var Url2=strdata;
    var oInput = document.createElement('input');
    oInput.value = Url2;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display='none';
    alert("复制完成");
}    

 

---