回顾

流程控制（语句）

分支

if () {
    
}

if () {
    
} else {
    
}

if () {
    
} else if () {
    
} else if () {
    
} else {
    
}


switch () {
    case break;
    case break;
    default: 
}

循环

while () {
    
}

do {
    
} while()

#适合遍历 指定次数循环
for (var i = 0; 循环条件; 循环变化) {
    
}

其他语句

continue
break
return

try {
    
} catch () {
    
} finally {
    
}

'use strict'

函数

定义方式

function 函数名(参数) {
    
}

var 函数名 = function(参数){
    
}

参数

形参和实参
参数的默认值 demo('utf-8')
可变长参数 arguments

返回值

回调函数

自调函数

(function(){
    
})()
#作用域

笔记

1. JS作用域

1.1 全局作用域和局部作用域

函数外面声明的就是全局作用域
函数内是局部作用域
全局变量可以直接在函数内修改和使用
变量，使用var是声明，没有var是使用变量。如果在函数内使用var来声明变量，在函数内会覆盖同名的全局变量

1.2 变量提升

在变量声明之前去使用变量会得到 undefined ，而不是报错
函数内，如果声明了跟全局变量同名的局部变量，在声明之前使用改变量，得到undefined( 该变量已经是局部的啦)

1.3 作用域链

当一个作用域使用某个变量时，先从本作用域中找，如果没有去父作用域，再没有，父作用域的父作用域，一直到全局作用域。构成了一个作用域链

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>作用域</title>

 </head>

 <body>

     <h1>作用域</h1>

     <hr>

     <!-- 外部导入的也是全局变量 -->

     <script src="script.js"></script>

     <script>

         //全局作用域

         var username = '小丽丽';

         function demo() {

             //局部作用域

             var age = 100;

             console.log(age); //局部变量

             console.log(username); //实用全局作用域的变量 (全局变量)

             // var useranme = "大哈哈" username输出是undefined

              username = '小哈哈';  //不加var声明直接修改 全局变量

         }

         console.log(username);//小丽丽 输出全局变量，注意是否全局变量被修改

         demo(); //函数调用 必须要调用才能有输出

         console.log(username);//输出全局变量，注意是否全局变量被修改

         console.log(address)

     </script>

     <script>

         console.log(username)

     </script>

 </body>

 </html>

作用域

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>变量提升</title>

 </head>

 <body>

     <script>

         // 不仅函数可以提升，变量也可以提升

         console.log(age); //不会报错。 输出undefined  变量提升

         var age = 1000;

         console.log(age);

         //变量提升的变形

         var user = '小丽丽';

         // 存在变量提升，在局部变量未定义的情况下，本应该找全局变量，但是他还是显示undefined。函数内部改变全局变量，输出还会去找前面的全局变量。注释掉变量申明，还是会去找前面的全局变量。

         function demo() {

             console.log(user); //undefined  变量提升

             var user = '大丽丽'; //声明局部变量 user

         }

         demo();

     </script>

 </body>

 </html>

变量提升

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>作用域链</title>

 </head>

 <body>

     <h1>同志交友</h1>

     <hr>

     <script>

         var age = 10; //全局  哪都能用

         //demo在全局作用域中

         function demo() {

             //再次声明age

             var age = 100;

             //嵌套函数

             function fn() {

                 var age = 1000;

                 //再嵌套函数

                 function my() {

                     console.log(age)

                     var age = 10000;

                     var address = '上海'; //在my函数的作用域中

                 }

                 my(); //调用函数

                 // 会报错，找不到作用域

                 console.log(address); //fn函数的作用域

             }

             fn();

         }

         demo();

     </script>

 </body>

 </html>

作用域链

1.4 闭包

通常需要函数中返回一个函数
目的把一个局部作用域的数据让外层的作用域使用

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>闭包</title>

 </head>

 <body>

     <script>

         function demo () {

             function fn() {

                 //这个作用域的 值

                 // 通过闭包的形式， 让外层作用域 可以使用

                 return 100;

             }

             return fn;

         }

         console.log(demo()())

     </script>

 </body>

 </html>

闭包

1.5 ES6 新增一块状作用域

