一、选择器练习
<!-- 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><!-- 定义html页面使用的字符集为UTF-8 --><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><!-- 编写js语言，引入jquery库(封装的js)，方便对js代码的操作 --><script type="text/javascript" src="script/jquery-1.7.2.js"></script><!-- 开始编写js代码 --><script type="text/javascript">//在dom元素加载完成后自动执行函数$(document).ready(function(){//构造p标签的jQuery对象，调用click方法，里面的参数是要执行的函数$("p").click(function(){alert("^^" + $(this).text());}); <!-- 匹配第2个表格，将第0,2,4,...行设置为绿色，"#aaffbb"表示十六进制表示的RGB -->$("table:eq(1) tr:even").css("background", "#aaffbb");<!-- 获得按钮的jQuery对象，返回选中复选框的个数 --><!-- :button表示匹配所有按钮，:checkbox表示匹配所有复选框 -->$(":button").click(function(){alert($(":checkbox:checked").length);});});</script></head><body><!-- 定义段落标签 --><p>段落1</p><p>段落2</p><p>段落3</p><!-- 定义表格标签 --><table><!-- 定义行标签 --><tr><!-- 定义单元格标签 --><td>第一行</td></tr><tr><td>第二行</td></tr><tr><td>第三行</td></tr><tr><td>第四行</td></tr><tr><td>第五行</td></tr><tr><td>第六行</td></tr></table><table><tr><td>第一行</td></tr><tr><td>第二行</td></tr><tr><td>第三行</td></tr><tr><td>第四行</td></tr><tr><td>第五行</td></tr><tr><td>第六行</td></tr></table><!-- 定义复选框 --><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><!-- 定义按钮 --><button>您选中的个数</button></body>
</html>
<!-- 当前网页使用的是html语言，版本号是html4.01过渡版 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><!-- 定义html页面使用的字符集为UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">//等价于$(document).ready(function(){});$(function(){//获取所有复选框标签对象，并转换为jQuery对象var items = $("[name='items']");//根据id选择器选择按钮标签对象，转换为jQuery对象$("#checkedAllBtn").click(function(){//设置所有复选框为选中状态，attr为设置或返回被选中元素的属性值items.attr("checked",true);$("#checkedAllBox").attr("checked",true);});//全不选按钮$("#checkedNoBtn").click(function(){items.attr("checked",false);$("#checkedAllBox").attr("checked",false);});//反选按钮$("#checkedRevBtn").click(function(){items.each(function(){this.checked = !this.checked;});var flag = $("[name='items']:checked").length==4;$("#checkedAllBox").attr("checked",flag);});//提交按钮$("#sendBtn").click(function(){$(":checkbox[name='items']:checked").each(function(){alert(this.value);});});//全选/全不选复选框$("#checkedAllBox").click(function(){items.attr("checked",this.checked);});//全选/全不选复选框与items状态同步$("[name='items']").click(function(){var flag = $("[name='items']:checked").length==4;$("#checkedAllBox").attr("checked",flag);});});</script>
</head>
<body><!-- 定义表单，method为post请求 --><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /><input type="checkbox" name="items" value="足球" />足球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="羽毛球" />羽毛球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全 选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反 选" /><input type="button" id="sendBtn" value="提 交" /></form></body>
</html>
二、DOM操作练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><style type="text/css">select {width: 100px;height: 140px;}div {width: 130px;float: left;text-align: center;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function() {//第一个按钮，选中添加到右边$("button:eq(0)").click(function () {$("select:eq(0) option:selected").appendTo($("select:eq(1)"));});//第二个按钮，全部添加到右边，这时候就不用过滤了$("button:eq(1)").click(function () {$("select:eq(0) option").appendTo($("select:eq(1)"));});//第三个按钮，选中添加到左边$("button:eq(2)").click(function () {$("select:eq(1) option:selected").appendTo($("select:eq(0)"));});//第四个按钮，全部添加到左边$("button:eq(3)").click(function () {$("select:eq(1) option").appendTo($("select:eq(0)"));});});</script>
</head>
<body><div id="left"><select multiple="multiple" name="sel01"><option value="opt01">选项1</option><option value="opt02">选项2</option><option value="opt03">选项3</option><option value="opt04">选项4</option><option value="opt05">选项5</option><option value="opt06">选项6</option><option value="opt07">选项7</option><option value="opt08">选项8</option></select><button>选中添加到右边</button><button>全部添加到右边</button></div><div id="rigth"><select multiple="multiple" name="sel02"></select><button>选中删除到左边</button><button>全部删除到左边</button></div></body>
</html>
<!-- 当前网页使用的是html语言，版本号是html4.01严格版 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><!-- 告诉浏览器要链接样式表，调用样式的额文件类型为css样式，链入外部css --><link rel="stylesheet" type="text/css" href="styleB/css.css"/><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">//定义函数用于删除某一行var deleteFun = function() {//this对象表示当前正在响应的dom对象，先找到a标签，然后取两次父元素，找到行标签，执行removevar trobj = $(this).parent().parent();//查找当前行标签对象中的第一个单元格对象，其内容为namevar name = trobj.find("td:first").text();//confirm是JS中的确认提示框函数，传什么就显示什么，点击确定返回true，取消返回falsevar flag = confirm("你确定要删除"+name+"吗?");if(flag) {trobj.remove();}return false;};//页面加载完成后调用$(function () {//给submit按钮绑定单击事件$("#addEmpButton").click(function () {//获取输入框姓名、邮箱、工资的内容var name = $("#empName").val();var email = $("#email").val();var salary = $("#salary").val();//创建一个行标签对象var trObj = $("<tr>" +"<td>"+name+"</td>" +"<td>"+email+"</td>" +"<td>"+salary+"</td>" +"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +"</tr>");//将行标签对象添加到显示数据的表格中trObj.appendTo($("#employeeTable"));//给添加的行的a标签绑上事件，这里是删除新添加的行标签对象trObj.find("a").click(deleteFun);});//给删除的a标签绑定单击事件，用于删除员工表中已有的行标签对象$("a").click(deleteFun);});</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@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><!--<td><a href="deleteEmp?id=003">Delete</a></td>--><td><a href="deleteEmp?id=003">Delete</a></td></tr>
</table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name:</td><!-- 设置姓名输入框的class属性为inp --><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>
三、css动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
/*重置浏览器的默认样式*/
* {margin: 0;padding: 0;
}
/*设置body中内容大小及位置*/
body {font-size: 12px;text-align: center;
}
/*设置a标签的颜色及文本修饰*/
a {color: #04D;text-decoration: none;
}
/*设置鼠标移动到a标签上的样式为下划线*/
a:hover {color: #F50;text-decoration: underline;
}
/*自定义的样式名*/
.SubCategoryBox {width: 600px;margin: 0 auto;text-align: center;margin-top: 40px;
}
/*自定义无序列表样式*/
.SubCategoryBox ul {list-style: none;
}
/*自定义无序列表项的样式*/
.SubCategoryBox ul li {/*将对象作为块对象*/display: block;/*列表项浮动到左侧*/float: left;width: 200px;line-height: 20px;
}.showmore , .showless{/*清除浮动*/clear: both;text-align: center;padding-top: 10px;
}.showmore a , .showless a{display: block;width: 120px;margin: 0 auto;line-height: 24px;border: 1px solid #AAA;
}
/*后代选择器
1.----.showmore表示类选择器
2.----空格表示取后代，样式里后代a，a的后代里有span
*/
.showmore a span {padding-left: 15px;background: url(img/down.gif) no-repeat 0 0;
}
/*表示使用这个样式的标签，后代要有个a标签，a的后代有个span，也就是指div标签，要在div标签上进行设置*/
.showless a span {padding-left: 15px;background: url(img/up.gif) no-repeat 0 0;
}
/*表示使用这个样式的标签，后代要有个a标签，也就是指li标签，要在li标签上进行设置*/
.promoted a {color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function() {//隐藏卡西欧后的列表项$("li:gt(5):not(:last)").hide();//查找“显示全部品牌的a标签”，并绑定单击事件$("div div a").click(function () {//显示或隐藏卡西欧后的列表项$("li:gt(5):not(:last)").toggle();//根据列表项是否隐藏来判断决定是哪种显示if($("li:gt(5):not(:last)").is(":hidden")) {$("div div a span").text("显示全部标签");//删除之前的样式，添加新样式$("div div").removeClass();$("div div").addClass("showmore");//去掉高亮$("li:contains(明基)").removeClass();} else {$("div div a span").text("显示精简标签");//删除之前的样式，添加新样式$("div div").removeClass();$("div div").addClass("showless");//品牌加高亮$("li:contains(明基)").addClass("promoted");}return false;});});
</script>
</head>
<body><div class="SubCategoryBox"><ul><li><a href="#">佳能</a><i>(30440) </i></li><li><a href="#">索尼</a><i>(27220) </i></li><li><a href="#">三星</a><i>(20808) </i></li><li><a href="#">尼康</a><i>(17821) </i></li><li><a href="#">松下</a><i>(12289) </i></li><li><a href="#">卡西欧</a><i>(8242) </i></li><li><a href="#">富士</a><i>(14894) </i></li><li><a href="#">柯达</a><i>(9520) </i></li><li><a href="#">宾得</a><i>(2195) </i></li><li><a href="#">理光</a><i>(4114) </i></li><li><a href="#">奥林巴斯</a><i>(12205) </i></li><li><a href="#">明基</a><i>(1466) </i></li><li><a href="#">爱国者</a><i>(3091) </i></li><li><a href="#">其它品牌相机</a><i>(7275) </i></li></ul><div class="showmore"><a href="more.html"><span>显示全部品牌</span></a></div></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">body {text-align: center;}#small {margin-top: 150px;}#showBig {position: absolute;display: none;}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){$("#small").bind("mouseover mouseout mousemove",function (event) {if(event.type == "mouseover") {$("#showBig").show();} else if(event.type == "mouseout") {$("#showBig").hide();} else if(event.type == "mousemove") {$("#showBig").offset({left:event.pageX + 10,top: event.pageY + 10});}});});
</script>
</head>
<body><img id="small" src="img/small.jpg" /><div id="showBig"><img src="img/big.jpg"></div></body>
</html>
![[BSidesSF 2019]Mixer ECB加密](https://img-blog.csdnimg.cn/20200215224035263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2EzMzIwMzE1,size_16,color_FFFFFF,t_70)
