ANG-X
ANG-X

前端——JS的相关操作

JS的相关操作

注意：以下为纯代码，不含本地资源（及可以在任何正常环境运行运行）
HTML和对应编号的JS相匹配,代码运行时需注释掉其他的代码
代码为学习视频的产品，若有侵权告知删除

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>js.Dom</title>
</head>
<body>
		*******************13***********************
		<div id="subject">jquery</div>

		*********************12删除******************
		<ul id="city">
	   	 <li id="bj" name="beijing">北京</li>
		 <li id="sh" name="shanghai">上海</li>
		 <li id="cq" name="chongqing">重庆</li>
	   </ul>

		*******************11添加节点**************
		<ul>
	   	 <li id="bj" name="beijing">北京</li>
		 <li id="sh" name="shanghai">上海</li>
		 <li id="cq" name="chongqing">重庆</li>
	  	</ul>

	********************10添加节点**************
	您喜欢的城市:<br> 
	   <ul id="city">
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul>

	********************9修改节点**************
	 您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji" >星际争霸</li>
	   </ul>   

	********************8获取节点**************
	 您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul>   

	********************7获取节点**************
	 您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing">重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="xj" value="xingji">星际争霸</li>
	   </ul> 


	********************7替换节点**************
	您喜欢的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
		 <li id="sh" value="shanghai">上海</li>
		 <li id="cq" value="chongqing"> 重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐<p>精英</p></li>
		 <li id="ms" value="moshou">魔兽</li>
		 <li id="cq" value="chuanqi">传奇</li>
	   </ul>   


	*******************6*****************
	  <ul>
	   	 <li id="bj" value="beijing">
	   	 	北京
			<p>海淀</p>
			奥运
	   	 </li>
		 <li id="sh" value="shanghai">上海</li>
	   </ul>



  	***************5输出节点值********************

	<form name="form1" action="test.html" method="post" >
	   	  <input type="text" name="tname" value="IT精英培训_1"  id="tid_1"  ><br>
		  <input type="text" name="tname" value="IT精英培训_2"  id="tid_2"  ><br>
		  <input type="text" name="tname" value="IT精英培训_3"  id="tid_3"  ><br>
		  <input type="button" name="ok" value="保存1"/>
  	</form>
  	<p id="pid">明天上课</p>

  

  *****************4*********************
  	<form name="form1" action="test.html" method="post" >
	   	  <input type="text" name="tname" value="IT精英培训_1"  id="tid_1"  ><br>
	  <input type="text" name="tname" value="IT精英培训_2"  id="tid_2"  ><br>
	  <input type="text" name="tname" value="IT精英培训_3"  id="tid_3"  ><br>
	  <input type="button" name="ok" value="保存1"/>
	   </form>
   
   
  <h1 id="h1">明天休息</h1>

	*************3标签名获得集合元素集合**********
	<form>
		<input type="text" name="tanem" value="123" id="tid_1">
		<input type="text" name="tanem" value="456" id="tid_2">
		<input type="text" name="tname" value="789" id="tid_3">
		<input id="but1" type="button" name="Ok" value="config">
	</form>

	<select naem="numbers" id="num">
		<option value="1">1</option>
		<option value="2" selected="selected">2</option>
		<option value="3">3</option>
	</select>
	<select name="chars" id="char">
		<option value="o1">o1</option>
		<option value="o2">o2</option>
		<option value="03">o3</option>
	</select>
	<input id="but" type="button" name="button" value="Submit">




	***********************2节点对象的集合******************
	<form>
		<input type="text" name="tname" value="123" id="tid_1">
		<input type="text" name="tname" value="456" id="tid_2">
		<input type="text" name="tname" value="789" id="tid_3">
		<input type="button" name="Ok" value="config">
	</form>




	***********************1**************************

	<form>
		<input type="text" name="uername" value="IT" id="tid">
		<input type="button" name="OK" value="config">
	</form>

	
</body>
<script type="text/javascript">
	__________________13______________________

	//使用innerHTML读出id=subject中的文本内容
	var div = document.getElementById("subject");
	alert(div.innerHTML);
	
	//将
