JavaScript笔记（DOM编程艺术+JS数据结构与算法）

1.新建js文件，在head标签中关联 <script type="text/javascript" src="文件名.js" ></script>
在body末尾前一行写这个加载更快 ------为最优
2.在对应地方<script></script>

语法：变量不需要声明
字符串判断直接使用==、！=
字符串替换 str.replace(“目标”，“更改为”)
字符串截取 str.substring（a，b） a为数组下标起始点，b为取几位
数组： var data =new Array（2）； 可以动态扩充大小（给data[5]赋值，未赋值的为“undefined”）
对象： var lennon={name:”john”,year:1940,living:false};
==会判断false 和“”相等，可以使用严格相等符号===和不相等符号！==；
函数：
Function 函数名称（参数）
{
[return ]
}
可以使用 函数名.arguments.length 来判断参数个数，以抛出异常或者改变输出

获取元素：
getElementById(‘’id‘’) 单个
getElementByTagName(‘’tagname) 数组
getElementByClassName(‘’class‘’) 数组
getElementsByName(‘’name‘’) 数组
querySelector(选择器名) 单个（第一个）
querySelectorAll(选择器名) 数组

获取属性
getAttribte(“属性名”)
修改属性
setAttribte(“属性名”,”属性值”)
修改的属性不会在文档源码中显示，dom工作模式：先加载文档的静态内容，再动态刷新，不影响文档的静态内容。

获取子元素：
Element.childNodes 数组
而node.nodeType可获得该节点的种类：
1.元素节点的nodeType属性值为1。
2.属性节点的nodeType属性值为2。
3.文本节点的nodeType属性值为3。
document.write(“”) 写入html 会覆盖所有 涉及到变量和java一样 “+a+”
innerHTML 可以获取html元素下的内容，或者替换内容，也是覆盖所有
相较于这两种方法修改html内容更应该使用dom方法：
document.createElement(nodeName); 创建一个元素例如“p”
parent.appendChild(child) 为父元素在最后增加一个子元素
document.createTextNode(text) 创建一个文本节点
eg：

var para=document.createElement(“p”);
var testdiv=document.getElementById(“testdiv”);
testdiv.appendChild(para);
var txt=document.createTextNode(“hello world”);
para.appendChild(txt);

parentElement.insertBefore(newElement,targetElement) 在已有节点前插入一个新节点。
虽然没有insertAfter函数但可以自己写出来一个：

function insertAfter(newelement,targetelement){
    var parent=targetelement.parentNode;
    if(parent.lastChild==targetelement) {
        parent.appendChild(newelement);
    }
    else{
        parent.insertBefore(newelement,targetelement.nextSibling);
    }
}

寻找下一个元素节点

function getnextElement(node){
if(node.nodeType===1){
    return node;
}
if(node.nextSibling)
{
    return  getnextElement(node.nextSibling);
}
return null;
}
//使用
var elem = getnextElement(header[i].nextSibing)   //查找header[i]后面的元素
//再使用insertBefore 即可完成在指定元素（header[i]）后面添加新元素

body 元素后定义打开网页和关闭网页事件：

//封装window.onload加载函数
function addloadevent(func){
    var oldonload=window.onload;
    if(typeof  window.onload!='function'){
        window.onload=func;
    }
    else{
        window.onload=function (){
            oldonload();
            func();
        }
    }
}

addloadevent(ppreparegallery);

1.
var obj = document . getElementById ( "mybut") ;			// 取得id为obj
if (obj != undefined) { 									//表示此对象已经明确存在
//对象.addEventListener (事件类型，处理函数，false)
obj . addEventListener（“click”，function（），flase）       //不需要用on
} 
2.
document . getElementById( "mybut"). addEventListener (事件类型，处理函数，false)

这两种都必须写在window.onload=function（）{}中在加载时进行读入

for（var x=0；x<obj.length；x++）{obj[x]. addEventListener（“click”，function（），flase）；}

表单提交：
静态：
直接重写html中的onsubmit 该值为false则不提交，为true则允许提交

<form id="myform" action="111.html" onsubmit="return log()">

正则表达式：
邮箱：/.+@+\.[a-zA-Z]{2,4}$/
仅限中文：/[^\u0000-\u00FF]/
日期验证：/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/ /2是指/和-的选择和前面一样，2是（）组的下标
详细表格
https://blog.csdn.net/qq_43199318/article/details/102495916
Blur事件表示该组件失去焦点。利用函数动态加载检测空值：

document.getElementById("uid").addEventListener("blur", function () {
validateuid("uid")
        },false
    )

function validateuid(eleid)
{
var obj=document.getElementById(eleid);
var spanobj=document.getElementById(eleid+"span");
if(obj.value!=null)
{
    if(obj.value=="")
    {
        spanobj.innerHTML="<font color=red>X</font>";       在span区域输入对和错
        return false;
    }
else
    {
        spanobj.innerHTML="<font color=green>√</font>";
        return true;
    }
}
return false;
}