let关键字也可以声明变量，同var一样
但是let关键字声明的变量，会在结构语句中产生块状作用域
ES6建议使用let代替 var

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>块状作用域</title>

 </head>

 <body>

     <script>

         for (var i = 1; i <= 10; i ++) {

             console.log(i);

         }

         console.log('');

         console.log(i); // i 在全局作用域

         console.log('');

         for (let a = 1; a <= 3; a ++) {

             console.log(a);

         }

         console.log('');

         //console.log(a);  //报错  a不是全局变量 let 定义的a在块状作用域

         console.log('');

         let username = '小丽丽'; //全局作用域

         function demo() {

             // console.log(age);age is not defined

             let age = 100; //局部作用域

             // console.log(age)

         }

         // console.log(age); 报错 age未定义

         demo();

         //所有的 结构语句  for while do while  if switch  都有块状作用域

         if (true) {

             let b = 1000;

             console.log(b)

         }

         //console.log(b)

     </script>

 </body>

 </html>

块状作用域

2. JS对象

2.1 构造函数和对象

构造就是类
function User([参数]) {
    this.属性 = 值;
    this.属性 = 值;
    
    this.方法 = function(){
        
    }
}

#实例一个对象
new 构造函数();
如果构造函数没有参数 可以 不加()

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>类和对象</title>

 </head>

 <body>

     <h1>类(构造函数)和对象</h1>

     <hr>

     <script>

         //构造函数 就是 类

         //定义一个 构造函数 跟函数 一模一样

         function User(name, age) {

             //声明对象的属性

             this.userName = name;

             this.userAge = age;

             //声明一下对象 的方法

             this.getInfo = function(){

                 console.log('姓名：'+this.userName+', 年龄：'+this.userAge+'<br>')

             }

         }

         //实例化对象

         var a = new User('小芳', 17);

         console.log(a);

         //使用对象的属性

         console.log(a.userName);

         console.log(a.userAge);

         //调用对象的方法

         a.getInfo();

         //一个构造函数(类) 能够实例化成多个对象

         var b = new User('小红', 18);

         b.getInfo();

     </script>

 </body>

 </html>

构造函数和对象

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>构造函数</title>

 </head>

 <body>

     <h1>系统内置的构造函数</h1>

     <hr>

     <script>

         //一切皆对象  每个对象都有与之对应的构造函数

         // 所有的对象 都有一个属性 .constructor   (继承来的)

         function User() {

         }

         let u = new User();

         // 对象u的构造函数： function User() {

         // }

         //         字符串对象的构造函数： function String() { [native code] }

         // 08-构造函数.html:24 布尔值对象的构造函数： function Boolean() { [native code] }

         // 08-构造函数.html:25 数字对象的构造函数： function Number() { [native code] }

         // 08-构造函数.html:26 数字对象的构造函数： function String() { [native code] }

         console.log('对象u的构造函数： '+u.constructor);

         console.log('字符串对象的构造函数： ' + 'abc'.constructor);

         console.log('布尔值对象的构造函数： ' + true.constructor);

         console.log('数字对象的构造函数： ' + (12).constructor);

         console.log('数字对象的构造函数： ' + ('12').constructor);

     </script>

 </body>

 </html>

查看对象构造函数

2.2 JS原型和原型链

原型

每个对象都有原型（原型仍然是一个对象）
对象可以继承原型的属性和方法
__proto__ 所有对象都有该属性，该属性指向该对象的原型

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>原型</title>

 </head>

 <body>

     <h1>同志交友</h1>

     <hr>

     <script>

         function User(){

             this.name = '小丽丽';

         }

         let u = new User();

         console.log(u);

         console.log(u.__proto__);

         console.log(u.__proto__.__proto__);

         console.log(u.__proto__.__proto__.__proto__);

         console.log(u.name);

         console.log(u.toString); //来自原型

         console.log(u.valueOf);

         //再定义一个对象 Object是系统内置的构造函数

         var a = new Object();

         // console.log(a.constructor)  //object

         a.__proto__ = u;

         console.log(a)

         console.log(a.name)

         /*

             User.prototype = 普通对象

             u.__proto__

         */

         //__proto__ 该属性

     </script>

 </body>

 </html>

