一、查找元素

1、选择器

　　基本选择器

$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

　　层级选择器

$(".outer div") 后代
$(".outer>div") 子代
$(".outer+div") .outer后面的兄弟div（后面一个）
$(".outer~div") .outer后面的所有的兄弟div

　　基本筛选器

$("li:first")
$("li:eq(2)")
$("li:even")
$("li:gt(1)")

　　属性选择器

$("[id='div1']")
$("[alex='sb'][id]")

　　表单选择器

$("[type='text']") 简写成$("：text")--只适用于input标签

2、筛选器

　　过滤筛选器

$("li").eq(2)
$("li").first()
$("ul li").hasclass("test") 检测li中是否含有某个特定类，有的话返回true

　　查找筛选器

$("div").children(".test") 找儿子
$("div").find(".test") 子子孙孙
$(".test").next() $(".test").nextAll() $(".test").nextUntil() (开区间)
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() 找祖先元素集合 $(".test").parentUntil()
$("div").siblings（）同辈（不包括自己）

二、操作元素

1、属性操作

$("p").text() $("p").html() $(":checkbox").val() 修改--在括号里添值$("#qq2").text("hello")
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked","true")
$(".test").addClass("hide")

2、css操作

（样式） css（“{color:"red",background:"blue"}”）
(位置） offset（） position（） scrollTop（） scrollLeft（）
（尺寸） innerHeight（）不包含边框 outerHeight（）包含边框，两个都包含padding

3、文档处理

　　内部插入

$("#id").append("<b>hello</b>") 在id标签内添加hello内容
$("p").appendto("div") 把p标签添加到div标签内
prepend（） prependto（）

　　外部插入

before() insertBefore()
after() insertAfter()
replaceWith()
remove() 移除标签
empty() 清空内容，标签保留
clone 克隆（用于批量处理）

4、事件

$(document).ready(function(){})======$(function(){}) 最好加上这句，所有文档执行完，但是图片没加载
$("p").click(function(){}) 内部是调用了jQuery的bind方法--事先绑定
$("p").bind("click",function(){}) 事先绑定
$("ul").delegate("li","click",function(){}) 事件委托（事中绑定）

<body>

    <ul>

        <li>11</li>

        <li>33</li>

        <li>66</li>

        <li>46</li>

    </ul>

    <input type="text"/>

    <input id="li" type="button" value="添加"/>

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

    <script type="text/javascript">

        $("ul").delegate("li","click",function(){

            console.log(this);

        })

        $("#li").click(function(){

            var txt = $(this).prev().val();

            $("ul").append("<li>"+txt+"</li>");

        })

    </script>

</body>

三、jQuery常见实例

拖动面板

<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 src="jquery-1.8.2.js"></script>

    <script type="text/javascript">

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

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

        }).mousedown(function(e){

            var _event = e||window.event;

            var old_x = _event.clientX;

            var old_y = _event.clientY;

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

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

            $(this).mousemove(function(e){

                var _new_event = e||window.event;

                var new_x = _new_event.clientX;

                var new_y = _new_event.clientY;

                var x = new_x - old_x + parent_left;

                var y = new_y - old_y + parent_top;

                $(this).parent().css({"left":x+"px","top":y+"px"});

            }).mouseup(function(){

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

            })

        })

    </script>

</body>

clone内容添加与删除

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

         .inline {

             display: inline-block;

         }

     </style>

 </head>

 <body>

 <div class="container">

     <div class="section">

         <div class="button inline">

             <a id="origin">

                 <button>+</button>

             </a>

             <div class="input inline">

                 <input type="checkbox">

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

             </div>

         </div>

    </div>

 </div>

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

    <script type="text/javascript">

        $(function(){

            $("#origin").click(function(){

                var origin = $(this).parent().parent().clone();

                origin.find("a").removeAttr("id").attr("onclick","myremove(this);").children().text("-");

                $(".container").append(origin);

            })

        })

        function myremove(self){

            console.log("123");

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

        }

    </script>

</body>

滑动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #flipshow,#content,#fliphide,#toggle{

            padding: 5px;

            text-align: center;

            background-color: blueviolet;

            border:solid 1px red;

        }

        #content{

            padding: 50px;

            display: none;

        }

    </style>

</head>

<body>

    <div id="flipshow">出现</div>

    <div id="fliphide">隐藏</div>

    <div id="toggle">toggle</div>

    <div id="content">helloworld</div>

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

    <script>

        $(document).ready(function(){

              $("#flipshow").click(function(){

                 $("#content").slideDown(1000);

              });

              $("#fliphide").click(function(){

                 $("#content").slideUp(1000);

              });

              $("#toggle").click(function(){

                 $("#content").slideToggle(1000);

              })

          });

    </script>

