JavaScript-helloWorld

Posted 2020-09-09 逢甘霖成大事

 

function RQcheck(RQ) {//验证日期的方法
　　var date = RQ;
　　var result = date.match(/^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2})$/);

 

　　if (result == null)
　　return false;
　　var d = new Date(result[1], result[3] - 1, result[4]);
　　return (d.getFullYear() == result[1] && (d.getMonth() + 1) == result[3] && d.getDate() == result[4]);

 

}

 

 

--或者++在js中是不支持的

---

 

1.写js代码的位置

　　由helloWorld.html，helloWorld2.html，helloWorld3.html可知
　　　　>html页面的加载顺序是由上到下的
　　　　>标准的写法是helloWorld.html的写法，window.onload可以使方法是在页面加载完成后才执行的，<script>写在head中title下面。
　　　　>helloWorld2.html中的写法固然简单，但html语句和js代码耦合在了一起
　　　　>helloWorld3.html可知各个位置的区别
　　　　><script>放在整个页面的最后写又不符合js代码的书写习惯

 

2.获取节点

节点分为三种：元素节点;属性节点;文本节点

01.获取元素节点（3种方式）
    //只有document有这个方法，并且id要求唯一
    var taobao = document.getElementById("taobao");

    //只有document有这个方法，通过节点的name属性来获取节点
    var qqs = document.getElementsByName("qq1");

    //document和taobao（节点对象）都有这个方法，通过节点标签的名字来获取节点
    var nodes = taobao.getElementsByTagName("br");

02.读写属性节点
    01.
    //通过.的方式来获取和修改节点的属性值
    var attr = document.getElementById("attr");
    alert(attr.value);//获取属性节点的值
    attr.value = "你好";//修改属性节点的值
    02.
    node.getAttributeNode("id");
    
03.获取子节点的方法
    //得到父节点
    var c1 = document.getElementById("form");
    //通过.childNodes得到所有的子节点
    alert(c1.childNodes.length);
    //通过.firstChild得到第一个子节点
    alert(c1.firstChild.name);
    //通过.lastChild得到最后一个子节点
    alert(c1.lastChild);
    //通过Node对象的getElementsByTagName来获取子节点
    var cc = c1.getElementsByTagName("input");
    alert(cc[0].name);

04.读写文本节点
    文本节点一般是子节点，可以先获取到子节点，然后通过.nodeValue来获取文本内容
        var c2 = document.getElementById("form");
        alert(c2.lastChild.nodeValue);

 

3.节点的三个属性

    window.onload = function () {
        var btns = document.getElementsByTagName("button");
        //元素节点
        var btn = btns[0];
        alert(btn.nodeType);//1
        alert(btn.nodeName);//BUTTON
        alert(btn.nodeValue);//null
        //文本节点
        var text = btn.firstChild;
        alert(text.nodeType);//3
        alert(text.nodeName);//#text
        alert(text.nodeValue);//点我
        //属性节点
        var att = btns[1].getAttributeNode("name");
        alert(att.nodeType);//2
        alert(att.nodeName);//name
        alert(att.nodeValue);//jyf
        
    }
    nodeType和nodeName是只读的
    nodeValue是可以修改的
    只有文本节点的nodeValue是常用的

 

4.操作节点

1.创建元素节点
    document.createElement("");返回值是元素节点的引用，其中的字符串参数为TagName

2.创建文本节点
    document.createTextNode("");返回值是文本节点的引用，其中的字符串参数为文本内容

