jQuery是一个优秀的JavaScript库,是一个凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档,操作DOM,执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。
目录
练习一:完成表格人员信息的增加删除
<table id="table1" border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>
<button class="del">删除</button>
</td>
</tr>
</table>
<button id="people">基本人员</button>
<button id="addS">添加人员</button>
<script>
$(document).ready(function(){
//基本人员
$("#people").click(function(){
})
//添加人员
$("#addS").click(function(){
var str1=prompt("输入姓名");
var str2=prompt("输入年龄");
var str3=prompt("输入性别");
$("#table1").append("<tr><td>"+str1+"</td><td>"+str2+"</td><td>"+str3+"</td><td><button class='del'>删除</button></td></tr>");
//删除信息
$(".del").click(function() {
$(this).parent().parent().remove();
});
})
})
</script>
练习二:开关灯(通过按钮实现div样式的转换)
<div id="d1";">
<img src="./d2.png">
</div>
<button id="open">开灯</button>
<button id="close">关灯</button><br/>
<button id="b3">开关灯</button>
<script>
//两个按钮控制开关灯
var a = document.getElementById("d1");
var b = document.getElementById("open");
var c = document.getElementById("close");
b.onclick=function(){
a.style.backgroundColor="rgb(33, 95, 66)";
console.log('open');
}
c.onclick=function(){
a.style.backgroundColor="rgb(95, 33, 33)";
console.log('close');
}
//一个按钮控制开关灯
var btn=document.getElementById("b3");
var flag=0; //也可以用innerHTML获取文本内容来判断
btn. onclick=function(){
if(flag==0){
a.style.backgroundColor='black';
flag=1;
}else{
a.style.backgroundColor='white';
flag=0;
}
}
</script>
<style>
#d1<