[JavaScript知识库]JavaScript总结

JavaScript与html代码的结合方式

第一种方式：
只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript

<script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数
        //它可以接受任意类型的参数，这个参数就说警告框的提示信息
        alert("hello1");
    </script>

第二种方式：
使用script标签引入单独的JavaScript代码文件
src属性专门用来引入js文件路径(相对路径或绝对路径)
script标签可以用来定义js代码，也可以用来引入js文件
但是，两个功能二选一使用，不能同时使用两个功能

    <script type="text/javascript" src="hellotest2.js"></script>
    <script type="text/javascript">
        alert("hellotest!");
    </script>

变量与数据类型

变量是可以存放某些值的内存的命名
JavaScript的变量类型：

数值类型：number 字符串类型：string 对象类型：object 布尔类型：boolean 函数类型：function
JavaScript里特殊的值： undefined 未定义，所有js变量未赋初值，默认值都是undefined. null 空值
NAN 全称：Not a Number 非数字、非数值

JS中的定义变量格式：

var 变量名; var 变量名 = 值;

<script type="text/javascript">
        var i;
        //alert(i);
        //i = 12;
        //alert(i);//12
        /*typeof()是JavaScript语言提供的一个函数
        它可以取变量的数据类型返回*/
        //alert(typeof (i));//number

        /*i = "abc";
        alert(typeof (i));//string*/

        var a = 12;
        var b = "abc";
        alert(a*b);//NULL

</script>

关系运算

等于： == 是简单的做字面值的比较
全等于： === 字面值的比较、比较两个变量的数据类型

<script type="text/javascript">
        var a = "12";
        var b = 12;

        alert(a == b);//true
        alert(a === b);//false
</script>

逻辑运算

且运算： &&
或运算： ||
取反运算： |

在js语言中，所有的变量，都可以作为一个boolean类型的变量去使用。

<script type="text/javascript">
        // 0、null、undefined、""都认为是false;
        /*var a = 0;
        if(a){
            alert("0为真");
        }else{
            alert("0为假");
        }
        var b = null;
        if(b){
            alert("null为真");
        }else{
            alert("null为假");
        }
        var c = undefined;
        if(c){
            alert("undefined为真");
        }else{
            alert("undefined为假");
        }
        var d = "";
        if(d){
            alert("空串为真");
        }else{
            alert("空串为假");
        }*/
        var a = "abc";//true
        var b = true;
        var c = null;//false
        var d = false;
        /*&&且运算：
        两种情况:
        第一种:当表达式全为真的时候。返回最后一个表达式的值。
        第二种:当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/
        /*alert(a && b);//true
        alert(b && a);//abc
        alert(a && c);//null
        alert(a && d);//false*/
        /*|或运算：
        第一种情况:当表达式全为假时,返回最后一个表达式的值
        第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值*/
        /*alert(c || d);//false
        alert(d || c);//null
        alert(a || c);//abc
        alert(b || c);//true;*/
        /*&&与运算和||或运算有短路。
        短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行*/

</script>

数组

js中数组的定义：
格式：

var 数组名 = []; //空数组
var 数组名 = [1,‘abc’,true]; //定义数组同时赋值元素

<script type="text/javascript">
        var arr = [];
        //alert(arr.length);//0
        arr[0] = 12;
        //alert(arr[0]);//12
        //alert(arr.length);//1
        //js语言中的数组，通过数组下表赋值，最大的下标值，就会自动的给数组扩容
        arr[2] = "abc";
        //alert(arr.length);//3
        //alert(arr[1]);//undefined
        //数组的遍历
        for(var i = 0;i<arr.length;i++){
            alert(arr[i]);
        }
</script>

函数

定义方式第一种：使用function关键字定义函数
格式：

function 函数名(形参列表){
函数体
}

在函数体内直接使用return语句返回值定义带有返回值的函数。

定义方式第二种：
格式：

var 函数名 = function(形参列表){
函数体
}

