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

随机推荐

Uint 5.css继承权重,盒模型和border padding
一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...
前端jquery 获取select多选的值
当select设置属性multiple='multiple'时, option就可以多选了那么我们如何获取所有被选中的option的值呢? 首先说明: $('select[name="m ...
Ubuntu 14.04 mame sound fix
sudo vi '/etc/mame/mame.ini' samplerate 22050
三菱FX系列PLC教程
标题日期点击第一章:可编程控制器概论 2014-11-04 1401 1-0 课程概述 2014-11-05 192237 1-1 PLC的定义功能与特点 2014-11-05 16 ...
Vivado如何使用命令行创建工程
前言 vivado中采用TCL脚本语言来作为其命令解释语言.除去可以普通的图形界面流程还可以使用tcl脚本创建工程并导入相关源文件. 流程 1.首先还是要打开vivado图形主界面. 2.在某路径 ...
Vivado2016旧工程IP移动到新工程
前言在VIVADO中图形化界面生成IP,在旧工程中使用后,如果想在新的工程中使用这个IP但又不想再次生成一次,则就需要把就旧工程中的IP导入到新工程中. 流程 1.旧工程IP生成的目录如下,IP为C ...
Elastalert安装及使用
如果在windows 64平台报错:执行 pip install python-magic-bin==0.4.14修复https://stackoverflow.com/questions/18374 ...
（二）Qt窗口应用程序Widget
QMainWindow,QWidget,QDialog,这三基类都可以作为顶层窗口 QWidget:是所有窗口类的父类,功能最简单 QMainWindow:如果窗口需要菜单栏,工具栏,状态栏,就需要Q ...
SQL学习指南第二篇
使用集合 union操作符(组合查询) 多数 SQL 查询只包含从一个或多个表中返回数据的单条 SELECT 语句.但是,SQL 也允许执行多个查询(多条 SELECT 语句),并将结果作为一个查询结 ...
Tomcat 部署java web项目直接ip地址访问项目
正常情况下,在访问在Tomcat中部署的项目是 http://localhost:8080/demo 方式其中,IP,端口,项目名(Demo)都是必须的. 那么,怎么样才能通过 http://loc ...

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

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

随机推荐

热门专题