3.为元素节点添加子节点
    var element = document.createElement("li");
    element.appendChild(document.createTextNode("你好");会作为element节点的最后一个子节点添加<li>你好</li>；若子节点原来就在页面上，那么还会有移动的效果

4.替换子节点
    bParentNode.replaceChild(aNode2, bNode);//替换子节点,把aNode2替换为bNode
    //replaceChild方法返回原子节点的引用，且新子节点（bNode）从原来的位置被移动到原节点（aNode）的位置
    aParentNode.replaceChild(bNode, aNode);
    若要使两个节点互换，需自己定义方法实现
        function replaceEach (aNode, bNode) {
            var aParentNode = aNode.parentNode;//获取父节点
            var bParentNode = bNode.parentNode;
            var aNode2 = aNode.cloneNode(true);//克隆节点，若参数为true表示带子节点的克隆
            bParentNode.replaceChild(aNode2, bNode);//替换子节点,把aNode2替换为bNode
            //replaceChild方法返回原子节点的引用，且新子节点（bNode）从原来的位置被移动到原节点（aNode）的位置
            aParentNode.replaceChild(bNode, aNode);
        }

5.获取父节点
    var aParentNode = aNode.parentNode;//获取父节点
        
6.删除节点
    this.parentNode.removeChild(this);返回值为被删除的节点

7.额外
    //将输入框中的内容的开头和结尾去除空格
    var reg = /^\\s*|\\s*$/g;
    content = content.replace(reg,"");
    document.getElementsByName("content")[0].value = content;
    //若去掉空格后为“”，那就弹出请输入名字
    if(content == "") {
        alert("请输入名字");
        return false;//若这个方法是响应在submit的onclick上面的，那么return false，表单是不会提交的
    }
    //有实验可知，就算不去掉开头和结尾的空格，添加上的开头和结束的空格也会自动去除

 

5.获取子节点

 

1.firstChild
2.lastChild
3.getElementsByTagName("");
4.childNodes

 

Node节点的方法，带括号的在使用时需要带括号，不带括号的直接.就能用

 

事件后面跟的方法的注意点：

//aNodes[i].onclick = remove3;
//这里写remove3()和remove3是不同的：
//前者表示当节点被点击时响应remove3方法的返回值，所以在页面加载完成后会直接执行remove3方法
//后者不加括号代表的remove3方法引用，会响应时执行方法体,且return false会取消节点的默认响应行为

 

单选框的注意点：

//若单选框节点被选中那么checked数据就会存在
    if (typeNodes[i].checked) {}

 

多选框的注意点（type=“checkbox”）：

　　多被选中那么checked属性为true；

　　没被选中为false；　　 

 

循环体中要注意的点：

        var lis = document.getElementsByTagName("li");
        for (var i = 0; i < lis.length ; i++) {
            /*可以的
            lis[i].onclick = function () {
                alert(this.firstChild.nodeValue);
            }
            */
            
            //lis[i].onclick = alert("nihao");
            //这样不行,一开始就会先弹出五次nihao。因为这句的意思是将alert方法的结果返回到onclick事件，所以会先执行方法
            
            /*这样不管点哪一个都是5，因为当点击时循环已经结束了，i就是5
            lis[i].onclick = function () {
                alert(i);
            }
            */
            
            lis[i].onclick = tanchu;//这样是可以的，因为tanchu是方法的引用
            
            //lis[i].onclick = tanchu();//这样写不行，同lis[i].onclick = alert("nihao");
            
            function tanchu () {
                alert(this.firstChild.nodeValue);
            }
        }

 

注意空白文本节点的存在

 

bNode.nextSibling;//获取bNode的下一个兄弟节点

 

ul.insertBefore(ay,jz);//将ay从原来的位置移动到ul的子节点jz的前面

 

innerHTML属性：浏览器几乎都支持该属性，但不是DOM的标准组成部分。.innerHTML可以用来读写标签体中的HTML内容

    window.onload = function() {//互换了两个ul中的子节点
        var ul1 = document.getElementsByTagName("ul")[0];
        var ul2 = document.getElementsByTagName("ul")[1];
        var temp = ul1.innerHTML;
        ul1.innerHTML = ul2.innerHTML;
        ul2.innerHTML = temp;
        alert(temp);//输出的是：<li id="jz">焦作</li>
                    //<li id="ay">安阳</li>
                    //<li id="kf">开封</li>
                    //<li>新乡</li>
                    //<li>郑州</li>
    }

 

事件的总结：

　　window.onload//页面被加载完成

　　.onclick//被点击时

　　.onchange//改变时，例如下拉框中的选项被修改

 

节点自带特殊属性总结：

　　.parentNode//父节点

　　.childNodes//子节点的集合

　　.lastChild//最后一个子节点

　　.firstChild//第一个子节点

　　.nextSibling//获取下一个兄弟节点 

　　.defaultValue//是在编写html页面时，在节点上写的value属性的值

 

 对话框

　　alert（“”）//参数为字符串，为弹出对话框中的话，该框只有一个确定按钮。

 

confirm对话框

　　confirm（“”）//参数为字符串，为弹出对话框中话，该框有两个按钮，若点击确定，这个方法返回true，点击取消，返回false。