学习笔记二（JS基本语法）

最新推荐文章于 2024-06-26 09:51:03 发布

木偶winner

最新推荐文章于 2024-06-26 09:51:03 发布

阅读量119

点赞数

分类专栏： JavaWeb学习文章标签： dom javascript js css html5

本文链接：https://blog.csdn.net/ssnszds/article/details/105569147

版权

JavaWeb学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. JavaScript简介

js是一种弱类型语言，也是一种动态类型语言
js是一种基于对象和事件驱动的脚本语言。

2. 基本语法

变量

* 语法：使用var声明变量，eg:var i = 100; var s = “s”;
* 注意：变量名区分大小写，使用期间可以任意赋值，可以不声明就直接赋值使用（不建议）。

函数

声明函数
* 有名函数：function methodName(){}
* 匿名函数: function (){}
使用函数
调用有名函数
*methodName()|methodName区别，前者直接调用函数，后者使用函数的引用。
注意： js中调用函数时，不检查形参与实参的匹配情况
1. 形参<实参:自动忽略多余的实参
2. 形参>实参：
* 实参类型为number型，返回：NaN（not a number）
* 实参类型为string型，返回：值+undefined
调用匿名函数
* 直接使用事件关联匿名函数：window.onload = function(){}
* 使用变量名（引用）关联匿名函数：var methodName = function(){}

对象

函数也是对象：function methodName(){}，methodName.name
js中声明对象
1. var obj = new Object()
2. var jsonObj = {key:value,key2:value2} jsonObj.key

3. 事件

window.onload:加载事件。当前文档完全加载后执行。
element.onclick:单击事件

4. js嵌入方式

行内：书写在事件属性中，

eg:<input onclick="alert()">

内部: 书写在<.script>标签中
外部：书写在xxx.js文件中，注意不能在该标签中书写js代码。要想再写代码需要另起一个script标签。
注意：window.onload表示当前文档完全加载后执行。(一个源文件中只能有一个window.onload)
优先级：就近原则

<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript">
  	alert("hello");
</script>

5. DOM查询

简介：

Document Object Model文档对象模型

节点

文档节点：document
元素节点：element
文本节点：text
属性节点：attribute

基于整个文档查找元素

getElementById()
getElementsByTagName()
getElementsByName()

基于元素节点查找元素

子元素
* childNodes:所有子节点
* firstChild:
* lastChild:
* getElementsByTagName()
父元素
* parentNode
兄弟元素
* previousSibling：前
* nextSibling后

js操作文本
.innerText
.innerHTML
.value

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点
		var btnEle  = document.getElementById("btn01");
		btnEle.onclick = function(){
			var bjEle = document.getElementById("bj");
			alert(bjEle.innerText);
		};	
		
		//2.查找所有li节点
		var btnEle02 = document.getElementById("btn02");
		btnEle02.onclick = function(){
			var lis = document.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				alert(lis[i].innerHTML);
			}
		};
		//3.查找name=gender的所有节点
		var btnEle03 = document.getElementById("btn03");
		btnEle03.onclick = function(){
			var gds = document.getElementsByName("gender");
			for(var i=0;i<gds.length;i++){
				alert(gds[i].value);
			}
		};
		//4.查找#city下所有li节点
		var btnEle04 = document.getElementById("btn04");
		btnEle04.onclick = function(){
			var cityEle = document.getElementById("city");
			var lis = cityEle.getElementsByTagName("li");
			alert(lis.length);
		};
		//5.返回#city的所有子节点
		var btnEle05 = document.getElementById("btn05");
		btnEle05.onclick = function(){
			var cityEle = document.getElementById("city");
			var cs = cityEle.childNodes;
			//注意：ie版本<=8时，四个子节点。ie版本>=9时，9个子节点
			alert(cs.length);
		};
		//6.返回#phone的第一个子节点
		var btnEle06 = document.getElementById("btn06");
		btnEle06.onclick = function(){
			var phoneEle = document.getElementById("phone");
			var fc = phoneEle.firstChild;
			alert(fc.innerText);
		};
		//7.返回#bj的父节点
		var btnEle07 = document.getElementById("btn07");
		btnEle07.onclick = function(){
			var bjEle = document.getElementById("bj");
			var pn = bjEle.parentNode;
			alert(pn.innerHTML);
// 			alert(pn.innerText);
		};
		//8.返回#android的前一个兄弟节点
		var btnEle08 = document.getElementById("btn08");
		btnEle08.onclick = function(){
			var adEle = document.getElementById("android");
			var psEle = adEle.previousSibling;
			alert(psEle.innerText);
		};
		//9.读取#username的value属性值
		var btnEle09 = document.getElementById("btn09");
		btnEle09.onclick = function(){
			var userNameEle = document.getElementById("username");
			var ut = userNameEle.value
			alert(ut);
		};
		//10.设置#username的value属性值
		var btnEle10 = document.getElementById("btn10");
		btnEle10.onclick = function(){
			var userNameEle = document.getElementById("username");
			userNameEle.value = "123456";
		};
		//11.返回#bj的文本值
		var btnEle11 = document.getElementById("btn11");
		btnEle11.onclick = function(){
			var bjEle = document.getElementById("bj");
// 			alert(bjEle.innerHTML);
			var nv = bjEle.firstChild.nodeValue;
			alert(nv);
			
		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		</p>

		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br />
		<br />

		<p>
			你手机的操作系统是?
		</p>

		<ul id="phone">
			<li>IOS</li>
			<li id="android">Android</li>
			<li>Windows Phone</li>
		</ul>
	</div>

	<div class="inner">
		gender:
			<input type="radio" name="gender" value="male"/>
			Male
			<input type="radio" name="gender" value="female"/>
			Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查找#bj节点</button></div>
	<div><button id="btn02">查找所有li节点</button></div>
	<div><button id="btn03">查找name=gender的所有节点</button></div>
	<div><button id="btn04">查找#city下所有li节点</button></div>
	<div><button id="btn05">返回#city的所有子节点</button></div>
	<div><button id="btn06">返回#phone的第一个子节点</button></div>
	<div><button id="btn07">返回#bj的父节点</button></div>
	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
	<div><button id="btn09">返回#username的value属性值</button></div>
	<div><button id="btn10">设置#username的value属性值</button></div>
	<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

木偶winner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记二（JS基本语法）

1. JavaScript简介js是一种弱类型语言，也是一种动态类型语言js是一种基于对象和事件驱动的脚本语言。2. 基本语法变量 * 语法：使用var声明变量，eg:var i = 100; var s = “s”; * 注意：变量名区分大小写，使用期间可以任意赋值，可以不声明就直接赋值使用（不建议）。函数声明函数 * 有名函数：function methodName()...
复制链接

扫一扫