notes-JavaScript-JavaScript极速入门_玉女心经系列 网址：http://www.php.cn

于 2019-10-08 14:24:40 发布
阅读量8.8k 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33356398/article/details/102383234
版权

JavaScript极速入门_玉女心经系列
网址：http://www.php.cn
第1章 JAVASCRIPT基本概念（极速入门）
1-1 JavaScript概述

1-2 JavaScript引入及注释

1.`<script type="text/javascript"> document.write("欢迎来到PHP中文网");` 
//输出语句document.write，相当于HTML的<p>标签 </script>

2.js代码嵌入方法：
a.标签内或者是标签内都可以
b.js文件越来越庞大的时候，最好用独立js文件，通过src引入

3.独立的js文件里面只需要写

1-3 JavaScript的基础语法（标识符 / 变量）
1.浏览器开发者模式的console下可以实时编辑查看js代码及效果
2.var 声明变量，后面紧跟变量名
js基础语法
1.书写方面语法
a.区分大小写
b.行结束符，用分号;作为一行代码的分隔符，可以没有
c.注释：单行//,多行/* */
2.标识符
所谓标识符，就是指变量、函数的名字，或者函数的参数名。标识符可以是下列格式规则组合起来的一或多个字符：
a.第一字符必须是一个字母、下划线_或一个美元符号$
b.其他字符可以是字母、下划线、美元符号或数字
c.不能把关键字、保留字、true、false和null作为标识符
d.关键字和保留字有：break,var,new,case,finally,return,else,catch,for,switch,while,continue,function,delete,in,try,with,if,default,throw,do,void,this,typeof,instanceof
3.变量
(1)变量的概念
简单来说，变量就是存储数据的空间，可以理解为存储数据的容器。数据在器作用域是可以改变的。javascript的变量是弱类型的，所谓弱变量就是用来保存任何类型的数据
(2)变量的声明
定义变量时要用var操作符，后面跟一个变量名 var x;//一个变量声明。变量名必须是：英文或者下横线，$,开头 var y,z//2个变量声明
(3)变量的赋值

var a=3;//将数字3赋值给变量a
var b="abc";//将字符串abc赋值给变量b 
b=4/a;//把4除以a的值，赋值给变量b

4.通过浏览器的开发者工具的console可以直接写js代码，代码不会写入源代码文件中
5.字符串可以用单引号或者是双引号
6.在console里面写js代码，按回车，然后输入已经定义的变量名，按回车，显示变量的值
7.一次声明多个变量时，中间用逗号隔开
1-4 JavaScript数据类型

类型类型描述
UndefinedUndefined 这个值表示变量不含有值
NullNull类型是一个只有一个值的数据类型（可以通过将变量的值设置为 null 来清空变量）
字符串（string）字符串是存储字符的变量，字符串可以是引号中的任意文本（单引号或双引号）
数字（number）JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
布尔（boolean）布尔（逻辑）只能有两个值：true 或 false（布尔常用在条件测试中）
对象（object）对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义
注：JavaScript 拥有动态类型，这意味着相同的变量可用作不同的类型。
  1. typeof可以查看变量的类型
    2.一个变量将来要用的话，可以设置值为null
    js数据类型
    1.undefined
    undefined 这个值表示变量不含义值 当变量被定义，并没有赋值时，被定义的变量的值是undefined
  2. Null
    Null类型是一个只有一个值的数据类型（可以通过将变量的值设置为null来清空变量） 当变量赋值为null时，用typeof检测返回结果是object，原因是Null类型表示的是一个空的对象指针 作用是如果要定义一个变量来保存对象的，可以把变量初始化为null
    3.string字符串
    字符串是存储字符的变量，字符串可以是引号中的任意文本（单引号或双引号）
    4.数字Number
    javascript只有一种数字类型。数字可以带小数点，可以不带，正数或者负数都返回number类型
    5.boolean布尔 两个值：true,false。（条件测试用，判断）比如x==4,false x<z(前提是z的值>x) true
    6.object对象
    对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式{name:value}来定义，是拥有属性和方法的类型 例如：var obj=new object() typeof obj //返回object类型
    7.数组类型array
    8.函数类型
    JavaScript拥有动态类型，这意味着相同的变量可用作不同的类型
    1.在console中用typeof+变量名（例如：var x=123 typeof x）来检测变量数据类型
    1-5 JavaScript中数据类型的相互转化

JS中数据类型相互转化

函数函数描述
string()将数据转化成字符串类型
number()将数据转化成number类型
parseInt()只取整数部分，忽略小数部分（从第一个字符开始查找，找到非数字截止 并返回找到的数字）
parseFloat()会把小数部分也取到
boolean()转化为布尔型
  1. null和undefined类型不能够转换成string类型
    js中数据类型相互转化
    1.string()
    将数据转化成字符串类型 例如：string(123) //把number类型转化成字符串类型 var a=123; var b=string(a); typeof b //结果为string，注意：undefined和null无法转化成string类型 2.number()
    将数据转化成number类型 Number(‘php.cn’) NaN //字符串类型转化返回结果 Number(‘123455’) string //字符串类型的数字转换会完全输出数字，结果为123455 空字符串""和Null类型转换返回0，undefined转换返回NaN,布尔型true返回1，false返回0
    3.parseInt()
    只取整数部分，忽略小数部分（从第一个字符开始查找，找到非数字截止并返回找到的 数字） parseInt(“123php.cn”) //返回结果：123，只取转换类型的数字部分，从第一个字符开始查找， 找到非数字截止并返回找到的数字 注意：如果字符串里内容开头不是数字，则返回NaN
    4.parseFloat()
    会把小数部分也取到,即parseInt()增强，能包括小数 parseFloat(“12.3php.cn”) //结果返回12.3
    5.boolean()
    转化为布尔型 Boolean(“123”) //返回结果true var a=123; var b=Boolean(a) typeof b //返回结果为boolean
    1-6 JavaScript中运算符概述
    1.+既是运算符也是字符串连接符，两端都是数字时是运算符
    js运算符
  2. 算术运算符
      • / % ++ –
        其中+号既是运算符，也算字符串连接符。两端都是数字，就是运算符 1+7=8 //两端都是数字，+号的作用是运算符 ‘php.cn’+9 ‘php.cn9’ //非数字时，是字符串连接符
        2.赋值运算符
        = += -= *= /= %=
  1. 比较运算符
    == === != > < >= <=
  2. 逻辑运算符
    &&(and,并且，全为真时为真，一个假全为假) ||(or,或者,有一个为真时为真) !(取反)
    1-7 JavaScript的数组类型（Array）
  3. js中所有事务都是对象，array当然也是对象
    js数组类型array
