Javascript实战
  • 1.Javascript互联网上的脚本语言,轻量级编程语言
  • 2.外部js可以直接引入
  • 3.文档输出:

#document.write();

#document.getElementById("id ").innerHTML = "重写"

<script>
    document.write("Hello");
</script>
  • 4.按照编写顺序执行
  • 5.对大小写敏感
  • 6.忽略多余的空格
  • 7.保留字
  • 8.数据类型: 字符串string 数字Number 布尔Boolean 数组Array 对象Object 空null 未定义undefined
  • 9.可以通过赋值为null的方式清除变量
运算符 内容
算术运算符 + - * % / ++ --
赋值运算符 = += -= *= /= %=
*字符串操作
比较运算符 == === != !== > < >= <=
逻辑运算符 && 两竖 !
条件运算符 三元符号
  • 10.三等必须满足类型也相通 双等可以类型不相同,数值相同即可
  • 11.!= 数值比较正确 !== 类型不同也为true
条件语句 循环语句 跳转语句
if-else for循环: for/in break
switch while循环:do...while continue
switch(i){
    case 1:
        输出语句1
        break;
    case 2:
        输出语句2
        break;
    default:  //当条件不满足任何一个case
        break;
}
do{
    执行语句
}while(i<10){
    //与while的区别是先执行一次再判断
}
  • 12.break 跳出当前循环语句 结束本次循环就不执行别的循环了 continue 结束当前本次循环,但还会继续执行循环语句
  • 13.函数是由事件驱动或者当它被调用时执行的可重复使用的代码块
  • 14.函数调用中可以传值,值被称为参数,参数可以任意多,逗号隔开,参数传递时顺序必须一致。
  • 15.参数可以个数不同,也可以类型不同
    函数执行:
    //<script>标签中调用 
    //html中调用
    
  • 16.返回值:将函数的值返回给调用它的地方,通过return实现。在使用return语句的时候,函数会停止执行,同时返回值/
  • 17.异常捕获:
    try{  //发生异常的代码块
    }catch(err){ //错误信息处理
    }
    
  • 18.Throw语句,通过throw语句创建自定义错误
事件 描述
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFouse 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载
onUnload 关闭网页的事件

js的DOM对象

当网页被加载时,浏览器会创建页面的文档对象模型 Document Object Model == HTML DOM

DOM操作HTML

  • 1.JS改变页面中所有HTML元素
  • 2.JS改变页面中的所以HTML属性
  • 3.JS能改变页面中所以CSS样式
  • 4.JS能对页面中的所有事件做出反应

    #1.改变HTML的输出流:绝对不要在文档加载完之后使用document.write(),会覆盖该文档
    #2.寻找元素(id 或标签名). #3.改变HTML内容 使用:innerHTML #4改变HTML的属性 使用:attribute

document.getElementById(id).attribute=new attribute

DOM操作CSS

document.getElementById(id).style.property = new style;

DOM EventListener

  • addEventListener 用于向指定元素添加事件句柄
  • removeEventListener 移除方法添加的事件句柄
<button id="btn">button</button>
<script>
    document.getElementById('div').addEventListener("click",function(){
        alert('hello')
    })
</script>

添加两个句柄没有任何问题

var x =document.getElementById('');
x.addEventListener("click",hello);
x.removeEventListener("click", hello);
function hello(){}

Js创建对象

对象直接量

对象直接量——一副映射表;键名加引号是字符串,

var obj3 = {
  name: "ys",
  age: obj2.age,   //引用obj2.age
  like: {
    drink: "water",
    eat: "food"
  }
};

console.log(obj3.age); //100

new创建对象

  • 1.系统内置对象
var obj1 = new Object();
var obj2 = new Array();
var obj3 = new Date();
var obj4 = new RegExp("ys");

console.log(typeof obj1);  //object
console.log(typeof obj2);  //object
console.log(typeof obj3);  //object
console.log(typeof obj4);  //object
  • 2.自定义对象
function Person(name, age){
  this.name = name;
  this.age = age;
}

var obj1 = new Person("ys", 12);

console.log(Object.prototype.toString.call(obj1));  //object
console.log(Person instanceof Object);        //true
console.log(typeof obj1);              //object
console.log(obj1.age);                //12

Object.create()创建

