Learning website: [Excellent Limit] HTML+CSS+JavaScript+jQuery front-end must-learn tutorial, novice teaching, complete version of front-end basics_bilibili_bilibilin
1. Install the compiler
- HBuilder X: HBuilderX-Efficient Geek Tips
2.Basic content
- Get the form (the first two are commonly used)
1.document.getElementById("id attribute value");
Get the form object through the id attribute value of the form tag
2. The name attribute value of the document. tag;
Get the form object through the name attribute value of the form
3.document.forms[subscript ]
Get the form element by specifying the subscript
4.document.forms [the name attribute value of the form];
Get the form object through the name attribute value of the form
document.forms: Get all the form objects in the HTML document
Get form elements
① Get the form element
1.document.getElementById("id attribute value");
Get the form element object
2. Form object, the name attribute value of the form element through the id attribute value of the element;
Through the name attribute of the corresponding element in the form object Value acquisition
3.document.getElementsByName("name attribute value");
Obtaining the form element's name attribute value
4.document,getElementsByName("label name/element name");
Obtaining the form element object through the label name
② Obtaining the radio button
Note: For the same set of radio buttons, you need to set the same name attribute value
1.document.getElementByName("name attribute value");
get it through the name attribute value
2. Determine whether the radio button is
checked. The checked status
is in the JS code
checked=checked or checked means
checked without setting the checked attribute means not checked
3. Select the value
element of the radio button. value;
3. Get the multi-select button
which is the same as the radio button
4. Get the drop-down option
1. Get the drop-down box option
var object = document.getElementById("Attribute value");
2. Get the drop-down option list of the drop-down box
var options = drop-down box object.options;
3. Get the index of the selected item in the drop-down box
var index = drop-down box object.selectedIndex;
4. Get the value of the selected item in the drop-down box
var value = drop-down box object. value;
5. Get the value of the drop-down box through the subscript of the selected item The value of the selected item
var value = drop-down box object.options[index].value;
6. Get the text of the selected item in the drop-down box
var text value = drop-down box object.options[index].text;
Note:
1. Get the drop-down box When the value of the item is selected:
If the value attribute value is set on the option label, the value corresponding to the value attribute is obtained;
if the value attribute value is not set on the option label, the text value in the option double label is obtained;
2. The drop-down box Selected state:
selected state: selected = 'selected', selected, selected = true
Unselected state: do not set the selected attribute, selected = false
- Ajax
——There are built-in constructors in js to create ajax objects
——After creating the ajax object, we use the ajax object method to send requests and receive responses.
——One of the biggest features of Ajax is that it can transmit or read and write data to the server without refreshing the page (also known as updating the page without refreshing). This feature mainly comes from the XMLHTTP component XMLHTTPRequest object.
XMLHttpRequest object method description
3.Code examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取表单</title>
</head>
<body>
<!--
获取表单（前两种常用）
1.document.getElementById("id属性值");
通过form标签的id属性值获取表单对象
2.document.标签的name属性值;
通过表单的name属性值获取表单对象
3.document.forms[下标]
通过指定下标获取表单元素
4.document.forms[表单的name属性值];
通过表单的name属性值获取表单对象
document.forms:获取HTML文档中所有的表单对象
-->
<form id="myform1" name="myform1" action=""></form>
<form id="myform2" name="myform2" action=""></form>
<script type="text/javascript">
//1.document.getElementById("id属性值");
console.log(document.getElementById("myform1"));
//2.document.表单的name属性值
console.log(document.myform2);
console.log("-----------");
//获取所有表单对象
console.log(document.forms);
//3.document.forms[下标];
console.log(document.forms[0]);
//4.document.forms[表单的name属性值];
console.log(document.forms["myform2"])
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取表单元素</title>
</head>
<body>
<!--
1.获取表单元素
1.document.getElementById("id属性值");
通过元素的id属性值获取表单元素对象
2.表单对象，表单元素的name·属性值;
通过表单对象中对应的元素的name属性值获取
3.document.getElementsByName("name属性值");
通过表单元素的name属性值获取
4.document,getElementsByName("标签名/元素名");
通过标签名获取表单元素对象
2.获取单选按钮
注:相同的一组单选按钮，需要设置相同的name属性值
1.document.getElementByName("name属性值");
通过name属性值获取
2.判断单选按钮是否选中
checked 选中状态
在JS代码中
checked=checked或checked 表示选中
不设置checked属性 表示不选中
3.选择单选按钮的值
元素.value;
3.获取多选按钮
与单选按钮相同
4.获得下拉选项
1.获取下拉框选项
var 对象 = document.getElementById("属性值");
2.获取下拉框的下拉选项列表
var options = 下拉框对象.options;
3.获取下拉框被选中项的索引
var index = 下拉框对象.selectedIndex;
4.获取下拉框被选中项的值
var 值 = 下拉框对象.value;
5.通过选择项的下标获取下拉框被选中项的值
var 值 = 下拉框对象.options[index].value;
6.获取下拉框被选中项的文本
var 文本值 = 下拉框对象.options[index].text;
注:
1.获取下拉框选中项的值时:
如果option标签设置了value属性值,则获取value属性对应的值;
如果option标签未设置了value属性值,则获取的是option双标签中的文本值;
2.下拉框的选中状态:
选中状态:selected = 'selected'、selected、selected = true
未选中状态:不设置selected属性、selected = false
-->
<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="1234" /> <br />
<!-- 隐藏域 -->
<input type="hidden" id="uno" name="uno" value="隐藏域" />
<!-- 文本域 -->
个人说明:<textarea name="intro"></textarea>
<br />
<button type="button" onclick="getTxt()" >获取元素内容</button>
<hr />
<br />
<input type="text" name="inputName" class="test" value="aaa" />
<input type="radio" name="rad" class="test" value="1" /> 男
<input type="radio" name="rad" class="test" value="2" /> 女
<button type="button" onclick="getCheckBox()" >获取单选按钮</button>
<br>
<hr>
<br>
全选/全不选:
<input type="checkbox" id="control" onclick="checkAllOrNot()" />
<button type="button" onclick="checkFan()">反选</button>
<br />
<input type="checkbox" name="hobby" value="sing" /> 唱歌
<input type="checkbox" name="hobby" value="dance" /> 跳舞
<input type="checkbox" name="hobby" value="rap" /> 说唱
<button type="button" onclick="getCheckBox()">获取多选按钮</button>
<br>
<hr>
<br>
来自:
<select id="uform" name="uform" >
<option value ="-1">请选择</option>
<option value ="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option>杭州</option>
</select><br />
<button type="button" onclick="getSelect()"></button>
</form>
<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="1234" /> <br />
<!-- 隐藏域 -->
<input type="hidden" id="uno" name="uno" value="隐藏域" />
<!-- 文本域 -->
个人说明:<textarea name="intro"></textarea>
<br />
<button type="button" onclick="getTxt()" >获取元素内容</button>
<hr />
<br />
<input type="text" name="inputName" class="test" value="aaa" />
<input type="radio" name="rad" class="test" value="1" /> 男
<input type="radio" name="rad" class="test" value="2" /> 女
<button type="button" onclick="getCheckBox()" >获取多选按钮</button>
<br>
<hr>
<br>
来自:
<select id="uform" name="uform" >
<option value ="-1">请选择</option>
<option value ="0" selected="selected">北京</option>
<option value="1">上海</option>
</select><br />
<button type="button" onclick="getSelection"></button>
</form>
<script type="text/javascript">
function getTxt() {
//1.document.getElementById("id属性值");
var uname = document.getElementById("uname").value;
console.log(uname);
//2.表达对象.表单元素的name属性值;
var pwd = document.getElementById("myform").upwd.value;
console.log(pwd);
//3.document.getElementsByName("name属性值");
var uno = document.getElementByName("uno")[0].value;
console.log(uno);
//4.document.getElementsByTagName("标签名/元素名");
var intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
/*获取单选按钮*/
function getRadio() {
//通过name属性值获取单选按钮
/* var radios = document.getElementsByName("rad");
//判断并遍历
if (radio != null && radios.length > 0) {
//遍历ni
for (var i = 0 ; i < radios.length ; i++) {
console.log("值:" + radios[i].value + ",是否选中:" + radios[i].checked)
}
}*/
//通过class属性值获取
var cla = document.getElementByName("test");
console.log(cla);
if (cla != null && cla.length > 0) {
//判断input元素的类型 type
if (cla[i].type == "text") { // 文本框
console.log("文本框的值:" + cla[i].value);
}else if (cla[i].type == "radio") {
console.log("值:" + cla[i].value + ",是否选中:" + cla[i].checked);
}
}
}
/*获取多选按钮*/
function get
function getSelect() {
//获取下拉框对象
var uform = document.getElementById("uform");
console.log(uform);
//获取下拉框的下拉选项列表
var opts = uform.options;
console.log(opts);
//获取下拉框被选中项的索引
var index = uform.selectedIndex;
console.log("选中项的下标:" + index);
//获取下拉框被选中的值
var val = uform.value;
console.log("被选中项的值:" + val);
//通过选择项的下标获取下拉框被选中项的值
var val2 = uform.options[index].value;
console.log("被选中项的值:" + va2);
//获取下拉框的被选中项的文本
var txt = uform.options[index].text;
console.log("被选中项的文本:" + txt);
}
</script>
</body>
</html>