js笔记（旧）

2016.3.15

JavaScript:广泛用于浏览器客户端的脚本语言

 

1.JS常见用途

HTML的DOM操作（节点操作，比如添加、修改、删除节点）即对标签元素进行动态的增删改查

DOM操作可访问 JavaScript HTML 文档的所有元素。

给html网页增加动态功能，比如动画

事件处理：比如监听鼠标点击、鼠标滑动、键盘输入

2.Node.js:

Node是一个JavaScript的运行环境（run time）是对Google V8引擎进行了封装

V8引擎执行JavaScript的速度非常快，性能也非常好

优势：

可以作为后台语言

单线程：不增加额外线程的情况下，依然可以对任务进行并行处理（采用事件轮询）

非阻塞I/O、V8虚拟机、事件驱动

 

3.Javascript的书写方式

3.1页内JS

     在当前网页的script标签中编写

<script type =“text/javascript”>

</script>

业内样式可以js的代码在script的两个尖括号之间写代码

3.2外部JS

<script src = “index.js”></script>

外部js样式，不能在js两个尖括号内些任何代码，如果想写的话，需要在下边再写一个js，在cijs中写

 

  alert('heeelo');

  alert("hello world");

alert中单引号双引号都可以，做好使用单引号

alert:是阻塞式操作

 

4.JS基本语法

 数据类型：

基本数据类型：

 number：整数，小数

 string:字符串类型

 boolean：true，false

 object：null（空）对象类型

拼接：

+连接

 

 

  var  number = 12;

    var  xiaoshunumber = 1144.45;

    var  name = 'aaa';

    name2 = 'ffff';

    boolez = false/*真是true*/

    var num = null;

    console.log(number,xiaoshunumber,name,name2,boolez);

    console.log(typeof number,typeof xiaoshunumber,typeof name,typeof boolez,typeof num);

    var  str1 = 'jack';

    var  str2 = 'rose';

    var  str3 = str1 + str2;

    console.log(str3);

 

运算顺序：自左向右；任何数据类型遇见string都会被转化为string类型

var  st1 = 10 + 10 +'10' + '10';

    var  st2 = '10' + '10' +10 + 10;

    var  st3 = (10 + 10) +'10' + '10';

    var  st4 = 10 + 10 +'10' + 10;

    console.log(st1,st2,st3,st4);

 

数组：数组直接用[]定义即可；数组内可以放任意类型

//    数组

    var array = ['aa',12,12.1,boolez,['vv',12]];

    console.log(array);

    for( var i =0 ;i < array.length; i++){

        console.log(array[i]);

    }

    console.log(array[4][0]);

 

5.js的函数

function 函数名（参数列表）{

  函数体

return 返回

}

//虽有return，但是js得函数体是没有返回值类型的

JS的函数中，系统已经定义了一个名称为arguments的数组来接收这些元素，所以，函数的参数列表可以空着不写，调用此函数时再添加参数也可

    //万能加法加强版--方法2：js的函数参数中有一个系统的arguments数组来接收这些参数

   var sums = 0;

    function test(){

        for(var i = 0; i<arguments.length;i++){

            sums += arguments[i];

        }

        return console.log(sums);

    }

5.1匿名函数

//    匿名函数,即没有名称的函数，其实还是有名的只不过换了一种写法而已，将变量转嫁为变量名，再用此变量名来调用函数；在JS中变量是可以存放任何东西的，也可存放函数

    var  test2 = function(){

        console.log('----------');

    }

 

    test2();

6、js对象

     <script>

      //对象

//      不同属性之间用逗号隔开

//      var dog = {}

//  this 指的是当前对象

      var dog = {

//   js对象的属性格式是：键值对格式

          name:"wagncai",

          age:15,

          friends:['huahua','lulu','xixi'],

          run:function(){

              console.log(this.name + '狗狗在跑步');

          },

          eat:function(meat){

              console.log(this.name + '狗狗在吃' + meat);

          }

          /*以下方法不可用*/

//          sleep:function(){

//              console.log(this.name + '狗狗在' + arguments[0] + '睡觉');

//          }

      }

      console.log(dog.name);

      console.log(dog.friends);

      console.log(dog.friends[0]);

      for (var a in dog){

          console.log(a);

      }

