JavaScript学习笔记

本篇文章是本人在学习JS时所记录的笔记，记录的知识点比较基础，但是较为详细。

使用

在html中有两种方式可以使用javascript

1.外引

<script src="...js"></script>

调用js文件时调用的是拷贝体

2.内嵌

<script>
      ..........
</script>

外引和内嵌同时存在时内嵌的会失效

注意：标签内的元素

src:引入js

defer:延迟js文件加载

script中的属性中的 " - " 全部去掉,并且 " - " 后的首字母换成大写

例如：background-color变为backgroundColor margin-left变为marginLeft

定义数据

script属于弱类型语言，不区分数据类型,都用var定义，语法与PHP,python,shell相似

强类型语言：C, C++, java, C#，GO（速度极快）

弱类型语言：javascript, PHP, python, shell（速度极慢）

定义字符串用" " 例：var a4 = "adaf";

js中的变量类型分为两大类，基本类型和复合类型

基本类型

可以使用typeof来检查变量类型，typeof(a)

1.数值类型

var a = 10.7
var b = 12

2.字符串类型

var a = "asd" var b = "a"

3.布尔类型

var a = true var b = false

4.undefined类型

只有一个值

当定义一个变量但未赋值时就叫undefined

var d = undefined

5.null类型

空对象

复合类型

1.数组：

定义数组用中括号 例：var a3 =[1,2,3,4];

将字符串转化为整数类型用parseInt 例：a6 = parseInt(a6)

定义数组中可以不区分类型存储,,甚至可以数组中存放数组

例：

var a7 = [2, 3, [3,5,6], [ 3,2,[2, 6,[ "faga"],6],9,"fjs"], "ijpj" ];

arr.push()向数组中添加数据

与java中数组的区别

1).数组长度可变2.没有越界3.不用同类型

2).数组长度可变2.没有越界3.不用同类型

2.对象类型:

格式：{ " 名字 "：对应的对象 ，" 名字 "：对应的对象 ,........" 名字 "：对应的对象 }

例：

var b1 = { "name" :"张三","id":12345,"年龄":16};

对象可以复杂一些，比如放数组或是另一组对象

例：

var b2 = { "name": " 王五",

"house" : ["北二环", "东三环","西六环"],

"friend" : [ { "name":"小明", "age": 9}, { "name":"黎明", "age": 8}]

};

使用方式：( b2.name b2.house[1] b2.friend[1].name )

对象还可以放方法，

例：

var b2 = { "name": " 王五",

"house" : ["北二环", "东三环","西六环"],

method1 : function(a,b){

return a + b;}

} ;

调用方式： var x2 = b2.method1(4,7);

对象类数组的访问：如b2["name"]

对象类数组的访问方式的重要性和必要性：可以放置变量如b2[age]

3.函数类型

定义函数

(1).命名函数function test(a,b),可以被引用，var b =function test(a,b),引用后调用时用b(a,b)

(2).匿名函数function(a,b),也可以被引用，var b =function(a,b),调用时用b(a,b)

使用函数

1.函数名加括号 test(5,6)

2.函数整体作为值来使用

var b = test

3.函数作为返回值来使用

var b=test(5,6)

js中函数无法重载，与最下面的保持一致

方法中入参的不一定是变量，也可能是另一个方法 例 ：

function m3(a,b,c){
    a(10,20);
    b(c,6);
}
m3(
    function(p1,p2){ console.info(p1+p2)},
    function(p1,p2){ console.info(p1-p2)},
    30
);
m3(
    function(p1,p2){ console.info(p1 * p2) },
    function(p1,p2){ p1 (p2 + 9) },
    //这里是方法中的方法继续带入方法，p1带入的是c,也就是function(k),p1(p2+9)相当于c(p2+9),也就是c(6+9),输出30
    function(k){ console.info(2 * k) }
);

script例子：控制台中输出了x1与x2

       <script>
             function f(x1,x2){
                       return x1 + x2;
             }
             function f2(a,b,c){
                       return a + b - c;
             }
             var x1 = f(23,99)
             var x2 = f2( x1, 44, 33 - x1 );
             console.info(x1);
             console.info(x2);
       </script>       

字符串拼接用加号连接即可,例：

var x1 = "www";
var x2 = "mmm";
var x3 = 67;
var x4 = x1 + x2 + x3; //  wwwmmm67

在for循环中根据i的不同生成不同的iid（字符串拼接）

生成div_1到div_81:''

注意：变量不能被双引号引住

function m1(){
            var x = document.getElementById("div1");
            var html ='';
            for(var i = 0;i < 81; i++){
                   if(i%2 == 1){
                         html +='<div id="div_' + i + '" class="sty2"></div>';
                   }else{
                         html +='<div id="div_' + i + '" class="sty3"></div>';
                         }
                   }
                   x.innerHTML = html;
            }            

dom增删改查

查

1.以ID来查找元素：getElementById()

var x =document.getElementBtId("zjd")

当id重复时只会获取符合条件的第一个

2.以class来查找元素：getElementsByClassName()

获取到符合条件的所有元素，拿到的是一个数组

3.以元素名称来查找元素：getElementsByTagName()

var x =document.getElementsByTagName("div")

4.以选择器来查找元素：querySelector()

只会获取符合条件的第一个元素

var x =document.querySelector(".zjd")

5.以选择器来查找元素：querySelectorAll()

会获取符合条件的所有元素

根据关系查找

