JavaEE中级.20190529.节点（二）（创建节点.插入节点.间接查找节点.替换节点.克隆节点.删除节点.）.表单（获取表单.获取 input 的元素.获取单/双选按钮.获取下拉选项.获取下）

最新推荐文章于 2024-11-11 13:38:25 发布
原创 最新推荐文章于 2024-11-11 13:38:25 发布 · 325 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了JavaEE中关于节点的操作，包括创建、插入、查找、替换、克隆和删除节点的方法。同时讲解了如何获取和处理表单，如获取input元素、单选按钮、多选按钮、下拉选项等，并探讨了表单提交的GET和POST请求方式。

一.节点（二）

     1.创建节点
                       方法                         描述
            createElement()           创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
            createTextNode()         创建一个文本节点，可以传入文本内容
            innerHTML                   也能达到创建节点的效果，直接添加到指定位置了  
     2.插入节点
            方法                         描述
            write()                 将任意的字符串插入到文档中
                                       document.write()在加载文档时使用，会和当前文档使用同一个document对象，所以写入的内容会

                                       显示在原来的内容之后；
                                       document.write()在加载文档之后使用（点击按钮触发事件使用），此时document是一个新的对象，

                                       会将原来的document对象覆盖，所以原来页面中的内容也会被覆盖。
                                       不要在使用document.write()方法之后去获取元素节点
            appendChild()    向元素中添加新的子节点，作为最后一个子节点
            insertBefore()     向指定的已有的节点之前插入新的节点
            newItem：          要插入的节点
            exsitingItem：    参考节点  ，  需要参考父节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建节点、插入节点</title>
	</head>
	<body>
		<button onclick="addPara();">添加段落</button>
		<button onclick="addImg();">添加图片</button>
		<button onclick="addTxt();">添加文本框</button>
		<button onclick="addOptions()">添加选项</button> 
		<select name="music" id="mymusic">
			<option value="-1">你心内的一首歌</option>
			<option value="0">南山南</option>
			<option value="1">喜欢你</option>
		</select>
		<hr />
		<div id = "container" style="border: solid 1px pink;"></div>
	</body>
	
	<script type="text/javascript">
		/* 添加“段落、图片、文本框、选项” */
		
		// 得到div元素  （获取容器）
		var mydiv = document.getElementById("container");
		
		/**
		 * 添加 段落
		 */
		function addPara() {
			/* 方式一： */
			// 创建p元素
			var p = document.createElement("p");
			// 创建文本节点
			var ptxt = document.createTextNode("哈哈哈哈");
			// 将文本节点追加到p元素节点里面的最后
			p.appendChild(ptxt);
			console.log(p);
			// 将p元素节点追击到指定容器中
			mydiv.appendChild(p);
			
			
			/*方式二*/
			// 创建p元素
			var p2 = document.createElement("p");
			// 给p标签赋值
			p2.innerHTML = "嘻嘻嘻嘻嘻";
			// 将p标签追击到指定容器中    appendChild(节点)
			mydiv.appendChild(p2);
			
			/*方式三*/
			var p3 = "<p>嘿嘿嘿嘿</p>";
			mydiv.innerHTML += p3;
		}
		
		
		/**
		 * 添加图片
		 */
		function addImg() {
			/*方式一*/
			// 创建img元素节点
			var img = document.createElement("img");
			// 设置img元素属性节点
			img.src = "img/jay.jpg";
			// 设置图片的宽高
			img.width = 200;
			img.height = 200;
			// 将img元素节点追加到div中
			mydiv.appendChild(img);
			
			
			/*方式二*/
			// 创建img元素节点
			var img2 = document.createElement("img");
			// 设置img元素属性节点
			img2.setAttribute("src","img/jay.jpg");
			// 设置图片的宽高
			img2.style.width = "200px";
			img2.setAttribute("height",200);
			// 将img元素节点追加到div中
			mydiv.appendChild(img2);
			
			
			/*方式三*/
			var img3 = "<img src='img/jay.jpg' width=200 height=200 />";
			mydiv.innerHTML += img3;
		}
		
		/**
		 * 添加文本框
		 */
		function addTxt() {
			/*方式一*/
			// 创建input元素节点
			var ipt = document.createElement("input");
			// 设置input的类型
			ipt.type = "text";
			// 给文本框赋值
			ipt.value = "Hello";
			// 将img元素节点追加到div中
			mydiv.appendChild(ipt);
			console.log(ipt);
			
			/*方式二*/
			// 创建input元素节点
			var ipt2 = document.createElement("input");
			// 设置input的类型
			ipt2.setAttribute("type","text");
			// 给文本框赋值
			ipt2.setAttribute("value","你好");
			// 将img元素节点追加到div中
			mydiv.appendChild(ipt2);
			
			/*方式二*/
			var ipt3 = "<input type='text' value='hahahah'/>";
			console.log(mydiv.innerHTML);
			mydiv.innerHTML += ipt3;
			
		}
		
		
		/**
		 * 添加下拉选项
		 */
		function addOptions() {
			// 得到下拉框选项
			var mymusic = document.getElementById("mymusic");
			
			/*方式一*/
			var opt = document.createElement("option");
			// 设置opt的value和文本值
			opt.value = mymusic.options.length-1;
			opt.text = "晴天";
			console.log(opt);
			// 将下拉选项放置到下拉列表中
			//mymusic.appendChild(opt);
			
			/*方式二*/
			// 通过下拉列表的options属性设置下拉选项
			mymusic.options.add(opt);
			
			/*方式三*/
			var opt2 = "<option value='"+mymusic.options.length+"'>不能说的秘密</option>";
			mymusic.innerHTML += opt2;
		}
		
		/**
		 	insertBefore() 			向指定的已有的节点之前插入新的节点
									newItem：要插入的节点
									exsitingItem：参考节点 
									需要参考父节点
		 */
		// div.parentElement : div的父元素
		var div = document.createElement("div");
		div.innerHTML = "我是放在你前面的元素...";
		console.log(mydiv.parentElement);
		console.log(mydiv.parentNode);
		mydiv.parentElement.insertBefore(div,mydiv);
		
		
	</script>
