文章目录
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 应用程序的开发。
👉点击👈