jquery 20161014

jquery.fn.extend

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <!--                 1                   -->
    <div id="test"></div>
    <script>
        $("#test").css({"width":"300px","height":"200px","border":"1px solid red"});
    </script>

    <!--          2                   -->
    <script>
        function person(info){
            document.write(info.name+" is "+info.age+" now, and his hobby is "+info.hobby+"<br/>");
        }
        person({name:"xiaoming",age:"12",hobby:"swimming"});
        person({age:"14",name:"xiaohong",hobby:"playing"});
    </script>
    <!--              3                  -->
    <!-- jquery.fn.extend -->
    <div id="a">123345</div>
    <script>
        jQuery.fn.extend({
            myTest: function (info) {
                //alert($(this).html()+" "+info);
                $(this).css({"width":info.width,"height":info.height,"border":info.border})

            }
        });
        $("#a").myTest({
            width:"300px",
            height:"200px",
            border:"1px solid green"
        });
    </script>
</body>
</html>
View Code

jquery.fn.extend 2

  jQuery.fn.myTest2= function (info) {
        $(this).css({"width":info.width,"height":info.height,"border":info.border})
    }
    $("#b").myTest2({
        width:"300px",
        height:"200px",
        border:"1px solid red"
    });
View Code

jq实现 nav滚动时固定在顶部

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,ul,li,a{margin:0;padding: 0;}
      .a{height: 130px;border: 1px solid red;}
        ul li{float:left;list-style: none;}
        ul li a{float:left;display: block;width:200px;text-decoration: none;color:#fff;}
      ul li a:hover{background: #ff2f2f;}

        .mainNavFix{
            position: fixed;
            top:0;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <!--  nav 的高度要100%;  -->
    <div class="mainNav" style="height: 30px;background: red;line-height: 30px;text-align: center;width:100%;">
        <ul style="margin:0 auto;width:1200px;">
            <li><a href="javascript:void(0);">123</a></li>
            <li><a href="javascript:void(0);">123</a></li>
            <li><a href="javascript:void(0);">123</a></li>
            <li><a href="javascript:void(0);">123</a></li>
        </ul>
    </div>
    <div style="height: 1000px;border: 1px solid green;margin:0 auto;width:1200px;"></div>

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /* 滚动时 nav 固定在顶部*/
    $(window).scroll(function () {
        //      console.log("scrollTop: "+$(window).scrollTop());
        /*
         if($(window).scrollTop()>130){
         $(".mainNav").addClass("mainNavFix");
         }else{
         $(".mainNav").removeClass("mainNavFix");
         }
         */
        $(window).scrollTop()>130?$(".mainNav").addClass("mainNavFix"):$(".mainNav").removeClass("mainNavFix");
    });
</script>

</body>

</html>
View Code

 jq遮罩效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div, img, body, ul, li {margin: 0;padding: 0;}
        li {list-style: none;}
        .test{border: 1px solid red;height: 200px;width:200px;float:left;margin-right: 20px;}
        .a{height: 200px;width:200px;}
        .b{height: 200px;width:200px;background: #ff2f2f;display: none;}
        .other .b{display: block;margin-top: -200px;}
        .other .a{opacity: 0.1;}
    </style>

</head>
<body>
<div class="test">
    <div class="a">
        <img src="pic1.png" alt=""/>
        <p>1123</p>
    </div>
        <div class="b">
        .slideBox2{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd;  }
        .slideBox2 .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
        .slideBox2 .hd ul{ overflow:hidden; zoom:1; float:left;  }


    </div>

</div>
<div class="test">
    <div class="a">
        <img src="pic1.png" alt=""/>
        <p>1123</p>
    </div>
    <div class="b">
        .slideBox2{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd;  }
        .slideBox2 .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
        .slideBox2 .hd ul{ overflow:hidden; zoom:1; float:left;  }


    </div>

</div>
<div class="test">
    <div class="a">
        <img src="pic1.png" alt=""/>
        <p>1123</p>
    </div>
    <div class="b">
        .slideBox2{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd;  }
        .slideBox2 .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
        .slideBox2 .hd ul{ overflow:hidden; zoom:1; float:left;  }


    </div>

</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(".test").mouseover(function () {
        $(this).addClass("other").siblings().removeClass("other");
    });
    $(".test").mouseout(function () {
        $(this).removeClass("other");
    });
</script>

</body>
</html>
View Code

 dl dt dd 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        dl{width:300px;border: 1px solid red;}
        dt{border: 1px solid green;float:left;width:80px;text-align: right;}  /* dt 浮动*/
        dd{border: 1px solid blue;width:210px;margin-left: 82px;}  /*  dd 添加  margin-left */
    </style>
</head>
<body>
    <dl>
        <dt>营销业务</dt>
        <dd>教育行业软件销售;自主知识产权产品：在线职业考试认证平台、实训平台、互动课堂。</dd>
    </dl>
    <dl>
        <dt>营销务</dt>
        <dd>教育行业软件销售;自主知识产权产品：在线职业考试认证平台、实训平台、互动课堂。</dd>
        <dt>业务</dt>
        <dd>教育行业软件销售;自主知识产权产品：在线职业考试认证平台、实训平台、互动课堂。</dd>
        <dt>务</dt>
        <dd>教育行业软件销售;自主知识产权产品：在线职业考试认证平台、实训平台、互动课堂。</dd>
    </dl>

</body>
</html>
View Code

margin-left:-100px;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <div style="border: 1px solid green;width:800px;margin:0 auto;">
            <img src="111.png" alt="" style="float:left;"/>
            <div style="float:right;border: 1px solid red;width:30px;">
                <p style="background: #32aaff;height:30px;line-height:30px;width:200px;margin-left: -170px;">123556</p>
                213434<br/>
                234<br/>
                34<br/>
            </div>
        </div>

</body>
</html>
View Code

jQuery.extend()

<script>
  jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
  });
  console.log("min: "+jQuery.min(2,3)); // => 2
  console.log("max: "+jQuery.max(4,5)); // => 5

</script>

jQuery.kang-tab()

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body,ul,li,div{margin: 0;padding: 0;}
    li{list-style: none;}
    .clear{clear: both;}
    /* kang-tab */
    .kang-tab{}
    .kang-tab ul li{float:left;text-align: center;width:100px;cursor:pointer;}
    .kang-tab ul li.other{background: #23aefa;}
    .kang-tab .conAll .content{display: none;border: 1px solid green;width:300px;height: 250px;}
  </style>
</head>
<body>
<div class="kang-tab" id="kang-tab1">
  <ul>
    <li>file</li>
    <li>edit</li>
    <li>view</li>
  </ul>
  <div class="clear"></div>
  <div class="conAll">
    <div class="content">this is file</div>
    <div class="content">now we start edit</div>
    <div class="content">what you can see</div>
  </div>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  jQuery.extend({
    kang_tab:function (id) {
      $('#'+id+" ul li").eq(0).addClass("other");
      $('#'+id+" .conAll .content").eq(0).show();
      $('#'+id+" ul li").click(function () {
        $(this).addClass("other").siblings().removeClass("other");
        $('#'+id+" .conAll .content").eq($(this).index()).show().siblings().hide();
      });
    }
  })
  jQuery.kang_tab("kang-tab1");
</script>
</body>
</html>

 

posted @ 2016-10-14 10:35  gyz418  阅读(119)  评论(0)    收藏  举报