【jquery】基础知识

jquery简介

1 jquery是什么

jquery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

2 什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

　　比如：

　　　　$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

　　　　这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

　　　　虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

　　　　约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

　　　　　　var $variable = jQuery 对象

　　　　　　var variable = DOM 对象

基本语法：$(selector).action()

二寻找元素(重要的选择器和筛选器)

2.1 选择器

　 2.1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")

　 2.1.2层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

　　2.1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

　　2.1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')

　　2.1.5 表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签

　　　　　　　　　　　　　　$("input:checked")

2.2 筛选器

　　2.2.1 过滤筛选器

　　　　$("li").eq(2) $("li").first() $("ul li").hasclass("test")

　　2.2.2 查找筛选器

　　　　$("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()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>left_menu</title>

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

    <script>

          function show(self){

//              console.log($(self).text())

              $(self).next().removeClass("hide")

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

          }

    </script>

    <style>

          .menu{

              height: 500px;

              width: 30%;

              background-color: gainsboro;

              float: left;

          }

          .content{

              height: 500px;

              width: 70%;

              background-color: rebeccapurple;

              float: left;

          }

         .title{

             line-height: 50px;

             background-color: #425a66;

             color: forestgreen;}

         .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>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>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

    </div>

    <div class="content"></div>

</div>

</body>

</html>

左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tab</title>

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

    <script>

           function tab(self){

               var index=$(self).attr("xxx")

               $("#"+index).removeClass("hide").siblings().addClass("hide")

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

           }

    </script>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .tab_outer{

            margin: 0px auto;

            width: 60%;

        }

        .menu{

            background-color: #cccccc;

            /*border: 1px solid red;*/

            line-height: 40px;

        }

        .menu li{

            display: inline-block;

        }

        .menu a{

            border-right: 1px solid red;

            padding: 11px;

        }

        .content{

            background-color: tan;

            border: 1px solid green;

            height: 300px;

        }

        .hide{

            display: none;

        }

        .current{

            background-color: darkgray;

            color: yellow;

            border-top: solid 2px rebeccapurple;

        }

    </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>

</body>

</html>

TAB切换

三操作元素(属性 CSS 和文档处理)

3.1 属性操作

　　$("p").text() $("p").html() $(":checkbox").val()

　　$(".test").attr("alex") $(".test").attr("alex","sb")

　　$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")

　　$(".test").prop("checked",true)

　　$(".test").addClass("hide")

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

             function selectall(){

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

             }

             function che(){

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

             }

             function reverse(){

//                 var idlist=$("table :checkbox")

//                 for(var i=0;i<idlist.length;i++){

//                     var element=idlist[i];

//

//                     var ischecked=$(element).prop("checked")

//                     if (ischecked){

//                         $(element).prop("checked",false)

//                     }

//                     else {

//                         $(element).prop("checked",true)

//                     }

//

//                 }

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

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

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

                     }

                     else {

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

                     }

                 });

//                 li=[10,20,30,40]

////                 dic={name:"yuan",sex:"male"}

//                 $.each(li,function(i,x){

//                     console.log(i,x)

//                 })

             }

    </script>

</head>

<body>

     <button onclick="selectall();">全选</button>

     <button onclick="che();">取消</button>

     <button onclick="reverse();">反选</button>

     <table border="1">

         <tr>

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

             <td>111</td>

         </tr>

         <tr>

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

             <td>222</td>

         </tr>

         <tr>

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

             <td>333</td>

         </tr>

         <tr>

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

             <td>444</td>

         </tr>

     </table>

</body>

</html>

编辑框正反选

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>批量编辑</title>

        <!--<link rel="stylesheet" href="css/mycss.css" />-->

        <style>

            *{

    margin: 0;

    padding: 0;

}

body {

  font-family: 'Open Sans', sans-serif;

  font-weight: 300;

  line-height: 1.42em;

  color:rebeccapurple;

  background-color:goldenrod;

}

h1 {

  font-size:3em;

  font-weight: 300;

  line-height:1em;

  text-align: center;

  color: #4DC3FA;

}

.blue {

    color: #185875;

}

.yellow {

    color: #FFF842;

    }