该方法有两个参数: 第一个参数:传入要继承的原型prototype对象 第二个参数是对对象的熟悉进行进一步的描述

var obj1 = Object.create({
  name: "ys",
  age: 12
});
console.log(obj1);     //{}
console.log(obj1.age);   //12
console.log(obj1.__proto__);  //Object {name: "ys", age: 12}

对象本身为空,但是对象的原型链上数组不为空

####特殊情况

  • 当第一个参数为null

    var obj = Object.create(null);  //不继承对象应有的属性和方法
    console.log(obj2+"abc"); //报错 失去+功能
    

    PS:Javascript中所有对象都继承自Object,Object处于继承的最顶端 本代码使得obj的原型删除了。即obj不再是对象

  • 创建空对象

    var obj3 = Object.create(Object.prototype); 
    console.log(obj3);              //{},(空对象,与前两个方法 {},new Object 相同)
    console.log(obj3.__proto__);         //如下图 ,只包含了基本对象的方法
    
  • 综合理解

var obj1 = {
  name: "ys",
  age: 12
};
obj1.prototype = {
  sayName: function(){
    return console.log(this.name);
  }
};

/*①对象参数,只继承对象*/
var obj2 = Object.create(obj1);
console.log(obj2);                 //{}
console.log(obj2.name);               //ys
/*console.log(obj2.sayName());*/          /* 报错 obj2.sayName is not a function*/
console.log(obj2.__proto__.prototype.sayName());  //ys 理解原型的原型
/*②对象原型,继承对象原型*/
var obj3 = Object.create(obj1.prototype);
console.log(obj3);                 //{}
console.log(obj3.name);               //undefined,没有继承对象本身
obj3.name = "ys";
console.log(obj3.name);               //ys
console.log(obj3.sayName());

JSON和字符串的转换

  • 1.JSON对象的stringify()和parse() 浏览器支持的转换方式
    JSON.stringify(obj)  //将JSON转为字符串。
    JSON.parse(string)  //将字符串转为JSON格式;
    
  • 2.jquery插件支持的转换方式
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
  • 3.Javascript支持的方法
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
  • 4.JSON官方转换方式 引入http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法; 可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

事件详解

事件流

  • 1.事件流:描述在页面中接受事件的顺序
  • 2.事件冒泡:由最具体的元素接受,然后逐级向上传播至最不具体的元素的结点(文档)
  • 3.事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件。层层深入

事件处理

  • 1.HTML事件处理:直接添加到HTML结构中
  • 2.DOM0级事件处理:把一个函数赋值给一个事件处理程序属性
  • 3.DOM2级事件处理:addEventListener("事件名",“事件处理函数”,“布尔值”); true:事件捕获 false:事件冒泡
  • 4.IE事件处理程序 attachEvent detachEvent
    <script>
      var btn =  document.getElementById("");
      if(btn1.addEventListener){
          btn.addEventListener("click",demo);
      }else if(btn.attachEvent){
          btn.attachEvent("onclick",demo)
      }else{
          btn.onclick =demo();
      }
      function demo(){}
    </script>
    

    事件对象

    事件对象

    在触发DOM事件的时候都会出现一个对象

    事件对象event

    • type 获取事件类型
    • target获取事件目标
    • stopPropagation()阻止事件冒泡
    • preventDefault()阻止事件默认行为
<script>
    document.getElementById("").addEventListener('click',demo);
    function demo(event){
        alert(event.type)
    }
</script>

事件的默认行为:a标签的跳转行为

面向对象

1.面向对象中的概念

- 1.一切事物皆对象
- 2.对象具有封装和继承特性
- 3.信息隐藏

2.函数构造器构造对象

/*类似于类概念*/
function People(){

}

People.prototype.say = function(){
    alert("hello");
}
function Student(){

}

Student.prototype = new People();//原型继承
/*Student.prototype.say=function(){//复写父类的方法会覆盖父类
    alert("stu-Hello")
}*/

/*解决父类方法被覆盖的问题*/
var superSay = Student.prototype.say;
Student.prototype.say=function(){//复写父类的方法会覆盖父类
    superSay.call(this);
    alert("stu-Hello");
}
var s= new Student();    //创建一个对象来测试一下
s.say();