</html>

     3.间接查找节点
              方法|属性                           描述
            childNodes ()         返回元素的一个子节点的数组 （包括文本节点）
            firstChild()              返回元素的第一个子节点
            lastChild()              返回元素的最后一个子节点
            nextSibling             返回元素的下一个兄弟节点
            parentNode            返回元素的父节点
            previousSibling      返回元素的上一个兄弟节点
    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>间接查找节点</title>
	</head>
	<body>
		<div>
			伯伯
		</div>
		<div id="div1">父亲<div>大儿子</div><div>二儿子</div><div>大女儿</div></div>
		<div>
			叔叔
		</div>
	</body>
	
	<script type="text/javascript">
		// 得到div对象
		var div1 = document.getElementById("div1");
		
		// childNodes () 		返回元素的一个子节点的数组
		console.log(div1.childNodes);
		
		// firstChild() 		返回元素的第一个子节点
		console.log(div1.firstChild);
		// lastChild() 		返回元素的最后一个子节点
		console.log(div1.lastChild);
		// parentNode 			返回元素的父节点
		console.log(div1.parentNode);
		
		// nextSibling 		返回元素的下一个兄弟节点
		console.log(div1.nextElementSibling); // 下一个元素节点（元素）
		console.log(div1.nextSibling); // 下一个节点（包含文本节点）
		
		//	previousSibling 	返回元素的上一个兄弟节点
		console.log(div1.previousElementSibling); // 上一个元素节点（元素）
		console.log(div1.previousSibling); // 上一个节点（包含文本节点）
		
	</script>
