案例一：全选、反选、取消实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="全选" onclick="checkAll();" />

    <input type="button" value="反选" onclick="reverseAll();" />

    <input type="button" value="取消"  onclick="cancleAll();"/>

    <table border="">

        <thead>

            <tr>

                <th>选项</th>

                <th>IP</th>

                <th>PORT</th>

            </tr>

        </thead>

        <tbody id="tb">

            <tr>

                <td><input type="checkbox" /></td>

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

        </tbody>

    </table>

    <script src="jquery-1.12.4.js"></script>

    <script>

        function checkAll() {

            $('#tb :checkbox').prop('checked',true);   #prop是jquery的属性，checked设置为true，只有checked表示获取选中的

        }

        function cancleAll() {

            $('#tb :checkbox').prop('checked',false);

        }

        function reverseAll() {

            $(':checkbox').each(function(k){

                // this,代指当前循环的每一个元素

                // Dom

                /*

                if(this.checked){

                    this.checked = false;

                }else{

                    this.checked = true;

                }

                */

                /*

                if($(this).prop('checked')){

                    $(this).prop('checked', false);

                }else{

                    $(this).prop('checked', true);

                }

                */

              // 三元运算var v = 条件? 真值：假值

                var v = $(this).prop('checked')?false:true;

                $(this).prop('checked',v);

            })

        }

    </script>

</body>

</html>

全选、反选、取消

全选、反选、取消

案例二：菜单栏点击展开收起实例

　　本实例实现菜单栏点击一个菜单另一个菜单收起来，类似下图：

　　

<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .header {

                background-color: #67b168;

                color: wheat;

            }

            .content {

                min-height: 30px;

            }

            .hide {

                display: none;

            }

        </style>

</head>

<body>

    <div style="height: 400px;width: 200px;border: 1px solid #d58512">

            <div class="tiem">

                <div class="header">标题一</div>

                <div  class="content hide">内容一</div>

            </div>

            <div class="tiem">

                <div class="header">标题二</div>

                <div class="content hide">内容二</div>

            </div>

            <div class="tiem">

                <div class="header">标题三</div>

                <div class="content hide">内容三</div>

            </div>

    </div>

<script src='js/jquery-1.11.0.min.js'></script>

<script>

//        找到所有class为header的标签，然后.click()绑定事件

        $('.header').click(function(){

//                #jQuery默认循环所有选中的标签

//             $(this)  当前点击的标签

//             $(this).next  当前点击的标签的下一个标签

//                找到当前点击的标签的下一个标签，移除hide样式,点击后hide去掉，即展开

            $(this).next().removeClass('hide');

//                找到当前标签的父标签的兄弟标签，然后找样式为.content的标签

            $(this).parent().siblings().find('.content').addClass('hide');

//            可以一行完成

//            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

                })

</script>

</body>

</html>

菜单栏点击展开其余收起

案例三：模态编程框案例