</body>

</html>

返回顶部

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .divH {

            height: 1800px;

        }

        .divT {

            width: 50px;

            height: 50px;

            font-size: 23px;

            background-color: #2F4F4F;

            color: white;

            position: fixed;

            right: 18px;

            bottom: 18px;

        }

        .divT:hover{

            cursor: pointer;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

    <div class="divH"></div>

    <div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div>

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

    <script>

        window.onscroll = function(){

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

            if(current>180){

                $(".divT").removeClass("hide");

            }else{

                $(".divT").addClass("hide");

            }

        }

        function ReturnTop(){

            $(window).scrollTop(0);

        }

    </script>

</body>

淡入淡出

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

      <button id="in">fadein</button>

      <button id="out">fadeout</button>

      <button id="toggle">fadetoggle</button>

      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

      <div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div>

      <div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div>

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

    <script>

        $(document).ready(function(){

            $("#in").click(function(){

               $("#id1").fadeIn(1000);

               $("#id2").fadeIn(1000);

               $("#id3").fadeIn(1000);

            });

            $("#out").click(function(){

               $("#id1").fadeOut(1000);

               $("#id2").fadeOut(1000);

               $("#id3").fadeOut(1000);

            });

            $("#toggle").click(function(){

               $("#id1").fadeToggle(1000);

               $("#id2").fadeToggle(1000);

               $("#id3").fadeToggle(1000);

            });

            $("#fadeto").click(function(){

               $("#id1").fadeTo(1000,0.4);

               $("#id2").fadeTo(1000,0.5);

               $("#id3").fadeTo(1000,0);

            });

        });

    </script>

</body>

</html>

显示与隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--1 隐藏与显示-->

    <!--2 淡入淡出-->

    <!--3 滑动-->

    <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->

    <p>hello</p>

    <button id="hide">隐藏</button>

    <button id="show">显示</button>

    <button id="toggle">隐藏/显示</button>

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

    <script>

        $(document).ready(function(){

            $("#hide").click(function(){

                $("p").hide(1000);

            });

            $("#show").click(function(){

                $("p").show(1000);

            });

        //用于切换被选元素的 hide() 与 show() 方法。

            $("#toggle").click(function(){

                $("p").toggle(2000);

            });

        });

    </script>

</body>

</html>

左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

          .menu{

              height: 600px;

              width: 30%;

              background-color: #2F4F4F;

              float: left;

          }

         .title{

             line-height: 50px;

             color: #ddd;

         }

         .title:hover{

             cursor: pointer;

             color: lightcyan;

             font-size: 18px;

         }

         .hide{

             display: none;

         }

    </style>

</head>

<body>

    <div class="outer">

        <div class="menu">

            <div class="item">

                <div class="title" onclick="Show(this);">菜单一</div>

                <div class="con">

                    <div>111</div>

                    <div>111</div>

                    <div>111</div>

                </div>

            </div>

            <div class="item">

                <div class="title" onclick="Show(this);">菜单二</div>

                <div class="con hide">

                    <div>222</div>

                    <div>222</div>

                    <div>222</div>

                </div>

            </div>

            <div class="item">

                <div class="title" onclick="Show(this);">菜单三</div>

                <div class="con hide">

                    <div>333</div>

                    <div>333</div>

                    <div>333</div>

                </div>

            </div>

        </div>

    </div>

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

    <script>

        function Show(self){

         $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

        }

    </script>

</body>

</html>

Tab菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .tab_outer{

            margin: 0px auto;

            width: 60%;

        }

        .menu{

            background-color: #cccccc;

            border: 1px solid #ccc;

            line-height: 40px;

        }

        .menu li{

            display: inline-block;

            color: white;

        }

        .menu li:hover {

            cursor: pointer;

        }

        .menu a{

            padding: 11px;

        }

        .content{

            border: 1px solid #ccc;

            height: 300px;

            font-size: 30px;

        }

        .hide{

            display: none;

        }

        .current{

            background-color: #0099dd;

            color: black;

        }

    </style>

</head>

<body>

    <div class="tab_outer">

          <ul class="menu">

              <li xxx="c1" class="current" onclick="Tab(this);">菜单一</li>

              <li xxx="c2" onclick="Tab(this);">菜单二</li>

              <li xxx="c3" onclick="Tab(this);">菜单三</li>

          </ul>

          <div class="content">

              <div id="c1">内容一</div>

              <div id="c2" class="hide">内容二</div>

              <div id="c3" class="hide">内容三</div>

          </div>

    </div>

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

    <script>

        function Tab(self) {

            $(self).addClass("current").siblings().removeClass("current");

            var x = "#" + $(self).attr("xxx");

            $(x).removeClass("hide").siblings().addClass("hide");

        }

    </script>

</body>

</html>

滚动菜单

<!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;

        }

        li {

            list-style-type: none;

        }

        .pg-body .menu .active{

            background-color: #425a66;

            color: white;

        }

        .pg-body .fixed{

            position: fixed;

            top: 10px;

        }

        .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="funcOne">第一章</li>

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

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

            </ul>

        </div>

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

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

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

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

        </div>

    </div>

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

    <script>

        window.onscroll = function () {

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

            if (onTop >= 48){

                $("#menu").addClass("fixed");

            }else {

                $("#menu").removeClass("fixed");

            }

            var flag = false;

            $(".item").each(function () {

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

                var HH = $(this).height() + topH;

                var wH = $(window).height();

                if ((wH + onTop) == HH){

                    $("ul .active").removeClass("active");

                    $("li:last").addClass("active");

                    flag = true;

                    return

                }

                if (flag){

                    return

                }

                var menuCon = $(this).attr("con");

                if ((topH < onTop) && (onTop < HH)){

                    $("ul [menu='" + menuCon +"']").addClass("active");

                }else {

                    $("ul [menu='" + menuCon +"']").removeClass("active");

                }

            })

        }

    </script>