</html>

     4.替换节点
                                   方法|属性                                                                描述
         replaceChild(newNode,oldNode)                                         用新的节点替换旧的节点
         oldNode.parentNode.replaceChild(newNode,oldNode)       首先通过旧节点定位到父节点，然后用新的节点替换旧节点
     5.克隆节点
                  方法|属性                 描述
            cloneNode()                复制节点
                var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
                true：深度克隆，可以克隆结构和内容
                false(默认值)：只克隆结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="test">程序员</p>
		<button onclick="replaceNode()">替换</button>
		<br /> <hr />
		<ul id="music">
			<li>晴天</li>
			<li>青花瓷</li>
			<li>等你下课</li>
		</ul>
		<button onclick="cloneValue()">克隆</button>
		<div id="mydiv">
			
		</div>
	</body>
	
	<script type="text/javascript">
		
		/**
		 * 替换元素
		 */
		function replaceNode() {
			// oldNode.parentNode.replaceChild(newNode,oldNode) 
			// 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
			var cxy = document.getElementById("test");
			// 创建新节点
			var span = document.createElement("span");
			span.innerHTML = "攻城狮";
			cxy.parentNode.replaceChild(span,cxy);
		}
		
		/**
		 * cloneNode() 		复制节点
				var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
				true：深度克隆，可以克隆结构和内容
				false(默认值)：只克隆结构
		 */
		function cloneValue() {
			// 得到被克隆的对象
			var cloneValue = document.getElementById("music");
			var newValue = cloneValue.cloneNode(false); // 浅度克隆，只克隆结构
			console.log(newValue);
			var deepValue = cloneValue.cloneNode(true); // 克隆结构及内容
			console.log(deepValue);
			
			// 将克隆好的结果追加到div中
			document.getElementById("mydiv").appendChild(deepValue);
		}
		 
	</script>
	
</html>

     6.删除节点
                   方法|属性                    描述
            removeChild()          从元素中移除子节点
            从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>删除节点</title>
	</head>
	<body>
		<p id="test">程序员</p>
		<button onclick="removeNode()">删除</button>
	</body>
	
	<script type="text/javascript">
		function removeNode() {
			// 得到被删除的节点的对象
			var del = document.getElementById("test");
			// 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
			del.parentNode.removeChild(del);
		}

	</script>
</html>

二.表单

            表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行

      一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

     1.获取表单
        1）document.表单名称
        2）document.getElementById(表单 id);
        3）document.forms[表单名称]
        4）document.forms[索引]; //从 0 开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取表单</title>
	</head>
	<body>
		<form id='myform' name="myform" action="" method="post">
			
		</form>
		<form id='myform2' name="myform2" action="" method="post">
			
		</form>
	</body>
	
	<script type="text/javascript">
		/*获取表单*/
		
		// 1、document.表单名称
		console.log(document.myform);
		
		// 2、document.getElementById(表单 id);
		console.log(document.getElementById("myform"));
		
		// 获取文档做所有的表单集合
		console.log(document.forms);
		
		// 3、document.forms[表单名称]
		console.log(document.forms["myform2"]);
		
		// 4、document.forms[索引]; //从 0 开始
		console.log(document.forms[1]);
		
	</script>
</html>

     2.获取 input 的元素
        如 text password hidden textarea 等，前两种常用。
        1)通过 id 获取：document.getElementById(元素 id);
        2)通过 form.名称形式获取: myform.元素名称;  name 属性值
        3)通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
        4)通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始                                       

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取input元素</title>
	</head>
	<body>
		<form id='myform' name="myform" action="" method="get">
			姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
			密码:<input type="password" id="upwd" name="upwd" value="123456"  /><br />
				<input type="hidden" id="uno" name="uno" value="隐藏域" />
			个人说明:<textarea name="intro"></textarea>
			<button type="button" onclick="getTxt();" >获取元素内容</button>
		</form>
	</body>

	<script type="text/javascript">
		/**
		 * 获取元素内容
		 */
		function getTxt() {
			// 获取表单对象
			var myform = document.myform; // document.表单的name属性值
			// 获取表单元素
			// 1)、通过 id 获取：document.getElementById(元素 id);
			console.log(document.getElementById("uname"));
			console.log(document.getElementById("uname").value);
			
			// 2)、通过 form.名称形式获取: myform.元素名称;  name 属性值
			console.log(myform.upwd);
			console.log(myform.upwd.value);
			
			// 3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
			console.log(document.getElementsByName("uno")[0]);
			console.log(document.getElementsByName("uno")[0].value);
			
			// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
			console.log(document.getElementsByTagName("textarea")[0]);
			console.log(document.getElementsByTagName("textarea")[0].value);
		}
		
	</script>
