js总结

 
         js: 
        
         1.ECMAScript5  ES5语法 
        
         2.DOM 
        
         CRUD 
        
         获取  3种方式  id tag className 
        
         //面向对象  对象 ： 属性和方法 某个对象中 
        
         function $(id){ 
        
         return document.getElementById(id) 
        
         } 
        
         事件操作 
        
         3.BOM   user-Agent  location.pathname location.href

一、jQuery的介绍

1.为什么要使用jQuery　　　　　　　　　　　　　　　　　　　　　　

在用js写代码时，会遇到一些问题：

window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。

关于window.onload，举一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            alert(1);
        }
        window.onload = function () {
            alert(2);
        }
    </script>
</body>
</html>

网页访问：

发现1被覆盖了！

jQuery的出现，可以解决以上问题。

什么是 jQuery　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

关于jQuery的相关资料：

官网：http://jquery.com/
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/

打开官网网址，看图标下面的英文说明

意思是写少量代码，实现更多的功能

j表示 JavaScript

query 表示查询

在前端里面，一个js文件，就是一个模块，这样更容易维护。

但是导入模块的时候，代码比较长。

 
         < 
         script  
         type="text/javascript" src="js/index.js"></ 
         script 
         >

在python中，导入一个模块，直接import加模块名就可以了。

ECMAScript第五个版本，简称es5，目前的浏览器都支持。在es6中，有import。但是目前的浏览器不识别这个import，这是硬伤！

为了解决这个问题，出现了一个插件bebel，它能将es6的代码转换为es5，这样浏览器就能识别了，官方链接：

http://babeljs.io/

中文版官方链接

https://www.babeljs.cn/

打开网页，点击试用

左边是es6语法，右边会自动转换为es5语法

回顾之前js学的面向对象，新建文件index.js，内容如下：

 
         function Student() { 
        
         this.name = 'easy'; 
        
         this.age = 20; 
        
         } 
        
         Student.prototype.alertName = function(){ 
        
         alert(this.name); 
        
         }; 
        
         var stu1 = new Student();  //原型的模式创建对象 
        
         window.$ = window.jQuery = stu1;  //window.$和window.jQuery的值为stu1