1js

包含三部分:

 

ESMAScript:基础语法

Array()

索引 lengthpush()、pop()

DOM

   获取DOM的三种方式:

(1)Id

(2)Class

(3)标签获取 TayName

BOM

入口函数:

等待这文档,

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">


class="box">




 

这里的var可以变量提升:

Var =i;

I = 0; \可以写成var i = 0

 

总结:

 

Var 声明的变量   存在变量提升

Let声明的变量    是块级作用域

Const 声明的是常量  一旦声明变量 不可改变

 

 

DOM的创建和添加:

DOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

 

 

DOM可以做什么

找对象(元素节点)

设置元素的属性值

设置元素的样式

动态创建和删除元

事件的触发响应:事件源、事件、事件的驱动程序

操作元素节点,必须首先找到该节点。有三种方式可以获取DOM节点:

    var div1 = document.getElementById("box1");      //方式一:通过id获取单个标签

 

    var arr1 = document.getElementsByTagName("div1");     //方式二:通过 标签名 获得 标签数组,所以有s

 

    var arr2 = document.getElementsByClassName("hehe");  //方式三:通过 类名 获得 标签数组,所以有s

 

 

创建节点

格式如下:

新的标签(元素节点) = document.createElement("标签名");

比如,如果我们想创建一个li标签,或者是创建一个不存在的adbc标签,可以这样做:

<script type="text/javascript">

    var a1 = document.createElement("li");   //创建一个li标签

    var a2 = document.createElement("adbc");   //创建一个不存在的标签

    console.log(a1);

    console.log(a2);

 

    console.log(typeof a1);

    console.log(typeof a2);script> 

 

 

插入节点

插入节点有两种方式,它们的含义是不同的。

方式1

 父节点.appendChild(新的子节点);

解释:父节点的最后插入一个新的子节点。

方式2

父节点.insertBefore(新的子节点,作为参考的子节点);

解释:

· 在参考节点前插入一个新的节点。

· 如果参考节点为null,那么他将在父节点最后插入一个子节点。

删除节点

格式如下:

  父节点.removeChild(子节点);

解释:用父节点删除子节点。必须要指定是删除哪个子节点。

如果我想删除自己这个节点,可以这么做:

node1.parentNode.removeChild(node1);

复制节点(克隆节点)

格式如下:

  要复制的节点.cloneNode();       //括号里不带参数和带参数false,效果是一样的。

 

  要复制的节点.cloneNode(true);

括号里带不带参数,效果是不同的。解释如下:

不带参数/带参数false:只复制节点本身,不复制子节点。

带参数true:既复制节点本身,也复制其所有的子节点。

 

设置节点的属性

我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。

我们就统一拿下面这个标签来举例:

美女图片" alt="地铁一瞥" id="a1">

下面分别介绍。

1、获取节点的属性值

方式1

    元素节点.属性;

    元素节点[属性];

举例:(获取节点的属性值)

<body><img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

<script type="text/javascript">

    var myNode = document.getElementsByTagName("img")[0];

 

    console.log(myNode.src);

    console.log(myNode.className);    //注意,是className,不是class    console.log(myNode.title);

 

    console.log("------------");

 

    console.log(myNode["src"]);

    console.log(myNode["className"]); //注意,是className,不是class    console.log(myNode["title"]);script>body>

方式2:(推荐)

素节点.getAttribute("属性名称");

例子:

    console.log(myNode.getAttribute("src"));

    console.log(myNode.getAttribute("class"));   //注意是class,不是className

    console.log(myNode.getAttribute("title"));

删除节点的属性

格式:

    元素节点.removeAttribute(属性名);

举例:(删除节点的属性)

    myNode.removeAttribute("class");

    myNode.removeAttribute("id");

 

举例:

留言板:

html>

    
        charset="UTF-8">
        </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)"><span style="font-family:宋体">留言板</span></span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
        
    
    
        

简易留言板


        
id="box">
            

        

        
        type="button" id="btn" value="留言"/>
        
    
    

结果:

 

使用js模拟选择器中的hover

html>

lang="en">
    charset="UTF-8">
    
    













结果:

 

 

创建对象的几种常用方式

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

 

 

使用Object或对象字面量创建对象

JS中最基本创建对象的方式:

var student = new Object();

student.name = "easy";

student.age = "20";

 

 

当我们要创建同类的student1student2studentn时,我们不得不将以上的代码重复n....

var sutdent1 = {

  name : "easy1",

  age : 20

};

var sutdent2 = {

  name : "easy2",

  age : 20

};

 

...

var sutdentn = {

  name : "easyn",

  age : 20

};

 

 

 

 

 

使用构造函数的方式创建对象:

 

 

工厂模式创建对象

JS中没有类的概念,那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用,同时可以给出特定接口来初始化对象

function createStudent(name, age) {

  var obj = new Object();

  obj.name = name;

  obj.age = age;

  return obj;

}

