jquery 第五章 jQuery操作表单与表格

1.回顾

　　对象.bind("事件名称",function(){

})

阻止冒泡事件

return false, event stopProapagation()

模拟事件:自动执行,对象.trigger("事件名")

合成事件:对象.hover(function(){

},function(){

})

hide()/show()

slideUp()/slideDown()

fadeIn()/fadeOut()

对象.animate({属性1:值1,属性2:值2......},时间)

对象.stop();

2.本章目标

　　掌握表格和表单的应用

.3.完成

输入框默认值提示"请输入内容",获取焦点的时候清空提示,失去焦点时,值为空,恢复到默认提示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

        <script type="text/javascript">

            $(function(){

                //获取焦点事件

                $("input").focus(function(){

                    $(this).val('')

                })

                //失去焦点事件

                .blur(function(){

                    if($(this).val() == ''){

                        //把文本框的默认值赋予文本框

                        $(this).val(this.defaultValue)

                    }

                })

            })

        </script>

    </head>

    <body>

        <input type="" name="" id="" value="请输入内aa" />

    </body>

</html>

输入框默认提示

4.表单-多行文本框

　　完成:放大,缩小,上滚,下滚

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

        <script type="text/javascript">

            $(function(){

                $("input:eq(0)").click(function(){

                    $("textarea").animate({width:"600px",height:"300px"},3000)

                })

                $("input:eq(1)").click(function(){

                    $("textarea").animate({width:"300px",height:"150px"},3000)

                })

                $("input:eq(2)").click(function(){

                    $("textarea").animate({scrollTop:"-=100px"},3000)

                })

                $("input:eq(3)").click(function(){

                    $("textarea").animate({scrollTop:"+=100px"},3000)

                })

            })

        </script>

    </head>

    <body>

        <input type="button" value="放大" />

        <input type="button" value="缩小" />

        <input type="button" value="上滚" />

        <input type="button" value="下滚" />

        <textarea rows="10" cols="50">萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多

            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多

            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多

            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多

            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多

            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多

            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多

        </textarea>

    </body>

</html>

多行文本框放大缩小内容上滚下滚

5.表单-复选框

　　表格数据前都有一个复选框,实现全选和反选再加删除选中按钮

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            table{

                width: 480px;

                height: 200px;

                border-collapse: collapse;

            }

            table tr th,td{

                border-collapse: collapse;

                border: 1px solid darkgoldenrod;

                text-align: center;

            }

            table td{

                width:160px;

                height: 50px;

            }

        </style><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

        <script type="text/javascript">

            $(function(){

                $("input:first").click(function(){

                    $("input[tid]").attr("checked",this.checked)

                })

                $("button").click(function(){

                    //获取偶tid 的属性的input标签,并且被选中,进行迭代遍历

                    $("input[tid]:checked").each(function(){

                        //拿到当前选中的input的tid值

                        var tid=$(this).attr('tid')

                        //通过tid 删除对应的tr对象

                        $("tr[id="+tid+"]").remove()

                    })

                })

            })

        </script>

    </head>

    <body>

        <table border="" >

            <button>删除选中数据</button>

            <tr><th width="10%"><input type="checkbox"/>全选反选</th><th width="20%">姓名</th><th width="20%">性别</th><th width="20%">年龄</th></tr>

            <tr id="1"><td><input type="checkbox" tid="1"/></td><td>张三</td><td>男</td><td>20</td></tr>

            <tr id="2"><td><input type="checkbox" tid="2"/></td><td>李四</td><td>男</td><td>21</td></tr>

            <tr id="3"><td><input type="checkbox" tid="3"/></td><td>王五</td><td>男</td><td>22</td></tr>

        </table>

    </body>

</html>

全选反选删除选中

6.表格-数据过滤

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            table{

                width: 100%px;

                height: 100%px;

                border-collapse: collapse;

            }

            table tr th,td{

                border-collapse: collapse;

                border: 1px solid darkgoldenrod;

                text-align: center;

            }

            table td{

                width:160px;

                height: 50px;

            }

        </style><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

        <script type="text/javascript">

            $(function(){

                $("button").click(function(){

                    //获取输入的值

                    var v=$("input").val()

                    //先影藏所有数据行  在显示出有关键字的行

                    $("table tr:first ~ tr").hide().filter(":contains("+v+")").show()

                })

            })

        </script>

    </head>

    <body>

        <table border="" >

            关键字<input  /><button>查询</button>

            <tr><th width="20%">姓名</th><th width="20%">性别</th><th width="20%">年龄</th></tr>

            <tr><td>张三</td><td>男</td><td>20</td></tr>

            <tr></td><td>李四</td><td>男</td><td>21</td></tr>

            <tr></td><td>王五</td><td>男</td><td>22</td></tr>

        </table>

    </body>

</html>

表格数据过滤