</html>

     3.获取单选按钮
        前提：将一组单选按钮设置相同的 name 属性值
        1)获取单选按钮组：
            document.getElementsByName("name 属性值");
        2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性
           若属性值为 true 表示被选中，否则未被选中
           选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
           未选中状态设定： 没有 checked 属性 或 checked=’false’

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取单选按钮</title>
	</head>
	<body>
		<form action="" name="myform">
			性别 :
			<input type="radio" name="sex" value="1" checked="checked" /> 男
			<input type="radio" name="sex" value="2" /> 女
		</form>
	</body>

	<script type="text/javascript">
		// 获取一组单选按钮
		var radios = document.getElementsByName("sex");
		// 遍历数组，得到选中项的值
		for (var i = 0; i < radios.length; i++) {
			// 判断是否被选中
			if (radios[i].checked) {
				console.log("选中的值是：" + radios[i].value);
			} else {
				console.log("未选中的值是：" + radios[i].value);
			}
		}
	</script>
</html>

     4.获取 多选按钮
        前提：将一组多选按钮设置相同的 name 属性值
        1)获取多选按钮组：
            document.getElementsByName("name 属性值");
        2)遍历每个多选按钮，并查看多选按钮元素的 checked 属性
           若属性值为 true 表示被选中，否则未被选中
           选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
           未选中状态设定： 没有 checked 属性 或 checked=’false’

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取多选按钮</title>
	</head>
	<body>
		<form action="" name="myform">
			爱好 :
			<input type="checkbox" name="hobby" value="singing" checked="checked"  /> 唱歌
			<input type="checkbox" name="hobby" value="dancing" /> 跳舞
			<input type="checkbox" name="hobby" value="rapping"  checked/> rap
		</form>
	</body>
	
	<script type="text/javascript">
		// 获取一组多选按钮
		var checkboxs = document.getElementsByName("hobby");
		
		var cks = "";
		// 遍历数组，得到选中项的值
		for (var i = 0; i < checkboxs.length; i++) {
			// 判断是否被选中
			if (checkboxs[i].checked) {
				console.log("选中的值是：" + checkboxs[i].value);
				cks += checkboxs[i].value+ ",";
			} else {
				console.log("未选中的值是：" + checkboxs[i].value);
			}
		}
		// 截取字符串
		cks = cks.substring(0,cks.length - 1);
		console.log("选中的值为：" + cks);
	</script>
</html>

     5.获取下拉选项
        1）获取 select 对象：
             var ufrom = document.getElementById("ufrom");
        2）获取选中项的索引：
             var idx=ufrom.selectedIndex ;
        3）获取选中项 options 的 value 属性值：
             var val = ufrom.options[idx].value;
             注意：当通过 options 获取选中项的 value 属性值时，
             若没有 value 属性，则取 option 标签的内容
             若存在 value 属性，则取 value 属性的值
        4）获取选中项 options 的 text：
             var txt = ufrom.options[idx].text;
             选中状态设定：selected='selected'、selected=true、selected
             未选中状态设定：不设 selected 属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取下拉框</title>
	</head>
	<body>
		来自:
			<select id="ufrom" name="ufrom" >
				<option value="-1" >请选择</option>
				<option selected="selected">北京</option>
				<option value="1" >上海</option>
			</select><br />
	</body>
	
	<script type="text/javascript">
		// （1）获取 select 对象
		var sel = document.getElementById("ufrom");
		
		// （2）获取选中项的索引
		var selectIndex = sel.selectedIndex;
		console.log("当前选中项的索引：" + selectIndex);
		
		// （3）获取选中项 options 的 value 属性值
		var value1 = sel.value;
		var value2 = sel.options[selectIndex].value;
		console.log("当前选中项的值：" + value1 + "," + value2);
		
		// （4）获取选中项 options 的 text
		var text1 = sel.options[selectIndex].innerHTML;
		var text2 = sel.options[selectIndex].text;
		console.log("当前选中项的文本：" + text1 + "," + text2);
		
	</script>
