一、查找元素

1、选择器

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

1.2层级选择器       $(".outer div")(所有的后代)  $(".outer>div")(所有的子代)   $(".outer+div")(匹配所有跟在.outer后面的div)

　　　　　　　　　　  $(".outer~div")(.outer后面的所有div)

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

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

1.5 表单选择器      $("[type='text']") 简写成 $(":text")                    注意只适用于input标签

2 筛选器

2.1  过滤筛选器

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

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() (同辈元素不包括自己)

二、操作元素

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

2 CSS操作

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

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

(尺寸)  innerHeight()不包含边框， outerHeight()包含边框， 两个都包含padding height()不包含边框

3 文档处理

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

prepend()    prependTo()

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

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

4 事件

4.1

$(document).ready(function(){}) -----------> $(function(){})  最好都加上这一句(所有文档执行完，但是图片没加载)

4.2

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

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

$("ul").delegate("li","click",function(){})　　// 事件委托，这里需要重点注意下

三、jquery所有示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>leftMenu</title>
  6.     <script src="../jquery-1.12.4.js"></script>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         .outer {
  14.         }
  15.  
  16.         .menu {
  17.             width: 20%;
  18.             background-color: blueviolet;
  19.             float: left;
  20.         }
  21.  
  22.         .content {
  23.             width: 80%;
  24.             height: 500px;
  25.             background-color: blue;
  26.             float: left;
  27.         }
  28.  
  29.         .active {
  30.             background-color: chartreuse;
  31.             color: white;
  32.         }
  33.  
  34.         .hide {
  35.             display: none;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40. <div class="outer">
  41.     <div class="menu">
  42.         <div class="item">
  43.             <div itemcon="1" class="title active" >菜单一</div>
  44.             <div class="con">
  45.                 <div>111</div>
  46.                 <div>111</div>
  47.                 <div>111</div>
  48.             </div>
  49.         </div>
  50.         <div class="item">
  51.             <div itemcon="2" class="title" >菜单二</div>
  52.             <div class="con hide">
  53.                 <div>222</div>
  54.                 <div>222</div>
  55.                 <div>222</div>
  56.             </div>
  57.         </div>
  58.         <div class="item">
  59.             <div itemcon="3" class="title" >菜单三</div>
  60.             <div class="con hide">
  61.                 <div>333</div>
  62.                 <div>333</div>
  63.                 <div>333</div>
  64.             </div>
  65.         </div>
  66.     </div>
  67.     <div class="content">
  68.         <div id="1">content1</div>
  69.         <div id="2" class="hide">content2</div>
  70.         <div id="3" class="hide">content3</div>
  71.     </div>
  72. </div>
  73.  
  74. <script>
  75.     $(function () {
  76.         $(".item .title").click(function () {       //绑定事件
  77.             $(this).addClass('active').siblings().removeClass('hide');
  78.             $(this).parent().siblings().find('.con').addClass('hide');
  79.             $(this).parent().siblings().find('.title').removeClass('active');
  80.  
  81.             //下面操作对应点击哪项菜单显示相应内容
  82.             var con = $(this).attr('itemcon');
  83.             $("#" + con).removeClass('hide').siblings().addClass('hide'); //为什么要拼接
  84.         })
  85.     });
  86.  
  87. </script>
  88. </body>
  89. </html>
  90.  
  91. 菜单内容隐藏以及相应菜单显示相应文本内容
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.12.4.js"></script>
  7. </head>
  8. <body>
  9.     <button id="selectAll">全选</button>
  10.     <button id="reverseAll">反选</button>
  11.     <button id="cancleAll">取消</button>
  12.     <table>
  13.         <tr>
  14.             <td><input type="checkbox"></td>
  15.             <td>1111</td>
  16.         </tr>
  17.          <tr>
  18.             <td><input type="checkbox"></td>
  19.             <td>1111</td>
  20.         </tr>
  21.          <tr>
  22.             <td><input type="checkbox"></td>
  23.             <td>1111</td>
  24.         </tr>
  25.     </table>
  26.     <script>
  27.         $(function () {
  28.            $("#selectAll").click(function () {
  29.                $("table :checkbox").prop('checked',true)
  30.            });
  31.  
  32.            $("#cancleAll").click(function () {
  33.               $("table :checkbox").prop('checked',false)
  34.            });
  35.  
  36.            $("#reverseAll").click(function () {
  37.                $("table :checkbox").each(function () {
  38.                 if($(this).prop('checked')){
  39.                     $(this).prop('checked',false);
  40.                 }else {
  41.                     $(this).prop('checked',true);
  42.                 }
  43.             });
  44.            })
  45.         });
  46.  
  47.     </script>
  48. </body>
  49. </html>
  50.  
  51. 全选反选取消事例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .container{
  12.             background-color: cornflowerblue;
  13.             width: 100%;
  14.         }
  15.         .content{
  16.             background-color: aqua;
  17.             min-height: 1000px;
  18.             width: 800px;
  19.             margin: 0 auto;
  20.         }
  21.         .retTop{
  22.             width: 35px;
  23.             height: 35px;
  24.             position: fixed;
  25.             right: 0;
  26.             bottom: 0;
  27.             background-color: chartreuse;
  28.         }
  29.         .hide{
  30.             display: none;
  31.         }
  32.     </style>
  33.     <script src="jquery-1.12.4.js"></script>
  34.  
  35. </head>
  36. <body>
  37.     <div class="container">
  38.         <div class="content"></div>
  39.         <div class="retTop">
  40.             返回顶部
  41.         </div>
  42.     </div>
  43.  
  44.     <script>
  45.  
  46.         $(function () {
  47.             window.onscroll = function () {
  48.                 var scrollHeight = $(window).scrollTop();
  49.                 if(scrollHeight<100){
  50.                     $(".retTop").addClass('hide');
  51.                 }else {
  52.                     $(".retTop").removeClass('hide')
  53.                 }
  54.             };
  55.  
  56.             $(".retTop").click(function () {
  57.                 $(window).scrollTop(0);
  58.             })
  59.         })
  60.     </script>
  61. </body>
  62. </html>
  63.  
  64. 返回顶部
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.12.4.js"></script>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             border: 0;
  11.         }
  12.         .header{
  13.             width: 100%;
  14.             height: 50px;
  15.             background-color: black;
  16.         }
  17.         .container{
  18.             width: 960px;
  19.             margin: 0 auto;
  20.             /*position: relative;*/
  21.         }
  22.         .leftmenu{
  23.             width: 250px;
  24.             min-height: 400px;
  25.             background-color: chartreuse;
  26.             position: absolute;             // 想下为什么不能用relative
  27.             left: 200px;
  28.             top: 50px;
  29.         }
  30.         .content{
  31.             width: 600px;
  32.             min-height: 900px;
  33.             background-color: cornflowerblue;
  34.             position: absolute;
  35.             left: 382px;
  36.             top:50px;
  37.         }
  38.         ul{
  39.             list-style: none;
  40.         }
  41.         .content div{
  42.             height: 800px;
  43.             border: 1px solid black;
  44.         }
  45.         .fixed{
  46.             position: fixed;
  47.             top:0;
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <div class="header"></div>
  53.     <div class="container">
  54.         <div class="leftmenu">
  55.             <ul>
  56.                 <li id="item1">第一章</li>
  57.                 <li id="item2">第二章</li>
  58.                 <li id="item3">第三章</li>
  59.             </ul>
  60.         </div>
  61.         <div class="content">
  62.             <div class="item1">111</div>
  63.             <div class="item2">222</div>
  64.             <div class="item3" style="height: 100px">333</div>
  65.         </div>
  66.     </div>
  67.  
  68.     <script>
  69.         $(function () {
  70.             window.onscroll = function () {
  71.                 var scrollHeight = $(window).scrollTop();
  72.  
  73.                 if(scrollHeight>50){
  74.                     $(".leftmenu").addClass('fixed');
  75.                 }else {
  76.                     $(".leftmenu").removeClass('fixed');
  77.                 }
  78.  
  79.                 $('.content').children().each(function () {
  80.                     if(scrollHeight>$(this).offset().top){
  81.                         var iditem = $(this).attr("class");
  82.                         console.log($(this));
  83.                         $("#"+iditem).css("fontSize","40px").siblings().css("fontSize","12px");
  84.                     }
  85.                     console.log(scrollHeight,$(this).offset().top,$(this).outerHeight(),$(window).height());
  86.                 });
  87.  
  88.                 if(scrollHeight+$(window).height() ==$(".content div:last-child").offset().top +$(".content div:last-child").outerHeight()){
  89.                         $("ul li:last-child").css("fontSize","40px").siblings().css("fontSize","12px");
  90.                     }
  91.             };
  92.  
  93.         })
  94.     </script>
  95. </body>
  96. </html>
  97.  
  98. 随着滚动条的移动相应的内容对应相应的菜单
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul{
  12.             list-style: none;
  13.         }
  14.         .outer{
  15.             position: relative;
  16.             width: 310px;
  17.             height: 310px;
  18.             margin: 20px auto;
  19.         }
  20.         .image{
  21.             position: relative;
  22.         }
  23.         .image img{
  24.             height: 310px;
  25.             width: 310px;
  26.             position: absolute;
  27.             border: dashed blue 1px;
  28.             top: 0;
  29.             left: 0;
  30.         }
  31.         .num{
  32.             position: absolute;
  33.             bottom:0;
  34.             left:100px;
  35.         }
  36.         .num li{
  37.             display: inline-block;
  38.             height: 20px;
  39.             width: 20px;
  40.             /*background-color: #3c763d;*/
  41.             border-radius: 50%;
  42.             text-align: center;
  43.             line-height: 20px;
  44.             cursor: pointer;
  45.  
  46.         }
  47.  
  48.         .position{
  49.             width: 310px;
  50.             position: absolute;
  51.             top:50%;
  52.             margin-top: -15px;
  53.             left: 0;
  54.         }
  55.  
  56.         .position button{
  57.             display: block;
  58.             width: 30px;
  59.             height: 30px;
  60.             background-color:burlywood ;
  61.             opacity: 0.6;
  62.             border: 0;
  63.  
  64.             display: none;
  65.         }
  66.  
  67.         .outer:hover .position button{
  68.             display: block;
  69.         }
  70.         .left{
  71.             float: left;
  72.         }
  73.         .right{
  74.             float: right;
  75.         }
  76.         .active{
  77.             background-color: black;
  78.         }
  79.     </style>
  80.  
  81.     <script src="jquery-1.12.4.js"></script>
  82.     <script>
  83.         $(function () {
  84.             $(".num li").first().addClass("active");
  85.             console.log( $(".num li"));
  86.             $(".num li").mouseover(function () {
  87.                 console.log(this);
  88.                 $(this).addClass("active").siblings().removeClass("active");
  89.                 var index = $(this).index();
  90.                 i = index;
  91.                 $(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
  92.             });
  93.  
  94.             var i = 0;
  95.             function autoMove() {
  96.                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  97.                 $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  98.                 i++;
  99.                 if(i==5){
  100.                     i = 0;
  101.                 }
  102.             }
  103.  
  104.             var t1 = setInterval(autoMove,1000);
  105.  
  106.             $(".outer").hover(function () {
  107.                 clearInterval(t1);
  108.             },function () {
  109.                 t1 = setInterval(autoMove,1000);
  110.             });
  111.  
  112.             $(".right").click(function () {
  113.                 autoMove();
  114.             });
  115.  
  116.             $(".left").click(function () {
  117.                 i--;
  118.                 if(i==-1){
  119.                     i = 4;
  120.                 }
  121.                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  122.                 $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  123.             })
  124.         })
  125.     </script>
  126. </head>
  127. <body>
  128.     <div class="outer">
  129.         <div class="image">
  130.             <img src="pic/a.png">
  131.             <img src="pic/1.jpeg">
  132.             <img src="pic/2.jpeg">
  133.             <img src="pic/3.jpeg">
  134.             <img src="pic/4.jpeg">
  135.         </div>
  136.         <div class="num">
  137.             <ul>
  138.                 <li>1</li>
  139.                 <li>2</li>
  140.                 <li>3</li>
  141.                 <li>4</li>
  142.                 <li>5</li>
  143.             </ul>
  144.         </div>
  145.         <div class="position">
  146.             <button class="left"> < </button>
  147.             <button class="right"> > </button>
  148.         </div>
  149.     </div>
  150. </body>
  151. </html>
  152.  
  153. 轮播图
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul{
  12.             list-style: none;
  13.         }
  14.         .outer{
  15.             position: relative;
  16.             width: 310px;
  17.             height: 310px;
  18.             margin: 20px auto;
  19.         }
  20.         .image{
  21.             position: relative;
  22.         }
  23.         .image img{
  24.             height: 310px;
  25.             width: 310px;
  26.             position: absolute;
  27.             border: dashed blue 1px;
  28.             top: 0;
  29.             left: 0;
  30.         }
  31.         .num{
  32.             position: absolute;
  33.             bottom:0;
  34.             left:100px;
  35.         }
  36.         .num li{
  37.             display: inline-block;
  38.             height: 20px;
  39.             width: 20px;
  40.             /*background-color: #3c763d;*/
  41.             border-radius: 50%;
  42.             text-align: center;
  43.             line-height: 20px;
  44.             cursor: pointer;
  45.  
  46.         }
  47.  
  48.         .position{
  49.             width: 310px;
  50.             position: absolute;
  51.             top:50%;
  52.             margin-top: -15px;
  53.             left: 0;
  54.         }
  55.  
  56.         .position button{
  57.             display: block;
  58.             width: 30px;
  59.             height: 30px;
  60.             background-color:burlywood ;
  61.             opacity: 0.6;
  62.             border: 0;
  63.  
  64.             display: none;
  65.         }
  66.  
  67.         .outer:hover .position button{
  68.             display: block;
  69.         }
  70.         .left{
  71.             float: left;
  72.         }
  73.         .right{
  74.             float: right;
  75.         }
  76.         .active{
  77.             background-color: black;
  78.         }
  79.     </style>
  80.  
  81.     <script src="jquery-1.12.4.js"></script>
  82.     <script>
  83.         $(function () {
  84.             $(".num li").first().addClass("active");
  85.             console.log( $(".num li"));
  86.             $(".num li").mouseover(function () {
  87.                 console.log(this);
  88.                 $(this).addClass("active").siblings().removeClass("active");
  89.                 var index = $(this).index();
  90.                 i = index;
  91.                 $(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
  92.             });
  93.  
  94.             var i = 0;
  95.             function autoMove() {
  96.                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  97.                 $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  98.                 i++;
  99.                 if(i==5){
  100.                     i = 0;
  101.                 }
  102.             }
  103.  
  104.             var t1 = setInterval(autoMove,1000);
  105.  
  106.             $(".outer").hover(function () {
  107.                 clearInterval(t1);
  108.             },function () {
  109.                 t1 = setInterval(autoMove,1000);
  110.             });
  111.  
  112.             $(".right").click(function () {
  113.                 autoMove();
  114.             });
  115.  
  116.             $(".left").click(function () {
  117.                 i--;
  118.                 if(i==-1){
  119.                     i = 4;
  120.                 }
  121.                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  122.                 $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  123.             })
  124.         })
  125.     </script>
  126. </head>
  127. <body>
  128.     <div class="outer">
  129.         <div class="image">
  130.             <img src="pic/a.png">
  131.             <img src="pic/1.jpeg">
  132.             <img src="pic/2.jpeg">
  133.             <img src="pic/3.jpeg">
  134.             <img src="pic/4.jpeg">
  135.         </div>
  136.         <div class="num">
  137.             <ul>
  138.                 <li>1</li>
  139.                 <li>2</li>
  140.                 <li>3</li>
  141.                 <li>4</li>
  142.                 <li>5</li>
  143.             </ul>
  144.         </div>
  145.         <div class="position">
  146.             <button class="left"> < </button>
  147.             <button class="right"> > </button>
  148.         </div>
  149.     </div>
  150. </body>
  151. </html>
  152.  
  153. 模态对话框
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.     * {
  9.         margin: 0;
  10.         padding: 0;
  11.     }
  12.  
  13.     .hide {
  14.         display: none;
  15.     }
  16.  
  17.     .header-nav {
  18.         height: 39px;
  19.         background: #c9033b;
  20.     }
  21.  
  22.     .header-nav .bg {
  23.         background: #c9033b;
  24.     }
  25.  
  26.     .header-nav .nav-allgoods .menuEvent {
  27.         display: block;
  28.         height: 39px;
  29.         line-height: 39px;
  30.         text-decoration: none;
  31.         color: #fff;
  32.         text-align: center;
  33.         font-weight: bold;
  34.         font-family: 微软雅黑;
  35.         color: #fff;
  36.         width: 100px;
  37.     }
  38.  
  39.     .header-nav .nav-allgoods .menuEvent .catName {
  40.         height: 39px;
  41.         line-height: 39px;
  42.         font-size: 15px;
  43.     }
  44.  
  45.     .header-nav .nav-allmenu a {
  46.         display: inline-block;
  47.         height: 39px;
  48.         vertical-align: top;
  49.         padding: 0 15px;
  50.         text-decoration: none;
  51.         color: #fff;
  52.         float: left;
  53.     }
  54.  
  55.     .header-menu a {
  56.         color: #656565;
  57.     }
  58.  
  59.     .header-menu .menu-catagory {
  60.         position: absolute;
  61.         background-color: #fff;
  62.         border-left: 1px solid #fff;
  63.         height: 316px;
  64.         width: 230px;
  65.         z-index: 4;
  66.         float: left;
  67.     }
  68.  
  69.     .header-menu .menu-catagory .catagory {
  70.         border-left: 4px solid #fff;
  71.         height: 104px;
  72.         border-bottom: solid 1px #eaeaea;
  73.     }
  74.  
  75.     .header-menu .menu-catagory .catagory:hover {
  76.         height: 102px;
  77.         border-left: 4px solid #c9033b;
  78.         border-bottom: solid 1px #bcbcbc;
  79.         border-top: solid 1px #bcbcbc;
  80.     }
  81.  
  82.     .header-menu .menu-content .item {
  83.         margin-left: 230px;
  84.         position: absolute;
  85.         background-color: white;
  86.         height: 314px;
  87.         width: 500px;
  88.         z-index: 4;
  89.         float: left;
  90.         border: solid 1px #bcbcbc;
  91.         border-left: 0;
  92.         box-shadow: 1px 1px 5px #999;
  93.     }
  94.  
  95. </style>
  96.  
  97. <body>
  98.  
  99. <div class="pg-header">
  100.     <div class="header-nav">
  101.         <div class="container narrow bg">
  102.             <div class="nav-allgoods left">
  103.                 <a id="all_menu_catagory" href="#" class="menuEvent">
  104.                     <strong class="catName">全部商品分类<>
  105.                         <span class="arrow" style="display: inline-block;vertical-align: top;"></span>
  106.                 </a>
  107.             </div>
  108.         </div>
  109.     </div>
  110.     <div class="header-menu">
  111.         <div class="container narrow hide">
  112.             <div id="nav_all_menu" class="menu-catagory">
  113.                 <div class="catagory" float-content="one">
  114.                     <div class="title">家电</div>
  115.                     <div class="body">
  116.                         <a href="#">空调</a>
  117.                     </div>
  118.                 </div>
  119.                 <div class="catagory" float-content="two">
  120.                     <div class="title">床上用品</div>
  121.                     <div class="body">
  122.                         <a href="http://www.baidu.com">床单</a>
  123.                     </div>
  124.                 </div>
  125.                 <div class="catagory" float-content="three">
  126.                     <div class="title">水果</div>
  127.                     <div class="body">
  128.                         <a href="#">橘子</a>
  129.                     </div>
  130.                 </div>
  131.             </div>
  132.  
  133.             <div id="nav_all_content" class="menu-content">
  134.                 <div class="item hide" float-id="one">
  135.  
  136.                     <dl>
  137.                         <dt><a href="#" class="red">厨房用品</a></dt>
  138.                         <dd>
  139.                             <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
  140.                         </dd>
  141.                         <>
  142.                         <dl>
  143.                             <dt><a href="#" class="red">厨房用品</a></dt>
  144.                             <dd>
  145.                                 <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>
  146.  
  147.                             </dd>
  148.                             <>
  149.                             <dl>
  150.                                 <dt><a href="#" class="red">厨房用品</a></dt>
  151.                                 <dd>
  152.                                     <span>| <a href="#">菜板</a> </span>
  153.                                 </dd>
  154.                                 <>
  155.                                 <dl>
  156.                                     <dt><a href="#" class="red">厨房用品</a></dt>
  157.                                     <dd>
  158.                                         <span>| <a href="#" target="_blank" title="碗">碗</a> </span>
  159.  
  160.                                     </dd>
  161.                                     <>
  162.  
  163.                 </div>
  164.                 <div class="item hide" float-id="two">
  165.                     <dl>
  166.                         <dt><a href="#" class="red">厨房用品</a></dt>
  167.                         <dd>
  168.                             <span>| <a href="#" target="_blank" title="">角阀</a> </span>
  169.  
  170.                         </dd>
  171.                         <>
  172.                         <dl>
  173.                             <dt><a href="#" class="red">厨房用品</a></dt>
  174.                             <dd>
  175.                                 <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>
  176.  
  177.                             </dd>
  178.                             <>
  179.                             <dl>
  180.                                 <dt><a href="#" class="red">厨房用品</a></dt>
  181.                                 <dd>
  182.                                     <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>
  183.  
  184.                                 </dd>
  185.                                 <>
  186.  
  187.                 </div>
  188.                 <div class="item hide" float-id="three">
  189.                     <dl>
  190.                         <dt><a href="#" class="red">厨房用品3</a></dt>
  191.                         <dd>
  192.                             <span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span>
  193.  
  194.                         </dd>
  195.                         <>
  196.                         <dl>
  197.                             <dt><a href="#" class="red">厨房用品3</a></dt>
  198.                             <dd>
  199.                             <span>| <a href="http://www.meilele.com/category-jiaofa/
  200.  
  201. " target="_blank" title="角阀">角阀3</a> </span>
  202.  
  203.                             </dd>
  204.                             <>
  205.                 </div>
  206.             </div>
  207.         </div>
  208.     </div>
  209. </div>
  210.     <script src="jquery-1.12.4.js"></script>
  211.     <script>
  212.         $(function () {
  213.             init("#all_menu_catagory","#nav_all_menu","#nav_all_content");
  214.         });
  215.  
  216.         function init(mFirst,mSecond,mThird) {
  217.             $(mFirst).mouseover(function () {
  218.                 $(mSecond).parent().removeClass('hide');
  219.             });
  220.             $(mFirst).mouseout(function () {
  221.                 $(mSecond).parent().addClass('hide');
  222.             });
  223.  
  224.             $(mSecond).children().mouseover(function () {
  225.                 $(mSecond).parent().removeClass('hide');
  226.                 var floatvar = $(this).attr("float-content");
  227.                 var floatstr = "[float-id=" + floatvar + "]";
  228.                 $(mThird).find(floatstr).removeClass('hide').siblings().addClass('hide')
  229.             });
  230.  
  231.             $(mSecond).mouseout(function () {
  232.                 $(this).parent().addClass('hide');
  233.                 $(mThird).children().addClass('hide');
  234.             });
  235.  
  236.             $(mThird).children().mouseover(function () {
  237. //                $(mSecond).parent().removeClass('hide');
  238.                 $(this).removeClass('hide')
  239.             });
  240.  
  241.             $(mThird).children().mouseout(function () {
  242. //                $(mSecond).parent().addClass('hide');
  243.                 $(this).addClass('hide')
  244.             })
  245.         }
  246.     </script>
  247. </body>
  248. </html>
  249.  
  250. 商城三层菜单
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.12.4.js"></script>
  7.     <style>
  8.         table {
  9.             margin-top: 40px;
  10.         }
  11.  
  12.         table, td {
  13.             border: 1px solid black;
  14.         }
  15.  
  16.         a {
  17.             display: inline-block;
  18.             background-color: #bce8f1;
  19.             width: 100px;
  20.             height: 21px;
  21.             text-decoration: none;
  22.             cursor: pointer;
  23.         }
  24.  
  25.         .red {
  26.             background-color: red;
  27.         }
  28.  
  29.     </style>
  30. </head>
  31. <body>
  32. <button id="checkAll">全选</button>
  33. <button id="checkReverse">反选</button>
  34. <button id="checkCancle">取消</button>
  35. <a id="edit_mode">进入编辑模式</a>
  36.  
  37. <table >
  38.     <thead>
  39.         <tr>
  40.             <th>选择</th>
  41.             <th>主机名</th>
  42.             <th>端口</th>
  43.             <th>状态</th>
  44.         </tr>
  45.     </thead>
  46.     <tbody id="tb">
  47.         <tr>
  48.             <td><input type="checkbox"></td>
  49.             <td edit="true">v1</td>
  50.  
  51.             <td>88</td>
  52.             <td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
  53.         </tr>
  54.  
  55.         <tr>
  56.             <td><input type="checkbox"></td>
  57.             <td edit="true">v1</td>
  58.  
  59.             <td>88</td>
  60.             <td edit="true" edit_type="select" sel-val="2" global-key="STATUS">下线</td>
  61.         </tr>
  62.  
  63.         <tr>
  64.             <td><input type="checkbox"></td>
  65.             <td edit="true">v1</td>
  66.  
  67.             <td>88</td>
  68.             <td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
  69.         </tr>
  70.     </tbody>
  71. </table>
  72. <script>
  73.     $(function () {
  74.         main('#edit_mode','#tb');
  75.     });
  76.  
  77.     STATUS = [
  78.         {'id': 1, 'value': "在线"},
  79.         {'id': 2, 'value': "下线"}
  80.     ];
  81.  
  82.     window.globalCtrlKeyPress = false;
  83.  
  84.     function main(edit,tb) {
  85.         bindSingleCheck(edit,tb);
  86.         bindEditMode(edit,tb);
  87.         bindCheckAll(edit,tb);
  88.         bindCheckCancle(edit,tb);
  89.         bindCheckReverse(edit,tb);
  90.     }
  91.  
  92.     function bindSingleCheck(edit,tb) {
  93.         $(tb).find(":checkbox").click(function () {
  94.             var $tr = $(this).parent().parent();
  95.             if($(edit).hasClass('editing')){
  96.                 if($(this).prop('checked')){
  97.                     RowIntoEdit($tr);
  98.                 }else {
  99.                     RowOutEdit($tr);
  100.                 }
  101.             }
  102.         })
  103.     }
  104.  
  105.     function bindEditMode(edit,tb) {
  106.         $(edit).click(function () {
  107.             if($(this).hasClass('editing')){
  108.                 $(this).removeClass('editing red');
  109.                 $(tb).children().each(function () {
  110.                     var check_box = $(this).children().find(":checkbox");
  111.                     if(check_box.prop('checked')){
  112.                         RowOutEdit($(this));
  113.                     }else {
  114.  
  115.                     }
  116.                 });
  117.             }else {
  118.                 $(this).addClass('editing red');
  119.                 $(tb).children().each(function () {
  120.                     var check_box = $(this).children().find(":checkbox");
  121.                     if(check_box.prop('checked')){
  122.                         RowIntoEdit($(this));
  123.                     }else {
  124.  
  125.                     }
  126.                 })
  127.             }
  128.         });
  129.     }
  130.  
  131.     function bindCheckAll(edit,tb) {
  132.         $("#checkAll").click(function () {
  133.             if($(edit).hasClass("editing")){
  134.                 $(tb).children().each(function () {
  135.                     var check_box = $(this).children().find(":checkbox");
  136.                     if(check_box.prop('checked')){
  137.  
  138.                     }else {
  139.                         check_box.prop('checked',true);
  140.                         RowIntoEdit($(this));
  141.                     }
  142.                 })
  143.             }else {
  144.                 $(tb).find(':checkbox').prop('checked', true);
  145.             }
  146.         });
  147.     }
  148.  
  149.     function bindCheckReverse(edit,tb) {
  150.         $("#checkReverse").click(function () {
  151.             if($(edit).hasClass("editing")){
  152.                 $(tb).children().each(function () {
  153.                     var check_box = $(this).children().find(":checkbox");
  154.                     if(check_box.prop('checked')){
  155.                         check_box.prop('checked',false);
  156.                         RowOutEdit($(this));
  157.                     }else {
  158.                         check_box.prop('checked',true);
  159.                         RowIntoEdit($(this));
  160.                     }
  161.                 })
  162.             }else {
  163.                 $(tb).children().each(function(){
  164.                     var check_box = $(this).children().find(':checkbox');
  165.                     if(check_box.prop('checked')){
  166.                         check_box.prop('checked',false);
  167.                     }else{
  168.                         check_box.prop('checked',true);
  169.                     }
  170.                 });
  171.             }
  172.         });
  173.     }
  174.  
  175.     function bindCheckCancle(edit,tb) {
  176.         $("#checkCancle").click(function () {
  177.             if($(edit).hasClass("editing")){
  178.                 $(tb).children().each(function () {
  179.                     var check_box = $(this).children().find(":checkbox");
  180.                     if(check_box.prop('checked')){
  181.                         check_box.prop('checked',false);
  182.                         RowOutEdit($(this));
  183.                     }else {
  184.  
  185.                     }
  186.                 })
  187.             }else {
  188.                 $(tb).find(':checkbox').prop('checked',false);
  189.             }
  190.         });
  191.     }
  192.  
  193.     function RowIntoEdit($tr) {
  194.         $tr.children().each(function () {
  195.             if($(this).attr('edit') == 'true'){
  196.                 if($(this).attr('edit_type') == "select"){
  197.                     var select_val = $(this).attr('sel-val');
  198.                     var global_key = $(this).attr('global-key');
  199.                     var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
  200.                     $(this).html(selelct_tag);
  201.                 }else {
  202.                     var orgin_value = $(this).text();
  203.                     var temp = "<input value='"+ orgin_value+"' />";
  204.                     $(this).html(temp);
  205.                 }
  206.             }
  207.         })
  208.     }
  209.  
  210.     function RowOutEdit($tr) {
  211.         $tr.children().each(function () {
  212.             if($(this).attr('edit')=='true'){
  213.                 if($(this).attr('edit_type') == "select"){
  214.                     var new_val = $(this).children(':first').val();
  215.                     var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
  216.                     $(this).attr('sel-val', new_val).text(new_text);
  217.                 }else {
  218.                     var orgin_value = $(this).children().first().val();
  219.                     $(this).text(orgin_value);
  220.                 }
  221.             }
  222.         })
  223.     }
  224.  
  225.     function CreateSelect(attrs, csss, option_dict, item_key, item_value, current_val) {
  226.         var sel = document.createElement('select');
  227.  
  228.         //设置属性
  229.         $.each(attrs,function (k,v) {
  230.             $(sel).attr(k,v);
  231.         });
  232.  
  233.         //设置样式 这里为空，以后可以设置
  234.         $.each(csss,function (k,v) {
  235.             $(sel).css(k,v);
  236.         });
  237.  
  238.         $.each(option_dict,function (k,v) {
  239.             var opt = document.createElement('option');
  240.             var sel_text = v[item_value];
  241.             var sel_value = v[item_key];
  242.  
  243.             if(current_val == sel_value){
  244.                 $(opt).text(sel_text).attr('value',sel_value).attr('selected','true').appendTo($(sel));
  245.             }else {
  246.                 $(opt).text(sel_text).attr('value',sel_value).appendTo($(sel));
  247.             }
  248.         });
  249.         return sel;
  250.     }
  251.  
  252.     window.onkeydown = function (e) {
  253.         if(e && e.keyCode == 17){
  254.             window.globalCtrlKeyPress = true;
  255.         }
  256.     };
  257.  
  258.     window.onkeyup = function (e) {
  259.         if(e && e.keyCode == 17){
  260.             window.globalCtrlKeyPress = false;
  261.         }
  262.     };
  263.  
  264.     function MultiSelect(ths) {
  265.         if(window.globalCtrlKeyPress == true){
  266.             var index = $(ths).parent().index();
  267.             var value = $(ths).val();
  268.             console.log(value,index);
  269.             $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
  270.                 $(this).parent().parent().children().eq(index).children().val(value);
  271.             });
  272.         }
  273.     }
  274.  
  275. </script>
  276. </body>
  277. </html>
  278.  
  279. 编辑框(需要重点掌握)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .inline {
  8.             display: inline-block;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <div class="container">
  14.     <div class="section">
  15.         <div class="button inline">
  16.             <a id="origin">
  17.                 <button>+</button>
  18.             </a>
  19.             <div class="input inline">
  20.                 <input type="checkbox">
  21.                 <input type="text" value="IP">
  22.             </div>
  23.         </div>
  24.     </div>
  25. </div>
  26. <script src="jquery-1.12.4.js"></script>
  27. <script>
  28.     $(function () {
  29.         $("#origin").click(function () {
  30.             var origin = $(this).parent().parent().clone();
  31.             origin.find('a').removeAttr('id').attr("onclick", "myremove(this);").children().text('-');
  32.             $(".container").append(origin);
  33.         });
  34.     })
  35.  
  36.      function myremove(self) {
  37.             console.log(11);
  38.             $(self).parent().parent().remove();
  39.         }
  40. </script>
  41. </body>
  42. </html>
  43.  
  44. 内容clone添加删除

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .container{
  12.             position: relative;
  13.         }
  14.         .small-box{
  15.             border: 5px solid red;
  16.             height: 350px;
  17.             width: 350px;
  18.             position: relative;
  19.         }
  20.         .big-box{
  21.             position: absolute;
  22.             width: 400px;
  23.             height: 400px;
  24.             left:360px;
  25.             top:0;
  26.             border: 5px solid black;
  27.             overflow: hidden;
  28.         }
  29.         .hide{
  30.             display: none;
  31.         }
  32.         .small-box .float{
  33.             width: 175px;
  34.             height: 175px;
  35.             background-color: grey;
  36.             position: absolute;
  37.             opacity: 0.8;
  38.         }
  39.         .big-box img{
  40.             position: absolute;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="small-box">
  47.             <div class="float hide"></div>
  48.             <img src="pic/small.jpg">
  49.         </div>
  50.  
  51.         <div class="big-box hide">
  52.             <img src="pic/big.jpg">
  53.         </div>
  54.     </div>
  55.  
  56. <script src="jquery-1.12.4.js"></script>
  57. <script>
  58.     $(function () {
  59.         $(".small-box").mouseover(function () {
  60.             $(this).children('.float').removeClass('hide').parent().next().removeClass('hide');
  61.         });
  62.  
  63.         $(".small-box").mouseout(function () {
  64.             $(this).children('.float').addClass('hide').parent().next().addClass('hide');
  65.         });
  66.  
  67.         $(".float").mousemove( function (e) {
  68.             var _event = e || window.event;
  69.  
  70.             var small_box_width = $(".small-box").width();
  71.             var small_box_height = $(".small-box").height();
  72.  
  73.             var float_height = $('.float').height();
  74.             var float_width = $(".float").width();
  75.  
  76.             var float_height_half = float_height/2;
  77.             var float_width_half = float_width/2;
  78.  
  79.             var float_right = _event.clientX- float_width_half;
  80.             var float_top = _event.clientY - float_height_half;
  81.  
  82.             if(float_right<0){
  83.                 float_right = 0;
  84.             }else if(float_right>small_box_width-float_width){
  85.                 float_right=small_box_width-float_width
  86.             }
  87.             if(float_top<0){
  88.                 float_top=0;
  89.             }else if(float_top>small_box_height-float_height){
  90.                 float_top=small_box_height-float_height
  91.             }
  92.  
  93.             $(".float").css({"left":float_right+"px","top":float_top+"px"});
  94.  
  95.             var percentX=($(".big-box img").width()-$(".big-box").width())/ (small_box_width-float_width);
  96.             var percentY=($(".big-box img").height()-$(".big-box").height())/(small_box_height-float_height);
  97.  
  98.             $(".big-box img").css({"left":-percentX*float_right+"px","top":-percentY*float_top+"px"});
  99.         })
  100.  
  101.     })
  102. </script>
  103. </body>
  104. </html>
  105.  
  106. 放大镜
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
  9.         <div id="title" style="background-color: black;height: 40px;color: white;">
  10.             标题
  11.         </div>
  12.         <div style="height: 300px;">
  13.             内容
  14.         </div>
  15.     </div>
  16.  
  17.     <script src="jquery-1.12.4.js"></script>
  18.     <script>
  19.         $("#title").mouseover(function () {
  20.             $(this).css('cursor','move');
  21.         }).mousedown(function (e) {
  22.             var _event = e||window.event;
  23.             var old_x = _event.clientX;
  24.             var old_y = _event.clientY;
  25.  
  26.             var parent_left = $(this).parent().offset().left;
  27.             var parent_top = $(this).parent().offset().top;
  28.  
  29.             $(this).mousemove(function (e) {
  30.                 var _new_event = e || window.event;
  31.                 var new_x = _new_event.clientX;
  32.                 var new_y = _new_event.clientY;
  33.  
  34.                 var x = new_x - old_x + parent_left;
  35.                 var y = new_y - old_y + parent_top;
  36.  
  37.                 $(this).parent().css({"left":x+"px","top":y+"px"})
  38.             }).mouseup(function () {
  39.                 $(this).unbind('mousemove');
  40.             })
  41.         })
  42.     </script>
  43. </body>
  44. </html>
  45.  
  46. 拖动面板
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.12.4.js"></script>
  7.     <script>
  8.         $(function () {
  9.             jQuery.fn.extend({
  10.                 show1:function () {
  11.                     var ret = this.text();
  12.                     return ret+ "sb";
  13.                 },
  14.             });
  15.  
  16.             jQuery.extend({
  17.                 show2:function (arg) {
  18.                    return $(arg).text()+"sb"
  19.                 }
  20.             });
  21.  
  22.             ret = $(".title").show1();
  23.             console.log(ret);
  24. //            alert(ret);
  25.  
  26.             ret2 = $.show2(".title");
  27.             console.log(ret2);
  28.         });
  29.     </script>
  30. </head>
  31. <body>
  32.     <div class="title">
  33.         111
  34.     </div>
  35.     <div class="title">
  36.         2222
  37.     </div>
  38. </body>
  39. </html>
  40.  
  41. extend以及fn.extend
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.12.4.js"></script>
  7.     <script>
  8.  
  9.         $(document).ready(function () {
  10.             $("button").click(function () {
  11.                 $("p").hide(1000,call_back());
  12.  
  13.             })
  14.         });
  15.         function call_back() {
  16.             alert('sss')
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21. <button>隐藏</button>
  22. <p>hello</p>
  23.  
  24. </body>
  25. </html>
  26.  
  27. 回掉函数

　　

　　

　　

　　

Python全栈开发之16、jquery的更多相关文章

  1. 战争热诚的python全栈开发之路

    从学习python开始,一直是自己摸索,但是时间不等人啊,所以自己为了节省时间,决定报个班系统学习,下面整理的文章都是自己学习后,认为重要的需要弄懂的知识点,做出链接,一方面是为了自己找的话方便,一方 ...

  2. python全栈开发之OS模块的总结

    OS模块 1. os.name()      获取当前的系统 2.os.getcwd      #获取当前的工作目录 import os cwd=os.getcwd() # dir=os.listdi ...

  3. Python全栈开发之MySQL（二）------navicate和python操作MySQL

    一:Navicate的安装 1.什么是navicate? Navicat是一套快速.可靠并价格相宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小 ...

  4. Python全栈开发之14、Javascript

    一.简介 前面我们学习了html和css,但是我们写的网页不能动起来,如果我们需要网页出现各种效果,那么我们就要学习一门新的语言了,那就是JavaScript,JavaScript是世界上最流行的脚本 ...

  5. Python全栈开发之1、输入输出与流程控制

    Python简介 python是吉多·范罗苏姆发明的一种面向对象的脚本语言,可能有些人不知道面向对象和脚本具体是什么意思,但是对于一个初学者来说,现在并不需要明白.大家都知道,当下全栈工程师的概念很火 ...

  6. Python全栈开发之21、django

    http://www.cnblogs.com/wupeiqi/articles/5237704.html http://www.cnblogs.com/wupeiqi/articles/5246483 ...

  7. Python全栈开发之MySQL（三）视图，存储过程触发器，函数，事务，索引

    一:视图 1:什么是视图? 视图是指存储在数据库中的查询的SQL语句,具有简单.安全.逻辑数据独立性的作用及视点集中简化操作定制数据安全性的优点.视图包含一系列带有名称的列和行数据.但是,视图并不在数 ...

  8. python全栈开发之路

    一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...

  9. Python全栈开发之5、模块

    一.模块 1.import导入模块 #1.定义 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑),本质就是.py结尾的python文件,实现一个功能 包:python package 用 ...

随机推荐

  1. 前端路由的两种模式： hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  2. Chrome浏览器F12讲解

    Chrome浏览器相对于其他的浏览器而言,DevTools(开发者工具)非常强大.这节课将为大家介绍怎么利用Chrome浏览器的开发者工具进行HTTP请求分析 Chrome浏览器讲解 Chrome 开 ...

  3. COGS 1516. 棋盘上的车

    COGS 1516. 棋盘上的车 http://www.cogs.pro/cogs/problem/problem.php?pid=1516 ☆   输入文件:rook.in   输出文件:rook. ...

  4. 戴尔PowerEdge R430 机架式服务器 安装ubuntu server 14.04.1 LTS 64 位

    硬件配置: 服务编号:5Z04X72 软件配置 1.Ubuntu 系统下载地址: https://certification.ubuntu.com/certification/hardware/201 ...

  5. Understanding the Bias-Variance Tradeoff

    Understanding the Bias-Variance Tradeoff When we discuss prediction models, prediction errors can be ...

  6. 20155330 2016-2017-2 《Java程序设计》第七周学习总结

    20155330 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 学习目标 了解Lambda语法 了解方法引用 了解Fucntional与Stream API ...

  7. Visual Studio 2010 SP1 在线安装后，找到缓存在本地的临时文件以便下次离线安装

    由于在下载Visual Studio 2010安装程序(大约3G左右)的时候速度飞快,大约几分钟下载完毕(多线程下载工具下载),所以笔者在继续安装Visual Studio 2010 SP1的时候也选 ...

  8. 小白欢乐多——记ssctf的几道题目

    小白欢乐多--记ssctf的几道题目 二哥说过来自乌云,回归乌云.Web400来源于此,应当回归于此,有不足的地方欢迎指出. 0x00 Web200 先不急着提web400,让我们先来看看web200 ...

  9. 【比赛游记】THUWC2019酱油记

    往期回顾:THUSC2018酱油记 day 0 早上 7 点的动车,不知道是从哪儿到哪儿的(雾),只知道从福建到广东 233333 一个值得思考的问题:福建人会不会被广东人吃啊? 动车上玩空洞骑士,可 ...

  10. Linux下如何在进程中获取虚拟地址对应的物理地址【转】

    转自:http://blog.csdn.net/kongkongkkk/article/details/74366200 如果让你编写一个程序,来获取虚拟地址对应的物理地址..你会试着操作MMU吗.. ...