/*!*弹出层罩子*!*/

#full {

    background-color:gray;

    left:0;

    opacity:0.7;

    position:absolute;

    top:0;

    filter:alpha(opacity=30);

}

.modified {

    background-color: #1F2739;

    border:3px solid whitesmoke;

    height:400px;

    left:50%;

    margin:-200px 0 0 -200px;

    padding:1px;

    position:fixed;

    /*position:absolute;*/

    top:50%;

    width:400px;

    display:none;

}

li {

    list-style: none;

    margin: 20px 0 0 50px;

    color: #FB667A;

}

input[type="text"] {

  padding: 10px;

  border: solid 1px #dcdcdc;

  /*transition: box-shadow 3s, border 3s;*/

}

.iputbutton {

    margin: 60px 0 0 50px;

    color: whitesmoke;

    background-color: #FB667A;

    height: 30px;

    width: 100px;

    border: 1px dashed;

}

.container th h1 {

    font-weight: bold;

    font-size: 1em;

      text-align: left;

      color: #185875;

}

.container td {

    font-weight: normal;

    font-size: 1em;

}

.container {

    width: 80%;

    margin: 0 auto;

}

.container td, .container th {

    padding-bottom: 2%;

    padding-top: 2%;

      padding-left:2%;

}

/*单数行*/

.container tr:first-child {

    background-color: red;

}

/*偶数行*/

.container tr:not(first-child){

      background-color: cyan;

}

.container th {

    background-color: #1F2739;

}

.container td:last-child {

    color: #FB667A;

}

/*鼠标进过行*/

.container tr:hover {

   background-color: #464A52;

}

/*鼠标进过列*/

.container td:hover {

  background-color: #FB667A;

  color: #403E10;

  font-weight: bold;

  transform: translate3d(5px, -5px, 0);

}

        </style>

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

        <script>

            //点击【编辑】显示

$(function () {

    $("table[name=host] tr:gt(0) td:last-child").click(function (event) {

        alert("234");

//        $("#full").css({height:"100%",width:"100%"});

        $(".modified").data('current-edit-obj', $(this));

        $(".modified,#full").show();

        var hostname = $(this).siblings("td[name=hostname]").text();

        $(".modified #hostname").val(hostname);

        var ip = $(this).siblings("td[name=ip]").text();

        $(".modified #ip").val(ip);

        var port = $(this).siblings("td[name=port]").text();

        $(".modified #port").val(port);

    });

    //取消编辑

    $(".modified #cancel").bind("click", function () {

        $(".modified,#full").hide();

    });

//    确定修改

    $(".modified #ok").bind("click", function (event) {

        var check_status = true;

        var ths = $(".modified").data('current-edit-obj');

        var hostname = $(".modified #hostname").val().trim();

        var ip = $(".modified #ip").val().trim();

        var port = $(".modified #port").val().trim();

        var port = parseInt(port);

        console.log(port);

        //        端口为空设置为22

        if (isNaN(port)) {

            alert("您没有设置正常的SSH端口号，将采用默认22号端口");

            var port = 22;

        }else if ( port > 65535) {

        //            如果端口不是一个数字 或者端口大于65535

            var check_status = false;

            $(".modified #port").css("border-color","red");

            alert("端口号超过范围!")

        };

        // 主机和ip不能是空

        if ( hostname == ""){

            var check_status = false;

            $(".modified #hostname").css("border-color","red");

        }else if (ip == "") {

            var check_status = false;

            $(".modified #ip").css("border-color","red");

        };

        if (check_status == false){

            return false;

        }else{

            //$(this).css("height","60px")   为什么不用$(this),而用$()

            $(ths).siblings("td[name=hostname]").text(hostname);

            $(ths).siblings("td[name=ip]").text(ip);

            $(ths).siblings("td[name=port]").text(port);

            $(".modified,#full").hide();

        };

    });

});

        </script>

    </head>

    <body>

        <h1>

            <span class="blue">&lt;</span>Homework1<span class="blue">&gt;</span> <span class="yellow">HostList</span>

        </h1>

        <div id="full">

            <div class="modified">

                <li>主机名：<input id="hostname" type="text" value="" />*</li>

                <li>ip地址：<input id="ip" type="text" value="" />*</li>

                <li>端口号：<input id="port" type="text" value="" />[0-65535]</li>

                    <div id="useraction">

                     <input class="iputbutton" type="button" name="确定" id="ok" value="确定"/>

                    <input class="iputbutton" type="button" name="取消" id="cancel" value="取消"/>

                    </div>

            </div>

        </div>

        <table class="container" name="host">

            <tr>

                <th><h1>主机名</h1></th>

                <th><h1>IP地址</h1></th>

                <th><h1>端口</h1></th>

                <th><h1>操作</h1></th>

            </tr>

            <tr>

                <td name="hostname">web01</td>

                <td name="ip">192.168.2.1</td>

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

                <td>编辑 </td>

            </tr>

            <tr>

                <td name="hostname">web02</td>

                <td name="ip">192.168.2.2</td>

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

                <td>编辑 </td>

            </tr>

            <tr>

                <td name="hostname">web03</td>

                <td name="ip">192.168.2.3</td>

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

                <td>编辑 </td>

            </tr>

            <tr>

                <td name="hostname">web04</td>

                <td name="ip">192.168.2.4</td>

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

                <td>编辑 </td>

            </tr>

        </table>

    </body>