//      js对象调用函数格式：对象.函数

      dog.run();

      dog.eat('五花肉');

//      dog.sleep('席梦思');

 

 

  </script>

 

7.批量产生对象序言

  构造方法

new+函数：就会产生一个对象

<script>

     function Dog(){

      console.log('qq-----');

 

     }

 

     Dog();

//new + 函数 是一个构造函数；如果没有new就是一个普通的函数

     var dog1 = new Dog();//[[Dog alloc]init];函数名前加new，则是新创建了一个Dog类型的对象

     console.log(typeof dog1);

 </script>

 

8.批量产生对象

 构造方法

注意了：js不批量产生对象的属性用键值对的形式

                js批量产生对象的构造方法格式的属性用=形式；二者不可换用

 

 

9:产生对象的方法：

  单个产生：键值对的方式赋值

           var dog = {  

                           name:"wagncai",

                            eat:function(meat){

                            console.log(this.name + '狗狗在吃' + meat);

                             }

                         }

  批量产生：等号方式赋值

          var Dog = function(name,age,height){

                                this.name =name;

                               this.age = age;

                              this.height = height;

                        this.eat = function(meat){

                      console.log(this.name + '在吃' + meat);

                       }

                

 

                            }     

                        var dog = new Dog('lulu',12,14);

 

 

 

 

10.JS的内置对象

    window

     （1）所有全局变量都是window的变量

     （2）所有全局函数都是window的函数

     （3）window对象可以实现跳转功能（html中的跳转用a标签；js中调用到oc的东西用window的跳转）

 

//拿到window中的内容

      function dog(){

          console.log(this);

      }

      dog();/*this在此代表window，在此可以拿到window中的内容*/

 

      var  dog = new dog();/*this在此代表dog对象*/

 

 

3.window对象可以实现跳转的功能

     window.location.href = 'http://www.520it.com';

     location.href = 'http://www.baidu.com';

 

3.17

js的内置对象：

1.windows

2.document

  在js中用document.write属性将内容写入html中   

点击button切换图片

   在body中添加标签和button，给button一个点击onclick属性的onclick事件，点击button更改图片

 ，更改图片时通过document的四中方法得到要更改的资源，并用变量接受，然后再给次比变量赋值

  注意：打印该接收document获得的对象，得到的是该对象代表值的路径

3.document获取对象的四种方法

  document.getElementById();                               根据id名

 document.getElementsByClass();            数组    根据类名

 document.getElementsByTagName()；数组    根据标签名

 document.getElementsByName();          数组    根据内部标签的属性

 

 

btn.innerHTML//只拿到button的名称

btn.outerHTML//拿button尖括号开始到尖括号结束的内容

 

img标签是行内块级标签

 

4.

js定时器：

var timer = setIntervel(function(){执行的代码},多长时间执行一次)

删除定时器：

var timer = timerInterval(function(){}, 1000)

clearInterval（timer）

 

3.19

JS的CRUD

js的增删改查

1.增加（2种方法）

 方法一：通过write方法添加

 document.write(‘hello world’);

 document.write(‘<button>百度一下，你就知道</button>’);

 document.write(‘<input type = ‘date’>’);

 document.write(‘<img src=“img/img_01.jpg”>’);

 方法二：通过document的createElement()方法和appendChild()方法添加

 步骤如下：

 （步骤一：创建） var btn = document.createElement(‘button’)；btn.insertHtml = ‘百度一下，你就知道’;

 （步骤二：设置） btn.style设置添加控件

 （步骤三：添加） 父控件.appendChild(要添加的控件);

  //注意的控件只能被添加一次,要想再添加，只能再重新创建

2.删除（2种方法）

  方法一：找到父类，直接从父类上删除；通过控件找到父类，然后删除

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

    document.body.removeChild(img);直接从父类上删除

      img.parentNode.removeChild(img);通过控件找到父类，然后删除

      btn.parentNode.removeChild(btn);通过控件找到父类，然后删除

 

  方法二：调用remove()方法；

    要删除的控件.remove()

 

3.改：

通过document拿到该对象，重新赋值即可

4.查：

基本上就是打印

拿到body中（包括<body></body>）里的内容 ：console.log(document.body.outerHTML);