前端的重要部分js

js用来实现页面的动态效果。

js的特点：1、是客户端语言，客户端进行解释执行。

　　　　　2、是一种脚本语言

　　　　　3、是一种基于对象的语言，不用定义类和实例化对象，直接使用类即可

　　　　　4、js前端和后端都可以做

js基础

1、变量

变量用var声明，没用var声明的为全局变量。

2、一些规范注意

语法格式跟c语言类似，用{}来封装代码块，/* */  //注释，语句结束加分号，不加分号，换行表示一句结束。

3、循环、选择等控制语句和c语言的一样。

4、基本数据类型

js有5种基本数据类型，number、string、Boolean、null、undefined。

number：表示任意类型的数，整数浮点数；

string：表示字符串

Boolean：1，0。console.log(1+true)为2

null：用于对象，表示对象没有值的情况

undefined：两种情况出现undefined

1、x只声明，没有定义的时候
var x;
console.log(x);
2、函数没有返回值的时候
function f(){

}
console.log(f())

数据类型之间的转换

console.log(123+“hello”)//"123hello"
console.log(123+true)//124
console.log("hello"+true)//"hellotrue"

强制类型转换：

parseInt("hello")=NaN
parseInt("123")=123
parseInt("123hello")=123
parseInt("hello123")=NaN
parseInt("123hello123")=123

parseFloat("1.23")=1.23
eval,跟python一样，对字符串求值

掌握3种对象：内置对象、bom对象，dom对象。

11种内置对象：

1、string

两种创建方法。

var a="hello";//typeof为string
var a = new String("hello");//typeof方法为object

字符串对象的属性和方法：

length，格式编排方法：

    console.log(a.length);
    console.log(a.anchor());
    console.log(a.bold());
    console.log(a.italics());
输出：
5
<a name="undefined">hello</a>
<b>hello</b>
<i>hello</i>

大小写转换：

    console.log(a.toUpperCase());//转换为大写
    console.log(a.toLowerCase());//转换为小写

获取字符，用得不多：

    console.log(a.charAt(1));//e
    console.log(a.charCodeAt(1));//101

查询字符：第一个可有两个参数，指从哪个位置开始查询，查到就返回，第二个从后面开始查询。

    console.log(a.indexOf("e"));//获取下标
    console.log(a.lastIndexOf("e"));

子字符串的处理，这个用得较多。

连接字符串
var b=a.concat("abc");//a还是原来的值，b在a的基础上增加。和“+”的效果一样

截取字符串，原字符串不变。
a.substr(1,2)；//参数，起始位置，截取长度
a.substring(1,4)；//参数，起始位置，结束位置，前闭后开
a.slice(-3,-1)；//参数，起始位置，结束位置，前闭后开，和python的切片差不多
a.slice(0,3)；

替换字符串
a.replace("hell","haha")//a不变
var b=a.replace("hell","haha")
分割字符串
    var x = "1,2,3,4,5,6";
    var y = x.split(",");//x不变
    console.log(x);
    console.log(y);

 2.数组对象

数组的创建

    var a = [1,2,3,4];
    var a = new Array();//个数不限
    var a = new Array(5);//个数为5个
    var a = new Array(1,"hello",7);//直接用元素创建

二维数组的创建：

数组的属性和方法：

属性有length，和上述一样。

方法：

join，在python中join是字符串的方法。"".join(["1","2"])，列表里面元素需要为字符串，而在js中，join是数组的方法，数组中的元素可以为数字。

    var a = new Array(1,"hello",7);
    var b = a.join("*");
    console.log(b);
    //1*hello*7

在js中所有内置对象都继承于object对象，因此所有对象都有方法，toString()

concat

    var a = [1,2,3,4];
    var b = a.concat([5,6]);
    console.log(b);//6个，concat中的值，不是作为整体连接的
    console.log(a);//4个，a的值没有改变

reverse

    var a = [1,2,3,4];
    var b = a.reverse();
    console.log(b);//b为4,3,2,1
    console.log(a);//a也为4,3,2,1

sort

js中的sort和python中不一样，js中的先按照高位排序，高位相同再依次比较低位，没有的比0 小。

    var a = [35,100,354,79,10];
    var b = a.sort();
    console.log(b);//[10,100,35,354,79]
    console.log(a);//[10,100,35,354,79]

