首页 > 编程札记 > 编程

前端——JavaScript（ECMAScript、DOM、BOM）和jQuery

阅读：评论：0

文章目录

JavaScript
- JS概述
- JS语法
- - 变量
  - 数据类型
  - 数组0
  - 循环0
  - JS函数0
- DOM
- - 事件及其绑定0
  - 查找
  - 修改
- BOM
- - 定时器
  - 提示框
  - 其他对象
- jQuery
- 练习——1、表单的全选、反选、隔行换色
- 练习——2、留言板
- 练习——3、跳跳球

JavaScript

JS概述

一、简述

1、简称js
2、高级编程的脚本语言（脚本：不能脱离载体html）
3、因为和sun公司有合作，所以叫javascript

二、JavaScript的作用

通过DOM获取html的元素（标签）内容。可以提交数据（登陆验证等），可以给页面加上动态效果（轮播图等）

三、组成

ECMAScript、DOM、BOM
下面引用一段：

1.BOM：浏览器对象模型。简单来说就是window这个对象。例：①window.history：浏览器的历史记录forward（前进） back（后退）go（跳转）②window.location：浏览器的地址location.href（可以更改网址&#load（刷新当前页面）③window.navigator：浏览器的相关引导信息它是浏览器的一些信息存储对象2.DOM：文档对象模型。简单来说就是document这个对象。
可以通过document对象来操控文档。
获取元素、设置属性、创建元素、更改元素位置……3.ECMAScript：JS的核心语法部分。简单来说就是代码该怎么写，全由ECMAScript决定。ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。

JS语法

1、三种：行内式（html的标签中）、内嵌式（JavaScript标签包着）、外联式（JavaScript标签引用外部文件）
2、运行顺序：html文件从上到下依次运行
3、注意：JavaScript引用了外部文件，就不能在标签中再写JS代码

变量

不用区分类型，都要var关键字，其后的值可以跟任何类型
例如：var a = 123；console.log(a)；

数据类型

一、基本数据类型
1、Undefined：值只有一个Undefined。如果变量没赋值时，默认值就是Undefined
2、Null：值只有一个null。在ECMAScript中，认为null和undifined相等(null == undifined)
PS：null存储时，全为0。而JS获取时，将前三位为0的类型，当作Object，所以使用typeof测试时，显示Object

3、boolean类型
4、number：任意数字
5、String：字符串。使用双引号、单引号

二、引用数据类型
类，使用时将类转为对象（java中就是实例化）