var a=new Array(20); //返回结果： (20)[empty * 20]

20不是元素，是数组的长度,empty为空 var b=new Array(“jack”,“fier”,“jun”)
//返回结果： (3)[“jack”,“fier”,“jun”]
先显示数组长度，然后显示数组元素
b[0] //访问数组b的第一个元素并显示

var c=Array("jack","fier","jun") //返回结果： (3)["jack","fier","jun"]

先显示数组长度，然后显示数组元素,可以省略new声明字符
数组字面量声明：
//字符串元素声明 var a=[‘red’,‘pinl’,‘blue’] //返回结果： (3)[“red”,“pink”,“blue”] 先显示数组长度，然后显示数组元素
//数字元素声明 var b=[1’2’3,4] //返回结果：(4)[1,2,3,4]
//空数组 var c=[] //返回结果：[],即返回一个空数组
第2章 JAVASCRIPT常用系统方法
2-1 JavaScript中字符串操作方法
JavaScript字符串操作方法

方法描述
charAt ()该方法可返回指定位置的字符
indexOf()该方法可返回某个指定的字符串值在字符串中首次出现的位置
replace()该方法用于在字符串中用一些字符替换另一些字符（或替换一个与正则表达式匹配的子串）
concat()该方法用于连接两个或多个字符串
substr ( start,length)该方法可在字符串中抽取从 start 下标开始的指定数目的字符（可以使用负值）
substring (start,stop)该方法用于提取字符串中介于两个指定下标之间的字符
注：string对象的属性：length
  1. indexof检索中没有该值，返回-1，对大小写敏感
    js字符串操作方法
    1.charAt()
    该方法可返回指定位置的字符(按下标0开始找)空格也算占一个
 var a="hello php.cn" a.charAt(4) //结果：o

2.indexOf()
该方法可返回某个指定的字符串值在字符串中首次出现的位置，对大小写敏感 注意该方法是从头开始寻找

var a="hello php.cn" a.indexOf("p") //括号内放要找的字符，寻找是从头开始
 a.indexOf("p",2) //从指定起始位置寻找指定字符，但返回结果也算按从头开始到指定字符的长度

3.replace()
该方法用于在字符串中用一些字符替换另一些字符（或替换一个与正则表达式匹配的子串）

a.replace(/hello/,"你好") //回车返回替换后的结果

4.concat()
该方法用于连接两个或多个字符串 var a=“hello php.cn” var b=“你好”,c=“我是小师太” a.concat(b) //返回结果：“hello php.cn你好”， a.concat(b,c) //连接多个字符串用逗号隔开 5.substr(start,length)
该方法可在字符串中抽取从start下标开始的指定数目的字符（可以使用负值） var a=“hello php.cn” a.substr(3) //返回结果：“lo php.cn”，指定起始位置开始显示，下标从0开始 a.substr(3,4) //返回结果：“lo p”，从下标3开始显示，显示4个长度的字符 a.substr(-1) //返回结果：n ，负值是从后面往前面寻找字符 a.substr(-2) //返回结果：c
6.substring(start,stop)
该方法用于提取字符串中介于两个指定下标之间的字符 var a=“hello php.cn” a.substring(3) //返回结果：“lo php.cn”， a.substring(3,7) //返回结果：“lo p”，即起始于下标3，终止于顺数第7个字符（不是下标）
7.string有length属性
2-2 JavaScript数组操作方法

  1. array对象的属性：length
var a=[1,2,3,4]
undefined
a.length
4
b=[]
[]
b.length
0
  1. concat()连接两个或更多的数组，并返回结果
var a=[1,2,3,4]
undefined
a.concat("liuli",1)
(6) [1, 2, 3, 4, "liuli", 1]

2-3 JavaScript日期操作方法

  1. 创建日期对象方法
var a=new Date()
undefined
a
Wed Aug 29 2018 10:00:09 GMT+0800 (中国标准时间)
  1. getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)
a.getDate()
29
  1. getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)
a.getDay()
3

注：周日是返回0
4. getMonth()从 Date 对象返回月份 (0 ~ 11)
a.getMonth()
7
注：1月是0,12月是11
5. setDate()设置 Date 对象中月的某一天 (1 ~ 31)

a.setDate(3)
1533261609910
a
Fri Aug 03 2018 10:00:09 GMT+0800 (中国标准时间)

