菜鸟教程学习网站javascript不包括哪个项目 javascript基础入门菜鸟

转载

ganmaobuhaowan 2023-11-07 10:47:09

文章标签 HTML 监听事件运算符 文章分类 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(定时器名称)

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java使用符合画矩形 java画格子

下一篇：虚拟化voidata分区创建虚拟分区

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

菜鸟教程学习网站javascript不包括哪个项目 javascript基础入门菜鸟

菜鸟教程学习网站javascript不包括哪个项目 javascript基础入门菜鸟

小白学Java30:JavaScript

什么是JavaScript

JavaScript的基本语法

使用JavaScript

JavaScript数据类型

变量声明

基本类型

数字类型(Number)

字符串类型(String)

布尔类型(boolean)

引用类型

数组类型

JavaScript的运算符

逻辑运算符

关系运算符

单目运算符

JavaScript的函数

自定义函数

声明方式

自定义函数的分类

常用函数

三种弹窗函数

事件

JavaScript的DOM

查找HTML元素

利用当前元素获得周边元素

改变HTML元素

改变HTML元素的CSS样式

DOM事件

EventLIstener:监听事件

添加监听事件

监听事件的传递方式

使用DOM操作元素

添加元素到HTML

删除元素

JavaScript定时器

定义定时器:

51CTO博客