JavaScript语言由3部分组成,分别是ECMAScript、BOM和DOM,
其中ECMAScript是JavaScript语言的核心,
而Web API包括BOM(页面文档对象模型)和DOM(浏览器对象模型)两部分,
利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中,诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面,都离不开DOM。
交互性:信息的动态交互 安全性:不允许直接访问硬盘 跨平台性:只要是可以解释js的浏览器都可以执行,和平台无关
//1. 在html中在script标签中书写script代码 //2. 用script标签引入js文件 敲入src属性引入js文件路径
alert() 弹出警告框 console.log() 写入到浏览器的控制台 document.write() 方法将内容写到 HTML 文档中。 innerHTML 写入到 HTML 元素。
赋值
一条语句,多个变量 var 开头,并使用逗号分隔变量即可: var lastname="Doe", age=30, job="carpenter"; 一条语句中声明的多个变量不可以同时赋同一个值: var x,y,z=1;
变量
全局变量 var 变量; undefined--未定义,为赋于初始值都是这个 声明变量类型 null--空置 NAN--not a number--非数字非数值 var carname=new String;字符串 var x= new Number;数值类型 var y= new Boolean;布尔类型 var cars= new Array; var person= new Object;对象类型
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 }
var cars=new Array(); cars[0]="Saab"; var cars=new Array("Saab","Volvo","BMW"); var cars=["Saab","Volvo","BMW"];
数组最值
Math.max.apply(Math,数组名) Math.min.apply(Math,数组名)
数组排序
function maoPao(arr) { if (Array.isArray(arr)) { for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - 1 - i; j++) { if (arr[j] < arr[j + 1]) { [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]] } } } } return arr } var arr = maoPao([1, 5, 6, 2, 3]) alert(arr)
5.对象
变量名.属性或者函数名() 键值对对象 var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } }; 定义对象在赋值 var andy = new Obect(); andy.name = 'pink'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); } 构造函数定义 function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sayHi = function() { alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex); } } var bigbai = new Person('大白', 100, '男'); var smallbai = new Person('小白', 21, '男'); console.log(bigbai.name); console.log(smallbai.name);
遍历对象属性
for...in 语句用于对数组或者对象的属性进行循环操作。 for (变量 in 对象名字) { // 在此执行代码 } 语法中的变量是自定义的,它需要符合命名规范,通常我们会将这个变量写为 k 或者 key。 for (var k in obj) { console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值 }
6.关键字
this
在方法中,this 表示该方法所属的对象。 如果单独使用,this 表示全局对象。 在函数中,this 表示全局对象。 在函数中,在严格模式下,this 是未定义的(undefined)。 在事件中,this 表示接收事件的元素。 类似 call() 和 apply() 方法可以将 this 引用到任何对象
function函数
函数不允许重载,会覆盖上一次定义
//1. function 函数名(参数不用定义类型){ }; 返回值直接用return返回语句即可 //2. var 函数名 = function(参数列表){ } //3.隐形参数arguments function fun(){ //定义函数没有参数 alert(arguments[0]+arguments[1]) }/可用arguments调用即将传入的参数 fun(1,2)//调用传入参数 结果为3
(输入设备与页面交互的相应)
事件的注册(告诉浏览器事件响应后需要执行哪些代码)又叫绑定,分为静态注册和动态注册 静态注册:通过html标签的事件属性直接赋予事件响应后的代码 动态注册:先通过js代码获取标签dom对象,然后再通过dom对象.事件名=function(){}
//onload 加载完成事件 浏览器解析完页面自动执行 页面加载完成之后常用于做页面的js代码初始化操作 静态: function fun =(){}//script标签中 οnlοad="fun()"//加到body标签中 动态:window.οnlοad=function(){} //onclick 点击事件 常用于按钮的点击响应 静态注册: script标签中定义方法,给标签添加onclick属性,值为方法名 动态: window.onload = function(){ var btnObj = document.getElementById("id名") btnObj.onclick = function(){} } //onblur 时区焦点事件 常用于输入框失去焦点后验证其输入内容 //onchange 内容发生改变事件 常用于下拉框列表和输入框内容发生改变后操作 //onsubmit 表单提交事件 return false 制止提交 常用于表单提交前 验证所有表单项是否合法 点击提交后会跳转
DOM全称是Document Object Model文档对象模型
文档中的标签,属性,文本转换成对象来管理。
DOM对象提供对body的直接访问,document.body. //创建标签 var crea = document.createElement("div"); crea.innerHTML = "李佳琪";//赋值 document.body.appendChild(crea);//添加body标签的子元素 //创建文本对象 var textObj = document.createTextNode("李佳琪");
//获取第一个id名为这个的标签 document.getElementById("id名") 获取表单中输入的值是dom对象打点掉value属性 innerHTML获取标签中的内容 innerText 只获取文本 //获取所有name名的标签 返回多个标签对象集合 document.getElementsByName("name名") //获取标签名对象集合 document.getElementsByTagName("标签名") 3个查询方法 id属性查询优先 如果没有id属性按name查询然后是标签名 以上三个方法代码一定要在页面代码执行完之后再执行才能查询到 window.οnlοad=function(){}
(regular expression)描述了一种字符串匹配的模式(pattern)
runoo+b,可以匹配 runoob、runooob、runoooooob 等,+ 号代表前面的字符必须至少出现一次(1次或多次)。 runoo*b,可以匹配 runob、runoob、runoooooob 等,* 号代表前面的字符可以不出现,也可以出现一次或者多次(0次、或1次、或多次)。 colou?r 可以匹配 color 或者 colour,? 问号代表前面的字符最多只可以出现一次(0次、或1次)。
// test(字符串)方法测试某个字符串是不是匹配我的规则 var reg = /e/;表示字符串中是否包含"e" var reg = new RegExp("e");相当于/e/ reg.test("abc");传入字符 返回false //花括号 [a-z]表示小写a到小写z[0-9] var reg = new RegExp("[abc]");表示是否含有a或b或c //元字符 \w表示是否包含字母数字下划线, //量词 a+表示至少一个a----a*表示包含0个或多个a----a?包含零个或1个a a{X}包含连续的X个a的序列----a{x,y}包含至少X个 至多Y个a的连续序列 a$以a结尾的字符串 ^a以a开头的字符串 ^a{x,y}$ 不是包含 必须完美匹配 ^\w{5,12}$ 从头到尾字符5到12位