注：返回的是1970年1月1日零点至今的毫秒数1533261609910，日期已变成3
6. toLocaleString()根据本地时间格式，把 Date 对象转换为字符串
a.toLocaleString()
“2018/8/29 上午10:25:38”
第3章 JAVASCRIPT流程控制语句
3-1 条件控制语句if…else…

if(){
}
else if(){
}
else{
}
注：全部小写

3-2 多分支switch语句

switch(n)
{
case 1:
  执行代码块1
  break;
case 2:
  执行代码块2
  break;
…
}

注：n通常为变量，break是阻止代码向下一个case运行，如果已经匹配到相应值，
example：

var day=new Date().getDay();
swith(day)
{
case  1:
  x=”今天是周一”;
  break;
case  2:
x=”今天是周二”;
  break;
…
}

注：default来规定匹配不存在执行的事情，

switch(n)
{
case 1:
  执行代码块1
  break;
case 2:
  执行代码块2
  break;
default:
  n与case1和case2不同时执行的代码
}

3-3 for循环语句
语法：

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }
语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
注：for循环里面的循环条件不满足之后才会跳出循环，执行代码块
for循环什么时候每次执行内部代码，什么时候只执行代码？？？
var a=0
        for (i=1;i<=100;i++){
            a++
            document.write(a+"<br />")
        }
输出的是：
1
2
3
…
100

3-4 while循环语句
while 结构循环一般用于不知道循环次数的情况
维持循环的是一个条件表达式，条件成立执行循环体，条件不成立退出循环。
while语句是一种先判断，后运行的循环语句，也就是说，必须满足条件了之后，方可运行循环体。
语法：
while (条件)
{
需要执行的代码
}

  • 每次执行循环体前都要对条件表达式进行判断这里的表达式是循环能否继续下去的条件，而语句是循环体。
    只要表达式为真，则执行循环体内语句。否则终止循环，执行循环体外语句
    while里面的条件是一个表达式
var a=1
while(a<=5){
  document.write(a+”<br>”)
  a++
}

输出的是：
1
2
3
4
5
3-5 do while循环语句
先执行一次代码块，然后再判断条件是否为真，while循环是直接先判断
do…while 语句结构为直到型循环(until type loop)，通常用于不知道循环次数的情况。
语法：
do{
循环体；
}while(条件表达式)

  • 每执行完一次循环体，do…while结构都要判断一下条件表达式。程序进入do while循环后，先执行循环体内语句，然后判断表达式的真假，若为真则进行，下一次循环，否则为假则终止循环。该循环语句的特点是，表达式为假时也执行一次循环体内语句。
var a=1
do{
   document.write(a+”<br>”)
   a++
}while(a<=10)

输出的是：
1
…
10
3-6 break与continue语句
break：语句用于跳出循环
continue：用于跳过循环中的一个迭代
代码：

for (i=0;i<10;i++){
        document.write('the number is'+i+"<br>")
}

输出为：
the number is0
the number is1
the number is2
the number is3
the number is4
the number is5
the number is6
the number is7
the number is8
the number is9
代码：

for (i=0;i<10;i++){
        if (i==3){break}
        document.write('the number is'+i+"<br>")
}

输出为：
the number is0
the number is1
the number is2
当if语句中只有一行代码时可以省略{}
代码：

for (i=0;i<10;i++){
        if (i==3)continue
        document.write('the number is'+i+"<br>")
}

输出结果：
the number is0
the number is1
the number is2
the number is4
the number is5
the number is6
the number is7
the number is8
the number is9
continue只是中止当前的一个循环，循环依然继续
第4章 JAVASCRIPT中的函数与对象
4-1 function函数
声明：
function 函数名(参数)
{
这里是要执行的代码
}
代码：

   //不带参数的函数
//声明函数
    function hello() {
        document.write("函数声明")
    }
    //函数调用
hello()

输出结果：
函数调用
代码：

//声明带参数的函数，参数之间用,隔开，函数内部可以使用参数
    function people(name,age) {
        document.write("你的名字:"+name+",年龄："+age)
    }
    //调用函数传参
people('美少女','17')

