DOM Nodes
节点
HTML 文档中所有内容都是节点
-
整个文档是一个文档节点
-
每个 HTML 元素是元素节点, 例如<html>, <head>, <title> 等
-
HTML 元素内文本是文本节点
-
每个 HTML 属性是属性节点, 例如<a>中属性href
-
注释是注释节点
方法
- getElementById()
返回带有指定ID元素
<button id = 'submitBtn'>提交</button>
const b = document.getElementById("submitBtn")
- appendChild(node)
插入新子节点(元素)
- removeChild(node)
删除子节点(元素)
- createAttribute()
创建属性节点
- createElement()
创建元素节点
- createTextNode()
创建文本节点
- getAttribute()
返回指定属性值
- setAttribute()
把指定属性设置或修改为指定值
属性
- innerHTML
节点(元素)文本值
- parentNode
节点(元素)父节点
- childNodes
节点(元素)子节点
- attributes
节点(元素)属性节点
控件
<input type="text" id="name" />
<button type="button" id="addBtn"></button>
获取
获取控件ID
<button type="button" class="btn btn-success" id="" onclick=download()>下载</button>
点击按钮获取控件ID
function download(){
const id = event.target.id
$.get('/del/' + id, function () {
location.reload()
alert("删除成功")
})
}
动态ID
当前为每行增加了一个 checkbox 控件, 希望其动态生成”checkout+序号” id, 方便后期对选择行进行操作
<td>
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox" />
</label>
</div>
</td>
此处为 jinja 模板, 其他如 JSP 等等与此大同小异
document.getElementById("id")
获取值
document.getElementById("id").value()
// div
document.getElementById("id").innerHTML
事件
const addBtn = document.getElementById("addBtn")
addBtn.addEventListener("click", ()=>{
//...
})
弹窗
提示框回调
alert()
确认提示框
const msg = "内容？\n\n请确认!"
if (confirm(msg)){
// ...
} else {
// ...
}
输入提示框
const value = prompt("Input Text", "Default Text")
if (value != null && value != "") {
alert(value)
}
HTTP
GET
function get(url, callback) {
const XMLHttpRequest = require("xhr2")
const httpRequest = new XMLHttpRequest()
httpRequest.open("GET", url, true)
httpRequest.send()
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
const json = httpRequest.responseText
// ...
callback()
}
};
}
POST
function post(url, data, callback){
const XMLHttpRequest = require("xhr2")
const httpRequest = new XMLHttpRequest()
httpRequest.open('POST', url, true)
httpRequest.setRequestHeader("Content-type", "application/json")
// 转为JSON字符串
httpRequest.send(JSON.stringify(data))
httpRequest.onreadystatechange = ()=> {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
const result = httpRequest.responseText
callback(result)
}
}
}
JQ语法
<input type="text" id="name" />
<button type="button" id="addBtn"></button>
获取控件
利用$(“#id”)获取的是一个[object Object]
$("#id")[0] 或
$("#id").get(0)
获取值
$("#id").val();
事件
$("#addBtn").click(functon(){
//...
})
匿名函数
function(){}
HTTP请求
$.get(URL, callback)
$.post(URL, data, callback)
封装 Ajax
| 参数 | 含义 |
|---|---|
| type | 请求方式 |
| url | 发送的 url |
| parm | 发送的数据 |
| callback | 回调函数 |
// 发送ajax请求
function sendAjax(type, url, param, callback) {
$.ajax({
async: false,
ache: false,
type: type,
url: url,
// 将发送的数据转换为JSON字符串
data: JSON.stringify(param),
// 服务端返回数据的格式
dataType: "json",
success: function (data) {
callback(data.result)
},
error: function () {
// 失败处理
},
})
}
获取表格值
<form method="post" action="" id="form">
用户名: <input type="text" name="username" /><br />
密码: <input type="text" name="pwd" /><br />
<button type="submit" value="" id="submit_demo">提交</button>
</form>
function get_form_value() {
var d = {};
// serializeArray() 方法
// 通过序列化表单值来创建对象(name 和 value)的数组
const t = $("form").serializeArray();
// .each() 对 jQuery 对象进行迭代, 为每个匹配元素执行函数
$.each(t, function () {
d[this.name] = this.value;
})
// 转换为JSON字符串
return JSON.stringify(d);
}
$.each()函数
| 返回值 | 含义 |
|---|---|
| return false | break |
| return true | continue |