function fun() {
            alert("无参函数fun()被调用了");
        }
        //函数调用 === 才会执行
        fun();
        /*function fun2(a,b) {
            alert("有参函数fun2()被调用了 a=" +a +",b=" + b);
        }
        fun2(2,"abc");
        //定义带有返回值类型的函数
        function sum(num1,num2) {
            var result = num1+num2;
            return result;
        }
        alert(sum(2,3));
        var fun = function () {
            alert("无参函数");
        }
        fun();

        var fun2 = function (a,b) {
            alert("有参函数a="+a+",b="+b);
        }
        fun2(3,4);
        
        var fun3 = function (num1,num2) {
            return num1+num2;
        }
        alert(fun3(3,4));

js不允许重载

function f() {
            alert("无参函数f()");
        }
        function f(a,b) {
            alert("有参函数f(a,b)");
        }
        f();//有参函数f(a,b)

函数的arguments隐形参数(只在function函数内)
就是在function函数中不需要定义，却可以直接用来获取所有参数的变量。
隐形参数特别像java基础的可变长参数一样。
public void fun(Object…args);
可变长参数是一个数组

    js中的隐形参数跟java的可变长参数一样，操作类似。

function f() {
            alert(arguments.length);//2
            alert("无参函数f()");
            alert(arguments[0]);
            alert(arguments[1]);
            for(var i = 0;i<arguments.length;i++){
                alert(arguments[i]);
            }
        }
        f(1,"ad");

编写一个函数，用于计算所有参数相加的和并返回

function sum(num1,num2) {
            var result = 0;
            for(var i = 0;i<arguments.length;i++){
                // result += arguments[i];
                if(typeof(arguments[i] == "number")){
                    result += arguments[i];
                }
            }
            return result;
        }
        alert(sum(1,2,4));//7
        //alert(sum(1,2,3,"ad",4,5));//6ad45

Object形式的自定义对象

对象的定义：

var 变量名 = new Object(); //对象实例(空对象)
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function{};//定义一个函数

对象的访问：

变量名.属性/函数名();

<script type="text/javascript">
        var obj = new Object();
        //alert(typeof(obj));
        obj.name = "Q";
        obj.age = 20;
        obj.fun = function () {
            alert("姓名：" + this.name + ",年龄" + this.age);
        }
        alert(obj.name);
        alert(obj.fun());

</script>

{}花括号形式的自定义对象

对象的定义：

var 变量名 = { //空对象
属性值:值, //定义一个属性
属性值:值 //定义一个属性
函数名:function(){} //定义一个函数
};

 对象的访问：

变量名.属性/函数名();

<script type="text/javascript">
        var obj = {
            name:"Q",
            age:18,
            fun : function () {
                alert("姓名："+this.name+",年龄："+this.age);
            }

        };
        //alert(typeof(obj));
        alert(obj.name);
        obj.fun();
</script>

事件

事件是电脑输入设备与页面进行交互的响应。
常用的事件:
onload 加载完成事件：页面加载完成之后，常用于页面js代码初始化操作。
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作。
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种:
事件的注册（绑定）：告诉浏览器，当事件响应后要执行哪些操作代码。
静态注册事件:通过html标签的事件属性直接赋于事件响应后的代码。
动态注册事件：先通过js代码得到标签的dom对象，再通过dom对象.事件名=function(){}这种形式赋于事件响应后的代码
动态注册基本步骤：

1.获取标签对象
2.标签对象.事件名 = function(){}

onload事件：
静态注册

<body onload="onloadf();"></body>
//onload事件的方法
        function onloadf() {
            alert('静态注册onload事件,所有代码');
        }

动态注册

//onload事件动态注册，是固定写法
        window.onload = function(){
            alert("动态注册的onload事件");
        }

onclick事件：
静态注册

<button onclick="onclickf()">按钮1</button>
    <button id="button01">按钮2</button>
    用户名:<input type="text" onblur="onblurf"></br>
    密码:<input id="password" type="text"></br>
function onclickf() {
            alert("静态注册onclick事件");
        }

动态注册

window.onload = function () {
            //1.获取标签对象
            /*document是js语言提供的一个对象(文档)
            */
            var btnObj = document.getElementById("button01");
            //alert(btnObj);
            //2.通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }

onblur事件：
静态注册

function onblurf() {
            //console是控制台对象，是由js语言提供，专门用来向浏览器打印输出，用于测试使用
            //log()是打印的方法
            console.log("静态注册失去焦点事件");
        }

动态注册

window.onload = function () {
            //1.获取标签对象
            var passwordObj = document.getElementById("password");
            //alert(passwordObj);
            //2.通过标签对象.事件名 = functon(){};
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }

onchange事件：
静态注册

请选择你心中的女神：
<select onchange="onchangef()">
        <option>&#45;&#45;女神&#45;&#45;</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>嬛嬛</option>
</select>
<script type="text/javascript">
        function onchangef() {
            alert("女神已经改变了");
        }
    </script>

动态注册

请选择你心中的男神：
<select id="se101">
        <option>&#45;&#45;男神&#45;&#45;</option>
        <option>轩轩</option>
        <option>涵涵</option>
        <option>强强</option>
</select>
<script type="text/javascript">
        window.onload = function () {
            // 1.获取标签对象
            var selObj= document.getElementById("se101");
            alert(selObj);
            // 2.通过标签对象.事件名 = functon(){};
            selObj.onchange = function () {
                alert("男神已经改变了");
            }
        }
    </script>

onsubmit事件：
静态注册

<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitf()">
        <input type="submit" value="静态注册"/>
    </form>

动态注册

<form action="http://www.baidu.com" id="form01">
        <input type="submit" value="动态注册"/>
    </form>

正则表达式