输出结果：
你的名字:美少女,年龄：17
//系统函数
console.log(‘猪八戒’)
alert(‘孙悟空！’)
alert和console.log区别！
简单的说alert 是弹出提示而console.log是在调试工具里打日志，下面具体给大家列出alert()与console.log()的不同点，
[1]alert()
[1.1]有阻塞作用，不点击确定，后续代码无法继续执行
[1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法
e.g. alert([1,2,3]);//‘1,2,3’
[1.3]alert不支持多个参数的写法,只能输出第一个值
e.g. alert(1,2,3);//1
[2]console.log()
[2.1]在打印台输出
[2.2]可以打印任何类型的数据
e.g. console.log([1,2,3]);//[1,2,3]
[2.3]支持多个参数的写法
e.g. console.log(1,2,3)// 1 2 3
[2.4]一般用于浏览器中调试

4-2 return语句
return语句是指定函数返回值，返回函数调用的地方
代码：

function a(x)
{return x}console.log(a(100))

输出：
100
代码：

function ex(x){
        return x
        x=5
        return x
    }
console.log(ex(100))

输出：
100
注：函数中遇到return之后便不会执行之后的代码，所有不会返回5，return只能出现在{}函数体内，在{}外会报错
代码：
//不带返回值的return

  function a(x)
{return }console.log(a(100))

输出：
undefined
注：undefined也是一个返回值
4-3 函数表达式
将函数作为一个值赋值给变量
可以将函数赋值给变量，c，d都可以代指该函数

function c(x){return x*x}
undefined
c(3)
9
var d=c
undefined
d(3)
9

可以将函数赋值给对象属性，该函数称为方法
使用对象直接量创建对象的一般格式如下：

var myobject = {属性名1:属性值1,属性2:属性值,...,属性名n:属性值n}
var m={n:function(x){return x*x}}//对象直接量
undefined
var q=m.n(7)
undefined
q
49
var x=[function(x){return x*x},30]//数组直接量
undefined
x[0](x[1])  //()里面是我们需要传的参数
900
函数不带名字，直接赋值给数组元素
var f=function(x){return x*x}
undefined
f
ƒ (x){return x*x}
f(5)
25

4-4 JavaScript中变量的作用域
变量的作用域指的是程序员代码中定义这个变量的区域，变量可以是全局和局部的，
声明在函数体外部的是全局变量，作用域是整个脚本，内部的是局部变量，作用域仅限于某个特定的函数，
代码：

//全局变量
    var a="global"
    function f() {
        //局部变量
        var b="lobal"
        return a+b
    }
f()

结果：
“globallobal”
在函数体内局部变量的优先级高于全局变量，

//全局变量
    var a="global"
    function f() {
        //局部变量
        var a="lobal"
        return a
    }
    f()

“lobal”
声明全局变量不必用var,局部变量必须用var,如果局部变量不用var且与全局变量变量名相同会改变全局变量的值，而不是覆盖，函数体内不用var操作符声明的变量是全局变量，而不是局部变量，

4-5 JavaScript中的对象
*概念：JavaScript 中的所有事物都是对象：字符串、数值、数组、函数… 对象是带有属性和方法的特殊数据类型
内置对象:
由ECMAScript规范定义的对象或者类，例如：数组、函数、日期和正则表达式都是内置对象
宿主对象:
由JavaScript解释器所嵌入的宿主环境（如web浏览器）定义的。客户端JavaScript中表示网页结构的HTMLElement对象均是宿主对象，既然宿主环境定义方法可以当成普通的JavaScript函数对象，那么宿主对象也可以当成是内置对象。
自定义对象:
由运行中的JavaScript代码创建的对象
两类属性：
自定义属性（OwnProperty） :直接在对象中定义的属性
继承属性（InheritedProperty） : 在对象的原型对象中定义的属性
通过new操作符来创建和初始化一个对象，new关键字后紧跟的是一个函数调用，这里的函数就成为构造函数，构造函数用于创建和初始化一个对象
对象中的方法和属性都是用点语法访问，属性就是对象相关的值，方法就是函数
对象名称.对象属性

var a=new Object()//创建了一个空对象
undefined
var hello="hello world！"
undefined
var x=hello.length
undefined
x
12

访问对象方法是可以在对象上执行一个动作，
对象名称.方法名称

var x=hello.indexOf("l")
undefined
x
2

4-6 对象中的三个属性
每一个对象都有与之相关的原型（prototype）、类（class）和可扩展性（extensible attribute）
原型属性
原型属性是用来继承属性的，并且是在实例对象创建之初就设置好了。
a.对象直接量创建的对象使用 Object.prototype作为它们的原型
b.通过new创建的对象使用构造函数的prototype 属性作为它们的原型
c.通过Object.create()创建的对象使用第一个参数（可为null）作为它们的原型
isPrototypeOf()用于检测一个对象是否是另一个对象的原型，也就是那个对象是否处于原型链中，
代码:

//定义一个原型对象
    var a={x:1}
    //使用这个原型创建了一个对象
    var b=Object.create(a)
    //检测a是否是b的原型
document.write(a.isPrototypeOf(b))

输出：
true
证明a是b的原型，否则返回false
类属性
对象的类属性是一个字符串，用以表示对象的类型信息。
classof()函数----该函数可以返回传递给它的任意对象的类（可以传入任何类型的参数并且包含了对null和undefined的特殊处理）
注：目前没有提供设置类属性的方法，只能够间接查询，使用默认的toString()方法，toString()继承于Object.prototype，用call方法来调用Object.prototype方法，call()内部传的是参数是我们需要调用的某个对象，classof(x)里面的x，classof()内部可以传入任意类型的参数，
代码：

function classof(x) {
        document.write(Object.prototype.toString().call(x))
    }
classof(1)

输出：
[object Number]
可扩展性
对象的可扩展性用以表示是否可以给对象添加新属性（内置对象和自定义对象都是可扩展的宿主对象的可扩展性是由JavaScript引擎定义的）
Object.isExtensible() 判断对象是否是可扩展的
Object.preventExtensions() 将对象转换为不可扩展的
Object.seal() 将对象设置为不可扩展并且对象中所有自有属性都设置为不可匹配（封闭对象（sealed））
Object.freeze() 将对象设置为不可扩展 对象中所有自有属性都设置为不可匹 配并且所有数据属性都设置为只读（严格锁定对象–冻结 （Frozen））
Object.isSealed() 用来检测对象是否封闭
Object.isFrozen() 用来检测对象是否动冻结
代码：

var a={x:1}
document.write(Object.isExtensible(a))

输出：
true
4-7 JavaScript中对象的常见用法（上）
对象的常见用法：创建（create）、设置（set）、查找（query）、删除（delete）、检测（test）和枚举（enumerate）它的属性
创建对象（create）:

//对象直接量
var empty={} //没有属性的对象
var point={x:o,y:o} //拥有2个属性的对象
//整个映射表是在{}中，属性名可以是JavaScript标识符，字符串的直接量，{}内部也可以是空的，创建一个空的对象，没有任何属性，属性值可以是任意JavaScript表达式，表达式的值可以是原始值和对象值，
//通过new创建对象
var a=new Object () //创建一个空的对象，其中Object ()是一个构造函数，构造函数可以初始化并新创建一个对象，注意JavaScript中的语言核心暗中都包含有构造函数，
var d=new Date()//当前时间的Date对象

//Object.create()
var obj= Object.create ({x:1.y:2}) 
//obj继承了属性x和y，Object.create()是一个静态函数，不是提供给某个对象调用的方法，使用它只需要传入原生对象即可，
var obj2=Object.create (null) 
//obj2不继承任何属性和方法，创建了一个没有原型的对象

设置（set）与查找（query）:
可以通过（.）和方括号（[ ]）运算符来获取属性的值
对于（.）来说，右侧必须是一个以属性名称命名的简单标识符；
对于（[ ]）来说，方括号内部必须是一个计算结果为字符串的表达式，这个字符串就是属性名称；（如下）

var  a = book . a //得到book的 ”a” 属性
var  name = a . surname //得到获得 a 的 ”surname” 属性
var title = book ['name'] //得到book的“name”属性

与查询属性值写法一样，我们可以通过（.）和（[ ]）创建属性或者给属性赋值但是需要将它放在赋值表达式的左侧。（如下）

book . a  = 5//给book创建一个名为a的属性
book ['name'] = 'surname'//name 属性赋值

测试：
查找

var person={name:"liuli",lname:"daxian",age:88}
undefined
person.lname
"daxian"
person["name"]
"liuli"

设置

var person={name:"liuli",lname:"daxian",age:88}
undefined
person.sex="nan"
"nan"
person
{name: "liuli", lname: "daxian", age: 88, sex: "nan"}
person['ssex']="不男不女"
"不男不女"
person
{name: "liuli", lname: "daxian", age: 88, sex: "nan", ssex: "不男不女"}

4-8 JavaScript中对象的常见用法（下）
删除（delete）
delete运算符可以删除对象的属性。(如下)

delete book . a //book不再有属性a
delete book[“main”] 
//book不再有属性“main”

注：delete只能够删除自由属性，不能够删除继承属性，删除继承属性，必须在继承的原型属性中删除，
检测（test）
我们通过 in运算符、hasOwnPreperty()和propertyIsEnumerable()方法来检测属性是否存在于某个对象中（如下）

var O={ x:1}
  “x” in O  //返回true,”x”是O的属性
  ”y” in O  //返回false,”y”不是是O的属性
  O.hasOwnProperty( “x”) //返回true
  O.hasOwnProperty( “y”) //返回false
  O.propertyIsEnumerable(“x”) //返回true
  O.propertyIsEnumerable(“y”) //返回false
  O.x!==undefined//返回true

枚举（enumerate）
表明是否可以通过for/in循环返回该属性，遍历所有属性，包括自有属性和继承属性
JavaScript 中for…in 语句循环遍历对象的属性（如下）

//循环遍历对象的属性
var person={fname:"Bill",lname:"Gates",age:56}
for (x in person)
  {
  txt = txt + person[x]//需要执行的代码
  }
//for...in 循环中的代码块将针对每个属性执行一次
var O={x:1,y:2,z:3} //可枚举的自有属性
O.propertyIsEnumerable(“toString”) //返回false，不可枚举
for(p in O)   //遍历属性
console.log(p) //输出x、y、z

代码:

var x
    var txt=""
    var person={fname:"Bill",lname:"Gates",age:56}
    for (x in person){
        //枚举属性名
        console.log(x)
        //找到属性值
        txt=txt+person[x]+";"
    }console.log(txt)
    //Object.keys返回对象属性名的数组
    console.log(Object.keys(person))
    //Object.getOwnPropertyNames返回对象所有自有属性名的数组
console.log(Object.getOwnPropertyNames(person))

输出：

fname
lname
age
Bill;Gates;56;
(3) […]
0: "fname"
1: "lname"
2: "age"
length: 3
__proto__: Array []
Array(3) [ "fname", "lname", "age" ]

4-9 JavaScript对象序列化

//JSON(JavaScript Object Notation, JS 对象简谱)
    // JSON.stringify()从一个对象中解析出字符串
// JSON.parse()从一个字符串中解析出json对象
var a={x:1,y:2,z:3}
undefined
JSON.stringify(a)
"{"x":1,"y":2,"z":3}"
JSON.parse(JSON.stringify(a))
{x: 1, y: 2, z: 3}

json语法是JavaScript语法的一个子集，JavaScript内部有一个函数eval可以将json对象转为JavaScript对象，

eval("2+3")

5

var person={"name":"liuli","lname":"daxian","age":88}
undefined
eval("person")
{name: "liuli", lname: "daxian", age: 88}
typeof(person)
"object"

4-10 JavaScript Number 对象
在 JavaScript 中，数字是一种基本的数据类型；Number对象是原始数值的包装对象。
创建 Number 对象的语法：

var myNum=new Number(value);
var myNum=Number(value);

参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值
返回值：
当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）

Number 对象方法:
方法	描述
toString()	把数字转换为字符串，使用指定的基数。
toLocaleString()	把数字转换为字符串，使用本地数字格式顺序。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toExponential()	把对象的值转换为指数计数法。
toPrecision()	把数字格式化为指定的长度。
valueOf()	返回一个 Number 对象的基本数字值。
MAX_VALUE	可表示的最大的数；//返回JavaScript中最大的数
MIN_VALUE	可表示的最小的数；
NaN	非数字值
NEGATIVE_INFINITY	
负无穷大，溢出时返回该值。
POSITIVE_INFINITY	
正无穷大，溢出时返回该值。

测试：

var a=new Number(1);
var b=Number(1);

undefined
a
Number {1}
b
1
a.valueOf()
1
var c=Number("1")
undefined
c
1
a.toString()
"1"
var d=new Number(1.2345)
undefined
b.toFixed(2)
"1.00"
d.toFixed(2)
"1.23"
d.toFixed(3)
"1.234"
var d=new Number(1.2375)
undefined
d.toFixed(3)
"1.238"
a.toExponential()
"1e+0"
a.toPrecision(4)
"1.000"
Number.MAX_VALUE
1.7976931348623157e+308

4-11 JavaScript Math 对象
在 JavaScript 中，Math 对象用于执行数学任务
使用 Math 的属性和方法的语法：

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数， 我们无需创建它只需把 Math 作为对象使用就可以调用其所有属性和方法

Math 对象属性：
属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法：
方法	描述
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
valueOf()	返回 Math 对象的原始值
abs(x)	返回数的绝对值。

测试：

var a=Math.PI
undefined
a
3.141592653589793
var b=Math.SQRT2
undefined
b
1.4142135623730951
Math.max(1,3,4,5,9,6)
9
Math.pow(2,3)
8
Math.random()
0.0874080118430165
Math.random()
0.9291775010562628
Math.abs(-12)
12

第5章 正则表达的模式匹配（REGEXP）
5-1 正则表达式（RegExp对象）

见PPT，最后
测试：

var a=/abc/
var b=new RegExp("abc")
undefined
Object.prototype.toString.call(a)
"[object RegExp]"
Object.prototype.toString.call(b)
"[object RegExp]"
a
/abc/
b
/abc/
a.source
"abc"
var c=/abcc/igm
undefined
c.ignoreCase
true
c.global
true
c.multiline
true

5-2 正则表达式中的方法
见PPT，最后
测试：

var a=/abc/
    var str1="abc1234567"
    var str2="xyz123"
    //a是需要检索的对象，str1是需要检索的字符串，str1中包含a,str2中不包含a
    console.log(a.test(str1))  //返回true
    console.log(a.test(str2))  //返回false
// (1) […]
//返回被找到的值     
// 0: "abc"
// 检索到的最开始的索引位置
// index: 0
// 被检索的字符串，即str1
// input: "abc1234567"
// 
// length: 1
// 
// __proto__: Array []
    console.log(a.exec(str1))
    //没有发现匹配，返回null
    console.log(a.exec(str2))
    //match和exec返回值相似
    console.log(str1.match(a))
    //match与exec的区别
    var reg=/abc/g
    var str="abc123abc456abc789"
    var r=/x/
    console.log(reg.exec(str))
//(1) […]
//     
// 0: "abc"
// 
// index: 0
// 
// input: "abc123abc456abc789"
// 
// length: 1
// 
// __proto__: Array []
    console.log(str.match(reg))
// (3) […]
//     
// 0: "abc"
// 
// 1: "abc"
// 
// 2: "abc"
// 
// length: 3
// 
// __proto__: Array []
    console.log(str.search(reg))  //返回0
    console.log(str.search(r))    //返回-1

5-3 正则表达式基础<1>元字符
见PPT，最后

^匹配字符串开头，一行的开头
$匹配字符串结尾，一行的结尾
.匹配除了换行符和终止符之外的任意字符
*匹配前一项的0次或多次
+匹配前一项的1次或多次
?匹配前一项的0次或1次
=表示匹配
!表示不匹配
|两者之间进行选择
\转义符
/正则表达式内容包括在/内部
()匹配子表达式的开始与结束的位置，内部放子表达式
[]匹配一个字符类的开始
{}表示限定符表达式的开始

测试：

var str='hello php中文网'
undefined
var a=/^hello/  //查看hello是否为字符串开头
undefined
a
/^hello/
a.test(str)
true
var b=/^php/  //查看php是否为字符串开头
undefined
b.test(str)
false
var c=/网$/  //网是否为字符串结尾
undefined
c
/网$/
c.test(str)
true
var d=/123|php/  //只要匹配到一个都是返回true
undefined
d.test(str)
true
//直接量字符，所有的字母和数字都是按照字面意思进行匹配，所有的字母和数字匹配到的字符都是自身，
undefined
var str1='hello \n php中文网'
undefined
var d=/\n/
undefined
d.test(str1)
true
//字符类，将直接量字符单独放在[]内，就组成字符类
undefined
var e=/[123p]/
undefined
e.exec(str)
["p", index: 6, input: "hello php中文网", groups: undefined]
var str1='hello\n php中文网'
undefined
var g=/\w/
undefined
g.exec(str1)
["h", index: 0, input: "hello↵ php中文网", groups: undefined]
/\W/.exec(str1)
["↵", index: 5, input: "hello↵ php中文网", groups: undefined]
/^123hellophp/.exec(str1)
null
/[^123hellophp]/.exec(str1)
["↵", index: 5, input: "hello↵ php中文网", groups: undefined]
var str1='我是hello\n php中文网'
undefined
/\b/.exec(str1)
["", index: 2, input: "我是hello↵ php中文网", groups: undefined]
/\B/.exec(str1)
["", index: 0, input: "我是hello↵ php中文网", groups: undefined]

5-4 正则表达式基础<2>
见PPT，最后
将直接量字符单独放进[]中就组成字符类，一个字符类可以匹配它所包含的任意一个字符，[]就是用于查找某个范围内的字符，
Chrome本来就支持多行模式。
一行模式直接按回车就会执行并输出结果。如果多行模式就按shfit+回车键 等你输入完了再回车就行了。希望能帮到你。
总结一句话：shfit+回车键 就是多行js模式
测试：

 var str="Hello World! Welcome to php.cn123"
    var a=/[0-9]/
    var b=/[a-z]/
    var c=/[A-Z]/
    var d=/[a-zA-Z0-9]/
undefined
a.exec(str)
["1", index: 30, input: "Hello World! Welcome to php.cn123", groups: undefined]
b.exec(str)
["e", index: 1, input: "Hello World! Welcome to php.cn123", groups: undefined]
c.exec(str)
["H", index: 0, input: "Hello World! Welcome to php.cn123", groups: undefined]
d.exec(str)
["H", index: 0, input: "Hello World! Welcome to php.cn123", groups: undefined]
var str1="Hello World! Welcome to php.cn123"
undefined
var aa=/l+/    //全局匹配
undefined
str1.match(aa)
["ll", index: 2, input: "Hello World! Welcome to php.cn123", groups: undefined]
var a1=/l+/g    //全局匹配
str1.match(a1)
(3) ["ll", "l", "l"]
var b1=/\w/g    //全局匹配
str1.match(b1)
(27) ["H", "e", "l", "l", "o", "W", "o", "r", "l", "d", "W", "e", "l", "c", "o", "m", "e", "t", "o", "p", "h", "p", "c", "n", "1", "2", "3"]
var b1=/\w+/g    //全局匹配
str1.match(b1)
(6) ["Hello", "World", "Welcome", "to", "php", "cn123"]
var c1=/lo*/g
str1.match(c1)
(4) ["l", "lo", "l", "l"]
var c1=/lo?/g
str1.match(c1)
(4) ["l", "lo", "l", "l"]
var st="1000 100 1234 12 5000"
var b=/\d{4}/   //查找4位数的数字
undefined
var st="1000 100 1234 12 5000"
var b=/\d{4}/g   //查找4位数的数字
st.match(b)
(3) ["1000", "1234", "5000"]
var st="1000 100 1234 12 5000"
var b=/\d{3,4}/g   //查找4位数的数字
st.match(b)
(4) ["1000", "100", "1234", "5000"]
var st="1000 100 1234 12 5000 456 7 23 899"
var b=/\d{3,}/g   //查找至少是3位数的数字
st.match(b)
(6) ["1000", "100", "1234", "5000", "456", "899"]
var str="Isthisallthereis"
var a=/is(?=all)/g
str.match(a)
["is"]
var str="Isthisallthereis"
var a=/is(?!all)/g   //注意，这里返回的是thereis的is
str.match(a)
["is"]
var str="Isthisallthereis"
var b=/is(?!all)/g   //注意，这里返回的是thereis的is
str.match(b)
["is"]
str.search(b)
14
var str="Isthisallthereis"
var a=/is(?=all)/g
str.match(a)
["is"]
str.search(a)
4
5-5 js中的手机正则表达式
//手机号码以1开头，第二个数字是3,4,5,7,8中的某个数字，之后全部是数字，为9位，\d{9}$，$表示结束，
var reg=/^1[3|4|5|7|8]\d{9}$/
//测试手机号码是否正确
var a="18488559963"
var b="178566456325"
var c="12345678921"
reg.test(a)
true
reg.test(b)
false
reg.test(c)
false
5-6 js中的邮箱正则表达式
//+是匹配前一项1-n次，*是匹配前一项的0-n次，\.是转义符.，()是域名子表达式，.后面2-5位
var reg=/^[a-zA-Z\d]+[\.\-\_a-zA-Z\d]*\@[a-zA-Z\d]+(\.[a-zA-Z]{2,5})+$/
var a="wss@qq.com"
reg.test(a)
true
var a="wss@qq.comdddd"
reg.test(a)
false
5-7 js中的屏蔽词小案例
//biWord数组里面放的是屏蔽词，因为有些网页屏蔽量比较大，所以放在[]里面比较好
var biWord=["王八蛋","你妈","fuck","shit","龟儿子","我操"]
//将biWord转换成字符串
var str=biWord.join(')|(')
undefined
str
"王八蛋)|(你妈)|(fuck)|(shit)|(龟儿子)|(我操"
var str1=biWord.join()

undefined
str1
"王八蛋,你妈,fuck,shit,龟儿子,我操"
//补全括号
var regstr="("+str+")"
undefined
regstr
"(王八蛋)|(你妈)|(fuck)|(shit)|(龟儿子)|(我操)"
//把获取的字符串变成正则表达式，并且后面加入全局匹配和忽略大小写
var reg=new RegExp(regstr,'ig')
undefined
reg
/(王八蛋)|(你妈)|(fuck)|(shit)|(龟儿子)|(我操)/gi
function biYourWord(str){
    return str.replace(reg,"*")
}
var test="老板王八蛋，shit，带着他的小姨子跑了，FUCK！我操你妈"

undefined
biYourWord(test)
"老板*，*，带着他的小姨子跑了，*！**"
问题：为什么要有)|(???

第6章 JAVASCRIPT HTML DOM
6-1 什么是HTMLDOM？
在这里插入图片描述
可以用DOM方法获取html页面的元素和属性
6-2 改变HTML-DOM方法
在这里插入图片描述
id具有唯一性，返回的是一个对象，标签名和类名返回的是数组，数组需要通过for循环遍历，
代码：

<script type="text/javascript">
    document.write('hello'+"<br>")
    document.write(Date())
</script>

输出：

hello
Thu Aug 30 2018 17:34:48 GMT+0800

代码：

<div id="box">我是大帅哥，魏无羡！</div>
<script type="text/javascript">
    document.getElementById('box').innerHTML="我是蓝忘机！"
</script>

输出：

我是蓝忘机！

代码：

//改变HTML内容
<p>我是大帅哥，魏无羡！</p>
<script type="text/javascript">
    //函数的第一个参数是我们获取到的元素，第二个参数是我们需要修改掉的内容
    function changContent(element,content) {
        //获取元素的长度
        var len=element.length
        //for循环遍历，i是下标
        for (var i=0;i<len;i++){
            //获取元素下标，然后修改元素内容
            element[i].innerHTML=content
        }
    }
    //获取P标签
    var p1=document.getElementsByTagName('p')
    //调用函数
    changContent(p1,"蓝哥哥~~")
</script>

输出：

蓝哥哥~~

关于html中<img src= >的使用!!
图片和HTML文本在同一目录下：例如index.html 和 img.jpg
写法：

<img src="img.jpg">

图片和HTML不在同一目录下：有分两种情况：
1、图片img.jpg在文件夹images中，index.html和images文件夹在同一个目录下
写法：

<img src="images/img.jpg">

2、图片img.jpg在文件夹images中，index.html在controller文件夹中，images和controller文件夹在同一个目录下
写法：

<img src="../images/img.jpg">

如果源是来自网上的 那就必须要用绝对路径
写法：

<img src="http://www.baidu.com/pic/img.jpg">

代码：

//改变HTML属性
//1.通过id改变
<img src="images/1.gif" id="img">
<script type="text/javascript">
    document.getElementById('img').src="images/31.gif"
</script>

输出：

图片31.gif

代码：

//2.通过标签名或类名
<img src="images/1.gif" class="imgs">
<script type="text/javascript">
    function changeproperty(element,property) {
        var len=element.length
        for (i=0;i<len;i++){
            element[i].src=property
        }
    }
    var c=document.getElementsByClassName('imgs')
    changeproperty(c,"images/31.gif")
</script>

输出：

图片31.gif

6-3 改变CSS-DOM方法
在这里插入图片描述
代码：

<!--改变HTML样式-->
<div id="lk">可口可乐1</div>
<div class="lc">可口可乐2</div>
<div class="lc">漫漫人生路，步步意尔康！</div>
<p>电子产品</p>
<p>蓝牙</p>
<script type="text/javascript">
    // 1.通过id改变
    document.getElementById('lk').style.color="red"
    // 2.通过标签名或类名
    function changecss(element,content) {
        var len=element.length
        for (i=0;i<len;i++){
            element[i].style.color=content
        }
    }
    var c1=document.getElementsByClassName('lc')
    changecss(c1,"green")
    var p1=document.getElementsByTagName('p')
    changecss(p1,"pink")
</script>

输出：
在这里插入图片描述
代码：

<!--改变多个HTML样式-->
<div id="lk">可口可乐1</div>
<div class="lc">可口可乐2</div>
<div class="lc">漫漫人生路，步步意尔康！</div>
<p>电子产品</p>
<p>蓝牙</p>
<script type="text/javascript">
    //id唯一，不进行循环
    function changeCss(element,cssname,cssvalue) {
        var len=element.length;
        for (i=0;i<len;i++){
            element[i].style[cssname]=cssvalue;
        }
    }
    var d2=document.getElementsByClassName('lc')
    var p1=document.getElementsByTagName('p')
    changeCss(d2,"color","red")
    changeCss(p1,"background","pink")
</script>

输出：
在这里插入图片描述

6-4 JavaScript的DOM事件
在这里插入图片描述
事件句柄通常与函数相结合使用，
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js html dom</title>
    <style type="text/css">
        #box{width: 100px;height:100px;background: pink;border-radius: 50px;line-height: 100px;
            text-align: center;color: yellow;}
        #main{width: 100px;height:100px;background: pink;border-radius: 50px;line-height: 100px;
            text-align: center;color:#FF6600;}
    </style>