</html>

模态对话框

3.2 CSS操作

　　3.2.1(样式) css("{color:'red',backgroud:'blue'}")

　　3.2.2(位置) offset() position() scrollTop() scrollLeft()

　　3.2.3(尺寸) height() width()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

          window.onscroll=function(){

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

              console.log(current)

              if (current>100){

                  $(".returnTop").removeClass("hide")

              }

              else {

              $(".returnTop").addClass("hide")

          }

          }

           function returnTop(){

//               $(".div1").scrollTop(0);

               $(window).scrollTop(0)

           }

    </script>

    <style>

        body{

            margin: 0px;

        }

        .returnTop{

            height: 60px;

            width: 100px;

            background-color: darkgray;

            position: fixed;

            right: 0;

            bottom: 0;

            color: greenyellow;

            line-height: 60px;

            text-align: center;

        }

        .div1{

            background-color: orchid;

            font-size: 5px;

            overflow: auto;

            width: 500px;

        }

        .div2{

            background-color: darkcyan;

        }

        .div3{

            background-color: aqua;

        }

        .div{

            height: 300px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

     <div class="div1 div">

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

     </div>

     <div class="div2 div"></div>

     <div class="div3 div"></div>

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

</body>

</html>

返回顶部

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            margin: 0px;

        }

        img {

            border: 0;

        }

        ul{

            padding: 0;

            margin: 0;

            list-style: none;

        }

        .clearfix:after {

            content: ".";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

        }

        .wrap{

            width: 980px;

            margin: 0 auto;

        }

        .pg-header{

            background-color: #303a40;

            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);

            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);

            box-shadow: 0 2px 5px rgba(0,0,0,.2);

        }

        .pg-header .logo{

            float: left;

            padding:5px 10px 5px 0px;

        }

        .pg-header .logo img{

            vertical-align: middle;

            width: 110px;

            height: 40px;

        }

        .pg-header .nav{

            line-height: 50px;

        }

        .pg-header .nav ul li{

            float: left;

        }

        .pg-header .nav ul li a{

            display: block;

            color: #ccc;

            padding: 0 20px;

            text-decoration: none;

            font-size: 14px;

        }

        .pg-header .nav ul li a:hover{

            color: #fff;

            background-color: #425a66;

        }

        .pg-body{

        }

        .pg-body .catalog{

            position: absolute;

            top:60px;

            width: 200px;

            background-color: #fafafa;

            bottom: 0px;

        }

        .pg-body .catalog.fixed{

            position: fixed;

            top:10px;

        }

        .pg-body .catalog .catalog-item.active{

            color: #fff;

            background-color: #425a66;

        }

        .pg-body .content{

            position: absolute;

            top:60px;

            width: 700px;

            margin-left: 210px;

            background-color: #fafafa;

            overflow: auto;

        }

        .pg-body .content .section{

            height: 500px;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="wrap clearfix">

            <div class="logo">

                <a href="#">

                    <img src="data:images/3.jpg">

                </a>

            </div>

            <div class="nav">

                <ul>

                    <li>

                        <a  href="#">首页</a>

                    </li>

                    <li>

                        <a  href="#">功能一</a>

                    </li>

                    <li>

                        <a  href="#">功能二</a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

    <div class="pg-body">

        <div class="wrap">

            <div class="catalog">

                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>

                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>

                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>

            </div>

            <div class="content">

                <div menu="function1" class="section">

                    <h1>第一章</h1>

                </div>

                <div menu="function2" class="section">

                    <h1>第二章</h1>

                </div>

                <div menu="function3" class="section">

                    <h1>第三章</h1>

                </div>

            </div>

        </div>

    </div>

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

    <script type="text/javascript">

     window.onscroll=function(){

         var ws=$(window).scrollTop()

         if (ws>50){

             $(".catalog").addClass("fixed")

         }

         else {

             $(".catalog").removeClass("fixed")

         }

         $(".content").children("").each(function(){

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

//             console.log(offtop)

             var total=$(this).height()+offtop;

             if (ws>offtop && ws<total){

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

                     var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px")

                     console.log(index)

                 target='div[auto-to="'+index+'"]';

                 $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")

                 }

                 else{

                      var index=$(this).attr("menu");

                 target='div[auto-to="'+index+'"]';

                 $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")

                 }

             }

         })

     }

    </script>

