（2）JavaScript——————后端开发需要掌握的JavaScript基础知识

最新推荐文章于 2023-10-18 12:09:23 发布

Tommey01

最新推荐文章于 2023-10-18 12:09:23 发布

阅读量1.4k

点赞数

分类专栏： web 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_41530004/article/details/105802663

版权

web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1，系统性的学习JavaScript

2，在html 的什么位置编写 js 代码?

2.1，直接在 html 页面中书写代码
2.2，在 body 节点之前
2.3，可以在整个 html 文档的最后编写类似代码
2.4，在 body 节点之前编写 js 代码, 利用 window.onload 事件

3，元素节点和子节点

3.1，如何获取元素节点
3.2，创建一个元素节点
3.3，获取元素节点的子节点
3.4，为元素节点添加子节点

4，节点的属性

5，文本节点

5.1，创建文本节点
5.2，获取文本节点

6，节点的替换

7，插入节点和删除节点

7.1，插入节点
7.2，删除节点
7.3，节点添加和删除案例

8，innerHTML属性

9，Checkbox

系统性的学习JavaScript

如何进行既快速又系统的学习JavaScript，具体可参照W3cshool进行学习，点击此处开始学习

在html 的什么位置编写 js 代码

1，直接在 html 页面中书写代码

案例：

<button id="button" onclick="alert('hello world');">Click Me!</button>

缺点:

①， js 和 html 强耦合，不利用代码的维护

②，若 click 相应函数是比较复杂的，则需要先定义一个函数，然后再在 onclick 属性中完成对函数的引用，比较麻烦

2，在 body 节点之前

一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成，获取不到指定的节点

3，可以在整个 html 文档的最后编写类似代码

4，在 body 节点之前编写 js 代码，利用 window.onload 事件

<script type="text/javascript">
		window.onload = function(){
			var cityNode = document.getElementById("city");
			alert(cityNode);
		};
</script>

元素节点和子节点

1，如何获取元素节点

①， getElementById

document.getElementById：根据 id 属性获取对应的单个节点

②，getElementsByTagName

document.getElementsByTagName：根据标签名获取指定节点名字的数组，数组对象 length 属性可以获取数组的长度

③，getElementsByName

document.getElementsByName：根据节点的 name 属性获取符合条件的节点数组，但 ie 的实现方式和 W3C 标准有差别：在 html 文档中若某节点(li)没有 name 属性，则 ie 使用 getElementsByName 不能获取到节点数组，但火狐可以。

2，创建一个元素节点

createElement()：按照给定的标签名创建一个新的元素节点。
方法只有一个参数：被创建的元素节点的名字，是一个字符串。
方法的返回值：是一个指向新建节点的引用指针，返回值是一个元素节点, 所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

3，获取元素节点的子节点

获取元素节点的子节点（只有元素节点才有子节点）

①，childNodes 属性获取全部的子节点，但该方法不实用。因为如果要获取指定的节点的指定子节点的集合，可以直接调用元素节点的 getElementsByTagName() 方法来获取。

②，firstChild 属性获取第一个子节点。

③，lastChild 属性获取最后一个子节点。

4，为元素节点添加子节点

appendChild()：
var reference = element.appendChild(newChild)：给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。方法的返回值是一个指向新增子节点的引用指针。

节点的属性

1，nodeName：代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串

2，nodeType：返回一个整数，这个数值代表着给定节点的类型，只读属性。
1 – 元素节点，2 – 属性节点，3 – 文本节点

3， nodeValue：返回给定节点的当前值(字符串)，可读写的属性

①，元素节点, 返回值是 null。

②，属性节点：返回值是这个属性的值

③，文本节点：返回值是这个文本节点的内容

文本节点

1，创建文本节点

createTextNode()：创建一个包含着给定文本的新文本节点，这个方法的返回值是一个指向新建文本节点引用指针，它是一个文本节点，所以它的 nodeType 属性等于 3。
方法只有一个参数：新建文本节点所包含的文本字符串，新元素节点不会自动添加到文档里

var node = document.createTextNode("这是新文本。");

2，获取文本节点

①，步骤：元素节点 --> 获取元素节点的子节点

②，若元素节点只有文本节点一个子节点，可以先获取到指定的元素节点 eleNode，然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