<script type="text/javascript">
    //表示要求字符串中是否包含字母e
    var patt = new RegExp("e");
    var patt = /e/;
    //表示要求字符串中是否包含字母a或字母b或字母c
    var patt = /[abc]/;
    //表示字符串是否包含小写字母
    var patt = /[a-z]/;
    //表示字符串是否包含大写字母
    var patt = /[A-Z]/;
    //表示字符串是否包含任意数字
    var patt = /[0-9]/;
    //表示字符串是否包含字母、数字、下划线
    var patt = /\w/;
    //表示字符串是否包含至少一个n
    var patt  = /a+/;
    //表示字符串是否包含零个或多个a
    var patt  = /a*/;
    //表示字符串是否包含一个或零个a
    var patt  = /a?/;
    //表示字符串是否包含连续三个a
    var patt  = /a{3}/;
    //表示字符串是否包含至少连续三个a，最多5个连续的a
    var patt  = /a{3,5}/;
    //表示字符串是否包含至少连续三个a
    var patt  = /a{3,}/;
    //表示字符串必须以a结尾
    var patt  = /a$/;
    //表示字符串必须以a打头
    var patt  = /^a/;
    //表示字符串从头到尾必须完全匹配
    var patt  = /^a{3,5}$/;

    var patt = /^\w{5,12}$/;
    alert(patt);
    var str = "abcd";
    alert(patt.test(str));
</script>

DOM介绍

DOM全称：Document Object Model文档对象模型
把文档中的标签，属性，文本转换成为对象来管理。
Document对象的理解:

第一点:Document它管理了所有的Html文档内容。
第二点:document它是一种树结构的文档。有层级关系
第三点:它让我们把所有的标签都对象化
第四点:我们可以通过document访间所有的标签对象。

Document对象中的方法介绍
document.getE1ementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值

document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值

document.getE1ementsByTagName(tagname)
通过标签名查找标签dom对象。tagname是标签名

document 对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询。
如果没有id属性，则优先使用getElementsByName方法来进行查询。
如果id属性和name属性都没有最后再按标签名查getElementsByTagName。

以上三个方法，一定要在页面加载完成之后执行。才能查询到标签对象。

<script type="text/javascript">
        /*当用户点击了较验按钮，要获取输出框中的内容，然后验证其是否合法
        验证的规则是：必须由字母、数字、下划线组成，并且长度是5-12位*/
        function onclickf() {
            //1.要操作一个标签的时候，一定要先获取这个标签对象
            var usernameObj = document.getElementById("username");
            //alert(usernameObj);
            //[object HTMLInputElement] dom对象
            //alert(usernameObj.id);
            //alert(usernameObj.type);
            //alert(usernameObj.value);
            var usernameTest = usernameObj.value;
            //严重字符串符合某个规则，需要使用正则表达式
            var patt = /^\w{5,12}$/;
            /*test()方法用于测试某个字符串，是不是匹配我的规则，
            匹配就返回true，不匹配返回false*/
            var usernameSpanObj = document.getElementById("usernameSpan");
            //innerHTML表示起始标签和结束标签中的内容
            //innerHTML属性可读、可写
            usernameSpanObj.innerHTML = "我真可爱";
            alert(usernameSpanObj.innerHTML);
            if(patt.test(usernameTest)){
                //alert("用户名合法");
                //usernameSpanObj.innerHTML = "用户名合法";
                usernameSpanObj.innerHTML = "<img src=\"../imags/2.jpg\" width=\"12\" height=\"12\">"
            }else{
                //usernameSpanObj.innerHTML = "用户名不合法";
                usernameSpanObj.innerHTML = "<img src=\"../imags/2.jpg\" width=\"12\" height=\"12\">"
            }
        }
</script>
<body>
    用户名：<input type="text" id="username" value="www"/>
    <span id="usernameSpan" style="color: red"></span>
    <button onclick="onclickf()">较验</button>
</body>

getElementsByName

<script type="text/javascript">
        //全选
        function checkAll() {
            //document.getElementsByName()根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作数和数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            /*alert(hobbies);
            alert(hobbies.length);
            alert(hobbies[1]);
            alert(hobbies[0].value);
            //checked表示复选框的选中状态，如果选中-true，否则false
            //checked这个属性可读、可写
            alert(hobbies[1].checked);*/

            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = true;
            }
        }
        //全不选
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = false;
            }
        }
        //反选
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for(var i = 0;i<hobbies.length;i++){
                /*if(hobbies[i].checked){
                    hobbies[i].checked = false;
                }else{
                    hobbies[i].checked = true;
                }*/
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>

getElementsByTagName

<script type="text/javascript">
        //全选
        function checkAll() {
            //document.getElementsByTagName("input")是按照指定标签名来进行查询并返回集合
            //这个集合的操作数和数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var inputs = document.getElementsByTagName("input");
            //alert(inputs);
            for(var i = 0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }

    </script>
<body>
    兴趣爱好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>

</body>

dom查询

节点的常用属性和方法
节点就是标签对象
方法:
通过具体的元素节点调用getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点

appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode是要添加的孩子节点 属性
childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点 parentNode 属性，获取当前节点的父节点
neLtSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点 className 用于获取或设置标签的class属性值
innerHTML属性,表示获取/设置起始标签和结束标签中的内容
innerText 属性,表示获取/设置起始标签和结束标签中的文本