</body>

</html>

放大镜

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width">

    <meta http-equiv="X-UA-Compatible" content="IE=8">

    <title>购物商城</title>

    <style>

            *{

                margin: ;

                padding: ;

            }

            .outer{

                position:relative;

                width:350px;

                height:350px;

                border:1px solid black;

            }

            .outer .small-box{

                position: relative;

                z-index: ;

            }

            .outer .small-box .mark{

                position: absolute;

                display: block;

                width: 350px;

                height: 350px;

                background-color: #fff;

                filter: alpha(opacity=);

                opacity: ;

                z-index: ;

            }

            .outer .small-box .float-box{

                display: none;

                width: 175px;

                height: 175px;

                position: absolute;

                background: #DAEEFC;

                filter: alpha(opacity=);

                opacity: 0.4;

            }

            .outer .big-box{

                position: absolute;

                top: ;

                left: 351px;

                width: 350px;

                height: 350px;

                overflow: hidden;

                border: 1px solid transparent;

                z-index: ;

            }

            .outer .big-box img{

                position: absolute;

                z-index:

            }

    </style>

</head>

<body>

    <div  class="outer">

        <div  class="small-box">

            <div  class="mark"></div>

            <div  class="float-box" ></div>

            <img width="" height="" src="../../css/1.jpg">

        </div>

        <div class="big-box">

            <img width="900px" height="900px" src="../../css/1.jpg" >

        </div>

    </div>

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

<script>

   $(function(){

        $(".mark").mouseover(function () {

            $(".float-box").css("display","block");

            $(".big-box").css("display","block");

        });

        $(".mark").mouseout(function () {

            $(".float-box").css("display","none");

            $(".big-box").css("display","none");

        });

        $(".mark").mousemove(function (e) {

            var _event = e || window.event;  //兼容多个浏览器的event参数模式

            var float_box_width  = $(".float-box")[].offsetWidth;

            var float_box_height = $(".float-box")[].offsetHeight;//175,175

            var float_box_width_half  =  float_box_width / ;

            var float_box_height_half =  float_box_height/ ;//87.5,87.5

            var small_box_width  =  $(".outer")[].offsetWidth;

            var small_box_height =  $(".outer")[].offsetHeight;//360,360

            var mouse_left = _event.clientX   - float_box_width_half;

            var mouse_top = _event.clientY  - float_box_height_half;

            if (mouse_left < ) {

                mouse_left = ;

            } else if (mouse_left > small_box_width - float_box_width) {

                mouse_left = small_box_width - float_box_width;

            }

            if (mouse_top < ) {

                mouse_top = ;

            } else if (mouse_top > small_box_height - float_box_height) {

                mouse_top = small_box_height - float_box_height;

            }

            $(".float-box").css("left",mouse_left + "px");

            $(".float-box").css("top",mouse_top + "px");

            var percentX = ($(".big-box img")[].offsetWidth - $(".big-box")[].offsetWidth) / (small_box_width - float_box_width);

            var percentY = ($(".big-box img")[].offsetHeight - $(".big-box")[].offsetHeight) / (small_box_height - float_box_height);

            console.log($(".big-box img")[].offsetWidth,$(".big-box")[].offsetWidth,small_box_width,float_box_width)

            console.log(percentX,percentY)

            $(".big-box img").css("left",-percentX * mouse_left + "px");

            $(".big-box img").css("top",-percentY * mouse_top + "px")

        })

   })

