Jquery小实例

1正反选

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

  <table>

      <th><tr>

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

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

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

      </tr></th>

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

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

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

  </table>

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

 <script>

     function All() {

         $('table :checkbox').prop('checked',true)

     }

     function UnAll() {

         $('table :checkbox').prop('checked',false)

     }

     function rever() {

         $('table :checkbox').each(

                 function () {

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

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

                     }else{

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

                     }

                 }

         )

     }

 </script>

 </body>

 </html>

2、返回顶部

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .aa{

             height: 2000px;

         }

         .top{

             height: 50px;

             width: 50px;

             background-color: yellow;

             position: fixed;

             right:20px;

             bottom:20px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body >

     <div class="aa"><h1>TopTopTop</h1></div>

     <div class="hide top" ><a href>返回顶部</a></div>

     <div></div>

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

 <script>

     $(window).scroll(function () {

 //        console.log($(window).scrollTop);

         if ($(window).scrollTop()>50){

 //            大于50显示返回顶部按钮

             $('.top').removeClass('hide')

         }else{$('.top').addClass('hide')}

 //        小于50则隐藏

     });

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

 //        设置滚动条滚动高度为0

         $(window).scrollTop(0)

     })

 </script>

 </body>

 </html>

3隐藏content

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         ul{

             list-style: none;

             padding: 0;

             margin: 0;

         }

         ul li{

             float: left;

             background-color: #2459a2;

             color: white;

             padding: 8px 10px;

             cursor: pointer;

         }

         .clearfix:after{

             display: block;

             content: '.';

             height: 0;

             visibility: hidden;

             clear: both;

         }

         .hide{

             display: none;

         }

         .tab-menu .title{

             background-color: #dddddd;

         }

         .tab-menu .title .active{

             background-color: red;

             color: white;

         }

         .tab-menu .content{

             border: 1px solid #dddddd;

             min-height: 150px;

         }

     </style>

 </head>

 <body>

 <div class="tab-menu">

     <div class="title clearfix">

         <ul>

             <li target="1" class="active" >价格趋势</li>

             <li target="2" >市场分布</li>

             <li target="3" >其他</li>

         </ul>

     </div>

     <div id="content" class="content">

         <div con="1">content1</div>

         <div con="2" class="hide">content2</div>

         <div con="3"  class="hide">content3</div>

     </div>

     </div>

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

 <script>

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

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

 //        自己加上active 其他的兄弟去除active

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

 //        获取点击的target值，用来匹配对应的content内容

         $("[con='"+index+"']").removeClass('hide').siblings().addClass('hide');

 //     自己去掉hide 其他的兄弟加上hide

     })

 </script>

 </body>

 </html>

4、菜单自动固定变化

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             margin: 0;

             background-color: #dddddd;

         }

         .w{

             margin: 0 auto;

             width: 980px;

         }

         .pg-header{

             background-color: black;

             color: white;

             height: 48px;

         }

         .pg-body .menu{

             position: absolute;

             left: 200px;

             width: 180px;

             background-color: white;

             float: left;

         }

         .pg-body .menu .active{

             background-color: #425a66;

             color: white;

         }

         .pg-body .fixed{

             position: fixed;

             top: 0px;

         }

         .pg-body .content{

             position: absolute;

             left: 385px;

             right: 200px;

             background-color: white;

             float: left;

         }

         .pg-body .content .item{

             height: 900px;

         }

     </style>

 </head>

 <body>

     <div class="pg-header">

         <div class="w">

         </div>

     </div>

     <div class="pg-body">

         <div id="menu" class="menu">

             <ul>

                 <li menu="1">第一章</li>

                 <li menu="2">第二章</li>

                 <li menu="3">第三章</li>

             </ul>

         </div>

         <div id="content" class="content">

             <div class="item"  con="1">床前明月管</div>

             <div class="item" con="2">疑是地上霜</div>

             <div class="item"  con="3" style="height: 100px">我是郭德纲</div>

         </div>

     </div>

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

 <script>

 $(window).scroll(function () {

     var top=$(window).scrollTop();

     if(top>48){$('#menu').addClass('fixed')}else{$('#menu').removeClass('fixed')}

     if(top+$(window).height()==$(document).height()){

         $('ul').children().last().addClass('active').siblings().removeClass('active');

         return

     }

     var contents=$('.item');

     $.each(contents,function () {

         var bodytop=$('.content').offset().top;

         var itemtop=$(this).offset().top;

         var itemheight=$(this).height();

         var itemabtop=bodytop+itemtop;

         var itembottom=itemabtop+itemheight;

 //        console.log(itemabtop+itemheight,top,itemabtop);

         if(itembottom>top &&top>itemabtop){

             var index=$(this).attr('con');

             console.log(111);

             $("[menu='"+index+"']").addClass('active').siblings().removeClass('active');

             return

         }

     })

 })

 </script>

 </body>

 </html>

