学习网址:【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibilin
1.安装编译器
- HBuilder X:HBuilderX-高效极客技巧
2.基本内容
- 获取表单(前两种常用)
1.document.getElementById("id属性值");
通过form标签的id属性值获取表单对象
2.document.标签的name属性值;
通过表单的name属性值获取表单对象
3.document.forms[下标]
通过指定下标获取表单元素
4.document.forms[表单的name属性值];
通过表单的name属性值获取表单对象
document.forms:获取HTML文档中所有的表单对象
获取表单元素
①获取表单元素
1.document.getElementById("id属性值");
通过元素的id属性值获取表单元素对象
2.表单对象,表单元素的name·属性值;
通过表单对象中对应的元素的name属性值获取
3.document.getElementsByName("name属性值");
通过表单元素的name属性值获取
4.document,getElementsByName("标签名/元素名");
通过标签名获取表单元素对象
②获取单选按钮
注:相同的一组单选按钮,需要设置相同的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
- Ajax
——在 js 中有内置的构造函数来创建 ajax 对象
——创建 ajax 对象以后,我们就使⽤ ajax 对象的⽅法去发送请求和接受响应
——Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得XMLHTTP组件XMLHTTPRequest对象。
XMLHttpRequest 对象方法描述
3.代码实例
<!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>