parentNode/parentElement：获取当前节点的父节点

例：

var x =document.querySelector(".zjd");console.log(x.parentNode)

childNodes：获取当前节点的所有孩子节点（元素节点和文本节点，可以通过nodeType来过滤）

children：获取当前节点的所有孩子节点（只获取元素节点)

previousSibling： 获取当前节点的上一个节点，注意文本节点的存在

previousElementSibling： 获取当前节点的上一个元素节点

nextSibling：获取当前节点的下一个节点，注意文本节点的存在

nextElementSibling：获取当前节点的下一个元素节点

firstChild：获取当前节点的第一个孩子节点，注意文本节点的存在

firstElemnetChild：获取当前节点的第一个元素孩子节点

lastChild：获取当前节点的最后一个孩子节点，注意文本节点的存在

lastElemnetChild：获取当前节点的最后一个元素孩子节点

console.log()打印元素

conslole.dir()打印对象元素

js有事件传播机制，点击内部元素后也会触发外部外部元素上带有的事件

想要点击子级元素时只触发子级元素的方法而不触发父级元素的方法可以在子级元素方法中加入一个参数，在函数内加上 参数名.stopPropagation()

op_list[i].onclick = function(e) {
    e.stopPropagation()
}

事件监听器addEventListener("事件"，方法，true/false)true为捕获（从外向里），默认为false为冒泡（从里向外）

修改|获取

修改内容：innerHTML(非表单控件，包含html元素） innerText(非表单控件，只包含纯文本） value（表单控件）

var x =document.querySelector(".container")
x.innerHTML = "zjd"//修改
alert(x.innerHTML)//获取

修改文本框中的内容必须用value

修改属性：

获取的元素.元素的属性=" "或者 setAttribute("更改的属性"，"更改后的值")

获取属性：getAttribute()

var input =document.querySelector(".container")
input.type="button"//将该元素的type属性改为button
input.setAttribute("class","6666") //将该元素的class属性改为6666
alert(input.getAttribute("zjd"))//获取该元素中zjd属性

修改样式：style className

style.background

style.color等等

input.className="zjd" 修改class属性

增加

步骤一：创建或者复制元素

创建：createElement()

var div = document.createElement("div")
div.class="zjd"

复制元素 cloneNode(boolean)true是深复制，false是浅4复制

步骤二：添加到已有元素中

添加：appendChild()

父节点.appendChild(新节点)

var x =document.querySelector(".container")
x.appendChild(div)

插入：insertBefore()

父节点.insertBefore(新节点，哪个节点之前)

替换元素：replaceChild()

父节点.replace(新节点，旧节点）

删除

removeChild()

可以这样写

要删除的元素.parentNode.removeChild(要删除的元素）

定时器

周期定时器

var timer = setInterval(函数|字符串[函数名（）]，间隔[毫秒】）

例：

setInterval(fun,1000)或setInterval("fun()",1000)或setInterval(function(){},1000)

每隔一段时间执行一次

清除定时器 clearInterval(timer)

延迟定时器

var timer = setTimeout(函数，间隔[毫秒】)

一段时间后执行一次，执行后不再执行，只执行一次

清除定时器 cleartimeout(timer)

动画效果

下面是初学时使用js实现的一些小的动画效果

document.getElementById("id" )在整个页面中通过id触发结点 例：var x = document.getElementById("dd1");

setTimeout 计时器 例：setTimeout("m1( )", 3000);3000ms后触发m1方法

方法中可以改变body中元素的属性从而形成动画效果

例：字符串拼接与计时器的结合的方法：利用递归使图形每过20ms变化一次，从而形成动画效果

//对id为dd1的块的动画效果
function m1(a){
     var  x = document.getElementById("dd1");
         x.style.width = (100 + a )%500 + "px";//拼接结果："100px"  "101px" "102px" ....
         x.style.backgroundColor = "#a00";
         x.style.transform = "rotate( " + (30+a) + "deg)";//"rotate(30deg)" "rotate(31deg)"...
     setTimeout("m1(" + (a+1) +  ")",20); //setTimeout("m1(1)",20); setTimeout("m1(2)",20)...
} //利用递归使图形每过20ms变化一次，从而形成动画效果 

例：选择样式1选项时添加10个小方块在第一个方块元素中（利用了for循环）

<!DOCTYPE HTML>
<html>
       <head>
             <meta charset = "utf-8">
             <style>
                .sty1{  background-color:#aaa;height:200px;width:200px; margin-top:20px ; margin-left : 10px ;float:left}
             </style>
       </head>
       <body>
                <div id="div1" class="sty1" ></div>
                <div id="div2" class="sty1" ></div>
                <div id="div3" class="sty1" ></div> 
                <select id = "s1" onchange="m1()">
                        <option value="flag0">请选择样式</option>
                        <option value="flag1">样式1</option>
                        <option value="flag2">样式2</option>
                        <option value="flag3">样式3</option>
                        <option value="flag4">样式4</option>
                        <option value="flag5">样式5</option>
                </select>         
       </body>
       <script >
                function m1(){
                        var x = document.getElementById("s1");
                        if(x.value == "flag1"){
                                var y = document.getElementById("div1");
                                var html = " ";
                                for(var i=0; i<10; i++){
                                        html += '<div style="height:40px;width:40px;background-color:#2ac;float:left;margin-left:10px;margin-top:10px;"></div>';
                                }
                                y.innerHTML = html;
                        }
                }            
       </script>

</html>