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( ...

随机推荐

es6 模本字符串拼接方法 ``
1.字符串拼接可以使用 es6 ` ` 配合 ${xxx} 具体操作上代码 <!DOCTYPE html> <html lang="en"> < ...
python之路3-元组、列表、字典、集合
1.元组特点:一旦创建,内容不可修改,又叫只读列表 a= ('wang','zhang','zhao') print(a.count('zhao')) print(a.index('wang')) ...
Servlet的 GenericServlet 和 HttpServlet
一.GenericServlet? servlet 是一个接口下面有两个抽象类 GenericServlet 和 HttpServlet 需要被继承并重写其中的方法. package javawe ...
Python学习之路——迭代器
迭代器 # 通过迭代器取值优缺点: # 优点:不依赖索引,完成取值 # 缺点:不能计算长度,不能指定位取值(只能从前往后逐一取值) 可迭代对象 ''' 可迭代对象: 有__iter__()方法的对象, ...
codeforces733C
Epidemic in Monstropolis CodeForces - 733C 有n条鱼排成一列,第i条鱼大小为ai,根据自然界的生存法则,相邻的两只鱼中,较大的鱼可以吃掉较小的鱼,如果两条鱼大 ...
无需认证的mail,适用于ZABBIX等运维系统
cat main.cf | grep "^\s[^# \t].$" queue_directory = /var/spool/postfix command_directory = ...
maven 使用 log4j
Log4j是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.NT的事件记录器.UNIX Syslog守护进程等:我们也可 ...
CentOS7使用firewalld防火墙配置端口
安装启用firewalld防火墙 CentOS7默认的防火墙是firewalld 如果没有firewalld防火墙,可以执行yum install firewalld 命令进行安装 firewalld ...
洛谷P1776 宝物筛选
一道很好的单调队列优化多重背包入门题令$v[i]$表示重量,$w[i]$表示价格 ,$c[i]$表示最多可放的数量,不难推出朴素的转移方程如下: \(f[i][j]=max\{f[i-1 ...
CentOS Linux安装python3
本文的方法是在CentOS上新装了python3,如果本机安装了python2则保留,因为可能有程序依赖目前的python2环境,比如yum!!!!! 一.安装python3.7 1. 安装依赖环境 ...

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

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

随机推荐

热门专题