本案例实现魔态编程框案例，点击添加会出现一个对话框，用于添加一行，编辑可以编辑当前行,删除可以删除当前行

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .modal{

            position: fixed;

            top: 50%;

            left: 50%;

            width: 500px;

            height: 400px;

            margin-left: -250px;

            margin-top: -250px;

            background-color: #eeeeee;

            z-index: 10;

        }

        .shadow {

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            opacity: 0.6;

            background-color: #000000;

            z-index: 9;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

    <a onclick="addElement();">添加</a>

    <table border="" id="tb">

        <tr>

            <!--target 自定义属性-->

            <td target="hostname">1.1.1.1</td>

            <td target="port">80</td>

            <td>

                <a class="edit">编辑</a>

                <a class="del">删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">2.2.2.2</td>

            <td target="port">80</td>

            <td>

                <a class="edit">编辑</a>

                <a class="del">删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">3.3.3.3</td>

            <td target="port">8000</td>

            <td>

                <a class="edit">编辑</a>

                <a class="del">删除</a>

            </td>

        </tr>

    </table>

    <!--modal 提前写好编程框-->

    <div class="modal hide">

        <div>

            <input name="hostname" type="text">

            <input name="port" type="text">

        </div>

        <div>

            <input type="button" value="取消" onclick="canceModal();">

            <input type="button" value="确定" onclick="confirmModal();">

        </div>

    </div>

    <!--shadow 遮罩层-->

    <div class="shadow hide"></div>

<script src='js/jquery-1.11.0.min.js'></script>

<script>

    function addElement(){

        $(".modal,.shadow").removeClass('hide');

    }

    function canceModal(){

        $(".modal,.shadow").addClass('hide');

//        清空框中的脏数据,

        $('.modal input[type="text"]').val("");

    }

//    $('.edit').click(function(){

//        $(".modal,.shadow").removeClass('hide');

////        this 当前点击的标签，parent父标签，prevAll父标签上面的所有同级标签

//        var tds = $(this).parent().prevAll();

////        循环获取tds中的内容(td中的内容)，赋值给编程框中的value

//        tds.each(function(){

////            this 当前每个td

////            获取自定义属性的值,hostname/port

//            var n = $(this).attr('target');

////            获取当前td内容:1.1.1.1/80

//            var v = $(this).text();

////            将获取的内容放入相应的编程框中

////          $('.modal input[name="[hostname"]').val(1.1.1.1)

////            因为hostaname/port为变量，而name=里面需要是“”格式，所以用到字符串拼接

////            var a1 = '.modal input[name="';

////            var a2 = '"]';

////            var temp = a1 + n + a2

//            $('.modal input[name="' + n + '"]').val(v)

//        });

//

//    });

//    在添加更多一行的时候所产生的 input 和 button 都是动态生成的，所以不能使用 click，要使用 on

    $(document).on('click','.edit',function(){

        $(".modal,.shadow").removeClass('hide');

//        this 当前点击的标签，parent父标签，prevAll父标签上面的所有同级标签

        var tds = $(this).parent().prevAll();

//        循环获取tds中的内容(td中的内容)，赋值给编程框中的value

        tds.each(function(){

//            this 当前每个td

//            获取自定义属性的值,hostname/port

            var n = $(this).attr('target');

//            获取当前td内容:1.1.1.1/80

            var v = $(this).text();

//            将获取的内容放入相应的编程框中

//          $('.modal input[name="[hostname"]').val(1.1.1.1)

//            因为hostaname/port为变量，而name=里面需要是“”格式，所以用到字符串拼接

//            var a1 = '.modal input[name="';

//            var a2 = '"]';

//            var temp = a1 + n + a2

            $('.modal input[name="' + n + '"]').val(v)

        });

    });

    function confirmModal(){

//        创建一个tr

        var tr = document.createElement('tr');

        $('.modal input[type="text"]').each(function(){

//            循环使用dom创建一个td，也就是有几个input就需要加几个td

            var td = document.createElement('td');

//            获取输入框中输入的数据

            var v = $(this).val();

//            获取数据库的属性

            var tage = $(this).attr('name');

//            将属性加入到td中

            $(td).attr('target',tage);

//            将输入的内容加入td中

            $(td).append(v);

//            将td加入tr中

            $(tr).append(td);

        });

//        最后将编辑和删除加入

        var temp = "<a class='edit'>编辑</a> <a class='del'>删除</a>";

//        将一行加入到table里面

        var td2 = document.createElement('td');

        $(td2).append(temp);

        $(tr).append(td2);

        $('#tb').append(tr);

//        添加完成后去掉编程框和遮罩层

        $('.modal,.shadow').addClass('hide');

//        清空框中的脏数据,否则下次在点击添加时，还会有上一次填写的数据

        $('.modal input[type="text"]').val("");

    }

    //    删除tr行

//    在添加更多一行的时候所产生的 input 和 button 都是动态生成的，所以不能使用 click，要使用 on

    $(document).on('click','.del',function(){

        console.log(this,"");

        $(this).parent().parent().remove();

    });

</script>

</body>

</html>

编程框添加删除案例

案例四：横向菜单切换

本案例实现横向菜单菜单切换，即点击菜单一现实内容一，点击菜单二，显示菜单二。。。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .menu{

            height: 38px;

            background-color: #eeeeee;

            line-height: 38px;

        }

        .active{

            background-color: brown;

        }

        .menu .menu-item{

            float: left;

            border-right: 1px solid red;

            padding: 0 5px;

            cursor: pointer;

        }

        .content{

            min-height: 100px;

            border: 1px solid #eeeeee;

        }

    </style>

</head>

<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">

            <div  class="menu-item active" a="">菜单一</div>

            <div  class="menu-item" a="">菜单二</div>

            <div  class="menu-item" a="">菜单三</div>

        </div>

        <div class="content">

            <div b="">内容一</div>

            <div class="hide"  b="">内容二</div>

            <div class="hide" b="">内容三</div>

        </div>

    </div>

 <script src='js/jquery-1.11.0.min.js'></script>

    <script>

        $('.menu-item').click(function(){

            $(this).addClass('active').siblings().removeClass('active');

            var target = $(this).attr('a');

            $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');

        });

    </script>

</body>

</html>

横向菜单切换

持续更新中。。。。。。。。。。。

jQuery 简单案例的更多相关文章

  1. 毕业设计---json,Struts,ajax以及JQuery简单案例

    <!-- Struts2的xml文件配置 --><struts> <package name="default" namespace="/& ...

  2. 使用jQuery简单实现返回顶部的一个小案例

    1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...

  3. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  4. jquery简单使用（看教程：快全有实例）（固定样式：$().val()设置属性，$().click()设置方法）

    jquery简单使用(看教程:快全有实例)(固定样式:$().val()设置属性,$().click()设置方法) 一.总结 1.jquery不懂之处直接看教程,案例都有,有简单又快 2.jquery ...

  5. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  6. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  7. Servlet请求头response应用简单案例

    Servlet请求头response应用简单案例:访问AServlet重定向到BServlet,5秒后跳到CServlet,并显示图片: AServlet package cn.yzu; import ...

  8. winform 通过 html 与swf 交互 简单案例

    在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...

  9. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

随机推荐

  1. rabbitmq系统学习（三）集群架构

    RabbitMQ集群架构模式 主备模式 实现RabbitMQ的高可用集群,一般在并发和数据量不高的情况下,这种模型非常的好用且简单.主备模式也称为Warren模式 HaProxy配置 listen r ...

  2. Winginx nginx 启动提示80端口被占用

    第一步:查看80端口占用信息 win键+R运行命令:cmd-->netstat -aon|findstr "80" 2.结束任务 找到  pin=4272这个进程,将进程结束 ...

  3. C#退出窗体的总结方法

    一.关闭窗体 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit();Application.ExitThread(); System.En ...

  4. Dash by Plotly 学习笔记

    一.介绍 1.dash 是什么 dash 是一个基于 Flask (Python) + React 的 web 框架. 入门指南:https://dash.plot.ly/getting-starte ...

  5. 对List集合中的对象中的某个属性进行排序

    今天在项目中遇到的问题,不能在sql中进行order by.所以将数据库中查询出来的集合,在java代码中进行排序 Collections.sort(list, new Comparator<H ...

  6. onload事件与ready事件的区别，原生js与jquery的区别

    onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...

  7. 用Python爬取"王者农药"英雄皮肤

    0.引言 作为一款现象级游戏,王者荣耀,想必大家都玩过或听过,游戏里中各式各样的英雄,每款皮肤都非常精美,用做电脑壁纸再合适不过了.本篇就来教大家如何使用Python来爬取这些精美的英雄皮肤. 1.环 ...

  8. requests 处理异常错误 requests.exceptions.ConnectionError HTTPSConnectionPool [Errno 10060]

    使用python requests模块调用vmallarg.vmall.com接口API时报如下错误: requests.exceptions.ConnectionError: HTTPSConnec ...

  9. IntelliJ IDEA 与 SVN配置

    问题背景 如果开发工具使用的是IntelliJ IDEA,版本管理工具使用的是SVN. 就涉及到SVN集成的问题,但是可能会遇到选择在IDEA中配置SVN的时候,在SVN的安装bin目录找不到文件 s ...

  10. 使用EF+ASP.NET MVC+Bootstrap开发一个功能强大的问卷调查系统

    功能简介 支持七大题型 下拉选择题.单选题.多选题.填空题.数字题.问答题.组合/矩阵题(单选组合.多选组合.填空组合.数字组合) 题库支持 每个问卷都要设置姓名.年龄.性别.学历,怎么办?题库帮您轻 ...