</script>

</body>

</html>

商城商品放大镜

商城菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: ;

            padding: ;

        }

        .hide{

            display:none;

        }

        .header-nav {

            height: 39px;

            background: #c9033b;

        }

        .header-nav .bg{

            background: #c9033b;

        }

        .header-nav .nav-allgoods .menuEvent {

            display: block;

            height: 39px;

            line-height: 39px;

            text-decoration: none;

            color: #fff;

            text-align: center;

            font-weight: bold;

            font-family: 微软雅黑;

            color: #fff;

            width: 100px;

        }

        .header-nav .nav-allgoods .menuEvent .catName {

            height: 39px;

            line-height: 39px;

            font-size: 15px;

        }

        .header-nav .nav-allmenu a {

            display: inline-block;

            height: 39px;

            vertical-align: top;

            padding:  15px;

            text-decoration: none;

            color: #fff;

            float: left;

        }

        .header-menu a{

            color:#;

        }

        .header-menu .menu-catagory{

            position: absolute;

            background-color: #fff;

            border-left:1px solid #fff;

            height: 316px;

            width: 230px;

             z-index: ;

             float: left;

        }

        .header-menu .menu-catagory .catagory {

            border-left:4px solid #fff;

            height: 104px;

            border-bottom: solid 1px #eaeaea;

        }

        .header-menu .menu-catagory .catagory:hover {

            height: 102px;

            border-left:4px solid #c9033b;

            border-bottom: solid 1px #bcbcbc;

            border-top: solid 1px #bcbcbc;

        }

        .header-menu .menu-content .item{

            margin-left:230px;

            position:absolute;

            background-color:white;

            height:314px;

            width:500px;

            z-index:;

            float:left;

            border: solid 1px #bcbcbc;

            border-left:;

            box-shadow: 1px 1px 5px #;

        }

    </style>

</head>

<body>

    <div class="pg-header">

    <div class="header-nav">

        <div class="container narrow bg">

            <div class="nav-allgoods left">

                <a id="all_menu_catagory" href="#" class="menuEvent">

                    <b class="catName">全部商品分类</b>>

                    <span class="arrow" style="display: inline-block;vertical-align: top;"></span>

                </a>

            </div>

        </div>

    </div>

    <div class="header-menu">

        <div class="container narrow hide">

            <div id="nav_all_menu" class="menu-catagory">

                <div class="catagory" float-content="one">

                    <div class="title">家电</div>

                    <div class="body">

                        <a href="#">空调</a>

                    </div>

                </div>

                <div class="catagory" float-content="two">

                    <div class="title">床上用品</div>

                    <div class="body">

                        <a href="http://www.baidu.com">床单</a>

                    </div>

                </div>

                <div class="catagory" float-content="three">

                    <div class="title">水果</div>

                    <div class="body">

                        <a href="#">橘子</a>

                    </div>

                </div>

            </div>

            <div id="nav_all_content" class="menu-content">

                <div class="item hide" float-id="one">

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#">菜板</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="碗">碗</a> </span>

                        </dd>

                    </dl>

                </div>

                <div class="item hide" float-id="two">

                    <dl>

                        <dt><a href="#" class="red">床上用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="">枕头</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">床上用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="角阀">夏凉被</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">床上用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="角阀">嘿嘿嘿</a> </span>

                        </dd>

                    </dl>

                </div>

                <div class="item hide" float-id="three">

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="角阀">微波炉</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="http://www.meilele.com/category-jiaofa" target="_blank" title="角阀">金菜刀</a> </span>

                        </dd>

                    </dl>

                </div>

            </div>

        </div>

    </div>

</div>

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