今天
写到div的层中
	var div = document.getElementById("subject");
	div.innerHTML = "
今天
";


	//—————————————————12删除节点—————————————————————
	var city = document.getElementById("city");
	var bj = document.getElementById("bj");
	city.removeChild(bj);

	//—————————————————11节点—————————————————————
	var li = document.createElement("li");
	 li.setAttribute("id", "tj");
	 li.setAttribute("value", "tianjin");

	 var text = document.createTextNode("天津");
	 li.appendChild(text);

	 var ul = document.getElementsByTagName("ul");

	 var sh = document.getElementById("sh");
	 var cq = sh.nextSibling;
	 //____等价于
	 // var cq = document.getElementById("cq");
		// ul[0].insertBefore(li,cq);

	 ul[0].insertBefore(li,cq);

	 


	//_________________10添加节点__________________
	var li = document.createElement("li");
	 li.setAttribute("id", "tj");
	 li.setAttribute("value", "tianjin");

	 alert(li.getAttribute("id"));

	 var text = document.createTextNode("天津");
	 li.appendChild(text);

	 var city = document.getElementById("city");
	 city.appendChild(li);



	//_________________9__________________

	 //   // 给这个节点增加 name属性 
  • 星际争霸
    • 
		var xj = document.getElementById("xj");
		xj.setAttribute("name","xingjizhengba");
  	  //测试
  	 alert(xj.getAttribute("name"));

	  var fk = document.getElementById("fk");
	  fk.setAttribute("value", "ffkk");
	  alert(fk.getAttribute("value"));
  	  

	//_________________8__________________

	var xjs = document.getElementById("xj");
	alert(xjs.getAttribute("value"));


	// _________________7__________________
	//  点击北京节点， 将被反恐节点替换
    var bj = document.getElementById("bj");
    var fk = document.getElementById("fk");
    bj.onclick = function(){
    	var parentNode = this.parentNode;
    	parentNode.replaceChild(fk,this);
    };



	//——————————————————6——————————————————

	//打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue)
  	
		var nodes = document.getElementById("bj");
    alert(nodes.nodeName);
    alert(nodes.nodeType);
    alert(nodes.nodeValue);
  

    //同时打印文本值  北京 海淀  奥运 


	//———————————————————————5————————————

	//方法一 利用firstChild/lastChild  输出明天休息
  	var text = document.getElementById("h1");
    var si = text.lastChild;
    alert(si.nodeValue);
  	// //测试nodeValue是一个读写属性
    
  	
  	// //方法二childNodes表示父元素下的所有的子元素(数组)
  	var h1 = document.getElementById("h1");
  	var childs = h1.childNodes;
  	alert(childs[0].nodeValue);


	//____________________4___________________

	// //元素节点  id="tid_1"  输出nodeName nodeType nodeValue
	var node = document.getElementById("tid_1");
	 alert(node.nodeName);//input
	alert(node.nodeType);//1
	alert(node.nodeValue);//null 
	
	// 文本节点 id="pid"  输出nodeName nodeType nodeValue
	var node = document.getElementById("pid");
	var textNode = node.firstChild;
	alert(textNode.nodeName);//#text
	alert(textNode.nodeType);//3
	alert(textNode.nodeValue);//明天上课 
	
	// //属性节点  id="pid"   输出nodeName nodeType nodeValue
	 var node = document.getElementById("pid");
	var p = node.getAttributeNode("id");
	alert(p.nodeName);//id
	alert(p.nodeType);//2
	alert(p.nodeValue);//pid 
	// ____________________3__________________
	
	var inputNodes = document.getElementsByTagName("input");
	alert(inputNodes.length);
	// 输出所有包含input的节点的值
	for( var i = 0; i < inputNodes.length; i++){
		var inputNode = inputNodes[i];
		alert(inputNode.value);
	}

	// 输出所有包含input的节点，type = text的节点的value
	for( var i = 0; i < inputNodes.length; i++){
		var inputNode = inputNodes[i];
		if( inputNode.type == "text"){
			alert(inputNode.value);
		}
	}

	//输出所有下拉选select的option标签中value的值
	var options = document.getElementsByTagName("option");
	for( var i = 0; i < options.length; i++){
		var option = options[i];
		alert(option.value);
	}

	//输出所有下拉选 id="cahrs"中option标签中 value属性的值
	var chars = document.getElementById("char");
	var optionNodes = chars.getElementsByTagName("option");
	for( var i = 0; i < optionNodes.length; i++){
		var option = optionNodes[i];
		alert(option.value);
	}

	//点击按钮输出下拉框中被选中的值

	var button = document.getElementById("but");
	button.onclick = function(){
		var optionNodes = document.getElementsByTagName("option");
		for( var i = 0; i < optionNodes.length; i++){
			var optionNode = optionNodes[i];
			if(optionNode.selected){
				alert(optionNode.value);
			}
		}
	}
	

	// ____________________2获取节点集合元素________________

	var inputNodes = document.getElementsByName("tname");
	for(var i = 0; i < inputNodes.length; i++){
		var inputNode = inputNodes[i];
		inputNode.onchange = function(){
			alert(this.value);
		};
	}


	// ____________________1__________________

	var inputNode1 = document.getElementById("tid");
	alert(inputNode1.value);

	