如果需要按照正常的排序需要些一个函数作为参数传入到sort中。

    var a = [35,100,354,79,10];
    var b = a.sort();
    console.log(b);//[10,100,35,354,79]
    console.log(a);//[10,100,35,354,79]

    function func(a,b) {
        if(a>b){
            return 1;
        }
        else if (a<b){
            return -1;
        }
        else {
            return 0;
        }
    }
    var c = a.sort(func);
    console.log(a);//[10,35,79,100,354]
    console.log(c);//[10,35,79,100,354]

slice

数组中slice和字符串中slice一样。

splice

删除，插入操作

    var a = [1,2,3,4,5,6];
    a.splice(0,3)//删除，从0位置开始删除3个
    console.log(a)
    a.splice(1,0,7,8,9)//插入，从1位置插入7,8,9
    console.log(a);//[4, 7, 8, 9, 5, 6]

进出栈操作：

push，pop

    var a = [1,2,3,4,5,6];
    a.push([6,7]);//将[6,7]作为整体一次性放入栈中
    console.log(a);//[1,2,3,4,5,6,[6,7]]
    a.push(9,"hello");//分别依次放入
    console.log(a);//[1,2,3,4,5,6,[6,7],9,"hello"]
    a.pop();
    console.log(a);//[1,2,3,4,5,6,[6,7],9]

unshift,shift

    var a = [1,2,3,4,5,6];
    a.unshift([6,7]);//将[6,7]作为整体一次性放入栈中
    console.log(a);//[[6,7],1,2,3,4,5,6]
    a.unshift(true,"hello");//作为整体放入，但是整体为两个值
    console.log(a);//[true,"hello",[6,7],1,2,3,4,5,6]
    a.shift();
    console.log(a);//["hello",[6,7],1,2,3,4,5,6]

 3、函数对象

创建函数有两种方式，1、正常的，2、用new创建，不用，了解 这种创建方式。var func = new Function（“参数1”，......“参数n”，“函数体”）。

在python中，函数调用不可以在函数定义之前。python读取一行执行一行，先读到执行那儿找不到定义，报错

在js中，函数调用可以写在函数定义之前。页面加载时，先加载所有定义的函数再执行，因此写在前面也能找到。

    function func(a,b) {
        return a+b
    }
    console.log(func.length)//表示函数期望的参数个数

    function func(a,b) {
        return a+b
    }
    console.log(func.length);//表示函数期望的参数个数
    console.log(func(1));//NaN
    console.log(func());//NaN
    console.log(func(1,2));//3
    console.log(func(1,2,3));//3

    function func() {
        console.log(arguments);//arguments是存储传入参数的对象
        var sum = 0;
        for(var num in arguments){//num表示下标
            sum +=arguments[num];
        }
        console.log(sum)
    }
    func(1,2,3);

    //匿名函数1，和标准函数不一样，先去掉函数的名字，再赋值给一个变量。再函数赋值给变量前执行会报错，func不能调用
    var func = function () {
        alert(123)
    };
    func();
    //匿名函数2
    (function () {
        alert(456)
    })()

BOM对象有：window对象、history对象、location对象

所有浏览器都支持window对象，window对象，一个html文档就是一个window对象、window对象用于控制浏览器窗口的，window对象不用创建课直接使用。常用的alert（）就是window对象。有alert（），confirm（），prompt（），open（），close(),.......

 BOM对象就是浏览器对象，功能为：使js有能力和浏览器“对话”。

window对象，1、一个html文档就是一个window对象；2、window对象就是浏览器的一个窗口；3该对象不用创建，可以直接使用，对象的方法也可直接使用，window对象为全局变量。

一：

alert():窗口弹出一个弹出框，提示用户

confirm():

    var flag = window.confirm("是否确定删除");//点击确定，返回true；点击取消，返回false
    console.log(flag);

prompt():

    var content = window.prompt("请输入内容：");//与上不同在于，有一个框提阿尼额输入内容，点击确定返回输入内容，点击取消返回null
    console.log(content);

二：

open():打开一个新的浏览器窗口

close():关闭一个浏览器窗口

三：

    var clock = window.setInterval(func,1000);//相当于设定定时器
    function func() {
        console.log("hello");
    }
    window.clearInterval(clock);//关闭定时器

    var t = window.setTimeout(func,1000);//与上述区别在于只执行一次，1秒钟之后
    function func() {
        console.log("hello");
    }
    window.clearTimeout(t);//关闭

 history对象：