js原型

原型链

原型作为对象也有原型
原型的原型的原型就构成了原型链
使用对象中某个属性的时候，先从对象中找，如果没有，从原型上找，原型如果也没有，继续向上找，知道顶层（顶层的原型对象是一个类型(类)(构造函数)是Object 的对象）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Object</title>

 </head>

 <body>

     <script>

         //系统内建的构造函数 Object

         var o = new Object();

         //创建好对象之后，再给对象添加属性和方法

         o.name = '小丽丽';

         o.age = 10;

         o.getInfo = function(){

             console.log(this.name, this.age)

         }

         console.log(o)

         console.log(o.name)

         console.log(o.age)

         o.getInfo()

         var o1 = new Object();

         //o1.__proto__ = o;

         console.log(o1);

         console.log('');

         //实例化一个 Object类 的对象   简写

         // python的key这里叫属性

         var data = {'name':'小丽丽', age:19, address:'上海', getInfo:function(){

             console.log('getInfo');

         }}; //python的字典

         data.grade = '11';

         console.log(data.constructor);

         console.log(data);

         console.log(data.name);

         data.getInfo();

         //声明对象的时候 属性可以不加引号。 但是有些情况必须要加(属性名)

         var content = {

             name: '小芳',

             age:100,

             'user-name':'丽丽',

             user_name:'大丽丽'

         };

         console.log(content);

         //调用属性

         console.log(content.name)

         console.log(content.user_name)

         console.log(content['user-name'])

         console.log(content['name'])

         //所有的属性 都可以通过 [] 调用

         var b = 123;

         console.log(b['constructor'])

         console.log(content["user-name"])

         console.log(content[user-name])//必须加引号 否则中间-会被认为是减号

     </script>

 </body>

 </html>

Object

2.4 JS对象属性的调用

.  点
obj.name
obj.age

[] 中括号
obj['name']
obj['age']
obj['user-name']


任意的对象 都可以在对象实例化完成后， 添加属性和方法

2.4 Object 构造函数

js内建的构造方法 叫 Object
var obj = new Object()


josn方式定义对象
var obj = {属性：值, 属性:值}   // new Object的简写
obj的构造含 是 Object

3. 实用技巧

3.1 从页面中获取元素

document.getElementById()   根据ID的值
document.getElementsByTagName()   根据标签名 
document.getElmenntsByClassName()  根据class的值
document.getElementsByName()  根据name属性的值
document.querySelector(css选择器)  返回满足条件的第一个 元素对象
document.querySelectorAll(css选择器)   返回所有满足条件元素组成的 类数组对象

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>获取页面元素</title>

 </head>

 <body>

     <h1>同志交友</h1>

     <hr>

     <ul class="news-list">

         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>

         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>

         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>

         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>

         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>

     </ul>

     <div id="box"></div>

     <script>

         //使用js 获取页面中元素对象

         var boxEle = document.querySelector('#box');

         console.dir(boxEle);

         var li = document.querySelector('.news-list li');

         console.log(li);

         li.innerHTML = '哈哈哈，我是第一个';

         //获取所有的li元素 返回一个类数组对象  类数组对象的每个成员才是元素对象

         var lis = document.querySelectorAll('.news-list li');

         //console.log(lis);

         //改变所有 li 元素的内的 内容

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

             lis[i].innerHTML = '哈哈哈'+i;

         }

     </script>

 </body>

 </html>

从页面中获取元素

3.2 给元素绑定事件

先获取元素
ele.onclick = function(){
    
}