案例

<script type="text/javascript">
window.onload = function(){
	var types = document.getElementById("types");
	var type = types .firstChild;
	alert(type.nodeValue);	
	type.nodeValue = "Tommey周";
}
</script>
</head>

<body>
<p>你喜欢那种类型</p>
<ul id="types">
<li>御姐</li>
<li>萝莉</li>
<li>傻白甜</li>
</ul>
</body>

节点的替换

①，replaceChild()：把一个给定父元素里的一个子节点替换为另外一个子节点，返回值是一个指向已被替换的那个子节点的引用指针

var reference = element.replaceChild(newChild,oldChild);

②，该节点除了替换功能以外还有移动的功能。

③，该方法只能完成单向替换, 若需要使用双向替换，需要自定义函数：

/**
 * 互换 aNode 和 bNode
 */
function replaceEach(aNode, bNode){
	
	if(aNode == bNode){
		return;
	}
	
	var aParentNode = aNode.parentNode;
	//若 aNode 有父节点
	if(aParentNode){
		var bParentNode = bNode.parentNode;
		
		//若 bNode 有父节点	
		if(bParentNode){
			var tempNode = aNode.cloneNode(true);
			bParentNode.replaceChild(tempNode, bNode);
			aParentNode.replaceChild(bNode, aNode);	
		}
	}

}

插入节点和删除节点

1，插入节点

①，insertBefore()：把一个给定节点插入到一个给定元素节点的给定子节点的前面，节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面，节点 targetNode 必须是 element 元素的一个子节点。

var reference = element.insertBefore(newNode,targetNode);

②，自定义 insertAfter() 方法

  /**
 * 将 newChild 插入到 refChild 的后边
 */
function insertAfter(newChild, refChild){
	var refParentNode = refChild.parentNode;
	
	//判断 refChild 是否存在父节点
	if(refParentNode){
		//判断 refChild 节点是否为其父节点的最后一个子节点
		if(refChild == refParentNode.lastChild){
			refParentNode.appendChild(newChild);
		}else{
			refParentNode.insertBefore(newChild, refChild.nextSibling);
		}	
	}
}

2，删除节点

①，removeChild()：从一个给定元素里删除一个子节点，返回值是一个指向已被删除的子节点的引用指针，某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除，如果想删除某个节点，但不知道它的父节点是哪一个， parentNode 属性可以帮忙。

var reference = element.removeChild(node);

3，节点添加和删除案例（jQuery版）：

在这里插入图片描述

 window.onload = function(){
	 
	 function removeTr(aNoe){
		 
		 var trNode = aNoe.parentNode.parentNode;
		 
		 var textContent = trNode.getElementsByTagName("td")[0]
		                         .firstChild.nodeValue;
		 textContent = trim(textContent);
		 
		 var flag = confirm("确定要删除" + textContent + "的信息吗?");
		 if(flag){
			 trNode.parentNode.removeChild(trNode);
		 }
		 
		 return false;
	 }
	 
	 var aNodes = document.getElementById("employeetable")
	                      .getElementsByTagName("a");
	 for(var i = 0; i < aNodes.length; i++){
		 aNodes[i].onclick = function(){
			 removeTr(this);			 
			 return false;
		 }
	 }
	 
	 document.getElementById("addEmpButton").onclick = function(){
		 
		 var nameVal = document.getElementById("name").value;
		 var emailVal = document.getElementById("email").value;
		 var salaryVal = document.getElementById("salary").value;
		 
		 var nameTd = document.createElement("td");
		 nameTd.appendChild(document.createTextNode(nameVal));

		 var emailTd = document.createElement("td");
		 emailTd.appendChild(document.createTextNode(emailVal));
		 
		 var salaryTd = document.createElement("td");
		 salaryTd.appendChild(document.createTextNode(salaryVal));
		 
		 var tr = document.createElement("tr");
		 
		 tr.appendChild(nameTd);
		 tr.appendChild(emailTd);
		 tr.appendChild(salaryTd);
		 
		 var aNode = document.createElement("a");
		 aNode.href = "deleteEmp?id=xxx";
		 aNode.appendChild(document.createTextNode("Delete"));
		 var aTd = document.createElement("td");
		 aTd.appendChild(aNode);
		 
		 tr.appendChild(aTd);
		 
		 aNode.onclick = function(){
			 removeTr(this);			 
			 return false;
		 }
		 
		 document.getElementById("employeetable")
		         .getElementsByTagName("tbody")[0]
		         .appendChild(tr);
		 
	 }
	 
	 function trim(str){
		 var reg = /^\s*|\s*$/g;
		 return str.replace(reg, "");
	 }
	 
 }

