Site de aprendizagem: [Limite excelente] Tutorial obrigatório de aprendizado de front-end HTML + CSS + JavaScript + jQuery, ensino para iniciantes, versão completa do básico de front-end_bilibili_bilibilin
1. Instale o compilador
- HBuilder X: dicas geek eficientes em HBuilderX
2. Conteúdo básico
- Obtenha o formulário (os dois primeiros são comumente usados)
1.document.getElementById ("valor do atributo id");
Obtenha o objeto de formulário por meio do valor do atributo id da tag do formulário
2. O valor do atributo name do document.tag;
Obtenha o objeto do formulário por meio do valor do atributo name do formulário
3.document.forms[subscript]
Obtenha o elemento do formulário especificando o subscrito
4.document.forms [o valor do atributo name do formulário];
Obtenha o objeto form através do valor do atributo name do formulário
document.forms: Obtenha todos os objetos de formulário no documento HTML
Obtenha elementos do formulário
① Obtenha o elemento de formulário
1.document.getElementById ("valor do atributo id");
Obtenha o objeto do elemento de formulário
2. Objeto de formulário, o valor do atributo name do elemento de formulário por meio do valor do atributo id do elemento;
Por meio do atributo name de o elemento correspondente no objeto de formulário Aquisição de valor
3.document.getElementsByName("nome do atributo valor");
Obtenção do valor do atributo de nome do elemento de formulário
4.document,getElementsByName("nome do rótulo/nome do elemento");
Obtenção do objeto do elemento de formulário por meio o nome do rótulo
② Obtendo o botão de opção
Nota: Para o mesmo conjunto de botões de opção, você precisa definir o mesmo valor do atributo de nome
1.document.getElementByName("valor do atributo de nome");
obtenha-o por meio do valor do atributo de nome
2. Determine se o botão de opção está
marcado. o status verificado
está no código JS
verificado = verificado ou verificado significa
verificado sem definir o atributo verificado significa não verificado
3. Selecione o elemento de valor
do botão de opção. valor;
3. Obtenha o botão de seleção múltipla
que é igual ao botão de opção botão
4. Obtenha a opção suspensa
1. Obtenha a opção da caixa suspensa
var object = document.getElementById("Valor do atributo");
2. Obtenha a lista de opções suspensa da caixa suspensa
var options = drop -down box object.options;
3. Obtenha o índice do item selecionado na caixa suspensa
var index = drop-down box object.selectedIndex;
4. Obtenha o valor do item selecionado na caixa suspensa
var value = drop-down box object. valor;
5. Obtenha o valor da caixa suspensa através do subscrito do item selecionado O valor do item selecionado
var valor = caixa suspensa object.options[index].value;
6. Obtenha o texto do item selecionado item na caixa suspensa
var text value = caixa suspensa object.options[index].text;
Nota:
1. Obtenha a caixa suspensa Quando o valor do item for selecionado:
Se o valor do atributo value for definido no rótulo da opção, o valor correspondente ao atributo value é obtido;
se o valor do atributo value não estiver definido no rótulo da opção, o valor do texto no rótulo duplo da opção é obtido;
2. A caixa suspensa Estado selecionado:
selecionado estado: selecionado = 'selecionado', selecionado, selecionado = verdadeiro
Estado não selecionado: não defina o atributo selecionado, selecionado = falso
- Ájax
——Existem construtores integrados em js para criar objetos ajax
——Depois de criar o objeto ajax, usamos o método do objeto ajax para enviar solicitações e receber respostas.
——Um dos maiores recursos do Ajax é que ele pode transmitir ou ler e gravar dados no servidor sem atualizar a página (também conhecido como atualizar a página sem atualizar).Esse recurso vem principalmente do objeto XMLHTTPRequest do componente XMLHTTP.
Descrição do método do objeto XMLHttpRequest
3. Exemplos de código
<!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>