- DOM对象
var tag = document.createElement("div");
tag.innerText
- jQuery对象
$("#xxx")
$("#xxx").text()
- DOM对象 -> jQuery对象
var tag = document.createElement("div");
$(tag)
- jQuery对象 -> DOM对象
$("#xxx")[0]
清空输入框例子
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="f">
<input type="text" name="user" placeholder="用户名" />
<input type="text" name="pwd" placeholder="密码" />
</form>
<input type="button" value="重置" onclick="domReset();" />
<input type="button" value="重置" onclick="jQReset();" />
<script src="js/jquery-3.7.1.min.js"></script>
<script>
function domReset() {
var tag = document.getElementById("f");
tag.reset();
}
function jQReset() {
$("#f")[0].reset()
}
</script>
</body>
</html>
在table里做全选,取消,反选
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="body">
<tr>
<td>
<input type="checkbox" />
</td>
<td>ere</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>crer</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>343d</td>
</tr>
</tbody>
</table>
<input type="button" value="全选" onclick="checkAll()" />
<input type="button" value="取消" onclick="cancelAll()" />
<input type="button" value="反选" onclick="reverse()" />
<script src="js/jquery-3.7.1.min.js"></script>
<script>
function checkAll() {
$("#body").find("input[type='checkbox']").prop('checked', true);
}
function cancelAll() {
$("#body").find("input[type='checkbox']").prop('checked', false);
}
function reverse() {
$("#body").find("input[type='checkbox']").each(function() {
var old = $(this).prop('checked')
if (old) {
$(this).prop('checked', false)
} else {
$(this).prop('checked', true)
}
})
}
</script>
</body>
</html>