</head>
<body id="content" onload="changecss()">
<div>In the Silence of Night</div>
<br>
<div id="box" onclick="changebox()">touch me</div>
<br>
<div id="main">OnMouseOver</div>
</body>
<script type="text/javascript">
    //当页面加载完，页面整个背景变成指定色
    //获取页面
    var bodychange=document.getElementById('content');
    function changecss() {
        bodychange.style.background="#8a6d3b"
    }
    function changebox() {
        alert('To the world you may be one person, but to one person you may be the world.')
    }
</script>
</html>

输出效果：
在这里插入图片描述

第7章 JAVASCRIPT—AJAX （异步的 JAVASCRIPT 和 XML）
7-1 AJAX 简介
在这里插入图片描述

7-2 AJAX-创建XMLHttpRequest对象
在这里插入图片描述

7-3 AJAX-向服务器发送请求
在这里插入图片描述

7-4 AJAX-onreadystatechange事件
在这里插入图片描述

0:请求未初始化，意思就是没有调用open方法，没有打开请求
1：服务器已经建立了连接，调用了open方法，但是未调用send方法，即建立了连接但是还未发送请求
2：调用了send方法，但是还未接收到响应
3：可能接收了部分数据，但未接收完，
4：已经接收到全部数据，可以在客户端进行使用
注意：只要readyState的值改变一次，就会触发一次onreadystatechange事件，所以可以利用onreadystatechange事件检测readyState变化后的值，
ajax异步通讯中，onreadystatechange事件会被连续触发5次
status：响应http的一个状态

7-5 AJAX-服务器响应
在这里插入图片描述
responseText是服务器响应的数据，文本形式
ajax异步通讯时会改变前端的某些页面，就是通过responseXML里面的数据来改变，

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值