var student1 = createStudent("easy1", 20);

var student2 = createStudent("easy2", 20);

...

var studentn = createStudent("easyn", 20);

 

 

同时又定义了生产水果对象的createFruit()函数:

 

function createFruit(name, color) {

  var obj = new Object();

  obj.name = name;

  obj.color = color;

  return obj;

}

var v1 = createStudent("easy1", 20);

var v2 = createFruit("apple", "green");

 

Pythonjs的对比:

 

 

Es6中的函数可以写成箭头函数

 

举例对比:

 

 

jsprototype原型,是每个对象的父类

 

原型的模式创建对象

原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分,在这里由于我们课程定位的原因,如果对js有兴趣的同学,可以去查阅一下相关JS原型的一些知识点。更加有助于你以后前端JS的面试。

function Student() {

    this.name = 'easy';

    this.age = 20;

}

 

 

Student.prototype.alertName = function(){

    alert(this.name);

};

var stu1 = new Student();var stu2 = new Student();

 

stu1.alertName();  //easy

stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数

 

 

Es6中的文件引入:

Import  aaa   from  xxx

 

前端三大工具:

Grunt

Glup

Webpack

 

作用:

文件压缩、打包

 

 

定时器:

js中的定时器分两种:1setTimeout() 2setInterval()

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">


id = box style="width: 100px;height: 100px;background-color: red;">




 

 

 

优化后的;有定时器:

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">


id = box style="width: 100px;height: 100px;background-color: red;">




 

 

 

数据异步机制:

不等待功能

setTimeout(function () {
    alert(2);
    console.log(2222);
},2000)
console.log(1111);

 

 

 

定时器:



 

 


 

 

自动刷新:

全局刷新:可以测试使用

 

 

局部刷新:

必须使用ajax技术

 

 

 

 

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">




 

 

 

 

jQuery安装使用:

 

 

 

安装jQuery

 

 

 

使用jquery

1)先引入jquery

2)入口函数 function(){}

3)Js对象和jquery对象的转换   js => jquery

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">







 

 

不会出现js的覆盖现象

 

 

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
    


class="box">






 

 

 

点击一下:

 

 

 


    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
    


class="box">






 

 

 

 

 

Jquery 选择器:

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">


class="box">
    
    class="list">
                    
  • 1

  •                 
  • 2

  •                 
  • 3

  •                 
  • 4

  •     

        
    class="list2">
                    
  • 1

  •                 
  • 2

  •                 
  • 3

  •                 
  • 4

  •     






 

 

效果:

 

$(function () {
    console.log($('.box').children('ul.list2,ul.list'));
})

 

Find是获取的子孙后代   、  children获取的是亲儿子

 

 

Jquery动画效果:

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
    



class="box">




 

 

 

 

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
    



class="box">




 

 

 

 

可以加上时间:


 

 

防止出现延迟现象,都是快速的

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
    



class="box">




 

 

 

 

 

卷帘门效果:

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
    



class="box">




 

 

 

淡入淡出:效果:

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
    



class="box">




 

 

自定义动画:

html>

lang="en">
    charset="UTF-8">
    
    
    
    



class="wrap">
    


 

 

 

 

html>

lang="en">
    charset="UTF-8">
    
    
    
    





 

 

 

 

 

 

Jquery 的属性操作:

attr()

设置属性值或者 返回被选元素的属性值

attr()属性的使用:

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
 


class="wrap" id="'box" title="123">




 

 

 

html>
lang="en">

    charset="UTF-8">
    </span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">Title</span><span style="font-family: 宋体;font-size: 12px;color: rgb(255, 255, 255)">
    
 


class="wrap" id="'box" title="123">




 

 

直接将红色的盒子给覆盖了颜色成×××:

 

 

removeAttr()

移除属性

//删除单个属性

$('#box').removeAttr('name');

$('#box').removeAttr('class');

//删除多个属性

$('#box').removeAttr('name class');

 

 

什么时候使用attr(),什么时候使用prop()

1.是有true,false两个属性使用prop();

2.其他则使用attr();

 

addClass(添加多个类名)

为每个匹配的元素添加指定的类名。

$('div').addClass("box");//追加一个类名到原有的类名

还可以为匹配的元素添加多个类名

$('div').addClass("box box2");//追加多个类名

 

 

 

removeClass

从所有匹配的元素中删除全部或者指定的类。

 移除指定的类(一个或多个)

$('div').removeClass('box')

移除全部的类

$('div').removeClass();

 

 

可以通过添加删除类名,来实现元素的显示隐藏

代码如下:

 

 

var tag  = false;

        $('span').click(function(){

            if(tag){

                $('span').removeClass('active')

                tag=false;

            }else{

                $('span').addClass('active')

                tag=true;

            }    

})

 

 

val

获取值:

val()用于表单控件中获取值,比如input textarea select等等

设置值:

 

$('input').val('设置了表单控件中的值')