<script>

    $(function () {

        Change("#all_menu_catagory","#nav_all_menu","#nav_all_content")

    });

    function Change(menuF,menuS,menuT) {

        $(menuF).bind({

            "mouseover":function () {

            $(menuS).parent().removeClass("hide");

        },"mouseout":function () {

            $(menuS).parent().addClass("hide");

        }

        });

        $(menuS).children().bind({

            "mouseover":function () {

                $(menuS).parent().removeClass("hide");

                var $item = $(menuT).find('[float-id="' +　$(this).attr("float-content") + '"]');

                $item.removeClass("hide").siblings().addClass("hide");

            },

            "mouseout":function () {

                $(menuS).parent().addClass("hide");

                $(menuT).parent().addClass("hide");

            }

        });

        $(menuT).children().bind({

            "mouseover":function () {

                $(menuS).parent().removeClass("hide");

                $(this).removeClass("hide");

            },

            "mouseout":function () {

                $(menuS).parent().addClass("hide");

                $(this).addClass("hide");

            }

        })

    }

</script>

</body>

</html>

商城菜单

模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .shade{

            position: fixed;

            left: ;

            top: ;

            right: ;

            bottom: ;

            background: rgba(,,,.) ;

            z-index: ;

        }

        .modal{

            position: fixed;

            left: %;

            top: %;

            height: 300px;

            width: 400px;

            margin-top: -150px;

            margin-left: -200px;

            z-index: ;

            border: 1px solid #ddd;

            background-color: white;

        }

        .hide{

            display: none;

        }

        .modal form {

            position: fixed;

            left: %;

            top: %;

            height: 200px;

            width: 229px;

            border: 1px;

            margin-left: -115px;

            margin-top: -100px;

        }

        .modal form p {

            float: right;

            margin-top: 12px;

        }

        .modal form span {

            float: right;

            display: inline-block;

            height: 18px;

            width: 170px;

            background-color: #FFEBEB;

            text-align: center;

            border: 1px solid #ffbdbe;

            color: #e4393c;

            font-size: 14px;

            visibility: hidden;

        }

        .modal form [type="button"] {

            position: absolute;

            bottom: -30px;

            left: 115px;

        }

        .modal form [value="提交"]{

            left: 50px;

        }

    </style>

</head>

<body>

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

        <input type="button" value="添加主机" onclick="return Add();" />

        <table style="border: 2px solid #F5F5F5; width: 300px;">

            <thead>

                <tr>

                    <th >主机名</th>

                    <th >IP</th>

                    <th >端口</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td target="host">c1.com</td>

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

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

                    <td onclick="Edit(this);">Edit</td>

                </tr>

               <tr>

                    <td target="host">c2.com</td>

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

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

                    <td onclick="Edit(this);">Edit</td>

                </tr>

                <tr>

                    <td target="host">c3.com</td>

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

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

                    <td onclick="Edit(this);">Edit</td>

                </tr>

                <tr>

                    <td target="host">.com</td>

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

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

                    <td onclick="Edit(this);">Edit</td>

                </tr>

            </tbody>

        </table>

    </div>

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

    <div  class="modal hide">

        <form action="" method="get">

            <p>主机名:<input type="text" id="host" name="host"><br><span></span></p>

            <p>IP地址:<input type="text" id='ip' name="ip"><br><span></span></p>

            <p>端口号:<input type="text" id='port' name="port"><br><span></span><br></p>

            <input type="button" value="提交" onclick="return SubmitForm();">

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

        </form>

    </div>

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

    <script>

        $(function () {

           $("tr:even").css("background-color","#f5f5f5");

        });

        function Edit(ths) {

            $(".shade,.modal").removeClass("hide");

            prevList = $(ths).prevAll();

            prevList.each(function () {

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

                var target = $(this).attr("target");

                $("#"+target).val(text);

            });

        }

        function HideModal() {

            $(".shade,.modal").addClass("hide");

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

            Addd = false;

        }

        function SubmitForm() {

            var flag = Detection();

            try {

                    if (Addd && flag){

                    $("tbody").append($("tr").last().clone());

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

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

                        var name = $(this).attr("name");

                        ($("tr").last().children()).each(function () {

                            if ($(this).attr("target") == name){

                                $(this).text(value);

                                return

                            }

                                }

                        )});

                    Addd = false;

                    HideModal();

                    return false;

                }

            }catch (e){}

            if (flag){

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

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

                    var name = $(this).attr("name");

                    $(prevList).each(function () {

                        if ($(this).attr("target") == name){

                            $(this).text(value);

                            return

                        }

                            }

                    )});

                    $(".modal,.shade").addClass("hide");

                    HideModal();

                }

            return flag;

            }

        function Detection() {

            var flag = true;

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

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

                if (value.length == ){

                    $(this).next().next().css("visibility","visible").text("亲，不能为空");

                    flag = false;

                    return false;

                }else {

                    $(this).next().next().css("visibility","hidden").text("");

                }

                if ($(this).attr('name') == "host"){

                    var r = /(\.com)$/;

                    if (r.test(value) == false){

                        $(this).next().next().css("visibility","visible").text("主机名必须以.com结尾");

                        flag = false;

                        return false;

                }

                }else if ($(this).attr('name') == "ip"){

                    var r2 = /^(([-]?[-][-]?)\.){}([-]?[-][-]?)$/;

                    if (r2.test(value) == false){

                        $(this).next().next().css("visibility","visible").text("ip 地址格式有误");

                        flag = false;

                        return false;

                    }

                }else if ($(this).attr('name') == "port"){

                    var r3 = /^([-]{,})$/;

                    if ((r3.test(value) == false) || (value > )){

                        $(this).next().next().css("visibility","visible").text("端口必须为0-65535");

                        flag = false;

                        return false;

                    }

                }else {

                    $(this).next().next().css("visibility","hidden").text("");

                }

        });

        return flag;

        }

        function Add() {

            Addd = true;

            $(".shade,.modal").removeClass("hide");

        }

    </script>