</html>

     6.提交类型：

        （注：提交表单时，表单元素必须设置name属性值）
        1）get请求：
                参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，不会自动刷新缓存；每次访问时

        优先获取缓存中的数据，所以请求速度快。
        2）post请求 （需要服务器的支持）：
                参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，与服务器相关），相对而言安全，会自

        动刷新缓存；请求速度相对而言慢。
                通常做查询操作，使用GET请求；增删改使用POST请求。

         3）提交表单
              ①使用普通 button 按钮+onclick 事件+事件中编写代码:
              获取表单.submit();
              ②使用 submit 按钮 + οnclick="return 函数()" +函数编写代码: 
              最后必须返回：return true|false;
              ③使用 submit 按钮/图片提交按钮 + 表单 οnsubmit="return 函数();" +函数编写代码: 
              最后必须返回：return true|false;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>提交表单</title>
	</head>
	<body>
		<!--
			注：提交表单时，表单元素必须设置name属性值
			
			提交类型：
				get请求
					参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，不会自动刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
				post请求 （需要服务器的支持）
					参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，与服务器相关），相对而言安全，会自动刷新缓存；请求速度相对而言慢。
				
				通常做查询操作，使用GET请求；增删改使用POST请求。
		-->
		<form action="01-获取表单.html" method="get">
			姓名：<input type="text" name="uname" />
			<input type="submit" value="提交" onclick="return checkForm1()"/>
		</form>
		
		<form action="01-获取表单.html" method="get" onsubmit="return checkForm2()">
			姓名：<input type="text" name="uname" />
			<input type="submit" value="提交" />
		</form>
		
		<form action="01-获取表单.html" method="get" >
			姓名：<input type="text" name="uname1" />
			<input type="button" value="提交" onclick="checkForm3()" />
			<span id="msg" style="font-size: 12px;color: red;"></span>
		</form>
		
	</body>
	
	<!--
		提交表单
			（1）使用普通 button 按钮+onclick 事件+事件中编写代码:
			获取表单.submit();
			（2）使用 submit 按钮 + onclick="return 函数()" +函数编写代码: 
			最后必须返回：return true|false;
			（3）使用 submit 按钮/图片提交按钮 + 表单 onsubmit="return 函数();" +函数编写代码: 
			最后必须返回：return true|false;
	-->
	
	<script type="text/javascript">
		/*提交方式一：submit按钮 + onclick事件*/
		// 给submit按钮绑定点击事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
		//如果return true，则提交表单；return false不提交；若直接return也会提交表单
		function checkForm1() {
			//return true; // 提交表单
			return false; // 不提交表单
			//return; // 无效，不会阻止表单提交
		}
		
		
		/*提交方式二：submit按钮 + onsubmit事件*/
		// 给表单对象绑定onsubmit事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
		//如果return true，则提交表单；return false不提交；若直接return也会提交表单
		function checkForm2() {
			return true; // 提交表单
			//return false; // 不提交表单
			//return; // 无效，不会阻止表单提交
		}
		
		/*提交方式三：button按钮+点击事件*/
		// 给button按钮绑定点击事件，调用时需要使用"函数名()"，如果满足要求则手动提交表单，否则return
		function checkForm3() {
			var uname = document.getElementsByName("uname1")[0].value;
			if ( uname == null || uname.trim() == "") {
				console.log("用户名不能为空！");
				document.getElementById("msg").innerHTML = "用户名不能为空！";
				return;
			}
			
			// 手动提交表单
			document.forms[2].submit();
		}
		
		
	</script>
</html>

 

