01-DOM

最新推荐文章于 2023-07-02 21:59:50 发布

griow

最新推荐文章于 2023-07-02 21:59:50 发布

阅读量84

点赞数

分类专栏： java web学习

本文链接：https://blog.csdn.net/potato_grow/article/details/117740645

版权

java web学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM

前端hello world(1)
js基本语法
js嵌入方式(3)
- 知识点：
jsDOM查询（4）
- 总结

前端hello world(1)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<script type="text/javascript">
	//借助window.onload事件,在这个页面加载完成后执行程序代码
	window.onload = function(){
		//获取按钮对象
		var btnEle = document.getElementById("btnId");
		//给按钮对象绑定单击响应函数
		btnEle.onclick = function(){
			//弹出警告框
			alert("Hello");
		};
	};
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

js基本语法

基本变量：

<script type="text/javascript">
	
	/*/1.变量声明
		*js:是一种弱类型语言（对数据类型要求比较弱），
		* 	也是一种动态类型语言。（运行期间可以任意赋值）
		*语法：var i = 0; var s = "";
		java:int i= 0; String s = "";
	
	//2.变量赋值
	
	//3.变量严格区分大写小写
	*/
</script>

函数：

<script type="text/javascript">

	/*
		1.函数声明
			*	使用function声明函数
			*	语法：
					1、有名函数：function mName(){}
					2、匿名函数：function(){}
		2.函数调用
			*	js中调用函数时，不检查参数的匹配情况
					*	形参>实参
							*	实参为number型，返回NaN
							*	实参为string型，返回值：+undefined
					*	形参<实参
							*	自动忽略后面多余的参数
			*	NaN: not a number
			*	调用匿名函数
					1. window.onload = function(){}
					2. var fun = function(){}
	*/
	/* function add(i,j){
			return (i+j);
	}
	alert(add(1,2)); */
	var fun = function(){
		alert("aaa");
	}
	fun();//调用一
	window.onload = fun;//调用二
</script>

函数是对象：

<script type="text/javascript">
	//在JavaScript中，函数也作为一种数据类型存在，而且是"引用数据类型"，
	//函数名就是指向其内存空间地址的引用
	//在JavaScript中函数也是对象
	/*
		*	对象
			*	在js中定义对象
					1. var obj = new Object()
					2. var jsonObj = {key:value,key2:value2,key3:value3};
	*/
	var jo = {"name":"zs","age":18,"yOn":true};
	alert(jo.name);
	
	function methodName(){
		alert("methodName");
	}
	methodName.age = 18;//验证函数名就是指向其内存空间的引用
	alert(methodName.name);
	alert(methodName.age); 
</script>

事件：

<script type="text/javascript">
	//借助window.onload事件,在这个页面加载完成后执行程序代码
	/*注意：
		*函数调用时，fun 与 fun()区别
			fun():直接执行函数
			fun:调用函数的引用
	*/	
	window.onload = function(){
		//造地雷
		function dl(){
			alert("拜拜，小鬼子");
		}
		//找位置，埋地雷
		var btnEle = document.getElementById("btnId");
		btnEle.onclick = dl;//加()会直接执行
		//小鬼子
	};
</script>

js嵌入方式(3)

知识点：

<body>
	<!-- 
	* js的嵌入方式
		1. 行内js，写到标签的事件属性中：结构与行为相耦合，不建议使用
		2. 内部js，写到script标签中，script标签放到head标签中，无法获取按钮对象
		3. 外部js，引入外部js文件
		  * <script type="text/javascript" src="demo.js"></script>
		    * 如果script标签中有src属性，此时该标签的作用是引入外部js标签，不能在该标签中书写js代码
		* window.onload：当前文档完全加载后执行。
			完全：指的是包含图片，音频，视频等
	 -->
	<button id="btnId" onclick="alert('hello');">SayHello</button>
</body>

<title>load02</title>
<!-- 2.写到script标签中，script标签放到head标签中，无法获取按钮对象 -->
<script type="text/javascript">
	var btnEle = document.getElementById("btnId");
	btnEle.onclick = function(){
		alert("hello");
	}
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

<body>
	<button id="btnId">SayHello</button>
</body>

<!-- 3.写到script标签中，script标签放到body标签后面，不符合我们的习惯 -->
<script type="text/javascript">
	var btnEle = document.getElementById("btnId");
	btnEle.onclick = function(){
		alert("hello");
	}
</script>

<!-- 4.使用window.onload，完美解决此问题 -->
<script type="text/javascript">
	window.onload = function(){
		var btnEle = document.getElementById("btnId");
		btnEle.onclick = function(){
			alert("hello");
		}
	}

</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

<!-- 外部的demo.js文件 -->
window.onload = function(){
		var btnEle = document.getElementById("btnId");
		btnEle.onclick = function(){
			alert("hello");
		};
	};

<!-- 5.引入外部的js文件 -->
<script type="text/javascript" src="demo.js"></script>

</head>
<body>
	<button id="btnId">SayHello</button>
</body>

jsDOM查询（4）

总结


			DOM操作
				* 简介：Document Object Model文档对象模型
				* 结点：
					* 文档结点：document
					* 元素结点：element
					* 文本结点：text
					* 属性结点：attribute
				*dom查询
					*基于整个文档查询：
						*getElementById()
						*getElementsByTagName()
						*getElementsByName();