一、JavaScript概述
1、JavaScript 简称js,是运行在javascript解释器或者特定引擎中的解释型、弱类型、面向对象的脚本语言
2、javascript解释器:
1)浏览器自带js解释器
2、独立安装一个js解释器 - node.js时
3、编译型:运行程序之前,需要检查语法是否正确,如果不正确直接不允许运行,比如:java、c、c++等 更加严格
解释器:运行程序之前,不要检查语法是否正确,直接运行,碰到错误就会停止运行,比如:javascript、php、node.js等 更自由
4、js特点:
1、代码可用任何文本编辑器编写
2、解释型语言,无需编译
3、弱类型语言:不需要进行规定,你想放什么就放什么 - 爱自由
变量的数据类型是由值来决定的
5、js作用:
1、客户端的数据的计算:购物车
2、表单的数据验证:(手机号、身份证、邮箱、密码)
3、提供了事件(点击、鼠标移入移除、键盘...)
4、网页中一切css做不了的特效,都由js完成
5、和服务器端进行交互 ajax
6、javascript使用:
1)在HTML页面写上一个标签: - 临时测试
<script>
js代码
</script>
2)创建一个xx.js文件,在里面书写js代码,最后在HTML页面引入
<script src="xx.js文件路径">//此处不再支持书写代码了</script>
7、JS的调试语句:代码运行期间,如果碰到错误,会报错,但是后续代码就不会执行了,甚至如果只是逻辑错误不是语法错误,那并不会报错,我们需要一个方式去帮助我们找到错误何在
1)在控制台输出日志:console.log(想要输出的东西);→ 打桩输出,疯狂打桩!
2)在页面上进行输出:document.write(想要输出的东西); → 但不能用,如果绑定上了事件,会将页面上所有的内容全都替换掉
3)弹出框显示:alert(想要输出的东西); → 会卡主整个页面,必须关闭后用户才能看到HTML和CSS
8、js的语法规范:是严格要求区分大小写的,不能乱写!
二、javascript组成
1、javascript一共由3部分组成:
1)ECMAScript - 简称ES3/5/6,核心语法(逻辑部分)
2)Document Object Model - 简称DOM,文档对象模型(专门用于操作网页文档HTML+CSS的)
3)Browser Object Model - 简称BOM,浏览器对象模型 (专门用于操作浏览器的)
2、DOM树:DOM将HTML看做了是一个倒挂的树状结构,但是树根不是HTML标签。
1)树根:是一个document对象,document对象不需要程序员创建,由浏览器的JS解释器创建,一个页面只有一个document
2)作用:提供了一些属性和方法,可以让我们程序员去操作整个DOM树(增删改查每一个DOM节点)
3)DOM节点:一个标签、文本、属性、元素
3、查找元素:
1)通过HTML的特点去查找元素。
2)id查找:var elem=document.getElementById("id值");在当前DOM树中,根据元素的id,获取具体的DOM节点。
3)返回:找到了,返回对应的元素; 没找到,null。
4)特殊:(1)如果页面上有多个重复的id,只会返回第一个
(2)此方法找到的是单个元素 - DOM节点是可直接用于做操作的
(3)此方法不能使用 - 以后留给后端工程师使用
4、标签名查找: 1)var elems=document/已经找到的父元素.getElementsByTagName("标签名");
在当前DOM树中,根据标签名获取元素们
2)返回:找到了,返回一个DOM集合;没找到,空数组
3) 特殊:(1)返回的不是一个DOM节点,而是一个DOM集合,是不能直接用来做操作的,要么使用下标拿到某一个,要么使用遍历拿到全部
(2)不一定非要从树根开始查找元素,也可以写一个你已经找到的某个父元素
★3、class查找:var elems=document/已经找到的父元素.getElementsByClassName("标签名");
在当前DOM树中,根据标签名获取元素们
2)返回:找到了,返回一个DOM集合;没找到,空数组
3) 特殊:(1)返回的不是一个DOM节点,而是一个DOM集合,是不能直接用来做操作的,要么使用下标拿到某一个,要么使用遍历拿到全部
(2)不一定非要从树根开始查找元素,也可以写一个你已经找到的某个父元素
4、节点之间的关系进行查找:前提:必须先要找到一个元素,才能使用关系
父:elem.parentNode;//单个元素
子:elem.children;//集合
第一个子元素:elem.firstElementChild;//单个元素
最后一个子元素:elem.lastElementChild;//单个元素
前一个兄弟元素:elem.previousElementSibling;//单个元素
后一个兄弟元素:elem.nextElementSibling;//单个元素