**
dom的属性操作
**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//alert($(this).html());
//$(this).html("<i>按钮</i>");
$(this).text("<i>按钮</i>");
//val()获取标签的value值
});
$("#btn2").click(function(){
//alert($("input[name='a']").val());
$("input[name='a']").val('abcde');
});
//attr()1.传入一个参数，获取这个参数的值2.传入两个参数，改为后面的那个
$("#btn3").click(function(){
//alert($("input[type='checkbox'].eq(2)").attr("name"));
alert($(":checkbox:eq(2)").attr("value"));
});
$("p").click(function(){
alert($(this).text());
});
})
</script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<button id="btn1"> 获取文本框的name值</button>
<button id="btn2"> 获取文本框的value值</button>
<button id="btn3">获取第三个多选框name值</button>
<form action="#" id="form1">
文本框:<input name="a" value="abc" type="text"/><br/>
多选框:<input name="interst" type="checkbox" value="篮球">
<input type="checkbox" name="interst" value="足球">
<input type="checkbox" name="interst" value="乒乓">
</form>
</body>
</html>
表单选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//找到id为btn1的节点，设定点击方法
$("#btn1").click(function(){
//在btn1的节点下找到checkbox元素中name=itms的节点，调用add()函数，prop()设置属性和值
$(":checkbox[name='itms']").add("#1").prop("checked",true);
});
$("btn2").click(function(){
$(":checkbox[name='itms']").add("#1").prop("checked",false);
});
$("#btn3").click(function(){
//each()遍历所有选中属性，都定义一个function
$(":checkbox[name='itms']").each(function(){
//定义一个变量等于prop()的值
var status=$(this).prop("checked");
$(this).prop("checked",!status);
});
});
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input id="1" type="checkbox"/>全选/全不选<br/>
<input id="2" name="itms" type="checkbox"/>足球<br/>
<input id="3"name="itms" type="checkbox"/>篮球<br/>
<input id="4" name="itms" type="checkbox"/>排球<br/>
<button id="btn1" name="all" value="全选">全选</button>
<button id="btn2" name="all" value="全不选">全不选</button>
<button id="btn3" name="all" value="反选">反选</button>
<button id="bt4" type="submit" value="提交">提交</button>
</form>
</body>
</html>
表单添加删除记录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//e表示点击的节点
//定义一个removeTr()的删除方法
function removeTr(e){
//在点击的地方所属节点向上寻找两次父节点
var tr=$(e).parent().parent();
//在找到最大父节点后，往下找到第一个children，获取文本值
var tdText=tr.children().first().text();
//confirm()的作用是弹出提示框，是否删除，有确认和取消选项
var flag=confirm("你确认删除"+tdText+"吗?");
//if(flag)的意识是if(true)
if(flag){
tr.remove();
}};
//this 代表当前点击的<a>标签
//找到tr
$("a").click(function(){
removeTr(this);
return false;
});
$("#addEmpButton").click(function(){
var nameText=$("#empName").val();
var emailText=$("#email").val();
var salaryText=$("#salary").val();
//$("#employeeTable").append("<tr></tr>").append()
//append将<td>添加到<tr>中
var abc=$("<tr></tr>").append($("<td>"+nameText+"</td>"))
.append($("<td>"+emailText+"</td>"))
.append($("<td>"+salaryText+"</td>"))
.append($("<td><a href='#'>Delete</a></td>"))
.appendTo("#employeeTable");
//alert(abc[0].nodeName);//abcd的值返回的是tr这个节点
//所以在tr节点包含的节点中寻找"a"的节点，定义点击函数
abc.find("a").click(function(){
//调用removeTr(e)方法
removeTr(this);
return false;
});
//$("#empName").val("");
//$("#email").val("");
//$("#salary").val("");
//清空表单输入框
$("input[type='text']").val("");
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>Tom@qq.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=000=1">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>Bob@qq.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=000=2">Delete</a></td>
</tr>
<tr>
<td>Jim</td>
<td>Jim@qq.com</td>
<td>7000</td>
<td><a href="deleteEmp?id=000=3">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name</td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td class="word">email</td>
<td class="inp">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="word">salary</td>
<td class="inp">
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