三、说明
使用时并没有设定变量类型，但是会自动匹配类型，可以通过typeof(）方法获取类型

数组0

Array是内置对象，直接使用即可

直接举例

1、定义空数组var arr1 = new Array();
2、指定长度的数组var arr2 = new Array(3);
3、定义并且赋值var arr3 = [“abc”,"efg","ok"];

注意:赋值是方括号,字符串用双引号，单引号（外面有双引号嵌套式才使用单引号）都可以

使用数组时，直接使用数组名即可。例如：console.log(arr3)
获取其中的某些数据时，跟java中的使用一样。例如：console.log(arr3[1])

循环0

while、do…while、for同java；【js的foreach同Java有点区别】；jQuery中的增强for循环
1、样式同Java中的foreach

for(var i in arr3){console.lg(arr3[i])
}
区别：1、不使用类型，用var关键字2、中间不用冒号，使用in关键字3、获取的i不是数据，而是索引

2、jQuery中的增强for循环

对象·each(function(index,element){1、index为索引2、element为数据（可用this选择器代替）
});例如，
$("#test").each(function(index,element){console.log(index);//0console.log($(this).text());
});

JS函数0

分类：无参函数、有参函数、有返回值的函数
调用：直接使用函数名()即可

一、无参函数

function 函数名() {函数体}

二、有参函数

function 函数名(参数列表) {函数体}注意：参数列表没有类型，包括var关键字都可以省略

DOM

事件及其绑定0

一、事件

二、绑定
1、元素内绑定。给元素（标签）绑定事件，这个事件要做什么事情，用js自定义

<script type="text/javascript">function show(){alert("点击");}
</script>
<body><input type="button" onclick="show()" value="点击"/>
</body>

2、获取元素，然后绑定。

<input type="button" value="再次点击" name="reonclick"/>
<script type="text/javascript"&ElementsByName("reonclick")[0].onclick = function(){//函数没有名字alert("再次点击");}
</script>

三、【注意】
1、

引用——
document：document对象是HTMLDocument对象的一个实例，表示整个HTML页面，又叫做页面的根节点。
Document：Dcoment表示文档，这里的文档可以是HTML文档，也可以是XML文档，换句话说Document类型能表示HTML和XML等文档；简单的说，document指的是对象，而Document指的是文档。当前网页里所有元素(对象)全部都在document中

2、注意元素和JS的加载时机（一定是先创建元素对象，才能执行某些JS代码）。
3、有一个加载时机问题，所以一般使用元素绑定，或者把JS代码放在body下面
4、通过获取元素绑定事件时，函数是没有名字的。（因为就只能使用一次，有点像Java中的匿名内部类）
5、onsubmit作用于form而不是按钮，接收true则提交表单，否则不提交表单。并且接收的值，也需要return
例如：onsubmit = “return true”

四、例子

<!--键盘事件-->
<input type="text" id="onfb" />
<script language="JavaScript"&ElementById("onfb").onfocus = function(){console.log("获得焦点");}ElementById("onfb").onblur = function() {console.log("失去焦点");}
</script><!--内容改变事件-->
<select id = "sheng"><option>1</option><option>2</option>
</select>
<script language="JavaScript"&ElementById("sheng").onchange = function(){console.log("内容改变");}
</script>

查找

通过id获取元素&#ElementById("…")，id的唯一性
通过标签获取元素&#ElementsByTagName("…")[…]，标签不唯一，所以是数组需要指名索引
通过name获取元素&#ElementsByName("…")[…]，name不唯一，所以是数组需要指名索引（是第几个name）
通过class获取元素&#ElementsByClassName("…")[…]，class不唯一，所以是数组需要指名索引

全选，粗略使用

全选<input type="checkbox" id="selectall" onclick="check()"/><br/>
第一<input type="checkbox" name="select" /><br/>
第二<input type="checkbox" name="select" /><br/>
第三<input type="checkbox" name="select" /><br/>
第四<input type="checkbox" name="select" /><br/>
<script language="JavaScript">function check(){var selectall= ElementById("selectall").checked;var select= ElementsByName("select");for(var i in select){select[i].checked = selectall;}}
</script>

修改

方法：先获取，再重新赋值

一、修改内容

1、【获取】
获取纯文本：innerText（form表单等，有value属性的使用value）
获取全部内容（包括其中的标签）：innerHTML
2、【赋值】
赋值纯文本：innerText（标签也会被当作文本内容）
赋值：innerHTML（标签就是真正的标签，而不是文本）

<div id="div0" onmouseover="over();" onmouseout="out();">原内容
</div>
<script language="JavaScript">var div0 = ElementById("div0");function over(){div0.innerText = "新内容";}function out(){div0.innerText = "原内容";}
</script>

二、修改样式
修改的style，语法：元素.style.属性 = “新值”

<div id="div0" style="width: 100px;height: 100px; border: 1px black solid;"></div>
<input type="button" value="点击" onclick="click0()" />
<script language="JavaScript">function click0(){var div0 = ElementById("div0");div0.style.borderRadius = "50%";}</script>

【注意】
修改的内容需要加双引号

BOM

浏览器对象模型，顶层父类为window

定时器

1、周期定时器（返回定时器的id）
var id = window.setInterval(函数名，毫秒值)——>每隔指定的时间，自动调用函数
window.clearInterval(id)——清除（暂停）
2、超时定时器（返回定时器的id）
var id = window.setTimeout(函数名，毫秒值)——>隔指定的时间，自动调用函数一次
window.clearTimeout(id)——清除（暂停）

提示框

1、警告框
window.alert(“显示内容”)，只有一个确认按钮
2、确认框
frim(“显示内容”)，一个取消按钮，一个确认按钮（取消时返回null）
3、提示框（输入框），略
window.prompt(“显示内容”，默认值)，一个取消按钮，一个确认按钮（取消时返回null）

其他对象

1、Location：地址对象

2、History：历史对象
history.back()：后退
history.forward()：前进
注意：必须要有前进后退的页面才会有效果。

3、Screen：屏幕对象
screen.width：屏幕宽度
screen.height：屏幕高度

4、Document：文档对象
document.body.offsetWidth：网页可见区域宽度
document.body.offsetHeight：网页可见区域高度