</body>

</html>

滚动菜单

3.3 文档处理

　　内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")

　　　　　　prepend() prependTo()

　　外部插入 before() insertBefore() after insertAfter()

　　　　　　replaceWith() remove() empty() clone()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

            <div class="outer">

                <div class="condition">

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

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

                        </div>

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

                            <input type="checkbox">

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

                        </div>

                </div>

            </div>

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

    <script>

            function add(self){

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

                $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");

                $duplicate.appendTo($(self).parent().parent().parent());

            }

           function removed(self){

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

           }

    </script>

</body>

</html>

clone方法的应用

3.4 事件

　　$(document).ready(function(){}) -----------> $(function(){})

　　$("p").click(function(){})

$("p").bind("click",function(){})

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

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

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

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

            标题

        </div>

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

            内容

        </div>

    </div>

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

<script>

    $(function(){

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

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

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

        }).mousedown(function(e){

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

            var _event = e || window.event;

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

            var ord_x = _event.clientX;

            var ord_y = _event.clientY;

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

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

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

                var _new_event = e || window.event;

                var new_x = _new_event.clientX;

                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);

                var y = parent_top + (new_y - ord_y);

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

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

            })

        }).mouseup(function(){

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

        });

    })

</script>

</body>

</html>

拖动面板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>bigger</title>

    <style>

        *{

            margin: 0;

            padding:0;

        }

        .outer{

            height: 350px;

            width: 350px;

            border: dashed 5px cornflowerblue;

        }

        .outer .small_box{

            position: relative;

        }

        .outer .small_box .float{

            height: 175px;

            width: 175px;

            background-color: darkgray;

            opacity: 0.4;

            fill-opacity: 0.4;

            position: absolute;

            display: none;

        }

        .outer .big_box{

            height: 400px;

            width: 400px;

            overflow: hidden;

            position:absolute;

            left: 360px;

            top: 0px;

            z-index: 1;

            border: 5px solid rebeccapurple;

            display: none;

        }

        .outer .big_box img{

            position: absolute;

            z-index: 5;

        }

    </style>

</head>

<body>

        <div class="outer">

            <div class="small_box">

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

                <img src="small.jpg">

            </div>

            <div class="big_box">

                <img src="big.jpg">

            </div>

        </div>

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

<script>

    $(function(){

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

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

              $(".big_box").css("display","block")

          })

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

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

              $(".big_box").css("display","none")

          })

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

              var _event=e || window.event;

              var float_width=$(".float").width();

              var float_height=$(".float").height();

              console.log(float_height,float_width);

              var float_height_half=float_height/2;

              var float_width_half=float_width/2;

              console.log(float_height_half,float_width_half);

               var small_box_width=$(".small_box").height();

               var small_box_height=$(".small_box").width();