</body>

</html>

模态对话框

轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: ;

            padding: ;

        }

        ul{

            list-style: none;

        }

        .out{

            width: 730px;

            height: 454px;

            margin: 50px auto;

            position: relative;

        }

        .out .img li{

            position: absolute;

            left: ;

            top: ;

        }

        .out .num{

            position: absolute;

            left:;

            bottom: 20px;

            text-align: center;

            font-size: ;

            width: %;

        }

        .out .btn{

            position: absolute;

            top:%;

            margin-top: -30px;

            width: 30px;

            height: 60px;

            background-color: aliceblue;

            color: black;

            text-align: center;

            line-height: 60px;

            font-size: 40px;

            display: none;

        }

        .out .num li{

            width: 20px;

            height: 20px;

            background-color: black;

            color: #fff;

            text-align: center;

            line-height: 20px;

            border-radius: %;

            display: inline;

            font-size: 18px;

            margin:  10px;

            cursor: pointer;

        }

        .out .num li.active{

            background-color: red;

        }

        .out .left{

            left: ;

        }

        .out .right{

            right: ;

        }

        .out:hover .btn{

            display: block;

            color: white;

            font-weight: ;

            background-color: black;

            opacity: 0.8;

            cursor: pointer;

        }

        .out img {

            height: %;

            width: %;

        }

    </style>

</head>

<body>

     <div class="out">

         <ul class="img">

             <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>

             <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

             <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

             <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>

             <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>

         </ul>

         <ul class="num">

             <!--<li class="active"></li>-->

             <!--<li></li>-->

             <!--<li></li>-->

             <!--<li></li>-->

             <!--<li></li>-->

         </ul>

         <div class="left btn"><</div>

         <div class="right btn">></div>

     </div>

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

    <script>

        $(function(){

            var size=$(".img li").size();

            for (var i= ;i<=size;i++){

                var li="<li>"+i+"</li>";

                $(".num").append(li);

            }

            $(".num li").eq().addClass("active");

            $(".num li").mouseover(function(){

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

               var index=$(this).index();

               i=index;

               $(".img li").eq(index).fadeIn().siblings().fadeOut();

            });

        i=;

        var t=setInterval(move,);

        function move(){

            i++;

            if(i==size){

                i=;

            }

            $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut();

        }

        function moveL(){

            i--;

            if(i==-){

                i=size-;

            }

            $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut();

        }

        $(".out").hover(function(){

            clearInterval(t);

        },function(){

            t=setInterval(move,);

        });

        $(".out .right").click(function(){

            move()

        });

        $(".out .left").click(function(){

           moveL()

        })

        });

    </script>

</body>

</html>

轮播图

编辑框

<!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;

        }

    </style>

</head>