单选按钮使用var obj = document . all ( "sex") ; 获取该数组
下拉列表 可以使用change事件
Disabled属性可以禁用组件

Window 窗体：
Alert 弹出警告框，一个参数
Prompt 弹出数据输入框体 第一个参数为文本显示，第二个参数为输入默认值
Open 打开子窗口 一个参数
Document.all 现在可以使用getElementbyName 代替

creatElement(“标签名”)–创建标记
eg：显示缩略语列表

function displayAbbreviations(){
    if(!document.getElementsByTagName||!document.createElement||!document.createTextNode)
        return false;
    //取得所有缩略词
    var abbreviations=document.getElementsByTagName("abbr");
    if(abbreviations.length<1)return false;
    var defs=new Array();
    //遍历所有缩略词
    for(var i=0;i<abbreviations.length;i++){
        var current_abbr=abbreviations[i];
        if(current_abbr.childNodes.length<1)continue;
        var definition =current_abbr.getAttribute("title");
        var key=current_abbr.lastChild.nodeValue;
        defs[key]=definition;
    }
    //创建定义列表
    var dlist=document.createElement("dl");
    //loop through the difinitions
    for(key in defs){
        var difinition=defs[key];
    //创建定义标题
        var dtitle=document.createElement("dt");
        var dtitle_text=document.createTextNode(key);
        dtitle.appendChild(dtitle_text);
        //创建定义描述
        var ddesc=document.createElement("dd");
        var ddesc_text=document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);
        //把他们添加到定义列表
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }
    if(dlist.childNodes.length<1)return false;
    //创建标题
    var header=document.createElement("h2");
    var header_text=document.createTextNode("Abbreviations");
    header.appendChild(header_text);
    //把标题添加到页面主体
    document.body.appendChild(header);
    //把定义列表添加到页面主体
    document.body.appendChild(dlist);
}

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

定时函数：setTimeout（function，2000） ms单位 两秒后执行该函数------使用时通常赋给变量.
取消等待：clearTimeout(variable)
eg：

var movement=setTimeout("moveMessage()",5000);
clearTimeout(movement);

parseInt(string)//从字符串中提取整数数值信息
parseFloat(string)//从字符串中提取浮点数数值信息

//实现元素二维移动动画，可用来实现轮流显示图片的一部分动画
function moveElement (elementID,final_x,final_y,interval){
    if(!document.getElementById)return false;
    if(!document.getElementById(lementID))return false;
    var elem=document.getElementById(elementID);
    if(elem.movement){
        clearTimeout(elem.movement);
    }
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.top);
    var dist=0
    if(xpos===final_x&&ypos===final_y)return true;
    if(xpos<final_x){
        dist=Math.ceil((final_x-xpos)/10);
        xpos+=dist;
    }
    if(ypos<final_y){
        dist=Math.ceil((final_y-ypos)/10);
        ypos+=dist;
    }
    if(xpos>final_x){
        dist=Math.ceil((xpos-final_x)/10);
        xpos-=dist;
    }
    if(ypos>final_y){
        dist=Math.ceil((ypos-final_y)/10);
        ypos-=dist;
    }
    ele.style.left=xpos+"px";
    ele.style.top=ypos+"px";
    var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    movement=setTimeout(repeat,interval);
}

htmi5 video 自定义视频控件

function createVideoControls() {
        var vids = document.getElementsByTagName('video');
        for (var i = 0 ; i < vids.length ; i++) {
            addControls( vids[i] );
        }
    }

    function addControls( vid ) {
        vid.removeAttribute('controls');
        vid.height = vid.videoHeight;
        vid.width = vid.videoWidth;
        vid.parentNode.style.height = vid.videoHeight + 'px';
        vid.parentNode.style.width = vid.videoWidth + 'px';
        var controls = document.createElement('div');
        controls.setAttribute('class','controls');
        var play = document.createElement('button');
        play.setAttribute('title','Play');
        play.innerHTML = '&#x25BA;';
        controls.appendChild(play);
        vid.parentNode.insertBefore(controls, vid);
        play.onclick = function () {
            if (vid.ended) {
                vid.currentTime = 0;
            }
            if (vid.paused) {
                vid.play();
            } else {
                vid.pause();
            }
        };
        vid.addEventListener('play', function () {
            play.innerHTML = '&#x2590;&#x2590;';
            play.setAttribute('paused', true);
        }, false);
        vid.addEventListener('pause', function () {
            play.removeAttribute('paused');
            play.innerHTML = '&#x25BA;';
        }, false);
        vid.addEventListener('ended', function () {
            vid.pause();
        }, false);
    }
    window.onload = function() {
        createVideoControls();
    }