改变函数this指针:call、apply、bind

  • 相同点:
    • 都用来改变this对象的指向;
    • 第一个参数都是this要指向的对象;
    • 都可以利用后续参数传参
var xw = {
  name : "小王",
  gender : "男",
  age : 24,
  say : function() {
  alert(this.name + " , " + this.gender + " ,今年" + this.age);                                
  }
}
var xh = {
  name : "小红",
  gender : "女",
  age : 18
}
xw.say();

三种方法的调用分别是

xw.say.call(xh);
xw.say.apply(xh);
xw.say.bind(xh)(); //bind方法返回的还是一个函数

即:call与apply都是对函数的直接调用。而bind方法返回的还是一个函数,需要加上()进行执行

var xw = {
  name : "小王",
  gender : "男",
  age : 24,
  say : function(school,grade) {
      alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                                
  }  //say方法多了两个参数,因此需要进行传参
}
var xh = {
  name : "小红",
  gender : "女",
  age : 18
}

则进行传参时,call与apply的应用:

xw.say.call(xh,"实验小学",“六年级”)
xw.say.spply(xh,["实验小学",“六年级”]);

即:call后面的参数是与say方法中的一一对应的。而apply的第二个参数是数组,数组中的元素是和say方法一一对应的。

正确理解this的对比代码

(function(){
   var n= "ime";
   function People(name){
       this._name = name;
   }
    People.prototype.say = function(){
        alert("peo-hello"+this._name);
    }
    //n需要给外部引用的话,需要给外部公开一个n的接口
    //赋给顶级的window
    window.People = People;  //开放接口
}());
(function(){
    function Student(name){
        this._name =name;
    }
    Student.prototype =new People();
    var superSay = Student.prototype.say;
    Student.prototype.say =function(){
        superSay.call(this);
        alert("stu-hello"+this._name);
    }
    window.Student = Student;
}())

var s= new Student("Wang");    //创建一个对象来测试一下
s.say();

(function(){
    var n ='ime';
    function Person(name){
        var _this ={};/*创建空对象*/
        _this._name = name;
        _this.sayHello = function(){
            alert("PHello"+_this._name+n);
        }
        return _this;
    }
    window.Person =Person;
}());

function Teacher(name){
    var _this = Person(name); /*将对象传递过去,对象的复制操作*/
    var superSay = _this.sayHello;
    _this.sayHello = function(){
        superSay.call(_this);
        alert("Thello"+_this._name);
    }
    return _this;
}
var t=Teacher("li");
t.sayHello();

JS浏览器对象

Window对象

- window对象是BOM的核心,window对象指当前浏览器窗口
- 所以JavaScript全局对象、函数以及变量均自动成为Window对象的成员
- 全局变量是window对象的属性
- 全局函数是window对象的方法
- 甚至HTML DOM的document也是window对象的属性之一
- 客户端js最高层对象之一
<script>
    document.write();
    window.document.write();
<script>

window的尺寸

  • 1.window.innerHeight 浏览器窗口的内部高度
  • 2.window.innerWidth 浏览器窗口的内部宽度

window方法

  • 1.window.open() 打开新窗口
  • 2.window.close() 关闭当前窗口

计时器的使用

- 在一个设定的时间间隔之后来执行代码,而不是在函数被执行后立即调用——计时事件

计时方法:

  • setInterval() 间隔指定的毫秒数不停地执行指定的代码
    • clearInterval()停止setInterval()方法执行的函数代码
  • setTimeout() 暂停指定的毫秒数后执行指定的代码
    • clearTimeout()停止执行setTimeout()方法的函数代码
 /*延时执行*/
        /*var win;
        function mywin(){
            win = setTimeout(function(){
                alert("hello");
            },3000)
        }*/

/*长期不停执行——自己调自己*/
        var win;
        function mywin(){
            alert("hello");
            win = setTimeout(function(){
               mywin();
            },3000)
        }

        function stopwin(){
            clearTimeout(win);
        }

History对象

  • window.history对象包含浏览器历史的集合

History方法

  • history.back() 与在浏览器中点击后退按钮相同
  • history.forward() 在浏览器中点击前进按钮
  • history.go()进入历史中的某个页面

Location对象

  • window.location对象用于获取当前页面的地址url,并把浏览器重定向到新的页面

