文章目录
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（可以更改网址）location.reload（刷新当前页面）
③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);//0
console.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">
document.getElementsByName("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">
document.getElementById("onfb").onfocus = function(){
console.log("获得焦点");
}
document.getElementById("onfb").onblur = function() {
console.log("失去焦点");
}
</script>
<!--内容改变事件-->
<select id = "sheng">
<option>1</option>
<option>2</option>
</select>
<script language="JavaScript">
document.getElementById("sheng").onchange = function(){
console.log("内容改变");
}
</script>
查找
通过id获取元素：document.getElementById("…")，id的唯一性
通过标签获取元素：document.getElementsByTagName("…")[…]，标签不唯一，所以是数组需要指名索引
通过name获取元素：document.getElementsByName("…")[…]，name不唯一，所以是数组需要指名索引（是第几个name）
通过class获取元素：document.getElementsByClassName("…")[…]，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= document.getElementById("selectall").checked;
var select= document.getElementsByName("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 = document.getElementById("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 = document.getElementById("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、确认框
window.confrim(“显示内容”)，一个取消按钮，一个确认按钮（取消时返回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：网页可见区域高度
jQuery
js是一种脚本语言，常用于网页客户端编程，使网页在客户端浏览器中，实现更多地动态功能，表现出更加丰富的视觉效果。
jQuery 是一个简洁而快速的 JavaScript 库，可用于简化事件处理，HTML 文档遍历，Ajax 交互和动画，以便快速开发网站。jQuery 简化了 HTML 的客户端脚本，从而简化了 Web 2.0 应用程序的开发。
👉点击👈
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
