jQuery 多种高级页面属性和动画效果
来源：互联网 发布：厄米特矩阵与对称矩阵 编辑：程序博客网 时间：2024/05/16 15:03
完成目标：利用jQuery语法完成多种页面属性和动画效果
1.文字淡入淡出，显示及隐藏。
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.4.2.min.js"></script> <script> $(function () { $('p').click(function () { $('p').toggle("slow") }) $('div').click(function () { $('p').toggle("slow") }) }) </script></head><body><p>可隐藏。可显示</p><p>可隐藏。可显示</p><div>点击</div></body></html>效果：
2.点击按钮使文字放大。
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.4.2.min.js"></script> <style> </style> <script> $(function () { $('#go').click(function () { $('#block').animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 },1000) }) }) </script></head><body><button id="go"> Run</button><div id="block">Hello!</div></body></html>效果：
3.图片或文字的左移或右移，并伴随逐渐消失和逐渐显示效果
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.4.2.min.js"></script> <style> .block{ background-image: url("../image/1.jpg"); width: 500px; height: 500px; position: relative; } </style> <script> $(function () { $("#right").click(function(){ $(".block").animate({left: '+150px',height: 'toggle', opacity: 'toggle'}, "slow"); }); $("#left").click(function(){ $(".block").animate({left: '-150px'}, "slow"); $(".block").animate({ height: 'toggle', opacity: 'toggle' }, "slow"); }); }) </script></head><body><button id="left">«</button><button id="right">»</button><div class="block"></div></body></html>效果：
4.利用jQuery代码完成对表格的修改、保存和CheckBox的全选功能。
方法1：不适用于大型表格和数据，多用于练习使用。
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.4.2.min.js"></script> <script> $(function () { $('#checkAll').click(function () { if(this.checked){ $('.check').attr("checked",true); }else { $('.check').attr("checked",false); } }) $('.change').click(function () { var ok=$(this).parents("tr"); var tdText1=ok.find("td:eq(1)").html(); var tdText2=ok.find("td:eq(2)").html(); var tdText3=ok.find("td:eq(3)").html(); var a=$("<input type='text' id='name'>"); var b=$("<input type='text' id='sex'>"); var c=$("<input type='text' id='age'>"); ok.find("td:eq(1)").html(a); ok.find("td:eq(2)").html(b); ok.find("td:eq(3)").html(c); a.val(tdText1); b.val(tdText2); c.val(tdText3); }) $('.save').click(function () { var ok=$(this).parents("tr"); var text=document.getElementById("name"); var text1=document.getElementById("sex"); var text2=document.getElementById("age"); ok.find("td:eq(1)").html(text.value); ok.find("td:eq(2)").html(text1.value); ok.find("td:eq(3)").html(text2.value); }) }) </script></head><body><table border="1" > <tr align="center"> <td><input type="checkbox" id="checkAll"></td> <td width="100px">姓名</td> <td width="100px">性别</td> <td width="100px">年龄</td> <td width="100px">操作</td> </tr> <tr align="center"> <td><input type="checkbox" class="check"></td> <td >张三</td> <td >男</td> <td >18</td> <td> <input type="button" value="编辑" class="change" style="float: left"> <input type="button" value="保存" class="save"> </td> </tr> <tr align="center"> <td><input type="checkbox" class="check"></td> <td>李四</td> <td >女</td> <td>20</td> <td> <input type="button" value="编辑" class="change" style="float: left"> <input type="button" value="保存" class="save"> </td> </tr> <tr align="center"> <td><input type="checkbox" class="check"></td> <td>王五</td> <td >男</td> <td>25</td> <td> <input type="button" value="编辑" class="change" style="float: left"> <input type="button" value="保存" class="save"> </td> </tr></table></body></html>效果：
方法2：可适用于大型表格，也可做开发使用。并增加删除和新增行的功能。
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可编辑的表格</title> <script src="jquery-1.4.2.min.js"></script> <style> table{ border: 1px solid black; border-collapse: collapse; width: 500px; } table th { border: 1px solid black; width: 25%; } table td { align-items: center; border: 1px solid black; width: 25%; } table th { background-color: #A3BAE9; } </style> <script> //文档准备就绪 $(function () { //设置 所有 td 居中 $('table td').attr("align","center"); //标签+属性选择所有<编辑>按钮 $('input[value="编辑"]').click(function () { //获取每一个<编辑>按钮的 下标（从0开始 所以需要+2 = 按钮在表格的所在行数） var numId = $('input[value="编辑"]').index($(this))+2; //选择表格中的所有tr 通过eq方法取得当前tr var ttr = $('table tr').eq(numId); /*当前行使用find方法找到每一个td列 each方法为每一个td设置function */ ttr.find("td").each(function () { /*过滤 td中的元素 checkbox 、 button、text 不需要执行append 注意 return 为 跳出当前 each return false 为 跳出整个 each */ if($(this).children("input[type='checkbox']").length>0){ return ; } if($(this).children("input[type='button']").length>0){ return ; } if($(this).children("input[type='text']").length>0){ return ; } var tdText = $(this).html(); $(this).html(""); var inputObj = $("<input type='text'>"); inputObj.appendTo($(this)); inputObj.css("width","95%"); inputObj.val(tdText); }); }) //为每一个确定按钮设置点击事件 $('input[value="确定"]').click(function () { /*通过parents方法获取<确定>按钮的父容器tr 再为 tr中的每一个text设置function */ var ttr=$(this).parents("tr"); ttr.find('input[type="text"]').each(function () { var inputVal = $(this).val(); $(this).parents('td').html(inputVal); }) }) //全选/反选 $('#cha').click(function () { //判断checkbox是否选中 if($(this).is(':checked')){ $('input[type="checkbox"]').attr("checked","true"); }else{ $('input[type="checkbox"]').removeAttr("checked"); } }) $('#add').click(function () { $('table tr').eq(2).clone(true).appendTo("table"); }) $('#del').click(function () { $('tr:last').remove(); }) }) </script></head><body><table border="1"> <thead> <tr> <th colspan="4">编辑表格</th> </tr> </thead> <tr> <th><input type="checkbox" id="cha"></th> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> <tr> <td><input type="checkbox"></td> <td>000001</td> <td>张三</td> <td > <input type="button" value="编辑" > <input type="button" value="确定" > </td> </tr> <tr> <td><input type="checkbox"></td> <td>000002</td> <td>李四</td> <td> <input type="button" value="编辑" > <input type="button" value="确定" > </td> </tr> <tr> <td><input type="checkbox"></td> <td>000003</td> <td>王五</td> <td> <input type="button" value="编辑" > <input type="button" value="确定" > </td> </tr> <tr> <td><input type="checkbox"></td> <td>000004</td> <td>赵六</td> <td> <input type="button" value="编辑" > <input type="button" value="确定" > </td> </tr> <input type="button" value="新增" id="add"> <input type="button" value="删除" id="del"></table></body></html>效果：
0 0
- jQuery 多种高级页面属性和动画效果
- jQuery高级动画效果
- jQuery 多种基础页面属性
- Java Script/Html 多种高级页面属性
- Android动画学习（五）之属性动画实现Tween的效果和高级属性示例
- 多种动画效果
- 多种动画效果AnimationView
- 通过jquery实现页面的动画效果
- jQuery简单动画效果和动画队列
- 绚丽多彩的对话框NiftyDialogEffects(多种颜色和动画进入效果)
- 页面增加粒子和动画效果
- 【jQuery】jQuery 效果- 动画
- JQuery 动画显示和隐藏效果
- JQuery 动画显示和隐藏效果
- jQuery封装的页面数据加载动画效果
- 利用css3+jquery写具有动画效果的登录页面
- 自定义心型view,可自定义多种属性以及自动淡出动画效果
- Android 属性动画ValueAnimator和ObjectAnimator的高级用法
- uint8_t / uint16_t / uint32_t /uint64_t 相关内容
- codevs 1766 装果子（二分）
- python的pandas库里的数据结构介绍
- 【编程语言】PySpark 异常 AttributeError: 'PipelinedRDD' object has no attribute 'toDF'
- LeetCode-Maximum Subarray
- jQuery 多种高级页面属性和动画效果
- java读书笔记：ArrayList源码详解(基于jdk1.8)
- 博客搬家了！！！
- ubuntu 安装nvidia驱动
- [JS][easyui]jQuery EasyUI Datagrid VirtualScrollView视图简单分析
- ibatis 中isNull, isNotNull与isEmpty, isNotEmpty区别
- vim折叠（非常好的功能）
- getChildFragment()
- arch安装指南(2016-10)