Educoder JavaScript：HTML DOM——文档元素的操作（二）
Junds0的博客
06-04 3923
第1关：创建节点 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <p></p> <script> <!-- 请在此处编写代码 -->
JavaScript学习手册十四：HTML DOM——文档元素的操作（二）
qq_45823118的博客
04-24 1万+
HTML DOM——文档元素的操作1.创建节点任务描述相关知识创建节点代码文件2.插入节点任务描述相关知识插入节点代码文件3.删除节点任务描述相关知识删除节点代码文件4.替换节点任务描述相关知识替换节点代码文件5.综合练习任务描述相关知识下拉列表的级联代码文件 1.创建节点 任务描述 1.本关任务：创建一个表单<form>节点。 2.具体要求如下： 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示： <form id
【Educoder】JavaScript答案（JavaScript基础入门、文档元素获取、 文档元素操作、事件处理、浏览器对象模型）
qq_37746855的博客
04-14 6417
文章目录JavaScript 简介JavaScript基础入门JavaScript与HTMLJavaScript变量JavaScript 文档元素获取通过id获取文档元素通过类名获取文档元素通过标签名获取文档元素html5中获取元素的方法一html5中获取元素的方法二节点树上的操作属性值的获取属性值的设置JavaScript 文档元素操作创建节点插入节点删除节点替换节点综合练习JavaScript 事件处理注册事件处理程序文档加载事件鼠标事件键盘事件表单事件拖动事件事件冒泡JavaScript 浏览器对象模
JavaScript学习手册八：JS函数
qq_45823118的博客
04-20 1万+
JS函数1、用函数语句定义函数任务描述相关知识用函数语句定义代码文件2、用表达式定义函数任务描述相关知识用表达式定义代码文件3、函数的调用任务描述相关知识函数的调用代码文件4、未定义的实参任务描述相关知识用函数语句定义代码文件5、实参对象任务描述相关知识实参对象代码文件6、对象作为参数任务描述相关知识对象作为参数代码文件7、函数对象任务描述相关知识函数对象作为另一个函数的参数代码文件 1、用函数语句定义函数 任务描述 本关任务：用函数语句定义一个函数。 具体要求如下： 定义一个名字为mainJs()的函数
form表单
qq_53959286的博客
01-25 3375
表单： 表单主要负责采集用户输入的信息，相当于一个控件集合，由文本域、复选框、单选框、菜单、文件地址域、 按钮等表单元素组成，最常见的表单应用有搜索引擎页面、用户登录页面、用户注册页面等； < form >标签用于创建一个表单，其基本语法格式如下： <form action="url地址" method="提交方式" name="表单名称"> </form> action 属性用于接收并处理表单数据的服务器 url 地址 method 属性用于设置表单数
jQ常见的form表单获取值（checkbox、text、select）
前端-尔嵘
09-01 1571
用惯了vue，直接数据绑定，不需要那么麻烦；但最近遇到一个项目，不得不使用jQ,所以操作dom变得习以为常，经常要获取某个元素的parent().parent()...,也需要获取大量表单的值。 1.关于checkbox：<input type="checkbox" name="enable" onclick="openEnabele()" chee /> attr()方法用于设置或返回被选元素的属性值； prop()方法用于获取匹配元素集合中的第一个元素的属性值； （1）判断是..
form表单知识点总结
zplike的博客
06-12 1578
【】表单是网页中最常用、最重要的一部分内容。不管是使用搜索引擎，还是使用电子邮箱， 或者留言板、论坛，都离不开表单。 【】创建表单，使用&lt;form&gt;&lt;/form&gt;标签，该标签具有如下属性：     1、action：用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。当用户提交表单后，由后台的server.jsp程序来处理用户提交的表单。     2、meth...
节点、事件
最新发布
2403_87107057的博客
11-11 926
节点 事件
java dom 创建结点 setattribute_DOM Element对象setAttributeNode()方法
weixin_29281941的博客
02-28 496
DOM Element对象setAttributeNode()方法将新属性节点设置为现有元素。语法以下是使用setAttributeNode()方法的语法。elementObj.setAttributeNode(newAttr)参数newAttr - 在属性列表中添加新属性节点。返回值此方法添加新的属性节点。示例文件：node.xml 的内容如下 -TianyaSu0898-12345678tia...
单选、双选控件的取值和赋值
k195514239的博客
06-18 698
1.单选、双选的取值和赋值 function btn1(){ document.getElementById('a2').checked = false; document.getElementById('a1').checked = true; } 非置顶数量控制： 是 <i
如何获取表单 复选框checkBox 的值
小小前端
03-23 6871
​​ <head> <meta charset="UTF-8"> <title>checkBox</title> <!--引入jquery文件--> <script type="text/javascript" src="jquery-1.8.3.min.js"></script>...
获取checkbox选中的值，提交Form表单
热门推荐
qingkaqingka的博客
12-19 1万+
点击提交按钮的时候，将所有CheckBox选中项弹出显示。 &lt;script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"&gt;&lt;/script&gt; &lt;input name="Jszzdm1" id="Jszzdm1" type="checkbox" value="1"
自动创建 form表单、动态创建 form表单
羽渡尘的博客
12-04 3201
【代码】自动创建 form表单、动态创建 form表单。
JS-删除节点removeChild()/替换元素节点replaceChild()/创建元素节点createElement/创建文本节点createTextNode/浏览器窗口可视区域大小/网页......
Jennyni1122的博客
06-18 2113
删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。 语法: nodeObject.removeChild(node) 参数: node ：必需，指定需要删除的节点。 我们来看看下面代码，删除子点。 image.png 运行结果: HT...
JavaScript笔记
zawybaby515的博客
06-29 895
JavaScript 一、JavaScript简介 1. 什么是JavaScript？ JavaScript简称JS，由网景分公司开发的客户端脚本语言，不需要编译，可以直接执行 补充： 机器语言（0,1代码）-----汇编语言（助记符)------高级语言（ ① 解释 ②编译） 高级语言---->编译obj目标程序文件---->连接link.exe可执行性文件 解释： WEB前端三层： 结构层HTML，定义页面的结构 样式层CSS，定义页面的样式 行为层JavaScript，用来实现交互，提升
DOM（一）-19-(节点操作-替换&克隆节点)
wy_0928的博客
08-20 641
【修改节点】 在div对象中有如下两方法： （1）replaceChild 用新的子元素替换已有的子元素。  语法：oReplace = object.replaceChild(oNewNode, oChildNode) 第一个参数是新节点，第二个参数是旧节点，即用第一个参数替换掉第二个参数 （2）replaceNode 用其它元素替换对象。  语法：oReplace =
javaScript笔记
weixin_46376333的博客
06-27 342
JavaScript 一、JavaScript简介 1.什么是JavaScript? JavaScript简称JS，由网景公司开发的客户端 脚本 语言（Java服务器端的编程语言），不需要 编译，可以直接运行 Web前端三层： 结构层HTML定义页面的结构 样式层CSS定义页面的样式 行为层JavaScript用来实现交互，提升用户体验 2.JavaScript作用 在客户端动态的操作页面 eg:购物车 在客户端做数据校验 在客户端发送异步请求 二、引用方式 1.内联方式 在页面中使用script标
表单checkbox的值获得
fishermen
03-19 497
一般为多个value //assume name is the name of the parameter String[] values = request.getParameterValues(name);
ssm jQuery 获取checkbox选中的值form表单提交例子
weixin_33985679的博客
01-11 803
前台页面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos...
如何在form表单上寻找到被选中的checkbox的值
weixin_30883311的博客
11-05 1190
在jQuery中存在着很多方式来寻找到自己想要获取的值，比如$(#id).val()或者$(.class).val()的方式来获取到相应的值，但是现在我有一个多选的CheckBox类型的值，我改通过什么方式来动态的获取自己选中的CheckBox的值呢？我寻找了很多种方法，也实验了很多次，终于找到了方法。下面的是我的HTML中的截图。 我要获取自己选中的CheckBox的值，可以通过以下两种方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值