//  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理

              var mouse_left=_event.clientX-float_width_half;

              var mouse_top=_event.clientY-float_height_half;

              if(mouse_left<0){

                  mouse_left=0

              }else if (mouse_left>small_box_width-float_width){

                  mouse_left=small_box_width-float_width

              }

              if(mouse_top<0){

                  mouse_top=0

              }else if (mouse_top>small_box_height-float_height){

                  mouse_top=small_box_height-float_height

              }

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

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

               var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);

               var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);

              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>

放大镜

3.5 动画效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

    /**

 * Created by yuan on 16/5/5.

 */

$(document).ready(function(){

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

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

    });

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

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

    });

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

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

        $("p").toggle();

    })

 for (var i= 0;i<7;i++){

//            颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

            $("<div>").appendTo(document.body);

        }

        $("div").click(function(){

          $(this).hide(2000);

        });

});

    </script>

    <link type="text/css" rel="stylesheet" href="style.css">

</head>

<body>

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

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

    <!--3 滑动-->

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

    <p>hello</p>

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

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

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

</body>

</html>

隐藏与显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</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>

</body>

</html>

淡入淡出

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

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

</body>

</html>

滑动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

    $(document).ready(function(){

   $("button").click(function(){

       $("p").hide(1000,function(){

           alert('动画结束')

       })

//       $("p").css('color','red').slideUp(1000).slideDown(2000)

   })

});

    </script>

</head>

<body>

  <button>隐藏</button>

  <p>helloworld helloworld helloworld</p>

</body>

</html>

回调函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="index.js"></script>

    <script>

        /**

 * Created by yuan on 2016/5/6.

 */

//手动轮播效果

$(function(){

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

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

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

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

    }

    //$(".img li").eq(0).show();

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

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

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

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

       i=index;

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

   });

i=0;

var t=setInterval(move,1500)

    function move(){

    i++;

    if(i==size){

        i=0;

    }

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

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

};

    function moveL(){

    i--;

    if(i==-1){

        i=size-1;

    }

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

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

}

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

        clearInterval(t);

    },function(){

        t=setInterval(move,1500);

    });

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

        move()

    });

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

       moveL()

    })

});

    </script>

    <link type="text/css" rel="stylesheet" href="style.css">

    <style>

        *{

    margin: 0;

    padding: 0;

}

ul{

    list-style: none;

}

.out{

    width: 730px;

    height: 454px;

    /*border: 8px solid mediumvioletred;*/

    margin: 50px auto;

    position: relative;

}

.out .img li{

    position: absolute;

    left: 0;

    top: 0;

}

.out .num{

    position: absolute;

    left:0;

    bottom: 20px;

    text-align: center;

    font-size: 0;

    width: 100%;

}

.out .btn{

    position: absolute;

    top:50%;

    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: grey;

    color: #fff;

    text-align: center;

    line-height: 20px;

    border-radius: 50%;

    display: inline;

    font-size: 18px;

    margin: 0 10px;

    cursor: pointer;

}

.out .num li.active{

    background-color: red;

}

.out .left{

    left: 0;

}

.out .right{

    right: 0;

}

.out:hover .btn{

    display: block;

}

    </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">1</li>-->

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

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

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

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

         </ul>

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

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

     </div>

</body>

</html>

京东轮播图

3.6 扩展(插件机制) 　

jquery.extend({})
jquery.fn.extend({})

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

    padding: 0;

}

.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: 0 15px;

    text-decoration: none;

    color: #fff;

    float: left;

}

.header-menu a{

    color:#656565;

}

.header-menu .menu-catagory{

    position: absolute;

    background-color: #fff;

    border-left:1px solid #fff;

    height: 316px;

    width: 230px;

     z-index: 4;

     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:4;

    float:left;

    border: solid 1px #bcbcbc;

    border-left:0;

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

}

    </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">

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

                    <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">厨房用品3</a></dt>

                        <dd>

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

                        </dd>

                    </dl>

                    <dl>

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

                        <dd>

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

                        </dd>

                    </dl>

                </div>

            </div>

        </div>

    </div>

</div>

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

