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

<!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. 课程五(Sequence Models)，第二 周（Natural Language Processing & Word Embeddings） —— 1.Programming assignments：Operations on word vectors - Debiasing

    Operations on word vectors Welcome to your first assignment of this week! Because word embeddings ar ...

  2. 学习Raft算法的笔记

    Raft是一种为了管理日志复制的一致性算法.它提供了和Paxos算法相同的功能和性能,但是它的算法结构和Paxos不同,使得Raft算法更加容易理解并且更容易构建实际的系统.为了提升可理解性,Raft ...

  3. cp2102 驱动 win7x64 -2018

    试了好多种网上的驱动,都不行,要么是报错要么是安装没反应 之后意外遇见驱动官网?里面真全 url:https://www.silabs.com/products/development-tools/s ...

  4. RocketMQ事务消息实现分析

    这周RocketMQ发布了4.3.0版本,New Feature中最受关注的一点就是支持了事务消息: 今天花了点时间看了下具体的实现内容,下面是简单的总结. RocketMQ事务消息概要 通过冯嘉发布 ...

  5. 聊聊JVM（二）说说GC的一些常见概念

    转自CSDN 上一篇总结GC的基础算法,各种GC收集器的基本原理,还是比较粗粒度的概念.这篇会整理一些GC的常见概念,理解了这些概念,相信对GC有更加深入的理解 1. 什么时候会触发Minor GC? ...

  6. Mybatis解析mapper

    众所周知,接口是不能被实例化的,但是日常开发中,我们经常能直接使用dao层对象的方法,这又是为什么呢. 带着这些问题,我们看下mybatis内部做了那些操作. Mapper解析 上文我们描述了myba ...

  7. Chapter 4 Invitations——2

    To my dismay, I found myself the center of attention for the rest of that week. 令我沮丧的是, 我发现我自己剩余注意力的 ...

  8. lucene实战--打分算法没有那么难！

    作为一个开放源代码项目,Lucene从问世之后,引发了开放源代码社群的巨大反响,程序员们不仅使用它构建具体的全文检索应用,而且将之集成到各种系统软件中去,以及构建Web应用,甚至某些商业软件也采用了L ...

  9. python 要掌握面向对象，你得会做这些题

    1,面向对象三大特性,各有什么用处,说说你的理解. 继承:解决代码重用问题 多态:多态性,可以在不考虑对象类型的情况下而直接使用对象 封装:明确的区分内外,控制外部对隐藏属性的操作行为,隔离复杂度 2 ...

  10. ZooKeeper 初体验

    安装Zookeeper Mac OS Mac 用户可以使用 Homebrew 安装和管理 Zookeeper 服务: brew install zookeeper 配置文件地址在: /usr/loca ...