7.展开与关闭表格

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            table{

                width: 100%px;

                height: 100%px;

                border-collapse: collapse;

            }

            table tr th,td{

                border-collapse: collapse;

                border: 1px solid darkgoldenrod;

                text-align: center;

            }

            table td{

                width:160px;

                height: 50px;

            }

            .group1_child,.group2_child{

                display: none;

            }

        </style>

        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

        <script type="text/javascript">

            $(function(){

                //给有id 属性的tr绑定单击事件

                $("table tr[id]").click(function(){

                    //获取当前的class属性

                    var c=$(this).attr("class")

                    //筛选出满足条件的行,进行显示和隐藏的转换

                    $("table tr[class="+c+"_child]").toggle()

                })

            })

        </script>

    </head>

    <body>

        <table border="" >

            <tr><th width="20%">姓名</th><th width="20%">性别</th><th width="20%">年龄</th></tr>

            <tr class="group1" id="1"><td colspan="3">开发部</td></tr>

            <tr class="group1_child"><td>张三</td><td>男</td><td>20</td></tr>

            <tr class="group2" id="2"><td colspan="3">财务部</td></tr>

            <tr class="group2_child"></td><td>李四</td><td>男</td><td>21</td></tr>

            <tr class="group2_child"></td><td>王五</td><td>男</td><td>22</td></tr>

        </table>

    </body>

</html>

展开与关闭表格

8.选项卡

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul{

                list-style: none;

            }

            ul li{

                float: left;

                margin-left: 10px;

                display: block;

                text-align: center;

                cursor: pointer;

                border: 1px solid #7FFFD4;

                background-color: #f1f1f1;

            }

            .content{

                clear: left;

                border: aqua 1px solid;

                height: 100px;

            }

            .content div {

                display: none;

            }

            .select{

                background-color: aquamarine;

            }

        </style>

        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

        <script type="text/javascript">

            $(function(){

                $("ul li").click(function(){

                    //给当前点击的li项添加一个选中的背景样式,然后将其他级别的li选中的样式移除

                    $(this).addClass("select").siblings().removeClass("select")

                    //获取当前点击的li项的下表index( 获得下标)

                    var index=$(this).index();

                    $(".content div:eq("+index+")").show().siblings().hide()

                })

            })

        </script>

    </head>

    <body>

        <div>

            <ul>

                <li>首页</li>

                <li>新闻</li>

                <li>视频</li>

            </ul>

        </div>

        <div class="content">

            <div>首页内容</div>

            <div>新闻内容</div>

            <div>视频内容</div>

        </div>

    </body>

</html>

选项卡代码

jquery 第五章 jQuery操作表单与表格的更多相关文章

JQuery中操作表单和表格
一:表单应用 1.HTML中的表单大致由三部分组成 (1).表单便签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...
jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
jQuery第五章
jQuery对表单.表格的操作以及更多应用一.表单应用 1.单行文本框应用 (1)获取和失去焦点改变样式 HTML代码如下: <form action="#" method ...
jQuery 第五章实例方法详解内置队列queue() dequeue() 方法
.queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...
jQuery 第五章实例方法事件
.on() .one() .off() .trigger() .click / keydown / mouseenter ... .hover() ----------------------- ...
jQuery系列第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
jQuery系列第二章 jQuery框架使用准备
第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...
第五章jQuery
DOM文档加载的步骤解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. DOM树构建完成. 加载图片等外部文件. 页面加载完毕. 执行时间不同 window.onload必须等到页 ...
第五章 jQuery中的动画
通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法该方法的功能与css()方法设置display属性效果相同. 给show( ...

随机推荐

golang 数组、切片、map
一.数组(类似python的list) 数组的长度一旦定义了就不能动态增长.并且存储的数据类型必须相同. 创建方法: var 数组名 [长度]数据类型例如: package main import ...
IRepository<Developer> repository 出现 Abp.Domain.Repositories.IRepository which was not registered.
“/”应用程序中的服务器错误. Can't create component 'SWJ.SSO.DomainServices.TestService' as it has dependencies t ...
oracle创建表空间等相关语句
在数据库可视化工具中执行以下语句,可建立Oracle表空间. 主要分为四步 1.创建临时表空间 create temporary tablespace xuanwu_temp tempfile 'D: ...
H5自定义属性data-*
data属性的设置和读取方式: 1.data-xxx 的格式,则采用正常格式来读写该属性值 <div id="test" data-name="小明"&g ...
Django模板语言初识
一.Django框架简介 1.MVC框架 MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控 ...
JS判断浏览器是否支持触屏事件
var hasTouch=function(){ var touchObj={}; touchObj.isSupportTouch = "ontouchend" in docume ...
HTML div 盒子添加/删除——浮层
1.clear语法:clear : none | left|right| both 2.clear参数值说明:none : 允许两边都可以有浮动对象both : 不允许有浮动对象left : 不允许左 ...
面向对象__call__
__call__在Python中,函数其实是一个对象: >>> f = abs>>> f.__name__'abs'>>> f(-123)123由 ...
Django+Vue打造购物网站(十)
首页.商品数量.缓存和限速功能开发将环境切换为本地,vue也切换为本地轮播图 goods/serializers.py class BannerSerializer(serializers.Mod ...
linux下sort命令详解大全
工作原理: Sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. 第一部分: 1. sort:(不带参数) [rocrocket@ ...

jquery 第五章 jQuery操作表单与表格

jquery 第五章 jQuery操作表单与表格的更多相关文章

随机推荐

热门专题