Location对象的属性

  • location.hostname 返回web主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port返回web主机的端口
  • location.protocol 返回所使用的web协议
  • location.href 返回当前页面的url
  • location.assign()方法 加载新的文档

Screen对象

  • window.screen对象包含有关用户屏幕的信息

属性

  • screen.availWidth 可用屏幕的宽度
  • screen.availHeight 可用屏幕的高度
  • screen.Height 屏幕高度
  • screen.Width 屏幕的宽度

navigator对象包含有关浏览器的信息

属性

  • navigator.appName 浏览器名称
  • navigator.appVersion 浏览器版本
  • navigator.appCodeName 浏览器的代码名称
  • navigator.userAgent 用户代理标识
  • navigator.plugins 可以使用的插件信息
  • navigator.language 语言设定

弹窗

(function(){...})()与(function(){...}())区别:无区别

IIFE 立即执行函数表达式的写法

常用的

  • (function(){..}());
  • (function(){...})();

括号和JS的一些操作符可以在函数表达式和函数声明上消除歧义 解析式会知道它是一个表达式,而且两者不能交换

  • var i = function(){...}();
  • true && function(){.....}();
  • 0,function(){...}();

一元运算符也可以,但是晦涩难懂

  • !function(){}();
  • ~function(){}();
  • -function(){}();
  • +function(){}();

或者 new function(){. ...} new function(){...}()

(function($){...}) (jQuery)

  • function(arg){.....}为匿名函数,参数为arg
  • 调用函数时,在函数后面加上括号和实参,由于操作符的优先级,函数本身也使用括号
//定义了一个参数为arg的匿名函数,并将param作为参数来调用这个匿名函数
(function(arg){...})(param)

//形参用$,实参用jQuery
(function($){...})(jQuery)

//等同于
var fn= function($){...};
fn(jQuery);

(function($){})(jQuery)是用来定义一些需要预先定义好的函数 $(function(){})用来在DOM加载完成之后,运行、执行预先定义好的函数

jQuery插件

//在DOM加载完毕后执行了ready()方法
jQuery(function(){...});
//等同于
jQuery(document).ready(function(){...})

//执行()(para)匿名函数,但是传递了jQuery对象
(function(){...})(jQuery)

jQuery(function(){ });用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在。不可用于存放开发插件的代码,因 为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中的方法(函数)。 (function(){ })(jQuery);用于存放开发插件的代码,执行其中代码时DOM不一定存在,所以直接自动执行DOM操作的代码 请小心使用。

jquery的ready()方法

写法:

  • $(document).ready(function)
  • $().ready(function)
  • $(function)

当DOM已经加载,并且页面已经完全呈现的时候,触发ready事件 只试用于当前文档,无需选择器。

jquery中的$.fn

  • $.fn是指jQuery的命名空间
  • $.fn.abc()是对jquery扩展了一个abc方法,之后的每一个jquery的实例都可以引用这个方法。

jquery为开发提供了两个方法:

  • jQuery.extend(object) 为jQuery类本身添加新的方法
  • jQuery.fn.extend(object) 给jQuery对象添加方法

jQuery.fn = jQuery.prototype ={ init:function(selector,context){} }

//jQuery.extend(0bj) 为jQuery类添加类方法——静态方法
$.extend({
    add:function(a,b){return a+b;}
});

//使用这个方法
$.add(3,4);
//jQuery.fn.extend(object);对jQuery.prototype进行扩展——为jQuery添加成员函数,jQuery类的实例可以使用这个函数
$.fn.extend({
    alertWhileClick: function(){
        $(this).click(function(){
            alert($(this).val());
        });
    }
})
//引用
$("#input1").alertWhileClick();

插件机制——扩展一个对象到jQuery的prototype中

(function($){

})(jQuery)
(function( $ ){
  $.fn.tooltip = function( options ) {
  };
  //等价于
  var tooltip = {
    function(options){
    }
  };
  $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );

$().on(events,[selector],[data],fn)

  • events一个或多个用空格分隔的事件类型和可选的命名空间,如“click”
  • selector 一个选择器字符串,过滤器,用于选择规定触发的事件元素是当前事件的哪些后代。当它到达选定的元素,事件被触发
  • data 当一个事件被触发时,要传递event.data给事件处理函数
  • fn是事件被触发时执行的函数
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。