history对象是window对象的一个子对象，用于实现窗口的前进后退。

<button onclick="func_back()">back</button>
<button onclick="func_forward">forward</button>

    function func_back() {
        window.history.back();//后退，相当于浏览器上的后退
        window.history.go(-1);//表示后退几步
    }
    function func_forward() {
        window.history.forward();//前进
        window.history.go(1);
        window.history.go(2);//表示前进几步
    }

location对象：

<button onclick="func()">点击</button>

    function func() {
        window.location.reload();//刷新页面
        window.location.assign("http://www.baidu.com");//链接到百度，可后退
        window.location.replace("http://wwww.baidu.com");//将当前窗口替换为百度窗口，不可后退
    }

 DOM对象

DOM是关于html文档和xml的访问标准，DOM主要完成两件事情，1、找；2、操作。DOM对象有两个主要的对象，document对象和element对象。也称为节点。

1、找；

找到文档中的具体某一标签对象

<div>
    <p name="pp"> hello p</p>
    <div id="div_a">
        <p class="content">hello hello</p>
        <a href="">点击</a>
    </div>
</div>

    var ele = document.getElementsByTagName("a")[0];
    var ele1 = document.getElementsByName("pp")[0];
    var ele2 = document.getElementById("div_a");
    var ele3 = document.getElementsByClassName("content")[0];
    console.log(ele);
    console.log(ele1);
    console.log(ele2);
    console.log(ele3);

直接找到标签就用上面的4种方法。在element对象中也可以进行局部查找它里面的标签，但是只能用ByTagName，ByClassName；林外两个使用拿不到结果。

还可以利用节点的导航属性找到其他的标签对象。

    var ele = document.getElementsByTagName("a")[0];
    var ele1 = document.getElementsByName("pp")[0];
    var ele2 = document.getElementById("div_a");
    var ele3 = document.getElementsByClassName("content")[0];
    // console.log(ele);
    // console.log(ele1);
    // console.log(ele2);
    // console.log(ele3);
    var ele4 = ele.parentElement;//拿到该标签的父元素
    console.log(ele4);
    var ele5 = ele2.children;//拿到该标签的所有子元素
    console.log(ele5);
    var ele6 = ele2.firstElementChild;//拿到该标签的第一个子元素
    console.log(ele6);
    var ele7 = ele2.lastElementChild;//拿到该标签的最后一个子元素
    console.log(ele7);
    var ele8 = ele3.nextElementSibling;//拿到该标签的下一个兄弟标签
    console.log(ele8);
    var ele9 = ele.previousElementSibling;//拿到该标签的上一个兄弟标签
    console.log(ele9);

节点属性：

自身属性：

innerHTML

导航属性：

 DOM，事件、绑定方式，this。

两种绑定事件的方式

1、直接写在标签上

2、写在js中

js中的事件有

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect      文本被选中。
onsubmit      确认按钮被点击。

window.onload=function(){}；或者在body标签上添加上onload事件绑定。表示页面加载完成后再执行函数内的内容。


增删改查操作：

增:

createElement(name)创建元素
appendChild();将元素添加

删:

获得要删除的元素
获得它的父元素
使用removeChild()方法删除

改:

第一种方式:

      使用上面增和删结合完成修改

第二中方式:

使用setAttribute();方法修改属性          

使用innerHTML属性修改元素的内容

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
            var div = document.getElementById("div_2");
        //2.获得父亲
            var parent = div.parentNode;
        //3 由父亲操刀 
            parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部
    
    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }
    
    
</script>

• 改变 HTML 内容 

        改变元素内容的最简答的方法是使用 innerHTML ，innerText。

• 改变 CSS 样式 

1 2	<p id="p2">Hello world!</p> document.getElementById("p2").style.color="blue";<br data-filtered="filtered">                             .style.fontSize=48px

• 改变 HTML 属性 

        elementNode.setAttribute(name,value)

        elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

• 创建新的 HTML 元素 

        createElement(name)

• 删除已有的 HTML 元素 

        elementNode.removeChild(node)

• 关于class的操作 

        elementNode.className

        elementNode.classList.add

        elementNode.classList.remove