<body>

    <div style="padding: 20px">

        <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />

        <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />

        <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />

        <a id="edit_mode" class="edit-mode" href="javascript:void(0);"  onclick="EditMode(this, '#tb1');">进入编辑模式</a>

    </div>

    <table border="">

        <thead>

        <tr>

            <th>选择</th>

            <th>主机名</th>

            <th>端口</th>

            <th>状态</th>

        </tr>

        </thead>

        <tbody id="tb1">

            <tr>

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

                <td edit="true">v1</td>

                <td>v11</td>

                <td edit="true" edit-type="select" sel-val="" global-key="STATUS">在线</td>

            </tr>

            <tr>

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

                <td edit="true">v1</td>

                <td>v11</td>

                <td edit="true" edit-type="select" sel-val="" global-key="STATUS">下线</td>

            </tr>

            <tr>

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

                <td edit="true">v1</td>

                <td>v11</td>

                <td edit="true" edit-type="select" sel-val="" global-key="STATUS">在线</td>

            </tr>

        </tbody>

    </table>

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

    <script>

        /*

         监听是否已经按下control键

         */

        window.globalCtrlKeyPress = false;

        window.onkeydown = function(event){

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

                window.globalCtrlKeyPress = true;

            }

        };

        window.onkeyup = function(event){

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

                window.globalCtrlKeyPress = false;

            }

        };

        /*

         按下Control，联动表格中正在编辑的select

         */

        function MultiSelect(ths){

            if(window.globalCtrlKeyPress){

                var index = $(ths).parent().index();

                var value = $(ths).val();

                $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){

                    $(this).parent().parent().children().eq(index).children().val(value);

                });

            }

        }

    </script>

    <script type="text/javascript">

$(function(){

    BindSingleCheck('#edit_mode', '#tb1');

});

function BindSingleCheck(mode, tb){

    $(tb).find(':checkbox').bind('click', function(){

        var $tr = $(this).parent().parent();

        if($(mode).hasClass('editing')){

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

                RowIntoEdit($tr);

            }else{

                RowOutEdit($tr);

            }

        }

    });

}

function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){

    var sel= document.createElement('select');

    $.each(attrs,function(k,v){

        $(sel).attr(k,v);

    });

    $.each(csses,function(k,v){

        $(sel).css(k,v);

    });

    $.each(option_dict,function(k,v){

        var opt1=document.createElement('option');

        var sel_text = v[item_value];

        var sel_value = v[item_key];

        if(sel_value==current_val){

            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));

        }else{

            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));

        }

    });

    return sel;

}

STATUS = [

    {'id': , 'value': "在线"},

    {'id': , 'value': "下线"}

];

BUSINESS = [

    {'id': , 'value': "车上会"},

    {'id': , 'value': "二手车"}

];

function RowIntoEdit($tr){

    $tr.children().each(function(){

        if($(this).attr('edit') == "true"){

            if($(this).attr('edit-type') == "select"){

                var select_val = $(this).attr('sel-val');

                var global_key = $(this).attr('global-key');

                var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);

                $(this).html(selelct_tag);

            }else{

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

                var temp = "<input value='"+ orgin_value+"' />";

                $(this).html(temp);

            }

        }

    });

}

function RowOutEdit($tr){

    $tr.children().each(function(){

        if($(this).attr('edit') == "true"){

            if($(this).attr('edit-type') == "select"){

                var new_val = $(this).children(':first').val();

                var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();

                $(this).attr('sel-val', new_val);

                $(this).text(new_text);

            }else{

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

                $(this).text(orgin_value);

            }

        }

    });

}

function CheckAll(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

            }else{

                check_box.prop('checked',true);

                RowIntoEdit(tr);

            }

        });

    }else{

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

    }

}

function CheckReverse(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                check_box.prop('checked',false);

                RowOutEdit(tr);

            }else{

                check_box.prop('checked',true);

                RowIntoEdit(tr);

            }

        });

    }else{

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                check_box.prop('checked',false);

            }else{

                check_box.prop('checked',true);

            }

        });

    }

}

function CheckCancel(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                check_box.prop('checked',false);

                RowOutEdit(tr);

            }else{

            }

        });

    }else{

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

    }

}

function EditMode(ths, tb){

    if($(ths).hasClass('editing')){

        $(ths).removeClass('editing');

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                RowOutEdit(tr);

            }else{

            }

        });

    }else{

        $(ths).addClass('editing');

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                RowIntoEdit(tr);

            }else{

            }

        });

    }

}

    </script>

</body>

</html>

编辑框

python基础-第十二篇-12.1jQuery基础与实例的更多相关文章