获取元素的类数组对象， 遍历，挨个给每个元素绑定事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>给元素绑定事件</title>

     <style>

         .list {

             list-style: none;

             padding: 0;

             margin: 0;

             width: 600px;

         }

         .list li {

             padding:10px;

             margin:5px 0px;

             border: 1px solid #ccc;

         }

         #btn {

             border:1px solid #ccc;

             padding:10px 20px;

             background: #f5f5f5;

         }

     </style>

 </head>

 <body>

     <h1>同志交友</h1>

     <hr>

     <button id="btn">点我</button>

     <ul class="list">

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

     </ul>

     <script>

         //要给btn绑定元素

         var btn = document.querySelector('#btn');

         //绑定事件

         btn.onclick = function(){

             this.innerHTML = '好疼';

         }

         //给每个 li元素都绑定事件

         var lis = document.querySelectorAll('.list li');

         //遍历，给每个元素绑定事件

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

             lis[i].onclick = function(){

                 //this表示 目前点的这个元素

                 // this.innerHTML = '我被点了';

                 lis[i].innerHTML = '我被点了';

                 //console.log(i)

             }

         }

     </script>

 </body>

 </html>

给元素绑定事件

3.3 修改元素的CSS样式

ele.style.css属性名
ele.style.background
ele.style.border
ele.style.backgroundColor
ele.style['background-color']

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>给元素绑定事件</title>

     <style>

         .list {

             list-style: none;

             padding: 0;

             margin: 0;

             width: 600px;

         }

         .list li {

             padding:10px;

             margin:5px 0px;

             border: 1px solid #ccc;

         }

         #btn {

             border:1px solid #ccc;

             padding:10px 20px;

             background: #f5f5f5;

         }

     </style>

 </head>

 <body>

     <h1 >同志交友</h1>

     <hr>

     <button id="btn" style="padding:10px">点我</button>

     <ul class="list">

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

         <li>Lorem ipsum dolor sit amet.</li>

     </ul>

     <script>

         //获取所有li的集合

         var lis = document.querySelectorAll('.list li');

         //遍历 给每个li 绑定单击事件

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

             lis[i].onclick = function(){

                 //this.style.border = '1px solid red';

                 //this.style['border-color'] = 'red';

                 this.style.borderColor = 'orange'; //所有带-的css属性 映射 为 小驼峰命名法

                 this.style.background = '#ccc';

             }

         }

         //获取元素的css 属性值

         var btn = document.querySelector("#btn");

         console.log(btn.style.padding)

     </script>

 </body>

 </html>

修改元素css样式

3.4 设置元素的class值

ele.className 可以赋值，也可以获取
ele.classList.add(‘值’) 添加一个class值
ele.classList.remove(‘值’) 删除一个class值
ele.classList.toggle(‘值’)  自动切换一个class值(有就删除，没有就添加)

3.5 事件

onclick         单击
ondblclick      双击
oncontextmenu   右击
onmouseover/onmouseenter       鼠标悬浮到元素上
onmouseout/onmouseleave        鼠标离开元素
onmousemove   鼠标在上面移动
onmousedown   鼠标的按键按下
onmouseup     鼠标的按键抬起

3.6 JS定时

单次定时

setTimeout(fn, delay)
clearTimeout()  清除定时

多次定时

setInterval(fn, dealy)
clearInterval()  清除定时

总结

1. 作用域

2. 对象

构造函数实例化对象
对象的原型原型链

3 Object 类型

类似于python的字典
键值对

作页

进度条效果
倒计时效果（选做）（距离世界末日还有 23天1小时4分2秒）

js作用域及对象以及一些常用技巧的更多相关文章

JS内置对象-Array之常用API
oracle存储过程常用技巧
我们在进行pl/sql编程时打交道最多的就是存储过程了.存储过程的结构是非常的简单的,我们在这里除了学习存储过程的基本结构外,还会学习编写存储过程时相关的一些实用的知识.如:游标的处理,异常的处理,集 ...
js作用域对象与运用技巧
1. JS作用域 1.1 全局作用域和局部作用域函数外面声明的就是全局作用域函数内是局部作用域全局变量可以直接在函数内修改和使用变量,使用var是声明,没有var是使用变量. 如果在函数内使 ...
JS~~~ 前端开发一些常用技巧模块化结构 &&&&& 命名空间处理奇技淫巧！！！！！！
前端开发一些常用技巧模块化结构 &&&&& 命名空间处理奇技淫巧!!!!!!2016-09-29 17 ...
JavaScript函数作用域与对象以及实用技巧
1. JS作用域 1.1 全局作用域和局部作用域函数外面声明的就是全局作用域函数内是局部作用域全局变量可以直接在函数内修改和使用变量,使用var是声明,没有var是使用变量. 如果在函数内使 ...
Js常用技巧
摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...
js进阶-9-3/4 form对象有哪些常用属性
js进阶-9-3/4 form对象有哪些常用属性一.总结一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...
#9.6课堂JS总结#变量作用域 date()对象 math()对象
一.变量的作用域 1.JavaScript的作用域链首先看下下面这段代码: <script type="text/javascript"> var rain = 1; ...
js内置对象的常用属性和方法（Array | String | Date | Math）
js内置对象:Array String Math Date <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