5、模态对话框编辑单个条目

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

   <div class="outer">

            <div class="section">

                <div class="icons" style="display: inline-block">

                    <a onclick="add(this)"><button>+</button></a>

                </div>

                <div class="inputs" style="display: inline-block">

                    <input type="checkbox">

                    <input type="text" value="IP">

                </div>

            </div>

        </div>

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

 <script>

     function add(self) {

         var item=$(self).parent().parent().clone();

         item.find('a').children().text('-').parent().attr('onclick','remove8(this);');

         $('.outer').append(item)

     }

     function remove8(self) {

         $(self).parent().parent().remove()

     }

 </script>

 </body>

 </html>

6、添加删除标签

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

   <div class="outer">

            <div class="section">

                <div class="icons" style="display: inline-block">

                    <a onclick="add(this)"><button>+</button></a>

                </div>

                <div class="inputs" style="display: inline-block">

                    <input type="checkbox">

                    <input type="text" value="IP">

                </div>

            </div>

        </div>

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

 <script>

     function add(self) {

         var item=$(self).parent().parent().clone();

         item.find('a').children().text('-').parent().attr('onclick','remove8(this);');

         $('.outer').append(item)

     }

     function remove8(self) {

         $(self).parent().parent().remove()

     }

 </script>

 </body>

 </html>

7、同时编辑多个条目

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>编辑框</title>

     <style>

         .edit-mode{

             background-color: #b3b3b3;

             padding: 8px;

             text-decoration: none;

             color: white;

         }

         .editing{

             background-color: #f0ad4e;

         }

         .text{

             width: 100%;

             border: 0;

         }

     </style>

 </head>

 <body>

     <div style="padding: 20px">

         <input type="button" value="全选" />

         <input type="button" value="反选" />

         <input type="button" value="取消" />

         <a id="into_edit" class="edit-mode">进入编辑</a>

     </div>

     <table border="1">

         <thead>

         <tr>

             <th>选择</th>

             <th>主机名</th>

             <th>端口</th>

             <th>状态</th>

         </tr>

         </thead>

         <tbody id="tb1">

             <tr>

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

                 <td name="host">v1</td>

                 <td name="port">v11</td>

                 <td name="status">在线</td>

             </tr>

             <tr>

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

                 <td name="host">v1</td>

                 <td name="port">v11</td>

                 <td name="status">离线</td>

             </tr>

             <tr>

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

                 <td name="host">v1</td>

                 <td name="port">v11</td>

                 <td name="status">在线</td>

             </tr>

         </tbody>

     </table>

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

     <script type="text/javascript" src="bianji.js"></script>

     <script>

         /*

          监听是否已经按下control键

          */

         $(document).ready(function () {

             ctrl = false;

             window.onkeydown = function (event) {

                 if (event && event.keyCode == 17) {

                     ctrl = true;

                 }

             };

 //            按键起来时改成false

             window.onkeyup = function (event) {

                 if (event && event.keyCode == 17) {

                     ctrl = false;

                 }

             };

         })

     </script>

 </body>

 </html>