<script type="text/javascript">

    $(document).ready(function () {

        Change_Menu('#all_menu_catagory','#nav_all_menu', '#nav_all_content');

    });

    function Change_Menu(all_menu_catagory,menu, content) {

        $all_menu_catagory = $(all_menu_catagory);

        $menu = $(menu);

        $content = $(content);

        $all_menu_catagory.bind("mouseover", function () {

            $menu.parent().removeClass('hide');

        });

        $all_menu_catagory.bind("mouseout", function () {

            $menu.parent().addClass('hide');

        });

        $menu.children().bind("mouseover", function () {

            $menu.parent().removeClass('hide');

            $item_content = $content.find('div[float-id="' + $(this).attr("float-content") + '"]');

            $item_content.removeClass('hide').siblings().addClass('hide');

        });

        $menu.bind("mouseout", function () {

            $content.children().addClass('hide');

            $menu.parent().addClass('hide');

        });

        $content.children().bind("mouseover", function () {

            $menu.parent().removeClass('hide');

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

        });

        $content.children().bind("mouseout", function () {

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

            $menu.parent().addClass('hide');

        });

    }

</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="1">

        <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="1" 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="2" 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="1" global-key="STATUS">在线</td>

            </tr>

        </tbody>

    </table>

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

    <script>

        /*

         监听是否已经按下control键

         */

        window.globalCtrlKeyPress = false;

        window.onkeydown = function(event){

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

                window.globalCtrlKeyPress = true;

            }

        };

        window.onkeyup = function(event){

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

                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': 1, 'value': "在线"},

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

];

BUSINESS = [

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

    {'id': 2, '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>

编辑框

【jquery】基础知识的更多相关文章

jquery基础知识汇总
jquery基础知识汇总一.简介定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
JQuery基础知识（1）
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
JQuery基础知识（2）
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器介绍 jque ...
【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
【前端】之jQuery基础知识
jQuery 简介在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中在标签下添加jQuery引用:&l ...
jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可学习jQuery就是学习一些方法 ...
jQuery基础知识准备
一．代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...
Jquery基础知识；
1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...

随机推荐

Map工具系列-07-TFS变更集提取工具
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
纪念BLives 1.0版本发布
历时两个多月的时间,BLives程序1.0发布,在开发程序期间自己经历了很多,考试,恋爱,学业,自己很纠结很伤心,有时候很无助,为了让自己有事干,我在考试备考期间去设计程序- -#,虽然程序设计的一 ...
Android源码——Activity进程内启动
进程内启动Activity MainActivity组件向ActivityManagerService发送一个启动SubActivityInProcess组件的进程间通信请求: ActivityMan ...
Linux 基础
命令说明 $ type cmd # 获取命令类型 $ which cmd # 命令的位置 $ help cmd / cmd --help / man cmd # 获取命令帮助 $ whatis cmd ...
PowerShell自动部署IIS站点（Windows Server 2008 R2）
1.功能描述 1. 连接软件源服务器下载.NET Framework 4.0..NET Framework 4.5. 2. 检测并判断当前.NET Framework版本是否小于v4.0,如果小于则进 ...
skipping the actual organic impact moderation supplied
The most recent running footwear design has gone out. The high cost is actually $150. Expert sports ...
webpack踩坑之路——构建基本的React+ES6项目
转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...
Yii2 定时任务创建（Console 任务）
Yii2的定时任务可以有两种写法,原理都是通过服务器的定时任务去调用 1.通过调用指定的URL访问就相当于在浏览器中访问 2.通过console调用下面我们就来说说Console 是如何实现定时任 ...
ajax传输中文乱码解决方法
问题描述: 我是在一个jsp页面有一个保存按钮,点击时会触发saveForm()的js函数,在saveForm()函数里经过校验后,会通过ajax发送数据请求,这样就不用通过提交表单来传输数据了,aj ...
SQL拼接自己需要的字符串
SQL行转列有多种写法,如果想把多行数据拼接成为新的一行,比如: 首先,将查询转为XML 替换XML的标签将第一个字符,去掉试用 STUFF函数 sql STUFF用法 1.作用删除指定长度的字符 ...

【jquery】基础知识

jquery简介

【jquery】基础知识的更多相关文章

随机推荐

热门专题