一、查找元素

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的框架模式 ...

随机推荐

homebrew 无法安装，提示不能在根目录下使用
sudo chown -R $(whoami) /usr/local 把/use/local的owner換成自己,就有write權限了 whoami就是一個命令,會echo當前登錄用戶的名字.當然你知 ...
CSS学习笔记（11）--Flex 布局教程：语法篇
原文--阮一峰博客作者: 阮一峰日期: 2015年7月10日网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...
算法 quick sort
// ------------------------------------------------------------------------------------------------- ...
JavaScript中的闭包详解
闭包是JavaScript的重要特性,非常强大,可用于执行复杂的计算,可并不容易理解,尤其是对之前从事面向对象编程的人来说,对 JavaScript 认识和编程显得更难.特别是在看一些开源的JavaS ...
C/C++基础问题归集
include " ":先从本地目录,后从系统路径include <>: 先从系统路径,后从本地目录一般用哪个都没关系,只是速度有差别罢了
Hadoop源码分析之Configuration
转自:http://www.it165.net/admin/html/201312/2178.html org.apache.hadoop.conf.Configuration类是Hadoop所有功能 ...
Static int data语句说明data为类变量，为一个类的共享变量，属于整个类
面向对象高级: 修饰符: static:①可修饰变量(属性):②可修饰方法:③可修饰代码块. Static int data语句说明data为类变量,为一个类的共享变量,属于整个类. Int dat ...
【BZOJ】1635: [Usaco2007 Jan]Tallest Cow 最高的牛（差分序列）
http://www.lydsy.com/JudgeOnline/problem.php?id=1635 差分序列是个好东西啊....很多地方都用了啊,,, 线性的进行区间操作orz 有题可知 h[a ...
HttpModule的简单示例
1.HttpModule可用在asp.net 管线事件触发的过程中.. 可处理一些通用的操作,如给特定请求加 gzip压缩. 2.示例代码: using System; using System.We ...
RabbitMQ OS X下安装及常用命令-1
RabbitMQ的主页在http://www.rabbitmq.com/ . 1. 安装Erlang RabbitMQ是用Erlang编写的,所以需要先安装Erlang,如果有的话跳过 ...

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

一、查找元素

1、选择器

基本选择器

层级选择器

基本筛选器

属性选择器

表单选择器

2、筛选器

过滤筛选器

查找筛选器

二、操作元素

1、属性操作

2、css操作

3、文档处理

内部插入

外部插入

4、事件

三、jQuery常见实例

拖动面板

clone内容添加与删除

滑动

返回顶部

淡入淡出

显示与隐藏

左侧菜单

Tab菜单

滚动菜单

放大镜

商城菜单

模态对话框

轮播图

编辑框

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

随机推荐

热门专题

　　基本选择器

　　层级选择器

　　基本筛选器

　　属性选择器

　　表单选择器

　　过滤筛选器

　　查找筛选器

　　内部插入

　　外部插入