HTML

 //Created by shenwenlong on 2016/7/17.

 $(':button[value="全选"]').click(    function () {

     $('table :checkbox').prop('checked',true);

     if(into%2==1){into_edit();}//如果是编辑模式

 });

 $(':button[value="反选"]').click(    function () {

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

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

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

             if(into%2==1){exit(this);}//已选中的退出编辑

         }else{

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

             if(into%2==1){edit(this);}//未选中的进入编辑

         }});

     });

 $(':button[value="取消"]').click(function () {

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

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

         if(into%2==1){exit(this);}//循环全部退出编辑

     });

     });

 //into用来判断是否进入编辑模式，如果为奇数，则进入编辑模式，为偶数则未进入

 into=0;

 $('#into_edit').click(function () {

     into++;

     if(into%2==0){$('#into_edit').removeClass('editing');}//如果是偶数，代表不是编辑模式，去除editing样式

     else{$('#into_edit').addClass('editing');}//如果是偶奇数，代表是编辑模式，添加editing样式

     into_edit();//无论进入或退出，都执行函数，函数里边会进行判断

 });

 $(':checkbox').click(function () {

         if(into%2==1){ //如果是编辑模式 则验证如果是选中的，就执行进入编辑函数edit 反之执行突出编辑函数exit

             if($(this).prop('checked')){edit(this);}else{exit(this);}

         }

 });

 function bind_select() {//绑定select的函数，由于进入编辑时需要生成select标签，生成完毕会调用此函数用来绑定时间

     $('select').delegate(this,"change",function() {

     if(ctrl){//如果ctrl键被按下，所有select就一起跟着变

        var option=$(this).children().filter(':selected').attr('value');

         console.log(option,222);

         $('option').filter('[value="'+option+'"]').prop('selected',true)

     }

 });

 }

 function into_edit() {

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

     if(into%2==1){ //如果是编辑模式 就检测是否为选中的，如果选中就进入编辑模式

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

             edit(this);

         }

     }

     else{//如果不是编辑模式，就退出编辑模式

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

             exit(this);

         }}

     })

 }

 function edit(self) {//进入编辑模式的函数

     if($(self).attr('class')!='active'){//如果该条目不是编辑状态 再进入编辑状态

         $(self).parent().siblings().each(function () {//循环该条目除复选框外的所以项

             $(self).addClass('active'); //添加样式，用来标记为正在修改状态

             var val=$(this).text(); //获取里边的值

             if($(this).attr('name')=='status'){//如果是最后一个选择的框，就清空该标签.添加进去一个选择框

                 $(this).empty().html('<select><option value="在线">在线</option><option value="离线">离线</option></select>');

                 $(this).children().children().filter('[value="'+val+'"]').prop('selected',true);//设置原来的值为选中值

                 bind_select();//为新生成select绑定的事件

                 return false ;//停止循环and停止函数继续向下执行

         }

         $(this).html('<input class="text" type="text" value="'+val+'">');//如果不是最后一个，就修改为input标签，value等于原来的值

         });

         }

 }

 function exit(self) {//退出编辑模式的函数

     if($(self).attr('class')=='active'){//如果该条目是编辑状态 再进行退出编辑

         $(self).parent().siblings().each(function () {//循环该条目除复选框外的所以项

         $(self).removeClass('active');//去除正在编辑的标记

         if($(this).attr('name')=='status'){//如果是最后一个选择的框，就清空该标签.添加进去刚选中的值

             var val=$(this).children().children().filter(':selected').val();

             $(this).empty().text(val);

             return false;//停止循环and停止函数继续向下执行

         }

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

         $(this).empty().text(val);//如果不是最后一个，就清空，把input的值填进去

         })

         }

 }

8、可移动的div

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">

         <div id="title" style="background-color: black;height: 40px;color: white;">

             标题

         </div>

         <div style="height: 300px;">

             内容

         </div>

     </div>

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

 <script>

     $(function(){

         // 页面加载完成之后自动执行

         $('#title').mouseover(function(){

             $(this).css('cursor','move');

         }).mousedown(function(e){

             //console.log($(this).offset());

             var _event = e || window.event;

             // 原始鼠标横纵坐标位置

             var ord_x = _event.clientX;

             var ord_y = _event.clientY;

             var parent_left = $(this).parent().offset().left;

             var parent_top = $(this).parent().offset().top;

             $(this).bind('mousemove', function(e){

                 var _new_event = e || window.event;

                 var new_x = _new_event.clientX;

                 var new_y = _new_event.clientY;

                 var x = parent_left + (new_x - ord_x);

                 var y = parent_top + (new_y - ord_y);

                 $(this).parent().css('left',x+'px');

                 $(this).parent().css('top',y+'px');

             })

         }).mouseup(function(){

             $(this).unbind('mousemove');

         });

     })

 </script>

 </body>

 </html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>编辑框</title>
    <style>
        .edit-mode{
            background-color: #b3b3b3;
            padding: px;
            text-decoration: none;
            color: white;
        }
        .editing{
            background-color: #f0ad4e;
        }
        .text{
            width: %;
            border: ;
        }
    </style>
