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

随机推荐

AI佳作解读系列(一)——深度学习模型训练痛点及解决方法
1 模型训练基本步骤进入了AI领域,学习了手写字识别等几个demo后,就会发现深度学习模型训练是十分关键和有挑战性的.选定了网络结构后,深度学习训练过程基本大同小异,一般分为如下几个步骤定义算法公 ...
18.flannel的配置
Kubernetes网络通信: (1) 容器间通信:同一个Pod内的多个容器间的通信, lo (2) Pod通信:Pod IP <--> Pod IP (3) Pod与Service通信: ...
bzoj 2816: [ZJOI2012]网络 (LCT 建多棵树)
链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2816 题面: http://www.lydsy.com/JudgeOnline/upload ...
<数据结构基础学习>（四）链表 Part 2
一.使用链表实现栈增,删,查只对链表头进行操作,时间复杂度都为O(1) 链表头作为栈顶 LinkedListStack<E> implements Stack<E> publ ...
[M$]重装或更换主板后提示“由于指定产品密钥激活次数“ office 2016
https://answers.microsoft.com/zh-hans/msoffice/forum/all/%E6%8C%87%E5%AE%9A%E4%BA%A7%E5%93%81%E5%AF% ...
jdk8在windows及linux环境下安装
jdk下载下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html 目前大部分公司内部使用的还是jdk8,大部 ...
Linux-服务器创建swap交换分区
服务器 swap 交换分区制作作用:‘提升‘ 内存的容量,防止OOM(Out Of Memory) 查看当前的交换分区 # cat /proc/swaps # free -m # swapon -s ...
python学习day11 函数Ⅲ (内置函数与lambda表达式)
函数Ⅲ(内置函数&lambda表达式) 1.函数小高级函数可以当做变量来使用: def func(): print(123) func_list = [func, func, func] # ...
Oracle Database 快捷版安装连接
Oracle Database 快捷版 11g 第 2 版下载地址:http://www.oracle.com/technetwork/cn/database/database-technologi ...
Python多进程与单进程效率对比
运行环境:Python3 in win10 先生成200个测试文件 # generate.py i = 0 while i < 200: o = open("test\\" ...

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

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

随机推荐

热门专题