小白学Java30:JavaScript
小白学Java30:JavaScript
- 什么是JavaScript
- JavaScript的基本语法
-
- 使用JavaScript
- JavaScript数据类型
-
- 变量声明
- 基本类型
-
- 数字类型(Number)
- 字符串类型(String)
- 布尔类型(boolean)
- 引用类型
- 数组类型
- JavaScript的运算符
-
- 逻辑运算符
- 关系运算符
- 单目运算符
- JavaScript的函数
-
- 自定义函数
-
- 声明方式
- 自定义函数的分类
- 常用函数
-
- 三种弹窗函数
- 事件
- JavaScript的DOM
-
- 查找HTML元素
- 利用当前元素获得周边元素
- 改变HTML元素
- 改变HTML元素的CSS样式
- DOM事件
- EventLIstener:监听事件
-
- 添加监听事件
- 监听事件的传递方式
- 使用DOM操作元素
-
- 添加元素到HTML
- 删除元素
- JavaScript定时器
-
- 定义定时器:
什么是JavaScript
JavaScript的基本语法
使用JavaScript
- 在html文件中声明一个<script></script>标签组,然后在其标签组内使用JavaScript来编写代码
<script>
document.write("hello,world");
script>
- 使用外部的js文件,然后通过<script></script>引入js文件
<script type="text/javascript" src="demo1.js">script>
JavaScript数据类型
变量声明
任何变量都是用var来声明
var a;
<script>
var a;
script>
基本类型
未被初始化的变量默认值为Undefined
变量的基本类型有数字类型(Number),字符类型(String),布尔类型(Boolean),未定义(Undefined),Null类型,五种,
但是后两种都是不允许出现的类型
数字类型(Number)
var a=1;
字符串类型(String)
var a = "1";
布尔类型(boolean)
var a=false;
引用类型
大括号表示引用类型
<script>
var student = {
id: 1,
name: "张三",
age: 18
};
document.write(student.id)
document.write(student.name)
document.write(student.age)
script>
数组类型
中括号表示数组类型
<script>
var n = [100,true,"hello"];
alert(n.length);//弹出框
alert(n[0]);//元素下标从0开始
alert(n[n.length-1]);//弹出数组最后一个元素
script>
JavaScript的运算符
逻辑运算符
- 与:&&
- 或: ||
- 非: !
关系运算符
大于
小于
等于
不等于
大于等于
小于等于
“值和类型相同 = = =”
单目运算符
基本都同Java的东西,这里我就不写了
JavaScript的函数
自定义函数
声明方式
function 方法名(){
//执行代码块
}
自定义函数的分类
- 无返回值无入参的方法
function ff(){
//执行代码块
}
- 无返回值有入参的方法
function ff(a,b){
//执行代码块
}
- 有返回值有入参的方法
var c=ff(v1,v2);
function ff(a,b){
return a+b;
}
常用函数
三种弹窗函数
- 提示框: alert()
alert("hello");
- 带确定取消的框,确定返回true 取消返回false
var con = confirm("确定删除?");
3.带输入框的框,返回输入内容,取消返回null
var input = prompt("你爱学习嘛?");
事件
- HTML元素改变事件:onchange
<input type="text" id="name" onchange="alert(this.value)" />
- 点击事件:onclick
<button onclick="alert('按钮被点击')">按钮button>;
- 鼠标移入:onmouseover
<div id="d1" onmouseover="alert('鼠标移入')">div>
- 鼠标移动:onmousemove
<div id="d1" onmousemove="alert('鼠标移动')">div>
- 鼠标移出: onmouseout
<div id="d1" onmouseout="alert('鼠标移出')">div>
- 键盘:onkeyup/onkeydown
<input type="text" onkeydown="alert('键盘按下')"/>;
<input type="text" onkeyup="alert('键盘释放')"/>;
- 页面加载完成: onload
<body onload="alert('页面加载完成')">
- 表单提交: onsubmit
<form onsubmit="alert('表单提交')">
<input type="text"/>
<input type="submit" />
</form>
JavaScript的DOM
DOM简单可以理解为浏览器创建的对象模型,通过JavaScript控制DOM可以控制HTML界面上的元素
查找HTML元素
- 通过ID查询元素
//通过ID查找元素
var d1=document.getElementById("d1");
- 通过标签名查询元素
//通过标签名查找元素(查找到的是以数组形式存在变量中)
var d3=document.getElementsByTagName("d3");
- 通过类名查找元素
//通过类名查找元素(查找到的是以数组形式存在变量中)
var d4=document.getElementsByClassName("d4")
利用当前元素获得周边元素
- 获得当前元素的父节点元素
var d1=document.getElementById("d1");
var father = d1.parentNode;
- 获得当前元素的子元素(返回的是集合)
var d1=document.getElementById("d1");
var d3 = d1.children;
- 获得当前元素的第一个子元素
var d1=document.getElementById("d1");
var d4 = d1.firstElementChildChild;
- 获得当前元素的最后一个子元素
var d1=document.getElementById("d1");
var d5 = d1.lastElementChild;
- 获得当前元素的上一个兄弟元素
var d1=document.getElementById("d1");
var d6 = d1.previousElementSibling;
- 获得当前元素的下一个兄弟元素
var d1=document.getElementById("d1");
var d7 = d1.nextElementSibling;
改变HTML元素
改变HTML属性,document.getElementById(id).属性名=新属性值
d.getAttribute(“属性名称”)获得属性名称的属性值
d.setAttribute(“属性名称:属性值”)设置属性名称的新的属性值
d.removeAttribute(“属性名”)删除该条属性
document.getElementById("d1").innerHTML = "hello";
document.getElementById("d1").align="center";
改变HTML元素的CSS样式
document.getElementById("d1").style.width = "400px";
document.getElementById("d1").style.height = "400px";
DOM事件
其实同理与HTML元素的事件
EventLIstener:监听事件
添加监听事件
var d1=document.getElementById("d1")
d1.addEventListener("mouseover",function (){
alert("鼠标移入");
});
监听事件的传递方式
- 冒泡
- 捕获
当同一个事件被多层元素触发的时候,冒泡是从内到外
捕获是从外到内
添加事件的时候第三个默认为false:为冒泡传递
当修改为true时采用捕获传递
div.addEventListener("mouseover",function (){
alert("div被触发");
},true)
使用DOM操作元素
添加元素到HTML
- 创建元素:document.createElement()
- 追加元素:appendChild()
<body>
<table id="tab" border="1" cellspacing="0" width="200px">
<tr>
<th>序号</th>
<th>名字</th>
<th>内容</th>
<th>日期</th>
<th>备注</th>
</tr>
</table>
<script>
//获得对象
var tab=document.getElementById("tab");
//创建 对象
var tr =document.createElement("tr");
var th1=document.createElement("th");
th1.innerHTML="1";
tr.appendChild(th1);
var th2=document.createElement("th");
th2.innerHTML="zhangsai";
tr.appendChild(th2);
var th3=document.createElement("th");
th3.innerHTML="hah";
tr.appendChild(th3);
var th4=document.createElement("th");
th4.innerHTML=new Date();
tr.appendChild(th4);
var th5=document.createElement("th");
th5.innerHTML="dfadfad";
tr.appendChild(th5);
//添加对象
tab.appendChild(tr);
</script>
</body>
删除元素
tab.removeChild(tab.children[1]);
JavaScript定时器
定义定时器:
-
setInterval(“调用函数”,毫秒值)每间隔固定毫秒值就执行一次函数
- clearInterval(定时器名称):关闭定时器
-
setTimeout("调用函数"毫秒值)在固定时间之后执行一次调用函数
- clearTimeout(定时器名称)