</head>
<body>

    <div style="padding: px">
        <input type="button" value="全选" />
        <input type="button" value="反选" />
        <input type="button" value="取消" />

        <a id="into_edit" class="edit-mode">进入编辑</a>

    </div>
    <table border="1">
        <thead>
        <tr>
            <th>选择</th>
            <th>主机名</th>
            <th>端口</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox" /></td>
                <td name="host">v1</td>
                <td name="port">v11</td>
                <td name="status">在线</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td name="host">v1</td>
                <td name="port">v11</td>
                <td name="status">离线</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td name="host">v1</td>
                <td name="port">v11</td>
                <td name="status">在线</td>
            </tr>

        </tbody>
    </table>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script type="text/javascript" src="bianji.js"></script>

    <script>
        /*
         监听是否已经按下control键
         */
$(document).ready(function () {
            ctrl = false;
            window.onkeydown = function (event) {
                if (event && event.keyCode == ) {
                    ctrl = true;
                }
            };
//            按键起来时改成false
window.onkeyup = function (event) {
                if (event && event.keyCode == ) {
                    ctrl = false;
                }
            };
        })
    </script>

</body>
</html>

Jquery小实例的更多相关文章

【jQuery小实例】---2自定义动画
---本系列文章所用使用js均可在本博客文件中找到本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...
jQuery 小实例关于按字母排序
jQuery的强大再次不再赘述一般情况下操作表格式数据的一种最常见的任务就是排序,在一个大型的表格中,能够对要寻找的信息进行重新排列是非常重要的,一般情况用来完成排序的方式有两种 :一种是服务器端排 ...
【jQuery小实例】---3 凤凰网首页图片动态效果
---本系列文章所用使用js均可在本博客文件中找到本页面实现类似于凤凰网首页,鼠标点击新闻,可以在div中显示新闻图片,点击军事显示军事图片的效果.采用的思路是:鼠标悬浮,显示当前div中的内容(图 ...
【jQuery小实例】js 插件查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
jquery-1 jquery几个小实例
jquery-1 jquery几个小实例一.总结一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...
一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...
winform 异步读取数据小实例
这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后再把数据导入 ...

随机推荐

【暑假】[基本数据结构]根据BFS与DFS确定树
UVa10410 Tree Reconstruction 算法:根据BFS构造pos数组以区分关系,在此基础上对DFS序列操作.注:栈中存父结点,栈顶是最优先的父结点. 代码如下: #include& ...
git 记录
在官网有详细的教程http://git-scm.com/book/zh/%E8%B5%B7%E6%AD%A5 查看分支和日志的两个工具:gitk 和 tig ,两个都有 --all 参数,可以查看所有 ...
Windows10输入法的切换
Alt+Shift 中⇒あ,あ⇒中 Shift 中⇒英,英⇒中 Alt+Caps Lock あ⇒カ,A⇒あ⇒カ Ctrl+Caps Loc ...
Downloading the Google Cloud Storage Client Library
Google Cloud Storage client是一个客户端库,与任何一个生产环境使用的App Engine版本都相互独立.如果你想使用App Engine Development server ...
uva202：循环小数（循环节+抽屉原理）
题意: 给出两个数n,m,0<=n,m<=3000,输出n/m的循环小数表示以及循环节长度. 思路: 设立一个r[]数组记录循环小数,u[]记录每次的count,用于标记,小数计算可用 r ...
Codevs No.1052 地鼠游戏
2016-05-31 18:22:32 题目链接: 地鼠游戏 Codevs No.1245 题目大意: 打地鼠,一开始所有地鼠都出现,但是维持的时间(s)和击中所得的积分各不同,求出采用最优策略(1s ...
homework07
我阅读的: http://www.cnblogs.com/zhuyp1015/category/370450.html http://blog.csdn.net/hzyong_c/article/de ...
struts2+Hibernate4+spring3+EasyUI环境搭建之五:引入jquery easyui
1.下载jquery easyui组件 http://www.jeasyui.com/download/index.php 2.解压放到工程中如图 3.jsp引入组件:必须按照如下顺序 ...
DB2日期和时间函数汇总
上一篇提到过在DB2中,可以通过SYSIBM.SYSDUMMY1.SYSIBM.DUAL获取寄存器中的值,也可以通过VALUES关键字获取寄存器中的值.则在这篇中,我们直接用VALUES关键字来看看这 ...
HDU 5726 GCD (RMQ + 二分)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5726 给你n个数,q个询问,每个询问问你有多少对l r的gcd(a[l] , ... , a[r]) ...

Jquery小实例

Jquery小实例的更多相关文章

随机推荐

热门专题