javascript
var a1=[1,3,4,"dhsf",true];
console.log(a1);
// 全局作用域中的全局对象window
console.log(window)
// 文档节点document 它是全局对象的属性 但是本身也是一个对象
console.log(document)
// 使用文档节点对象的方法,可以找到页面中的DOM元素
console.log(document.getElementsByTagName("button")[0])
回调函数
检查
属性可以是任意类型,使用in检查属性 语法: "属性名" in 对象 自身没有但是原型对象中含有该属性,会返回true
检测对象本身是否含有属性:对象.hasOwnProperty("属性名")
检查对象是否是某个类的实例 :对象 instanceof 类
this
- 当以函数的形式调用时,this就是window
- 当以方法的形式调用时,谁调用谁就是this
- 当以构造函数的形式调用时,就是新创建的那个对象,所以可以使用点来添加它的属性。
- 调用call apply时,this就是指定的那个对象。可以用来改变this
<!-- this关键字 -->
<script>
function test() {
console.log(this);
}
// 默认情况下直接调用的函数都是由window调用的
// 所以test函数中的this是window
test(); // 相当于window.test();
var obj = new Object()
obj.name = "lnj";
obj.age = 33;
obj.say = function () {
console.log(this.name, this.age);
}
// 这里的say是一个方法, 方法必须通过对象来调用
// 所以这里的say方法是由obj对象调用的, 所以say方法中的this是obj对象
obj.say();
</script>
</body>
</html>
特殊方法
call apply 都是函数对象的方法:均调用函数执行 fun();fun.apply();fun.call();这三者是等价的
调用他们可以将一个对象指定为第一个参数,此时该对象是函数执行的this,而不是我们定义的window
call方法可以将实参在对象(第一个参数)后依次传递,apply需要把实参封装到一个数组中进行传递
arguments是一个类数组对象(伪数组),可以通过索引操作数据,同样可以获取长度
调用函数时,我们的实参会在arguments中保存,不定义形参。可以直接使用实参,arguments[0]代表第一个实参。里面有一个属性callee,这个属性对应一个函数对象,就是当前正在指向的函数的对象。
在调用函数时,浏览器每次都会传递两个隐含的参数,函数的上下文对象this 封装实参的对象arguments
可以定义形参,直接使用arguments[i]
function sum(){
for (let index = 0; index < arguments.length; index++) {
console.log(arguments[index])
//10,20,30,40
}
}
sum(10,20,30,40)
eval():执行一段字符串形式的js代码
函数调用(执行) :注意this的不同
- 直接调用 函数对象()
- 通过对象调用 对象.函数名()
- 通过new调用
- 通过apply/call 函数名.call(对象名)
js代码的位置
- 写在标签中的事件中,可是这样造成结构与行为的耦合,不便于维护。
- 可以将js代码写在a标签中的href属性中,这样当当点击超链接时会执行js代码。需要使用javascript:开头
- js的代码是写在html中的,所以需要以"<script></script>"中标记,属性值为type=text/javascript
- 可以将js代码编写到外部文件中,使用script标签的src属性引用进来。优点:不同的文件均可以导入文件,而且可利用浏览器的缓存机制。
注意:script一旦引入外部文件,不会再执行其他js代码。
作用域与函数作用域
作用域指的是一个变量起作用的区域。js中没有块级作用域,就是除了函数作用域,所有花括号里面的变量就是全局变量。
全局作用域:
- 直接编写在script标签中js代码,都在全局作用域
- 全局作用域在页面打开时创建,关闭时销毁
- 全局作用域中有个全局对象window 它代表浏览器的窗口,由浏览器创建,可以直接使用
- 在全局作用域创建的变量都是window对象的属性,函数都是window对象的方法
函数作用域(局部变量)
定义形参就相当于定义了函数作用域中声明了变量
隐式全局变量:在函数中(js),不使用var声明的变量是全局变量
- 调用函数时创建函数作用域,函数执行完毕,作用域销毁
- 每次调用一次函数,就会创建一个新的作用域
- 在函数作用域中是可以访问全局作用域里面的变量的,但是全局作用域的变量是不可以访问函数作用域中的变量的
- 当在函数作用域操作一个变量时,他会先在自身的作用域寻找是否有变量,然后再去上一级作用域寻找,直到全局作用域,如果全局作用域仍没找到,就会报错。referenceError
- 在函数作用域想要访问全局变量。可以使用window对象来定位
类型
- 数据类型:字面量类型: Number String BoolLean Undefined Function Object
- null是object类型的 未定义变量时undefined类型的
- Null 中只有null一种取值 表示是一个空对象
- Undefined中只有undefined 变量定义为未赋值就是undefined
类型转换
转换为string
- 1)使用ToString()方法,但是null与undefined类型没有该方法,不会影响原数据。
- 2)调用String函数 null 转换为null undefined转换为undefined
- 3)+""
转换为number
- js中所有的数字都是number
Nuber.Nax_Vaule
Infinity
-Infitity
NAN Not A Number - 如果字符串是纯数字,则转换为对应的数字
如果字符串有非数字,转换为NAN
如果字符串是空 或者全是空格的字符串,转为数字0
布尔:
true:1 false:0
undefined转换为NAN
null转换为0 - 调用Number()函数
- 调用parseInt(sting,进制数) 专门针对字符串;将字符串中的有效的整数内容取出来,然后转换为Number A=1234PX" 同理还有 parseFloat
如果非string进行操作 那么会将其先转换为string之后运算
/1 -0 *1 取+
转换为Boolean
数字:除了0 NAN 都是true
字符串:除了空串 都是true
对象:true 这里就有包装类的特殊情况
var b=new Boolean(false);
if(b)
{
console.log("对象转化为布尔值都是true,所以会执行")
}
null undefined:false
对对象取两次反:转换为布尔值
运算符
- +:任何事物与字符串都会自动转换为字符串,相加都是拼接
- 任何做- * /都会转换为数字:可使用任意值-0 *1 /1来转换为number -:会先转换为数字 然后再进行计算
- 自增(i++;++i)其中i都会加一,不做改变时表达式的值
- 逻辑[针对布尔值] ($ | ! )(|| &&)
非布尔值的逻辑运算:会先转换为布尔值 然后在运算 并且返回原值
与:如果第一个值是true,则返回第二个数值
如果第一个值是fause,返回第一个值
或:
如果第一个值是true,返回第一个值
如果第一个值是fause,返回第2个值 - 关系运算符:返回布尔值 :注意没人可以必过NAN 字符串比较的是字符编码,字符是一位一位比较的
比较两个字符串,可能得出错误结论
在字符串使用转义字符输入unicode编码"\u四位16进制"
在网页中使用$#编码 - 等于:NAN不等于任何数值,包括它自己 会转换为相同数据类型后在比较
- 全等 ===不会做自动转换 而等于会做自动转换
流程控制语句
- 条件判断语句
几种if:if只能控制紧随其后的语句,if语句中只执行一句。 - 条件分支语句
switch case :没有break就会执行满足条件的之后的。 - 循环语句
对象(复合数据类型) 引用
与基本数据类型不同,基本数据类型的数值都是存储在栈空间的,数值之间是独立存贮,修改并不会互相影响。
而对象是存储在堆空间的。每创建一个对象,都会在堆内存开辟一段空间存储对象,变量保存的是对象的地址,如果两个变量保存同一个内存地址,说明指向同一对象,但是它们并不相等。修改其中一个变量的属性,另一个变量必然受到影响。在栈空间存储的是对象的地址,这个地址指向堆空间存储的对象
字面量:永远不会改变的值。变量直接保存字面量,并且数值可变。使用var声明,记得赋值
内建对象
ES标准定义的对象。任何浏览器都有可以使用 MAth Function StringDOM 对象
由js运行环境提供的对象,主要是浏览器提供的对象 比如 DOM BOM自定义对象 :LW自己定义的对象(引用数据类型 堆里存地址)
-
1.1 对象属性
读取:对象名.属性
如果不存在,不会报错,会返回undefined
修改:对象名.属性=值
删除:delete 对象.属性特殊的属性:对象["属性"]=值 同样需要使用该方式读取 []可接受变量
属性的值可以是任何类型如果对象中不含有这个属性,访问的话会返回undefined,并不会报错
删除:delete 对象.属性 1.2 使用 for in 遍历对象属性
for 变量 in 对象
对象有几个属性,这里就会循环几次,每次会把属性名赋值给变量。想要输出属性值。使用 对象[变量]1.3 属性可以是任意类型
- 1.2 创建对象
方法1:使用New关键字调用构造函数,构造函数就是专门用来创建对象的。
var 对象=new Object();
只能动态给空对象新增属性,使用对象.属性=属性值
<script>
1.使用默认类创建一个空对象
var obj = new Object()
// 2.动态给空对象新增属性
obj.name = "lnj";
obj.age = 33;
// 3.动态给空对象新增方法
obj.say = function () {
console.log("hello");
}
// 4.使用对象的属性和方法
console.log("使用默认类name"+obj.name);
console.log("使用默认类age"+obj.age);
obj.say();
</script>
方法2:使用字面量创建,可以直接赋值
var 对象名={属性:属性值,属性名:属性值}
可以在创建的时候同时添加属性,使用:
注意如果是特殊的属性,属性也需要加括号
var obj = {}; // 相当于var obj = new Object()
// 2.动态给空对象新增属性
obj.name = "lnj";
obj.age = 33;
或者定义时赋值‘
var obj = {
name:"lw",
age:12,
say : function () {
console.log("使用字面量1"+"hello");
}
};
方法3:使用工厂函数
function 函数名(形式参数){
创建一个新对象
var xx=new Object();
像对象中添加属性
对象.属性=属性值;
对象.方法=function(){
函数体
}
}
<!-- 4.2.1工厂函数 -->
<script>
function createPerson(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function () {
console.log("hello");
}
return obj;
}
var obj1 = createPerson("lnj", 33);
var obj2 = createPerson("zq", 18);
console.log(obj1);
console.log(obj2);
</script>
<!-- 4.2.2 工厂函数 -->
<script>
function createPerson(name, age) {
var obj = {
name: name,
age: age,
say: function () {
console.log("hello");
}
}
return obj;
}
var obj1 = createPerson("lnj", 33);
var obj2 = createPerson("zq", 18);
console.log(obj1);
console.log(obj2);
</script>
方法4:使用构造函数(使用new关键字):因为工厂函数的构造函数一直是object,所以创建的对象的类型都相同。
构造函数与普通函数的不同在于调用方式,构造函数使用new关键字来调用。
所谓的调用就是函数的执行
1.立即创建一个新的对象
2.将新建的对象设置为函数中的this
3 逐行执行函数中的代码
- 将新建的对象作为返回值返回
使用一个构造函数创建的对象,我们称为一类对象,所以也称构造函数为类。
函数
函数就是一系列语句的集合。只有函数式可以执行的,其他的数据时不可以的。
使用函数提高了代码复用,提高了使用效率
创建函数(对象)
-
1 将函数要实现的代码以字符串的形式传递给构造函数:
var fun=new Function("console.log('这是我传递的字符串')") 封装的代码不会立即执行,会在函数调用的时候执行 对象()
-
2 使用函数声明来创建函数
function 函数名(形参){语句}
3 使用函数表达式创建函数(匿名函数)
就是使用赋值符号。
var 函数名=function(){}
这是一个立即执行函数:函数定义完,立即被调用,一般只执行一次
注意
如果函数作为对象的属性:我们称为方法。
fun();调用函数,相当于使用函数返回值
fun; 使用函数对象
break:退出当前循环
continue:跳过当次循环
return:退出函数
注意:
各个对象的函数是相同的,浪费内存,将其在全局中定义,但是污染了全局作用域的命名空间,而且不安全。使用原型对象解决这个问题
原型对象
我们每创建一个函数时。解析器都会给函数(对象)添加一个属性prototype,这个属性对应着唯一对象,这个对象就是原型对象。当函数使用构造函数调用时,它所创建的对象会有一个隐含属性指向该构造函数的原型对象,通过使用proto来访问该属性。原型对象就是类中的公用区域,所有对象都拥有原型对象中拥有的属性。就是我们访问一个对象的属性时,他会首先在自己的属性中找,如果有直接使用,不再寻找。找不到去原型对象中找,直到原型为object。所以创建构造函数时,将对象共有的属性与方法写原型对象中(prototype)。
myaa.protype.a 原型对象中添加属性
所以我们创建构造函数时,可以讲对象共有的属性以及方法添加到构造函数的原型对象中。这样不用给每个对象添加,而且不会影响全局作用域。还可以使得所有对象都拥有属性与方法。
当我们打印对象时,实际调用的是它的tostring方法,不想输出[object object]。可以给对象重定义tostring方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<title>函数</title>
<body>
<script>
// function sayHi(name) {
// alert(name);
// }
// sayHi("lnj");
// var sayHello = function (name, age) {
// console.log("name = "+ name, "age = "+age);
// }
// sayHello("lnj", 12);
// var sayHello = function (name, age) {
// alert("name = "+ name+" "+"age = "+age);
// }
// sayHello("lnj", 22);
// function sum(a, b) {
// var res = a + b;
// return res;
// }
// var res = sum(10, 20);
// console.log(res); // undefined
//arguments
// function getSum() {
// var sum = 0;
// for (var i = 0; i < arguments.length; i++) {
// sum += arguments[i];
// }
// return sum;
// }
// var sum = getSum(5, 1, 3, 4);
// console.log(sum);
// //作为参数
// var sayHi = function () {
// console.log("hello world");
// }
// function test(fn) {
// fn();
// }
// test(sayHi);
//作为返回值
function test() {
var sayHi = function () {
console.log("hello world11");
}
return sayHi
}
var res = test();
(function () {
console.log("hello world");
})();
function test() {
function demo() { // 该函数是局部作用域
console.log("demo函数");
}
// 可以在同一个局部作用域中访问
demo();
}
// 不能在局部范围以外访问
test();
function test() {
console.log("指趣学院");
}
// 2.函数表达式
function test() {
console.log("指趣学院");
}
var demo;
test();
demo = function () {
console.log("www.it666.com");
}
</script>
</body>
</html>
参数
调用函数时,实参传递给形参,浏览器不会检查实参的类型与数量,如果实际参数少,则会有undefined的形参。
简化的参数传递:
如果形参的参数过多,可以定义一个对象(属性为这些参数),将该对象作为实参传递给函数,这时形参可以简写为任意东西X,函数体中使用X.属性
函数作为参数,此时函数叫做回调函数
function f1(fn) {
fn();
console.log("haha") ;
}
function f2(){
console.log("xixi")
}
f1(f2);
//xixi haha
形参过多时,可以使用对象作为实参,且参数没有顺序限制。
function person1 (o){
console.log("我叫"+o.name+"我今年"+o.age+"我是一个"+o.sex)
}
var obj ={name:"lw",age:18,sex:"female"};
console.log(person1(obj))
返回值
return:任意数据类型
一个函数有return 就有返回值
一个没有return 就没有返回值
一个没有return 就没有返回值,在调用时接收了,那么就是undefined
当函数调用后,需要这个返回值,就定义一个变量接收它
在函数中return后的语句都不会执行,函数不写return就会返回undefined 写了return没有参数 函数调用之后还是undefined
垃圾回收
我们做的就是把不使用的对象设置为null
数组
数组[索引] 读取不存在的索引 不会报错会返回undefined
像数组的最后一个位置添加元素:arr[arr.lenth]=数值
数组中的元素可以是任意类型 var arr=new Array(10,"hello",null,undefined,{name:"jj"},function(){alert("hello")})
重要的属性:length 可以修改:若长度大于原有的,多出来的会空闲,若短,会删除。
创建数组
- 字面量
var 数组=[];可以同时指定数组的元素值 - 使用构造函数
var 数组=new Array();
同时也可以定义数组值,作为函数的形式参数
var a1=[1,3,4,"dhsf",true];
var a2=[];
var a3=new Array();
var a4=new Array("Saab","Volvo","BMW");
- 区别(一个参数的时候)
var a;
a=[10];元素是10
arr=new Array(10) 数组长度是10
数组常见的方法
1. push :在数组的末尾添加一个或者多个元素,并返回新数组的长度
2. unshift:数组的起始添加一个或者多个元素,并返回新数组的长度(其他元素索引会改变)
3. pop:该方法是删除数组的最后一个元素,并返回删除的元素。
4. shift:该方法是删除数组的第一个元素,并返回删除的元素。
5. slice:从数组中抽取元素,不改变原数组,将抽取的封装到新数组中,然后返回该新数组。参数:截取的数组的开始下标,截取的数组的结束下标
6.slice:抽取想要的元素 参数就是抽取的区间信息
语法:截取的新数组=slice[截取的数组的起始下标,截取的下标的数组结束下标)
注意:方法并不会改变原数组,注意索引的包含关系,而且第二个参数可不写,截取第一个参数以后的,同样索引也可以是**负数**,从后向前面计算 -1:倒数第一个。
7. splice:删除数组,会影响原始的数组,原数组只剩删除的部分,返回值是显示删除的部分,相加为原数组。
被删除的元素=splice(开始位置的索引,删除的个数,想要插入的元素:出现的数组的最前面)
数组的遍历:将数组元素全部取出来
1.使用for循环
使用forEach方法(IE8以及IE8以下的浏览器不支持该方法)
该方法接收一个函数作为参数,也就是函数名,一般我们会传递一个匿名函数,这个函数由我们创建但是并不由我们调用,称做回调函数。
浏览器会在浏览器中传递三个参数,
第一个:当前正在遍历的元素
第二个:当前正在遍历的元素的索引
第三个:当前正在遍历的数组
arr.forEach(funtion(value,index,arr){console.log("value="+value)})
js通过dom来对文档进行操作 只要理解dom就可以随心所欲操作web页面
DOM :文档对象模型
文档:整个HTML文档
对象: 网页中的每一部分都转换为对象
模型:使用模型来表示对象之间的关系 方便获取对象 就是一棵树(dom树)
变量提升
先提升变量,在提升声明
变量的提前声明:使用var关键字声明的 会在代码执行前被声明 ,不使用var则不会提前声明,但是只是在当前作用域提升,并且提升到最前面
函数声明,会被所有代码执行前创建,所以可以在函数声明前调用该函数
函数表达式,不会提前
<script>
f1();
function f1(){
console.log("1")
}
f1();
function f1(){
console.log("2")
}
f1()
var f2=function(){
console.log("3")
}
f2();
var f2=function(){
console.log("4")
}
f2();
</script>
节点:构成html文档的最基本单元(Node)
标签(元素)节点 属性节点(id name type) 文档节点(html) 文本节点(标签中的文本内容)
元素:整个的元素,其中包括属性节点 文档节点
节点的属性:
文档节点:nodeName:#document nodeType:9 nodeValue:null
元素节点:nodeName:标签名 nodeType:1 nodeValue:null
属性节点:nodeName:属性名 nodeType:2 nodeValue:属性值
文本节点:nodeName:#text nodeType:3 nodeValue:文本内容
window对象
调试
在source中进行调试
获取元素节点
getElementById:id属性 一个
getElementsByName:name属性 一组类数组对象
getElementsByTagName:标签属性 一组
querySelector:主要字符串的选择器 总会返回唯一的元素 如果有多个,也只是返回第一个
querySelectorAll:符合条件的元素会封装在一个数组中返回 尽管只有一个
获取元素节点的子节点
childNodes:所有子节点 包括文本节点在内的所有节点
firstChild
lastChild
获取父节点以及兄弟节点
parentNode
previousSibling
nextSibling
属性
innerHTML:自结束标签没用,获取元素内部的html代码
innerText:获取元素内部的文本属性
获取body的内容
document.body 保存的是body的引用
document.all 代表所有元素
document.element
事件(onxxxx)
就是文档或浏览器窗口中发生一些特定的交互瞬间,js与html之间的交互是通过事件实现的
定义事件 用户与浏览器的交互行为
- 直接在事件对应的属性中设置一些js代码,当事件被触发时,会执行代码。但是会存在结构与行为的耦合,不方便维护。
<button id="btn1" onclick="alert('nihao')">按钮</button>
- 为事件绑定对应的响应函数,当事件被触发时,函数可以被调用执行,这里可以不可以为一个元素绑定多个事件,后面的会覆盖前面的呦
<button>按钮</button>
<script>
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
alert("你还点")
}
</script>
1. 使用script标签
2. 获取对象
3. 绑定事件
- 使用addEventListener方法为元素绑定响应函数
参数1:需要执行的事件,事件并没有ON前缀
参数2:事件触发时执行的回调函数
参数3:需要一个布尔值来确定是否在捕获阶段获取事件 一般是false
相比直接绑定,可以绑定多个事件 ,this 是绑定事件的对象
元素.addEventListener();
缺陷:不支持IE8以及以下的浏览器
使用 addEvent()
参数1:需要执行的事件,事件有ON前缀
参数2:事件触发时执行的回调函数
区别:与addEventListener执行结果相反 后绑定先执行 this 是window
兼容this与事件绑定 定义函数 为指定元素绑定响应函数
obj:要绑定事件的对象
eventStr:事件的字符串
callback:事件的回调函数
function bind(obj,eventStr,callback){
if( obj.addEventListener)
//普通浏览器
{
obj.addEventListener(eventStr,callback,false);
}
//IE8以及以下
else{
obj.addEvent("on"+eventStr,callback)
}
}
事件注意事项
- 当事件被触发时,函数可以被调用执行,这时浏览器会将一个事件对象作为实参传递给函数,该对象包含了该事件的常用属性,比如 鼠标的坐标 shift元素是否被触发
但是ie8及其以下的浏览器是不支持该对象的,它是将其封装在window对象的属性中的,假设对象为event 一般使用event=event||window.event来实现兼容
if(!event){event=window.event} 如果不存在??null
onload事件
事件是在页面加载完成之后才会触发 一般WWIwindow绑定一个onload事件
<script>
window.onload=function(){
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
alert("你还点")
}
}
</script>
事件的冒泡
事件的冒泡就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。
取消冒泡:将事件对象的cncelBubble属性设置为true
事件的委托
指将事件统一绑定给元素的共同的祖先元素,然后当后代元素上的事件被触发时,会一直冒泡到祖先元素,从而指向祖先元素的系响应函数来处理事件。
事件委托利用了事件冒泡,通过委托,减少了事件的绑定次数,提高了程序的性能。
事件的传播
微软:事件由内向外传播 即事件冒泡
网景:事件由外向内传播
W3C综合两个公司,将事件传播分三个阶段
捕获阶段:
- 在捕获阶段时由最外层的祖先元素,想目标元素进行事件的捕获,但是默认不会触发事件
目标阶段: - 事件捕获到目标元素,捕获结束开始子啊目标元素上触发事件
时间冒泡: - 事件从目标元素向它的祖先元素传递,依次触发。
- 如果希望在捕获阶段触发事件,可以addEventListener的第三个参数设置为true,一般我们并不希望在捕获阶段触发事件,IE8以及以下没有捕获阶段
json
- js就是一个特殊格式的字符串,这个字符串可以被任何语言识别,
并且可以转换为任意任意语言中的对象
json中的js对象的格式相似,只不过json中额属性名必须加引号
json分类:
数组[]
对象{}
json中允许的值:字符串 数值 布尔值 null 对象
将json字符串转换为js对象:JSON类
JSON.parse()
js对象转换为json字符串
JSON,stringify
类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<title>类的定义及其对象</title>
<body>
<script>
// 通过构造函数定义一个类
// 在构造函数中描述该类事物共性的属性和行为
function Person(name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log(this.name, this.age);
}
}
// 通过构造函数创建对象
// new 的执行过程
// 1 在内存中创建了一个空的对象
// 2 让构造函数中的this指向刚刚创建的对象
// 3 执行构造函数,在构造函数中设置属性和方法(当然也可以做其它事情)
// 4 返回了当前对象
var p1 = new Person("lnj", 33);
var p2 = new Person("zq", 18);
console.log(p1.say());
p2.say();
// // 每个对象都可以访问一个名称叫做constructor的属性, 属性指向创建该实例的构造函数
// var obj = new Object();
// obj.name = "lnj";
// console.log(obj); // Object
// function Person(name) {
// this.name = name;
// }
// var p = new Person("zs");
// console.log(p); // Person
// // 可以通过对象的constructor属性判断某个对象是否是某个类的实例
// console.log(p.constructor === Person); // true
// // 也可以通过instanceof判断某个对象是否是某个类的实例
// // 企业开发推荐
// console.log(p instanceof Person);
</script>
</body>
</html>
几种对象
-
Date对象
var date =new Date() 会获得当前时间
获取指定时间:参数中指定 月/日/年 时: 分: 秒 var date =new Date()
gettime():是获取当前时间时间戳 距离格林威治时间(1970 1/1 0:0:0)所花费的毫秒数
Math对象
math 对象鱼其他不同。不是一个构造函数,它属于一个工具类不用创建对象。它里面封装了数学运算的相关属性以及方法。
Math.random():生成 0-1的随机数
Math.round(Math.random()*x):生成 0-x的随机数
Math.round(Math.random()*(y-x))+x:生成 x-y的随机数
以下三个是js的包装类
3.String对象
可以将基本数据类型转换为String对象
var s=123;
s.tostring()
发现s是基本数据类型,是不可以添加属性与方法,但是这里确实可以,
这是因为对基本数据的数值调用属性以及方法时,浏览器会临时使用包装类将其转化为对象,然后调用对象的属性与方法,调用结束,会转换会原来的数据类型
底层字符串是以数组的形式保存的,所以可以使用下标
4.Number对象
可以将基本数据类型转换为Number对象
5.Boolean对象
可以将基本数据类型转换为Boolean对象
修改样式
样式的优先级:
1.就近原则
2.理论上:行内>内嵌>链接>导入
3.实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高
-
行内的样式
元素.style.样式名=样式值
原来css的样式含有-,修改为驼峰命名。font-size 改为fontSize
如果为样式添加!important此方法就会失效
之中方式为属性设置内联样式 当前的样式(IE)
元素.currentStyle.样式名=样式值
若是元素没有设置样式,获取其默认值。
其他浏览器:getComputedStyle属于window
元素.getComputedStyle.样式名=样式值
参数1:获取对象的元素
参数2:伪元素 null
返回对象,封装了修改过的样式
如果元素的属性为设置,并不会返回默认值,而是返回实际值。
比如div未设置宽,那么就会显示实际的宽(数值),而不是currentStyle的anto
设置所有浏览器兼容的方式:
function getStyle(obj,name){
if( getComputedStyle)
//普通浏览器
{
return getComputedStyle(obg,null)[name];
}
//IE8以及以下
else{
return obj.currentStyle[name];
}
}
正则表达式 (定义字符串的一些规则)
计算机根据正则表达式,判断字符串是否符合规则,将符合条件的提取出来。
可以理解为正则表达式就是规则。
创建正则表达式对象:
var patt=new RegExp("pattern","modifiers")
var patt=new RegExp("正则表达式","匹配模式");
使用字面量:
var patt=/pattern/modifiers;
修饰符用于执行不区分大小写和全文的搜索。
i - 修饰符是用来执行不区分大小写的匹配。
g - 修饰符是用于执行全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配)。
var patt=new RegExp("a") 正则表达式可以检查字符串中是否含有a
patt.test("bcd")
var patt= /a[bce]d/
patt.test("acd")
规则 :这里都是针对执行一次的
[] 里面是或的关系
| 或的关系
[abc] 查找方括号之间的任何字符。
[a-z] 任意的小写字母
[A-Z] 任意的大写字母
[A-z] 任意的字母
[0-9] 查找任何从0至9的数字。
[^] 除了
(x|y) 查找由|分隔的任何选项。
正则表达式的方法:test ()检查字符串是否符合正则表达式,符合:true
patt.test("字符串")
量词:设置一个内容的出现次数 (只对前面的元素起作用)
{n} 正好出现n次
{m,n} 出现m-n次
{m,} m次以上
至少一个 等同于{1,}
^ 以……开头
匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
正则表达可以作为参数
split() 字符串拆分为数组 即使不指定全局,也会全部拆分
search():搜索字符串是否有指定内容,有,返回第一次出现的索引,没有,就返回-1
str="ccf hello hhh polo friy"
res=str.search(/a[re]b/)
console.log(res)
match:提取符合条件的内容
通常match只会找到第一个符合条件的内容,找到后停止,设置全局搜索
str=[1a2b3c4d]
res=str.match(/a/gi)
replace():将字符串指定的内容替换为新内容
参数1:被替换的内容 可以接受一个正则表达式
参数2: 新结果
默认只会替换第一个