python【第十二篇】Mysql基础
内容: 1.数据库介绍及MySQL简介 2.MySQL基本操作 1 数据库介绍 1.1什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同 ...
Python 第十二篇：HTML基础
一:基础知识: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可 ...
【Python之路】第二十二篇--Django【基础篇】
1 Django流程介绍 MTV模式著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业 ...
图解Python 【第十二篇】：Django 基础
本节内容一览表: Django基础:http://www.ziqiangxuetang.com/django/django-tutorial.html 一.Django简介 Django文件介绍:ht ...
python【第十二篇下】操作MySQL数据库以及ORM之 sqlalchemy
内容一览: 1.Python操作MySQL数据库 2.ORM sqlalchemy学习 1.Python操作MySQL数据库 2. ORM sqlachemy 2.1 ORM简介对象关系映射(英语: ...
Python 学习第十二篇：pandas
pandas是基于NumPy构建的模块,含有使数据分析更快更简单的操作工具和数据结构,最常用的数据结构是:序列Series和数据框DataFrame,Series类似于numpy中的一维数组,类似于关 ...
Python学习第十二篇——切片的使用
Python中使用函数切片可以创建副本,保留原本.现在给出如下代码 magicians_list = ['mole','jack','lucy'] new_lists = [] def make_gr ...
第十二篇：HTML基础
本篇内容 HTML概述 HTML常用基本标签 CSS格式引入一. HTML概述 1.定义: HTML,超文本标记语言,写给浏览器的语言,目前网络上应用最广泛的语言.HTML也在不断的更新,最新版本已 ...
python【第十八篇】Django基础
1.什么是Django? Django是一个Python写成的开源Web应用框架.python流行的web框架还有很多,如tornado.flask.web.py等.django采用了MVC的框架模式 ...

随机推荐

netctl
netctl is a CLI-based tool used to configure and manage network connections via profiles. It is a na ...
thinkphp 命名规范
目录和文件命名目录和文件名采用小写+下划线,并且以小写字母开头: 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并且命名空间的路径和类库文件所在路径一致(包括大小写): 类名和 ...
GAN 生成mnist数据
参考资料 GAN原理学习笔记生成式对抗网络GAN汇总 GAN的理解与TensorFlow的实现 TensorFlow小试牛刀(2):GAN生成手写数字参考代码之一 #coding=utf-8 #h ...
TensorFlow基础笔记(6) 图像风格化实验
参考 http://blog.csdn.net/wspba/article/details/53994649 https://www.ctolib.com/AdaIN-style.html Ackno ...
采用预取（Prefetch）来加速你的网站(转)
一.DNS预取如果你像我一样想在网站上有一个Twitter小程序,还有网站分析,再也许一些网页字体,那么你必须要链接到一些其它域名,这意味着你将不得不引发DNS查询.我的建议通常是,不要还没有先适当 ...
【BZOJ】1615: [Usaco2008 Mar]The Loathesome Hay Baler麻烦的干草打包机（模拟+bfs）
http://www.lydsy.com/JudgeOnline/problem.php?id=1615 这种题..... #include <cstdio> #include <c ...
用 HTML5+ payment方法支付宝支付遇到的坑
用 HTML5+ payment方法碰到的第一个坑就是如果是支付宝的话签约那种支付方式. 因为 Dcloud的文档没有更新的原因你可以看到他们说的都是‘移动支付’,但是你去支付宝平台的时候看到的根本就 ...
COCOS2D-X多层单点触摸分发处理方案？
如今的问题是点击button的时候,会触发底层的触摸事件,怎么不触发底层的触摸事件啊?
mac os x 记录转载
转载:远景网友(手机锋友t5sd3sf):http://bbs.feng.com/read-htm-tid-10434256.html 一个命令制作 OS X 原版安装U盘 1.要保证下载的原版安装包 ...
gcc安装（centos）
gcc 4.8 安装 [root@DS-VM-Node239 ~]# curl -Lks http://www.hop5.in/yum/el6/hop5.repo > /etc/yum.repo ...

python基础-第十二篇-12.1jQuery基础与实例

一、查找元素

1、选择器

基本选择器

层级选择器

基本筛选器

属性选择器

表单选择器

2、筛选器

过滤筛选器

查找筛选器

二、操作元素

1、属性操作

2、css操作

3、文档处理

内部插入

外部插入

4、事件

三、jQuery常见实例

拖动面板

clone内容添加与删除

滑动

返回顶部

淡入淡出

显示与隐藏

左侧菜单

Tab菜单

滚动菜单

放大镜

商城菜单

模态对话框

轮播图

编辑框

python基础-第十二篇-12.1jQuery基础与实例的更多相关文章

随机推荐

热门专题

　　基本选择器

　　层级选择器

　　基本筛选器

　　属性选择器

　　表单选择器

　　过滤筛选器

　　查找筛选器

　　内部插入

　　外部插入