路漫漫其修远兮：js的成长经历（一）—— js的小技巧

最新推荐文章于 2024-09-02 16:24:04 发布

不愿意做鱼的小鲸鱼

最新推荐文章于 2024-09-02 16:24:04 发布

阅读量280

点赞数 2

分类专栏： javacript 文章标签： javaScript Web前端网页制作 DOM节点

本文链接：https://blog.csdn.net/qq_42038623/article/details/97913701

版权

javacript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

三种js的警示框

alert(“直接弹出对话框”);
confirm(“弹出选择确定或者取消”);
prompt(“请输入内容：”,“默认的内容”);//是用户输入用的方法

使用实例如下：

<script type="text/javascript">
			alert("直接弹出对话框");
			var a=confirm("弹出选择确定或者取消");
			alert("confirm警示框返回的值是："+a);
			var b=prompt("请输入内容：","默认的内容");
			alert("你输入的内容是："+b);
</script>

获取窗口对象

通过open来打开指定大小的窗口
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,specs,replace)

URL 可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
name 可选。指定target属性或窗口的名称。
specs 可选。一个逗号分隔的项目列表。支持以下值
replace Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

如以下示例通过button获取窗口对象，创建新的窗口

<body>
		<script type="text/javascript">
			window.onload=function(){
				var dx=document.getElementById("btn");
				dx.onclick=function(){
					open("https://www.baidu.com/","百度","width=500,height=500");
				}			
			}
		</script>
		<input type="button" value="打开百度" id="btn" />
	</body>

Attribute方法和普通获取节点的区别

1.class属性范围的区别点操作是通过classname，而Attribute是通过class
2.Attribute方法用户自定义支持
3.点操作无法完全删除属性，只能将属性值置空，Attribute可以

代码演示如下

<body>
		<div id= "hello" class ="hi" name ="sad" title="happy">			
		</div>
		<script type="text/javascript">
			/*
			Attribute方法和普通获取节点的区别，
			1.class属性范围的区别点操作是通过classname，而Attribute是通过class
			2.Attribute方法用户自定义支持
			3.点操作无法完全删除属性，只能将属性值置空，Attribute可以
			*/
			var odiv=document.getElementById("hello");
			alert(odiv.getAttribute("name"));
			alert(odiv.getAttribute("class"));
			odiv.setAttribute("xxx","yyy");			
			alert(odiv.getAttribute("xxx"));
			odiv.removeAttribute("xxx");
			alert(odiv.xxx)
		</script>
	</body>

删除空白节点的方法

什么是空白节点？
DOM节点的三个重要属性
空白节点是文本节点的一种，值为空：空白换行也算空白节点
如：

<div id= "hello">
			<em>斜体</em>
			文本内容
			<strong>粗体</strong>
</div>

这个div下有5个DOM节点，两个空白节点
但是空白节点往往是不需要的，需要删除，否则在节点操作上比较麻烦
因此总结了以下的方法：

<body>
		<div id= "hello">
			<em>斜体</em>
			文本内容
			<strong>粗体</strong>
		</div>
		<script type="text/javascript">
			var odiv=document.getElementById("hello");
			//没有删除空白节点时的节点数组长度
			alert(odiv.childNodes.length);//空白换行也算是节点
			
			function removeSpaceNode(parent){
				var nodes =parent.childNodes;
				for(var i=nodes.length-1;i>=0;i--){
					if(nodes[i].nodeType==3 && /^\s+$/.test(nodes[i].nodeValue)){
						//删除空白节点
						parent.removeChild(nodes[i]);
					}
				}		
			}
			removeSpaceNode(odiv);
			//删除空白节点之后的节点数组的长度
			alert(odiv.childNodes.length);
			//打印节点数组中第二个节点的名称
			alert(odiv.childNodes[1].nodeName)
		</script>
	</body>

阻止默认行为事件

在HTML标签中有许多有默认事件的标签,如 a 标签
阻止默认行为事件的方法有三种：
1.return false;
2.var evt=e ||event;
evt.returnValue=false;
3.var evt=e ||event;
evt.preventDefault();
示例如下：

<body>
		<a href="">请点击我</a>
		<script type="text/javascript">
			var oLink=document.getElementsByTagName("a")[0];
			oLink.onclick = function(e){				
				console.log("Aaa")
				 return false;
				var evt=e ||event;
				// evt.returnValue=false;
				// evt.preventDefault();
			}
		</script>
	</body>

DOM二级事件处理

在这里插入图片描述
利用上面阻止默认事件的方法，加上DOM二级事件的小示例：

<body>
		<a href="">请点击我</a>
		<script type="text/javascript">
			var outer=document.getElementsByTagName("a")[0];
			outer.onclick = function(){
				return false;
			}
			function foo(){
				console.log("今天你开心吗^_^!")
			}
			function addEvent(obj,type,fun){
				if(obj.addEventListener){
					obj.addEventListener(type,fun,false);
				}
				else{
					obj.attachEvent("on"+type,fun);//添加IE下的事件监听
				}
			}
			function removeEvent(obj,type,fun){
				if(obj.removeEventListener){
					obj.removeEventListener(type,fun,false);
				}
				else{
					obj.detachEvent("on"+type,fun);//移除IE下的事件监听
				}
			}
			addEvent(outer,"click",foo);
			// removeEvent(outer,"click",foo);
		</script>
	</body>

CSDN的朋友们大家好，很感谢您将我的第一条博客翻阅完。我是正在努力向程序员靠近的有一点基础的小白，现在是一个准大三的学生，我知道程序员这条路很难，不过路漫漫其修远兮，用自己的码解决一些问题是我喜欢做的事情，有java，python，web，MySQL，nosql，R语言的一些基础（ps：其实都是学校开的课程啦）不过真正的来说，这些基础在程序员的道路上根本是刚起步，所以我想自学一些更高阶的东西，我比较感兴趣的有Java，js，python，我的目标是成为全栈工程师，前后端都会的那种。现在有意识写写博客记录一下成长啦，如果有一起在程序员这条路上一起成长的小伙伴，可以一起交流^_。讨论技术方面问题的兴奋心情，作为计算机专业的都懂，哈哈哈（qq：1205529635）
在这条道路上一起加油吧！！！