HihoCoder 1570 : 小Hi与法阵（简单几何）
描述小Hi喜欢大,而小Ho喜欢小.他们所在的城市(视为二维平面)有N座法阵.现在他们各选三座法阵,以三座法阵为顶点组成三角形,并站在所选三角形的重心位置:二人选择的法阵可以有相同的.小Hi选择面积最 ...
杂文笔记《Redis在万亿级日访问量下的中断优化》
杂文笔记<Redis在万亿级日访问量下的中断优化> Redis在万亿级日访问量下的中断优化 https://mp.weixin.qq.com/s?__biz=MjM5ODI5Njc2MA= ...
UNP总结 Chapter 12~14 IPv4与IPv6的互操作性、守护进程和inet超级服务器、高级I/O函数
一.IPv4与IPv6的互操作性 1.IPv4客户与IPv6服务器拥有双重协议栈的主机的一个基本特性就是:其上运行的IPv6服务器既能应付IPv4客户,又能应付IPv6客户.这是通过使用IPv4映射 ...
CF 809D Hitchhiking in the Baltic States——splay+dp
题目:http://codeforces.com/contest/809/problem/D 如果值是固定的,新加入一个值,可以让第一个值大于它的那个长度的值等于它. 如今值是一段区间,就对区间内的d ...
npm安装appium server路过的坑
1.因为appium服务器是用node.js开发的,所以第一步要安装nodejs. 安装后,系统默认配置的环境变量在C盘的用户目录下,为了避免以后下载的包都放在系统盘下, 配置npm下载的包存放目录和 ...
linux的grep命令参数全拼详解
今天为了查找文件中某段字符,找了好久,最后成功使用指令: find . -name "*.cpp" |xargs grep -in “get_itemInfo” | grep -v ...
Flex AIR操作文件系统
1.各种文件操作http://blog.csdn.net/zdingxin/article/details/6635376 2.file.browseForDirectory("请选择一个目 ...
CodeForces - 357C Knight Tournament 伪并查集（区间合并）
Knight Tournament Hooray! Berl II, the king of Berland is making a knight tournament. The king has a ...
使用SQL访问MongoDB
使用SQL访问MongoDB 简介使用SQL访问MongoDB有多种解决方案,就我所知的,除了今天要介绍的MongoDB Connector for BI外,还有Studio 3T,但后者只有在企业 ...
死磕 java同步系列之volatile解析
问题 (1)volatile是如何保证可见性的? (2)volatile是如何禁止重排序的? (3)volatile的实现原理? (4)volatile的缺陷? 简介 volatile可以说是Java ...

js作用域及对象以及一些常用技巧

回顾

流程控制（语句）

分支

循环

其他语句

函数

定义方式

参数

返回值

回调函数

自调函数

笔记

1. JS作用域

1.1 全局作用域和局部作用域

1.2 变量提升

1.3 作用域链

1.4 闭包

1.5 ES6 新增一 块状作用域

2. JS对象

2.1 构造函数和对象

2.2 JS原型和原型链

原型

原型链

2.4 JS对象属性的调用

2.4 Object 构造函数

3. 实用技巧

3.1 从页面中获取元素

3.2 给元素绑定事件

3.3 修改元素的CSS样式

3.4 设置元素的class值

3.5 事件

3.6 JS定时

单次定时

多次定时

总结

1. 作用域

2. 对象

3 Object 类型

作页

js作用域及对象以及一些常用技巧的更多相关文章

随机推荐

热门专题

1.5 ES6 新增一块状作用域