</script>
</html>

    你可能感兴趣的:(前端,前端,javaScript基础知识)

    • Long类型前后端数据不一致 igotyback 前端
      响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
      加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    • node.js学习 小猿L node.jsnode.js学习vim
      node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    • 数据仓库——维度表一致性 墨染丶eye 背诵数据仓库
      数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
    • Rust基础知识 GRKF15 rust开发语言后端
      1.Rust语言简介1.1基础语法变量声明：let关键字用于声明变量，可以指定或不指定类型，如leta=10;和letmutc=30i32;。函数定义：使用fn关键字定义函数，并指定参数类型及返回类型，如fnadd(i:i32,j:i32)->i32{i+j}。控制流：包括if、else等，控制语句后需要使用;来结束语句。1.2数据类型整数类型：i8、i16、i32、i64、i128，以及无符号的
    • Python入门之Lesson2:Python基础语法 小熊同学哦 Python入门课程python开发语言算法数据结构青少年编程
      目录前言一.介绍1.变量和数据类型2.常见运算符3.输入输出4.条件语句5.循环结构二.练习三.总结前言欢迎来到《Python入门》系列博客的第二课。在上一课中，我们了解了Python的安装及运行环境的配置。在这一课中，我们将深入学习Python的基础语法，这是编写Python代码的根基。通过本节内容的学习，你将掌握变量、数据类型、运算符、输入输出、条件语句等Python编程的基础知识。一.介绍1
    • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
      这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
      在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
    • 博客网站制作教程 2401_85194651 javamaven
      首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    • 【2022 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级 C++语言试题及解析】 汉子萌萌哒 CCFnoi算法数据结构c++
      一、单项选择题(共15题，每题2分，共计30分；每题有且仅有一个正确选项)1.以下哪种功能没有涉及C++语言的面向对象特性支持：()。A.C++中调用printf函数B.C++中调用用户定义的类成员函数C.C++中构造一个class或structD.C++中构造来源于同一基类的多个派生类题目解析【解析】正确答案:AC++基础知识，面向对象和类有关，类又涉及父类、子类、继承、派生等关系，printf
    • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
      在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
    • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
      最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    • 补充元象二面 Redstone Monstrosity 前端面试
      1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    • 微信小程序开发注意事项 jun778895 微信小程序小程序
      微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
      切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
    • 字节二面 Redstone Monstrosity 前端面试
      1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    • Golang语言基础知识点总结 最帅猪猪侠 golang开发语言后端
      Golang语言基础知识点小总结1.go语言有两大类型：值类型：数值类型，bool，string，数组，struct结构体变量直接存储值，内存通常在栈中分配,修改值,不会对源对象产生影响引用类型：指针，slice切片，管道chan，map，interface变量存储的是一个地址，这个地址对应的空间才真正存储数据值，内存通常在堆上分配，当没有任何变量引用这个地址时，该地址对应的数据空间就成为一个垃圾
    • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
      点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
      第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    • 高性能javascript--算法和流程控制 海淀萌狗
      -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
    • go基础知识归纳总结 悟空丶123 golang开发语言后端
      无缓冲的channel和有缓冲的channel的区别？在Go语言中，channel是用来在goroutines之间传递数据的主要机制。它们有两种类型：无缓冲的channel和有缓冲的channel。无缓冲的channel行为：无缓冲的channel是一种同步的通信方式，发送和接收必须同时发生。如果一个goroutine试图通过无缓冲channel发送数据，它会阻塞，直到另一个goroutine从该
    • 360前端星计划-动画可以这么玩 马小蜗
      动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    • Vue + Express实现一个表单提交 九旬大爷的梦
      最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
    • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
      我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
    • Nginx从入门到实践(三) 听你讲故事啊
      动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
      Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    • 前端知识点 ZhangTao_zata 前端javascriptcss
      下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
    • Linux的Initrd机制 被触发 linux
      Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
    • maven本地仓库路径修改 bitcarter maven
      默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法：     1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml     2.找到        
    • XSD和XML中的命名空间 darrenzhu xmlxsdschemanamespace命名空间
      http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
    • Java 求素数运算 周凡杨 java算法素数
      网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。 第一种：   原理: 6N(+-)1法         任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)   
    • java 单例模式 g21121 java
      想必单例模式大家都不会陌生，有如下两种方式来实现单例模式：   class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
    • Linux下Mysql源码安装 510888780 mysql
      1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录       解压缩下载的源码包，目录结构，特殊指定的目录除外：           
    • 32位和64位操作系统 墙头上一根草 32位和64位操作系统
      32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
    • 我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
      一、问题提问：     → 请简单介绍一下什么是轻量级？     轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。  
    • mongodb 环境搭建及简单CURD antlove WebInstallcurdNoSQLmongo
      一 搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
    • 数据字典和动态视图 百合不是茶 oracle数据字典动态视图系统和对象权限
      数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭   数据字典中包含   数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
    • 多线程编程一般规则 bijian1013 javathread多线程java多线程
             如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。        不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
    • 将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linuxunixscp
      一.功能说明        scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下：        scp 远程用户名@IP地址：文件的绝对路径
    • 【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
      以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。   示例数据：   地址表：   CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
    • cookie状态判断引发的查找问题 bitcarter formcgi
      先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题） 问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
    • 通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
      一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
    • java-67- n个骰子的点数。 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
      public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
    • 看别人的博客，觉得心情很好 Cb123456 博客心情
         以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客:    职业规划:    http://www.iteye.com/blogs/subjects/zhiyeguihua      android学习:    1.http://byandby.i
    • [JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
          我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误      在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
    • JS常用的事件及方法 cwqcwqmax9 js
      事件 描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
    • 正则表达式验证日期格式 dashuaifu 正则表达式IT其它java其它
      正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
    • Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
      public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则，应重写此方法。 每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
    • UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
      In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
    • 判断一个数是质数的几种方法 EmmaZhao Mathpython
      质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。 判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
    • SpringSecurity工作原理小解读 坏我一锅粥 SpringSecurity
        SecurityContextPersistenceFilter   ConcurrentSessionFilter   WebAsyncManagerIntegrationFilter   HeaderWriterFilter   CsrfFilter   LogoutFilter   Use
    • JS实现自适应宽度的Tag切换 ini JavaScripthtmlWebcsshtml5
      效果体验：http://hovertree.com/texiao/js/3.htm   该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
    • Hbase Rest API : 数据查询 kane_xie RESThbase
      hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。   启动命令：./bin/hbase rest s
    • JQuery实现鼠标拖动元素移动位置（源码+注释） 明子健 jqueryjs源码拖动鼠标
      欢迎讨论指正！   print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
    • Postgresql 连表更新字段语法 update qifeifei PostgreSQL
      下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
    • 将redis,memcache结合使用的方案? tcrct rediscache
      公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
    • 开发中遇到的诡异的bug wudixiaotie bug
      今天我们服务器组遇到个问题： 我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他