JavaScript总结笔记
一.简介
1.1 和Java的关系
本质上来说没有关系
js是1995年由网景公司推出的
1.2 目前的版本
js的标准是ECMAScript
目前我们学习的都是ES6
1.3 定义
是一种具有函数优先级,轻量级,解释型的编程语言
脚本语言
支持面向对象,声明式,函数式的编程
1.4 小知识
js也可以做服务器端的开发,比如node.js
javascript他是甲骨文公司的注册商标
ECMA国际组织他是Javascript的基础指定的
二.JS能干嘛
1.嵌入到动态的HTML页面
2.可以针对浏览器的时间做出响应
3.读写HTML
4.做验证
5.检测访问者的浏览器信息,控制cookies,包含创建修改
6.基于node.js做服务器端的编程
三.How如何学习
1.ECMAScript:
包含语言的基础语法和基本的对象
2.BOM浏览器对象模型:浏览器的交互(定时器,刷新,后退,弹出框)
3.DOM文档对象模型:描述网页的的内容方法和接口(操作浏览器里面的内容)
四.ECMAScript
4.1 语法结构
Document
4.2 变量
//1.声明赋值
//可以通过typeof函数去检测数据类型
myname="武汉佟大为";
console.log(typeof(myname));
myname=123;
console.log(typeof(myname));
//也可以通过类型var来命名
var age;
console.log(age);//undefined 定义了没有赋值
//2.变量的命名
//驼峰造型.见名识意,尽量不要使用关键字或者js内置的变量
//3.在ES6中新增了let命令
{
//全局
var i=1;
}
console.log(i);
{
//局部
let j=1;
}
console.log(j);4.3 数据类型
4.3.1 undefined
43.2 number
4.3.3 string
4.3.4 Array
4.3.5 boolean
4.3.6 函数
分类
1.系统的函数
alert();
confirm();
console.log();
2.用户自定义
Document
4.3.7 Date
Document
4.3.8 正则表达式RegExp---很重要
正则表达式对象是js的内置对象
//构造器的方式
//var reg1=new RegExp('正则表达式',匹配模式);
var reg1=new RegExp('world','ig');
//i 表示不区分大小写, g表示全局匹配
//字面量
var reg2=/world/ig;2.使用: test()
var reg2=/world/;
console.log(reg2.test("hellowordl"));//true或者false
3.
var reg1=/\d{6}/; var reg2=/[\u4e00-\u9fa5]{2,8}/; console.log(reg2.test('123'));4.3.9 Math类的使用
4.4 面向对象
一切皆对象
4.4.1 创建对象的方式一
语法:
var 对象名称=new Object();
//添加属性
对象名.属性名=属性值
//添加方法
对象名.方法名=function(){}
4.4.2 方式二
function 对象名(参数){
//有参数赋值
this.函数1=...
this.函数2=...
}
4.4.3 方式三:类似json语法
Document
五.BOM
浏览器对象模型(Brower Object Model)
操作网页的一些行为与窗口交互的行为,提供了很多的对象和属性
浏览器的顶级对象是window
window.alert()
5.1 定时器
5.1.1 常见的方法
//window可以省略,因为window是顶级对象
var st1=window.setTimeout(调用的函数,延迟的毫秒数);//st1标识了这个定时器
window.clearTimeout(st1);//清除延迟的定时器
var st2=window.setInterval(调用的函数,间隔的毫秒数);
window.clearInterval(st2);//清除间隔的定时器5.1.2 演示
Document
属性或者函数 返回值
window.location.href 获得或者设置一个url
window.location.port 端口
window.location.host 主机
window.location.pathname 返回请求路径
window.location.reload() 刷新页面
5.2 窗口加载事件load
窗口加载事件:当文档内容加载完毕以后,执行触发这个事件---(包含一个执行的业务js)
window.onload
Document
5.3 window.location对象
5.4 window.history对象
1. history.back() 网页回退
2. history.forword() 网页前进
3. history.go(index) 前进或者后退 index是正数 前进index页 ,index是负数后退index页
5.5 一些函数
1.alert() 警告
2.confirm(""); 确认弹出框,返回一个boolean
3.prompt(""); 输入框,返回输入的内容
4.open("跳转的网页url","窗口的名称","窗口的特征")
6.JSON对象
他是js里面的内置对象,主要用于和其他语言进行数据交互,他的本质是一个字符串
6.1 js对象---->JSON字符串
var obj={name:'金喜善',gender:'女'};
var str=JSON.Stringify(obj);//将次数据传递给后台的服务器语言去解析,比如Java6.2 JSON字符串--->js对象
var str='{name:'金喜善',gender:'女'}';
var obj=JSON.parse(str);//js对象7.cookie
1.可以存储信息的
2.保存在客户端的状态信息,记录了用户的访问状态
K-V键值保存的
username-张三
pwd=123456
//获取
cookie document.cookie;
//设置
cookie document.cookie="username=张三;pwd=123456"
8.DOM对象
Document Object Model文档对象模型
将网页里面的元素当成对象一样使用,每个对象(标签)都有属性,也有属性值,当我们把他当做一个对 象去处理的时候,这样方便我们操作网页
点击测试
对象: input
属性1: type 属性1值: button
属性2: value 属性2值:点击测试
====
1.网页标签和js
2.网页样式和js 3
.对于整个网页会形成一个对象: document
8.1 如何获取网页标签对象---(选择器)
8.1.1 通过id来获取网页元素对象
var 变量名=document.getElementById("id值");
//1.假设有id重复,找到的是页面里面第一个id对象
//2.id有可能正确,也有可能写错,返回null8.1.2 通过class来获取网页元素对象
var 变量名=document.getElementsByClassName("class值");
//1.返回的是一个HTMLCollection(类似数组),具备数组的特征,并且有length属性
//2.没有返回[]假设我想获取某个id里面的子元素
//访问c4元素的方法,拓展:想得到div的值,可以通过div对象.innerText
//1.直接访问c4
var obj2=document.getElementsByClassName("c4")[0];
console.log("---"+obj2.innerText);
//2.由于c4在c3里面,再去找c4
var obj3=document.getElementsByClassName("c3")[0];
var obj4=obj3.getElementsByClassName("c4")[0];
console.log("---"+obj4.innerText);
//3.由于c4在d1里面
var obj5=document.getElementById("d1").getElementsByClassName("c4")[0];
console.log("---"+obj5.innerText);8.1.3 通过标签名来获取网页元素对象
var 变量名=document.getElementsByTagName("标签名");
//返回的也是一个HTMLCollection8.1.4 通过name属性获取网页元素对象
var 变量名=document.getElementsByName("name值");
//返回的也是一个NodeList 类数组,下标,,,8.1.5 通用选择器
//单个
var 变量名=document.querySelector("#id值");//id
var 变量名=document.querySelector(".class值");//class
//以上都是返回单个元素或者null
var 返回多个=document.querySelectorAll("#id值");
var 返回多个=document.querySelectorAll("#id值1 > .class值");
//返回也是一个NodeList集合
通过以上的选择器,我们已经可以在页面获取任意的元素对象
8.2 DOM结构
1.在网页里面的元素,所有的标签都是一个元素(Element),同时他也是一个Node
2.不是所有的Node都是Element,比如注释,回车,文字node都可以读取,但是Element不一定能读取
8.3 Element的常用属性
8.3.1 children:获得当前元素下面的子元素
老夫聊发少年狂,左牵黄,右擎苍
//获得p元素
//方式一:
document.getElementsByTagName("p")[0];
//方式二:
document.getElementsByClassName("d1")[0].getElementsByTagName("p")[0];
//方式三:
document.querySelector("p");
//通过children属性获取,由于p标签使div的子标签中一个,可以使用属性children
//children返回的是一个集合HTMLCollection
//children属性是文档对象的属性,不是集合的属性
// document.getElementsByTagName("div").children ×
document.getElementsByTagName("div")[0].children[0];
8.3.2 parentElement:获取当前元素的父级元素
8.3.3 nextElementSibling:获取当前元素的下一个兄弟元素
8.3.4 previousElementSibilng:获取当前元素的前一个兄弟元素
Document
夜宵套餐
- 烤羊排
- 烤五花肉
- 烤茄子
- 烤猪尾巴
- 全身按摩
老夫聊发少年狂,左牵黄,右擎苍
8.3.5 获得元素的内容
obj.innerText;//比如一些p,div,span
obj.value;//input
obj.innerHTML;//不仅可以获取文本,还可以获取包含标签
8.3.6 标签具有的属性:要保证当前元素具备此属性
百度一下,你就知道 //obj1
//obj2
//obj3
//语法: 对象.属性名=属性值
obj1.href="设置值";
obj2.style="#34edaf"
obj3.value="修改新的值"
1.className:一次性修改多个属性,通过自定义一个样式
function f1(msg){
var obj1=document.getElementById("d1");
obj1.className=obj1.className+" "+msg+"";
}
function f2(){
var obj1=document.getElementById("d1");
obj1.className=obj1.className.replace("c1 c2","");
}
2.[了解]如果有多个样式,可以使用classList属性,返回当前元素的class名称的集合,包含了所有的样式名称
1.classList是一个类集合
2.add():添加样式
3.remove():移除样式
4.contains():判定是否包含样式
3.attribute
1.获得属性
obj1.getAttribute("type");//对象.属性
2.设置属性值
obj2.setAttribute("属性名","属性值");//
3.移除属性
obj3.removeAttribute("属性名")
4.checked和readonly,disabled
Document
记住密码