</script>
</head>
<body>

	<center>
		<br> <br> 添加新员工 <br> <br> name: <input type="text"
			name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
			name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
			name="salary" id="salary" /> <br> <br>
		<button id="addEmpButton" value="abc">Submit</button>
		<br> <br>
		<hr>
		<br> <br>
		<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
			<tbody>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>&nbsp;</th>
				</tr>
				<tr>
					<td>Tommey周</td>
					<td>tommey@139.com</td>
					<td>4500</td>
					<td><a href="deleteEmp?id=001">Delete</a></td>
				</tr>
				<tr>
					<td>周</td>
					<td>zhou@139.com</td>
					<td>10000</td>
					<td><a href="deleteEmp?id=002">Delete</a></td>
				</tr>
				<tr>
					<td>周周</td>
					<td>zhouzhou@139.com</td>
					<td>15000</td>
					<td><a href="deleteEmp?id=003">Delete</a></td>
				</tr>
			</tbody>
		</table>
	</center>

</body>
</html>

innerHTML属性

浏览器几乎都支持该属性，但不是 DOM 标准的组成部分， innerHTML 属性可以用来读，写某给定元素里的 HTML 内容
使用案例：

<script>
function changeLink(){
	document.getElementById('myAnchor').innerHTML="Tommey";
}
</script>
</head>
<body>
<a id="myAnchor" href="https://blog.csdn.net/qq_41530004">Tommey周</a>
<input type="button" onclick="changeLink()" value="修改">
</body>
</html>

Checkbox

Checkbox 全选的使用案例（jQuery版）：

在这里插入图片描述

<script type="text/javascript">
	window.onload = function(){
		document.getElementById("checkedAll_2").onclick = function(){
			
			var flag = this.checked;
			var items = document.getElementsByName("items");
			
			for(var i = 0; i < items.length; i++){
				items[i].checked = flag;
			}
			
		}
		
		var items = document.getElementsByName("items");
		
		for(var i = 0; i < items.length; i++){
			items[i].onclick = function(){
				//记录有多少个 items 被选中了
				var number = 0;
				for(var j = 0; j < items.length; j++){
					if(items[j].checked){
						number++;
					}
				}
				
				document.getElementById("checkedAll_2").checked = 
					(items.length == number);
			}
		}
		
		document.getElementById("CheckedAll").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = true;
			}
		}
		
		document.getElementById("CheckedNo").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = false;
			}
		}
		
		document.getElementById("CheckedRev").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = !items[i].checked;
			}
		}
		
		document.getElementById("send").onclick = function(){
			for(var i = 0; i < items.length; i++){
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		}
	}
	
	
</script>
</head>
<body>

	<form method="post" action="">
		<div>你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 </div></p>
		
		<div><input
			type="checkbox" name="items" value="足球" />足球 <input type="checkbox"
			name="items" value="篮球" />篮球 <input type="checkbox" name="items"
			value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球
		</div></p>
		<div><input type="button" id="CheckedAll" value="全　选" /> <input
			type="button" id="CheckedNo" value="全不选" /> <input type="button"
			id="CheckedRev" value="反　选" /> <input type="button" id="send"
			value="提　交" /></div>
	</form>

</body>
</html>

下一章，（3）jQuery——————jQuery的快速复习之旅（一）

Tommey01

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
（2）JavaScript——————后端开发需要掌握的JavaScript基础知识

1，设置背景1.1，设置背景颜色1.2，类选择器1.3， ID选择器1.4，复合选择器1.5，群组选择器2，选择器2.1，元素选择器2.2，类选择器2.3， ID选择器2.4，复合选择器2.5，群组选择器2.6，通用选择器2.7，后代选择器2.8，属性选择器2.9，伪类和伪元素2.10，选择器的优先级3，盒子模型3.1，内容区...
复制链接

扫一扫

专栏目录