jquery事件学习练习（CRUD and 滚动公告）

来源：互联网发布：Java二叉树的遍历算法编辑：程序博客网时间：2024/04/28 00:38

<!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" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>learn_jQueryDemo2--查看删除修改-CRUD</title><style type="text/css">#table_crud {border: 1px solid #abcdef;border-collapse: collapse;width: 700px;}tr {height: 40px;}th {border: 1px solid #abcdef;}td {border: 1px solid #abcdef;text-align: center;}td a {margin-right: 5px;color: pink;}.popDiv {width: 500px;padding: 10px;border: 1px solid green;position: absolute;z-index: 4;left: 50%;margin-left:-250px;top: 190px; background: white;display:none;}.popDiv p {border-bottom: 1px solid red;}</style><script type="text/javascript" src="jquery-2.1.1.js"></script></head><body><table id="table_crud"><tr><th>姓名</th><th>年龄</th><th>职位</th><th>薪资</th><th>操作</th></tr><tr><td>zhangSan</td><td>25</td><td>资深前端工程师</td><td>12000</td><td><a href="#" class="view" >view</a><a href="#" class="delete">remove</a><a href="#">modidied</a></td></tr><tr><td>liSi</td><td>28</td><td>资深java程序员</td><td>16000</td><td><a href="#" class="view" >view</a><a href="#" class="delete">remove</a><a href="#">modidied</a></td></tr><tr><td>wangWu</td><td>30</td><td>项目经理</td><td>10000+提成</td><td><a href="#" class="view" >view</a><a href="#" class="delete">remove</a><a href="#">modidied</a></td></tr></table><div class="popDiv"><p> <strong>姓名:</strong><span></span></p><p> <strong>年龄:</strong><span></span></p><p><strong>职位:</strong><span></span></p><p><strong>薪资:</strong><span></span></p><a href="#" class="close">关闭</a></div><script type="text/javascript">/*查看方法!!!*/$('a.view').click(function() {//添加遮罩层让弹出详细信息后不允许在点击其他的var maskHeight = $(document).height();var maskwidth = $(document).width();$('body').append('<div class="mask"></div>')$('div.mask').css({'opacity': 0.4,'background': '#000','position': 'absolute','lleft': 0,'top': 0,'width': maskwidth,'height': maskHeight,'z-index': 2});// alert($(this).text());// $('.popDiv').css('display', 'block');var array = [];$(this).parent().siblings().each(function() {// alert($(this).text());array.push($(this).text());//新建数组，将获取到的值放在数组里面，写法和方法});// alert(array)//each默认传递参数!!!/*$('div.popDiv').show().children().each(function() {$(this).children('span').text(array[$(this).index()])});// 我觉的这样写也是可以的，嘿嘿*/$('div.popDiv').show().children().each(function(i) {$(this).children('span').text(array[i])})//关闭方法$('a.close').click(function() {$(this).parent().hide();// $('div.mask').hide();//不合适$('div.mask').remove();});});/*删除方法*/$('a.delete').click(function() {$(this).parents('tr').remove();});/*修改*/</script></body></html>

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

<!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" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>learn_jQueryDemo3---滚动公告</title><script type="text/javascript" src="jquery-2.1.1.js"></script><style type="text/css">* {padding: 0; margin: 0;}body { margin: 100px;}ui {list-style-type: none;}li { height: 30px; line-height: 30px;}</style></head><body><ui><li>I Am The 000001 li...............</li><li>I Am The 000002 li...............</li><li>I Am The 000003 li...............</li><li>I Am The 000004 li...............</li><li>I Am The 000005 li...............</li><li>I Am The 000006 li...............</li><li>I Am The 000007 li...............</li><li>I Am The 000008 li...............</li><li>I Am The 000009 li...............</li><li>I Am The 000010 li...............</li></ui><script type="text/javascript">/*仅仅是为了实现这个方式，但是由于频繁的操作了DOM所以不建议使用，可以学习实例知识，图片轮播*/setInterval(function() {// $('ui>li:first()').css('background', 'red');var newLi = $('ui>li:first()').clone(true);$('ui').append(newLi);$('ui>li:first()').remove();},1000);</script></body></html>

0 0