jquery 20161014

时间：2022-11-21 15:22:46

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>

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"

    });

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>

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>

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>

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>

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>

相关文章