Html5个人笔记总结

元素：

元素也被称为块元素，其主要的组合HTML元素的容器。
元素：元素是内联元素，可作为文本的容器。

18,HTML布局
①div布局
②table元素布局

19，表单用于获取不同类型的用户输入

20，常用表单标签

表单

输入域

文本域 
   </div> 
   <div style="background-color:inherit">
      <label> 控制标签 
   </div> 
   <div style="background-color:inherit">
      <fieldset> 定义域 
   </div> 
   <div style="background-color:inherit">
      <legend>  域的标题 
   </div> 
   <div style="background-color:inherit">
      <select>  选择列表 
   </div> 
   <div style="background-color:inherit">
      <optgroup> 选项组 
   </div> 
   <div style="background-color:inherit">
      <option>  下拉列表选项 
   </div> 
   <div style="background-color:inherit">
      <button>  按钮 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit">
     21，PHP环境搭建 
   </div> 
   <div style="background-color:inherit">
     网站： www.apachefriends.org 下载安装XAMPP 
   </div> 
   <div style="background-color:inherit">
     其中，运行 xx.hph的目录：/xampp/htdocs 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit">
     打开eclipse--help-->install new  software 
   </div> 
   <div style="background-color:inherit">
     输入： http://download.eclipse.org/releases 
   </div> 
   <div style="background-color:inherit">
     找到：Programming Languages-->PHP Development Tools (PDT) 
   </div> 
   <div style="background-color:inherit">
     安装后重起，open perspective-->PHP 
   </div> 
   <div style="background-color:inherit">
     新建工程-->（将工作空间变化到 /xampp/htdocs） 
   </div> 
   <div style="background-color:inherit">
     或在拷贝xx.php 到/xampp/htdocs中 
   </div> 
   <div style="background-color:inherit">
     运行：在浏览器中输入：localhost/xx.php 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit">
     22，表单提交数据和PHP交互 
   </div> 
   <div style="background-color:inherit">
     在PHP服务端：//$_GET:指的是用get方式提交; $_POST:post方式 
   </div> 
   <div style="background-color:inherit">
     echo "用户名".$_POST['name']."<br>密码".$_POST['password']; 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit">
     在IDEA端：  
   </div> <form action=" http://localhost/MyService/Service.php" method="post"> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 用户名：<input type="text" name="name"><br> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 密 码：<input type="password" name="password"> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> <br> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> <input type="submit" value="提交"> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> </form> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit">
     23，HTML框架 
   </div> 
   <div style="background-color:inherit">
     框架标签（frame） 
   </div> 
   <div style="background-color:inherit">
     框架集标签（<frameset>） 
   </div> 
   <div style="background-color:inherit">
     常用标签：noresize:固定框架大小；cols:列；rows:行； 
   </div> 
   <div style="background-color:inherit">
     内联框架：iframe 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit">
     24，HTML5背景 
   </div> 
   <div style="background-color:inherit">
     背景标签：background--图片背景 
   </div> 
   <div style="background-color:inherit">
     背景颜色：Bgcolor--颜色背景 
   </div> 
   <div style="background-color:inherit">
     颜色：是由一个十六进制符号来定义的。这些符号由红色，绿色和蓝色的值组成（RGB） 
   </div> 
   <div style="background-color:inherit">
     颜色值最小值：0（#00） 
   </div> 
   <div style="background-color:inherit">
     颜色值最大值：255（#FF） 
   </div> 
   <div style="background-color:inherit">
     红色：#FF0000 
   </div> 
   <div style="background-color:inherit">
     绿色：#00FF00 
   </div> 
   <div style="background-color:inherit">
     蓝色：#0000FF 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit">
     25，HTML实体 
   </div> 
   <div style="background-color:inherit">
     HTML中预留字符串必须被替换成字符实体。 
   </div> 
   <div style="background-color:inherit">
     如：<  , >  ,  %  例：<html> 写成： <html> 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" width="382" style="font-size:12px; border-collapse:collapse; margin-top:10px; margin-bottom:10px; color:rgb(0,0,0); font-family:arial,宋体,sans-serif"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:23px; background-color:rgb(249,249,249)"> 
        <div style="color:rgb(51,51,51); background-color:inherit">
          显示结果 
        </div> </th> 
       <th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:23px; background-color:rgb(249,249,249)"> 
        <div style="color:rgb(51,51,51); background-color:inherit">
          描述 
        </div> </th> 
       <th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:23px; background-color:rgb(249,249,249)"> 
        <div style="color:rgb(51,51,51); background-color:inherit">
          实体名称 
        </div> </th> 
       <th style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:23px; background-color:rgb(249,249,249)"> 
        <div style="color:rgb(51,51,51); background-color:inherit">
          实体编号 
        </div> </th> 
      </tr> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit"> 
         <br style="background-color:inherit"> 
        </div> </td> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit"> 
        <div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
          空格 
        </div> </td> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit"> 
        <div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
            
        </div> </td> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit"> 
         <br style="background-color:inherit"> 
        </div> </td> 
      </tr> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit"> 
        <div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
          < 
        </div> </td> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit"> 
        <div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
          小于号 
        </div> </td> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit"> 
        <div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
          < 
        </div> </td> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:22px; background-color:inherit"> 
        <div style="min-width:2px; color:rgb(51,51,51); background-color:inherit">
          << p=""> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
           <a href="#" id="btn">提交</a> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     5，sortable（排序） 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
          $("#sortable").sortable();//可拖动排序 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit"> <span style="background-color:inherit">二，Widgets（小部件）</span> 
   </div> 
   <div style="background-color:inherit">
     1，Accordion（折叠；手风琴效果） 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:27px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
           $("#accordion").accordion();//可折叠，手风琴效果 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     2，Autocomplete（自动填充） 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
            /*承载提示内容*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              var  autoTags=["iwen","ime","html","css","javascript","java","android", "ios"]; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              $("#tags").autocomplete({ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  source:autoTags//指定其资源 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              }); 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     3，Datepicker（时间选择器） 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
          $("#datepicker").datepicker();//事件选择器 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     4，Dialog( 对话框) 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
           $("#btn_dialog").button().on("click",function(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $("#div2").dialog();//弹出对话框 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              }); 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     5，ProgressBar( 进度条) 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
              pb =$("#pb"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //  pb.progressbar({value:50}); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              pb.progressbar({max:100}); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              setInterval(changePb,100);//设置定时器 
        </div> 
        <div style="min-width:2px; background-color:inherit"> 
         <br style="background-color:inherit"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              /*设置改变pb进度条*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          function changePb(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              current++; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              if(current>=100){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  current=0; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              pb.progressbar("option","value",current);//设置增加的数值： 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          } 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     6，Menu（菜单） 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
           $("#menu").menu({position:{at:"left bottom"}});//设置显示位置：左下方 
        </div> 
        <div style="min-width:2px; background-color:inherit"> 
         <br style="background-color:inherit"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
            .ui-menu:after{ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      content: "."; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      display: block; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      /*在左右两侧均不允许浮动元素。*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      clear: both; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      visibility: hidden; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      line-height: 0; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      height: 0; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  .ui-menu .ui-menu-item{ //条目的属性 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      display: inline-block; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      float: left; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      margin: 0; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      padding: 10; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      width: auto; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  } 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     7，Slider（滑动按钮） 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
            var slider=$("#slider"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          // slider.slider(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
             var valueSpan= $("#span"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
             slider.slider({ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //        change:function(e,ui){//传递两个参数，拖动后显示拖动值。 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //            valueSpan.text(slider.slider("option","value")); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //        } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  slide:function(e,ui){//拖动过程中，不断变化着。 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      valueSpan.text(slider.slider("option","value")); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              }); 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     8，spinner( 下拉列表) 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
            /*下拉列表*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
             var sp=$("#input"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
             sp.spinner(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
             sp.spinner("value","10"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
             $("#btn3").click(function(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                 alert(sp.spinner("value"))//获取spinner的值 
        </div> 
        <div style="min-width:2px; background-color:inherit">
             }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              /*Tags标签*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              $(function(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $("#tag").tabs(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              }); 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit"> <span style="background-color:inherit">三，Effects（效果）</span> 
   </div> 
   <div style="background-color:inherit">
     1，AddClass,Bind 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
           /*Addclass:改变的class，执行时间，动画效果，完成监听 
        </div> 
        <div style="min-width:2px; background-color:inherit">
               */ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              $(".div5").on("click",function(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $(this).addClass("changeddiv",1000,"easeInCirc",function(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      alert("动画完成"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              $(document).click(function(){//点击执行百叶窗的效果：方向 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $("#toggle").toggle("blind",{direction:"down"}); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              }); 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     2，Color Animation, hide, removeClass 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
             /*Animtion 修改背景*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              $("#btn_toggle").click(function(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $("#elem").animate({color:"green", 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  backgroundColor:"rgb(99,99,99)", 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  borderColor:"rgb(199,199,199)"}); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  /*向左逐渐隐藏，执行三秒*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $("#toggle").hide("drop",{dirction:"left"},3000); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  /*RemoveClass:移除class*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $(".div5").removeClass("changeddiv",1000,"easeInCirc",function(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      alert("动画完成"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              }); 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     3，show,toggleClass 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
           /*逐渐显示*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $("#toggle").show("drop",2000); 
        </div> 
        <div style="min-width:2px; background-color:inherit"> 
         <br style="background-color:inherit"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
               $(this).toggleClass("changeddiv",2000,"easeOutSine");//将添加和移出class集中一体 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <br style="background-color:inherit"> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <strong><span style="font-size:24px"><br style="background-color:inherit"> </span></strong> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px">第八部分，jQuery Mobile基础</span></strong></span></span> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><br> </span> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit">一，了解JQuery Mobile</span> 
   <div style="background-color:inherit">
     1，JQuery Mobile：是jQuery在手机上和平板设备上的版本，jQuery Mobile给主流移动平台带来jQuery核心库，与jQuery核心库一样，你不需要安装任何东西，只需将. js和. css文件直接包含到你的web页面中即可，这样，jQuery Mobile 的功能就好像被放到你的指尖，供你随时使用 
   </div> 
   <div style="background-color:inherit">
     2，jQuery Mobile事件：是针对移动端浏览器的事件。 
   </div> 
   <div style="background-color:inherit">
      触摸事件：当用户触摸屏幕是触发 
   </div> 
   <div style="background-color:inherit">
      滑动事件：当用户上下滑动时触发 
   </div> 
   <div style="background-color:inherit">
      定位事件：当设备水平或者垂直翻转时触发 
   </div> 
   <div style="background-color:inherit">
      页面事件：当页面显示，隐藏，创建，加载或未加载时触发 
   </div> 
   <div style="background-color:inherit">
     3，下载： http://jquerymobile.com/ 
   </div> 
   <div style="background-color:inherit">
     4，使用jQueryMobile 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
               
        </div> 
        <div style="min-width:2px; background-color:inherit">
              <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              <title>JQuery Mobile</title> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
               
        </div> 
        <div style="min-width:2px; background-color:inherit">
              <script src="js/jquery-2.1.3.min.js"></script> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              <script src="js/jquery.mobile-1.4.5.min.js"></script> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> 
        </div> 
        <div style="min-width:2px; background-color:inherit"> 
         <br style="background-color:inherit"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
            
        </div> 
        <div style="min-width:2px; background-color:inherit">
               
        </div> 
        <div style="min-width:2px; background-color:inherit">
              <div data-role="page"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                   
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  <div data-role="header" data-position="fixed"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <h1>这是头部</h1> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                   
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  <div role="main"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                   
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  <div data-role="footer" data-position="fixed"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <h1>这是脚部</h1> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  
        </div> 
        <div style="min-width:2px; background-color:inherit">
              </div> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit"> <span style="background-color:inherit">二，Mobile Widgets</span> 
   </div> 
   <div style="background-color:inherit">
     1，page 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
           <a href="#pagetwo" data-transition="slide">跳转到第二个页面</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
           <a href="#pagetwo" data-rel="dialog">打开一个dialog</a> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     2，button 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
               <button>按钮</button> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <input type="button" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <a href="#" class="ui-btn ui-shadow">按钮</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" >按钮</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <a href="#" class="ui-btn ui-btn-inline" >按钮1</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <a href="#" class="ui-btn ui-btn-inline" >按钮2</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div data-role="controlgroup" data-type="horizontal"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮1</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮2</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮3</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <a href="#" class="ui-btn ui-btn-a ">主题1</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <a href="#" class="ui-btn ui-btn-b ">主题2</a> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     3，checkbox，radio，collapsible 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
                
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <input type="checkbox">苹果 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <fieldset data-role="controlgroup" data-type="horizontal"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="checkbox">苹果 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="checkbox">苹果 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="checkbox">苹果 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </fieldset> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <input type="radio" name="rl" id="man">男 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <fieldset data-role="controlgroup" > 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="radio" name="rl" id="man">男 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="radio" name="rl" id="woman">女 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </label> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </fieldset> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div data-role="collapsible" data-collapsed="false"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <h4>Heading</h4> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <p>这是展开的内容</p> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div data-role="collapsible" data-content-theme="false"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <h4>Heading</h4> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <p>这是展开的内容</p> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div data-role="collapsible" data-content-theme="false"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <h1>系列</h1> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <ul data-role="listview"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <li><a href="#">item1</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <li><a href="#">item2</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <li><a href="#">item3</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </ul> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     4，gird，listview 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:1469px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
            
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div class="ui-grid-b"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <div class="ui-block-a"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <div class="ui-bar ui-bar-a">Hello A</div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <div class="ui-block-b"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <div class="ui-bar ui-bar-a">Hello B</div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <div class="ui-block-c"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <div class="ui-bar ui-bar-a">Hello C</div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div class="ui-grid-b"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <div class="ui-block-a"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              Hello A 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="button" data-theme="a" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="button" data-theme="b" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="button" data-theme="a" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <div class="ui-block-b"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                             Hello B 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="button" data-theme="a" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="button" data-theme="a" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <div class="ui-block-c"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <div class="ui-bar ui-bar-a">Hello C</div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="button" data-theme="a" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="button" data-theme="a" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <input type="button" data-theme="a" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div class="ui-grid-solo"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <div class="ui-block-a"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <input type="button" value="按钮"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <ul data-role="listview" data-filter="true" data-inset="true"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">A</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">B</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">C</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </ul> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <form class="ui-filterable"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <input id="autoinput" data-type="search"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </form> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-inset="true"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">A</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">B</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">C</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">B</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">D</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">A</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">E</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </ul> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">A</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">A</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">addd</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">B</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">Big ddd </a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">bbb </a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">C</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">Code</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">D</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <li><a href="#">E</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </ul> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     5，navbar, popup 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
              
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div data-role="navbar"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <ul> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <li><a href="#" class="ui-btn-active">A</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <li><a href="#">B</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <li><a href="#">C</a></li> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </ul> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <a href="#pp" data-rel="popup" class="ui-btn">弹出窗口</a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div data-role="popup" id="pp"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <p>这是一个弹出窗口</p> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                       
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <a href="#pop" data-rel="popup" data-position-to="window" data-transition ="fade"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <img src="images/logo11.png" class="pupphoto" style="width: 20%"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div data-role="popup" id="pop"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                           
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <a href="#" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-right"></a> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <img src="images/logo11.png" class="popphoto" style="height: 500px"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     6,select，theme 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
          data-theme="b"//a或b主题 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              
        </div> 
        <div style="min-width:2px; background-color:inherit">
           
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      <div class="ui-field-contain"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          <select name="select-native-1" id="select-native-1" data-iconpos="left"> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <option value="1">这是第1个</option> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                               
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <option value="2" disabled="disabled">这是第2个</option> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <option value="3">这是第3个</option> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              <option value="4">这是第4个</option> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          </select> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      </div> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit"> <strong>三，Mobile 事件</strong> 
   </div> 
   <div style="background-color:inherit">
     1，pageinit: 页面加载完成之后触发 
   </div> 
   <div style="background-color:inherit">
     2，tap: 触摸事件 
   </div> 
   <div style="background-color:inherit">
     3，taphold : 长按事件 
   </div> 
   <div style="background-color:inherit">
     4，swipe：滑动是处理 
   </div> 
   <div style="background-color:inherit">
     5，swileft：向左滑动 
   </div> 
   <div style="background-color:inherit">
     6，scrollstart：开始滚动时 
   </div> 
   <div style="background-color:inherit">
     7，scrollstop：停止滚动时 
   </div> 
   <div style="background-color:inherit">
     8，orientationchange:设备方向改变是触发 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
           <script> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  $(document).on("pageinit",function(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //            alert("hello"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          $(".p").on("tap",function(){//点击隐藏 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              $(this).hide(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          $(".btn").on("taphold",function(){//长按隐藏 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              $(this).hide(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          $(".p1").on("swipe",function(){//滑动隐藏 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              $(this).hide(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          $(".btn1").on("swiperight",function(){//右滑动隐藏 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              $(this).hide(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          $(document).on("scrollstop",function(){//长按隐藏 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                              alert("停止滑动了"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  }); 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <strong><span style="font-size:24px"><br style="background-color:inherit"> </span></strong> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px">九部分  CreateJS基础</span></strong></span></span> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><br> </span> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> 
   <div style="background-color:inherit"> <span style="background-color:inherit">一，Create JS介绍</span> 
   </div> 
   <div style="background-color:inherit">
     1，EaseJS 
   </div> 
   <div style="background-color:inherit">
     ①Create JS:  
   </div> 
   <div style="background-color:inherit">
     是一款HTML5游戏开发的引擎。是一套可以构建丰富交互体验的HTML5游戏的开源工具包，旨在降低HTML5项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。 
   </div> 
   <div style="background-color:inherit">
     ②四款工具： 
   </div> 
   <div style="background-color:inherit">
     EaselJS: 用来处理HTML5的canvas。 
   </div> 
   <div style="background-color:inherit">
     TweenJS: 用来处理HTML5的动画调整和Javascript属性。 
   </div> 
   <div style="background-color:inherit">
     SoundJS: 用来帮助简化处理音频相关API 
   </div> 
   <div style="background-color:inherit">
     2，下载： http://createjs.com/ 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit"> <span style="background-color:inherit">二，Create JS基础</span> 
   </div> 
   <div style="background-color:inherit">
     1，容器 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
              /*创建舞台，文本，图形*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          var stage=new createjs.Stage("gameView"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          var gameView=new createjs.Container();//创建容器 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          stage.addChild(gameView); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          var text=new createjs.Text("Hello easeljs","26px Arial","#777"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //stage.alpha=0.5;//半透明 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //stage.x=100;//移动舞台里的内容 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //stage.y=100; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //stage.scaleX=2;//缩放舞台里内容 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          //stage.scaleY=0.5; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          var Rect=new createjs.Shape();//创建图形 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          Rect.graphics.beginFill("#FF0000");//设置颜色 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          Rect.graphics.drawRect(50,50,50,50);//参数1：x,参数2：y,参数3：宽度，参数4：高度。 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          gameView.addChild(text);//添加到容器中 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          gameView.addChild(Rect); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          /*引入js,添加container*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          var c =new ChildContainer(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          c.x=200;//移动 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          c.y=200; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          gameView.addChild(c); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          stage.update();//刷新 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     2，绘图 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit"> <span style="background-color:inherit">/*对圆的封装*/</span> 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          function Cricle(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              createjs.Shape.call(this);//。调用不加（） 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              this.setCircleType=function(type){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  this._cricleType=type; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  switch (type){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      case Cricle.TYPE_RED: 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          this.setColor("#ff0000"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          break; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                      case Cricle.TYPE_GREEN: 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          this.setColor("#00ff00"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                          break; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              }; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              this.setColor=function (color){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  this.graphics.beginFill(color); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  this.graphics.drawCircle(0,0,50); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  this.graphics.endFill(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              this.setCircleType(Cricle.TYPE_RED);//设置默认颜色 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          Cricle.prototype=new createjs.Shape();//设置图形的入口 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          Cricle.TYPE_RED=1;//设置常量 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          Cricl 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     3，事件 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
          Rect.addEventListener("click",function(e){//点击获取位置 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              alert("X=:"+ e.localX+", Y=:"+ e.localY); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          Ellipse.addEventListener("dblclick",function(){//点击获取位置 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              alert("双击了事件"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          }); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          /*Ticker:类似计时器，实时更新舞台*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          createjs.Ticker.setFPS(20);//设置 帧数/s 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          createjs.Ticker.addEventListener("tick",handlerTick); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          var speedX=10; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          function handlerTick(){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              /*通过限制增加的范围实现，左右不断移动*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              if(Rect.x<=0){//左边 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  speedX=Math.abs(speedX); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              if(Rect.x>=350){//右边-方块宽 
        </div> 
        <div style="min-width:2px; background-color:inherit">
                  speedX=-Math.abs(speedX); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              } 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              Rect.x+=speedX; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              stage.update(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          } 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit"> <span style="background-color:inherit">三，Create JS控件</span> 
   </div> 
   <div style="background-color:inherit">
     1，Text 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
          /*1,创建文本*/ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          var text=new createjs.Text("Hello easeljs","26px Arial","#777"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          text.x=50; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          text.y=50; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          text.rotation=10; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          var  rect=new createjs.Shape(); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          rect.x=text.x; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          rect.y=text.y; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          rect.rotation=text.rotation; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          stage.addChildAt(rect,0);//添加带有子元素的 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          createjs.Ticker.setFPS(10); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          createjs.Ticker.addEventListener("tick",handlerTicker); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          function handlerTicker(e){ 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              count++; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              text.text="Hello easeljs"+count+"!" 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              //每次text增加宽度，重绘rect 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              rect.graphics.clear().beginFill("#F00").drawRect(-10,-10,text.getMeasuredWidth()+10,50); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
              stage.update(e); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          } 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit">
     2，Bitmap 
   </div> 
   <div style="background-color:inherit"> 
    <table border="1" style="border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
     <tbody style="background-color:inherit"> 
      <tr style="background-color:inherit"> 
       <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:25px; width:579px; background-color:inherit"> 
        <div style="min-width:2px; background-color:inherit">
          var bitmap=new createjs.Bitmap("images/e1.png"); 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          bitmap.x=300; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          bitmap.y=300; 
        </div> 
        <div style="min-width:2px; background-color:inherit">
          gameView.addChild(bitmap); 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="background-color:inherit"> <span style="background-color:inherit">四，CreateJS之TweenJS</span> 
   </div> 
   <div style="background-color:inherit"> 
    <br style="background-color:inherit"> 
   </div> 
   <div style="background-color:inherit"> <span style="background-color:inherit">五，CreateJS 与flash生成js文件交互</span> 
   </div> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <strong><span style="font-size:24px"><br style="background-color:inherit"> </span></strong> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px">第十部分，TypeScript基础</span></strong></span></span> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> 
   <br style="background-color:inherit"> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px">第十一部分，实战开发</span></strong></span></span> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei"> <span style="background-color:inherit"><span style="background-color:inherit"><strong><span style="font-size:24px"><br> </span></strong></span></span> 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    1，围住神经猫 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    2，看你有多色 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    3，冰桶挑战 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    4，打企鹅 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    5，语音识别 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    6，极客学院页面-用户中心 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    7，极客学院页面-播放视频 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    8，极客学院页面-路径图 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    9，标签切换效果 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    10，回到顶部功能 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    11，导航栏 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    12，Tooltip 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    13，幽灵按钮 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    14，列表切换 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    15，侧边栏固定 
  </div> 
  <div style="color:rgb(51,51,51); font-size:14px; background-color:inherit; font-family:"Microsoft YaHei",STXihei">
    16，照片墙 
  </div> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="SOHUCS" sid="1753920033454571520"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML5,JavaScript,jQuery,CSS3,html5)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1950232820773351424.htm"
                           title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a>
                        <span class="text-muted">good2know</span>

<div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div>
                    </li>
                    <li><a href="/article/1950194742100815872.htm"
                           title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a>
                        <span class="text-muted"></span>

<div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div>
                    </li>
                    <li><a href="/article/1950144218282389504.htm"
                           title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a>
                        <span class="text-muted">web前端学习指南</span>

<div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div>
                    </li>
                    <li><a href="/article/1950130692448907264.htm"
                           title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</a>
                        <span class="text-muted">二倍速播放</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div>
                    </li>
                    <li><a href="/article/1950114810557427712.htm"
                           title="12. 什么是事件委托" target="_blank">12. 什么是事件委托</a>
                        <span class="text-muted">yqcoder</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元</div>
                    </li>
                    <li><a href="/article/1950104727928762368.htm"
                           title="震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！" target="_blank">震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！</a>
                        <span class="text-muted">coding随想</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                        <div>一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入</div>
                    </li>
                    <li><a href="/article/1950100184717389824.htm"
                           title="11. HTML 中 DOCTYPE 的作用" target="_blank">11. HTML 中 DOCTYPE 的作用</a>
                        <span class="text-muted">yqcoder</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT</div>
                    </li>
                    <li><a href="/article/1950075480849838080.htm"
                           title="关于前端的性能优化" target="_blank">关于前端的性能优化</a>
                        <span class="text-muted"></span>

<div>性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C</div>
                    </li>
                    <li><a href="/article/1950074093608955904.htm"
                           title="时间组件库Day.js那些事" target="_blank">时间组件库Day.js那些事</a>
                        <span class="text-muted">前端小白花</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment</div>
                    </li>
                    <li><a href="/article/1950071066281963520.htm"
                           title="JavaScript正则表达式去除括号但保留内容与去除括号与内容" target="_blank">JavaScript正则表达式去除括号但保留内容与去除括号与内容</a>
                        <span class="text-muted">Selicens</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
                        <div>项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con</div>
                    </li>
                    <li><a href="/article/1950042324155297792.htm"
                           title="网络安全第14集" target="_blank">网络安全第14集</a>
                        <span class="text-muted">不灭锦鲤</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
                        <div>前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后</div>
                    </li>
                    <li><a href="/article/1950040812469415936.htm"
                           title="25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？" target="_blank">25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？</a>
                        <span class="text-muted">阿蒙Armon</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>25年不倒的"犀牛书"：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？当一本技术书能连续畅销25年，历经7次迭代仍稳坐领域第一梯队，它必然藏着超越时代的硬实力。《JavaScript权威指南（原书第7版）》就是这样一部传奇——豆瓣9.4分的封神之作，程序员口中的"犀牛书"，从网景时代到ES2020，它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编</div>
                    </li>
                    <li><a href="/article/1949995914462556160.htm"
                           title="什么是JSON，如何与Java对象转化" target="_blank">什么是JSON，如何与Java对象转化</a>
                        <span class="text-muted">doublez234</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
                        <div>JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript（ECMAScript（欧洲计算机协会制定的js规范））编程语言的一个子集，但它是一种独立于语言的数据格式，被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点：轻量级：JSON格式非常简洁，只包含必要的数据信</div>
                    </li>
                    <li><a href="/article/1949975484238458880.htm"
                           title="APP开发入门：了解主流的编程语言" target="_blank">APP开发入门：了解主流的编程语言</a>
                        <span class="text-muted">agi大模型</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E4%B8%9A%E4%B8%8E%E8%81%8C%E5%9C%BA/1.htm">职业与职场</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a>
                        <div>前言在过去的几年里，有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择，但大多数程序员都会选择最容易学习的编程语言。如今，有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式，因为他们的目标是构建任何软件，而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript，你</div>
                    </li>
                    <li><a href="/article/1949928456414359552.htm"
                           title="探秘CommonJS：Node.js模块化核心解析" target="_blank">探秘CommonJS：Node.js模块化核心解析</a>
                        <span class="text-muted"></span>

<div>CommonJS是JavaScript的模块化规范，主要应用于服务器端环境（尤其是Node.js），其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点：一、核心特性同步加载模块通过require()同步加载并执行，后续代码需等待模块加载完成后执行，适用于I/O快速的服务器环境（如本地文件读取）。作用域隔离每个文件视为独立模块，模块内定义的变量、函数默认私有（不污染全局作用域），仅</div>
                    </li>
                    <li><a href="/article/1949926944988524544.htm"
                           title="壹脉销客AI电子名片源码核心架构" target="_blank">壹脉销客AI电子名片源码核心架构</a>
                        <span class="text-muted"></span>

<div>为什么选择源码部署AI电子名片？在数字化转型浪潮中，越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势：数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构：前端技术栈（小程序端）javascript//小程序a</div>
                    </li>
                    <li><a href="/article/1949918371738873856.htm"
                           title="vue 进入一个页面，然后离开这个页面他就重新加载" target="_blank">vue 进入一个页面，然后离开这个页面他就重新加载</a>
                        <span class="text-muted">Java&Develop</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>vue进入一个页面，然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法，用于强制刷新当前页面（重新加载页面内容）。其作用类似于用户手动点击浏览器的刷新按钮，但可以通过代码精确触发。核心作用：刷新页面重新加载当前显示的文档（即重新请求当前URL的资源）。可选参数控制缓存</div>
                    </li>
                    <li><a href="/article/1949898570761039872.htm"
                           title="[python][flask]flask静态资源" target="_blank">[python][flask]flask静态资源</a>
                        <span class="text-muted"></span>

<div>在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├</div>
                    </li>
                    <li><a href="/article/1949895918400630784.htm"
                           title="前端面试题" target="_blank">前端面试题</a>
                        <span class="text-muted">大大。</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种</div>
                    </li>
                    <li><a href="/article/1949894278360657920.htm"
                           title="JavaScript对象与Math对象完全指南" target="_blank">JavaScript对象与Math对象完全指南</a>
                        <span class="text-muted">hui函数</span>
<a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>JavaScript对象与Math对象完全指南对象基础概念与操作对象是什么？数据集合：包含相关数据和功能的容器结构组成：属性：描述对象特征的变量（名词性）方法：对象可执行的操作（动词性，本质是函数）对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师",  //方法 introduce(){  return`大家好，我</div>
                    </li>
                    <li><a href="/article/1949892133389398016.htm"
                           title="深入理解JavaScript作用域与编译过程" target="_blank">深入理解JavaScript作用域与编译过程</a>
                        <span class="text-muted">君子心理</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%AF%91/1.htm">编译</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87/1.htm">变量提升</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a>
                        <div>背景简介在编程领域，作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言，其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容，解析JavaScript的作用域系统、函数闭包以及编译过程，帮助读者获得更深层次的理解。作用域是什么？在JavaScript中，作用域定义了变量和函数的可访问范围。编写程序时，我们会频繁使用变量来存储和操</div>
                    </li>
                    <li><a href="/article/1949892007069544448.htm"
                           title="掌握JavaScript对象与函数：深入理解原型与作用域" target="_blank">掌握JavaScript对象与函数：深入理解原型与作用域</a>
                        <span class="text-muted">土城三富</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1/1.htm">对象</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E9%93%BE/1.htm">原型链</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a>
                        <div>掌握JavaScript对象与函数：深入理解原型与作用域背景简介在探索JavaScript的世界时，我们经常遇到对象和函数这两个核心概念。对象是JavaScript中最为基本的结构之一，而函数则是实现代码复用、封装和模块化的主要工具。本文将基于给定的书籍章节内容，深入探讨对象的更新机制、原型继承以及函数的多样性及其调用模式，同时分享对全局变量使用的思考。更新对象在JavaScript中，对象的属性</div>
                    </li>
                    <li><a href="/article/1949891377278021632.htm"
                           title="JavaScript函数使用模式与作用域的深入解析" target="_blank">JavaScript函数使用模式与作用域的深入解析</a>
                        <span class="text-muted"></span>

<div>JavaScript函数使用模式与作用域的深入解析JavaScript作为一门灵活且功能强大的编程语言，其函数的使用和作用域的特性是学习和开发中的关键点。本篇博客将深入解析JavaScript函数的几种使用模式，以及作用域的重要概念。构造器模式在JavaScript中，函数可以作为构造器（constructor）使用，当用new关键字调用时，函数会返回一个新对象。为了区分构造器函数和其他普通函数，</div>
                    </li>
                    <li><a href="/article/1949890620248092672.htm"
                           title="掌握JavaScript函数和作用域：提高代码复用性" target="_blank">掌握JavaScript函数和作用域：提高代码复用性</a>
                        <span class="text-muted">捕风捉你</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>在JavaScript编程中，函数是一个核心概念，它不仅能帮助我们将代码组织得更加清晰，还能提高代码的复用性。理解函数的定义与调用、掌握作用域的概念，对于编写高效和可维护的代码至关重要。本文将通过创建一个计时器应用的案例，帮助你全面掌握JavaScript中的函数和作用域知识。任务目标通过本教程，你将学习并掌握：函数的声明与调用函数表达式的使用作用域的概念及其在函数中的应用闭包的原理及实践学习内容</div>
                    </li>
                    <li><a href="/article/1949887845539835904.htm"
                           title="JavaScript 函数与作用域" target="_blank">JavaScript 函数与作用域</a>
                        <span class="text-muted">前端人类学</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%BA/1.htm">行为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a><a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/1.htm">作用域链</a>
                        <div>Hi，我是布兰妮甜！JavaScript是一种动态类型语言，它支持面向对象编程和函数式编程。函数是JavaScript的核心组成部分之一，而作用域则决定了变量的可见性和生命周期。本文将详细介绍JavaScript中的函数定义、调用、参数传递、闭包、递归以及作用域链的概念。文章目录一、函数基础二、作用域基础三、闭包四、递归五、作用域链六、总结一、函数基础1.定义函数函数声明函数可以通过函数声明的方式</div>
                    </li>
                    <li><a href="/article/1949884694208245760.htm"
                           title="深入理解作用域【JavaScript】" target="_blank">深入理解作用域【JavaScript】</a>
                        <span class="text-muted">陆仟</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">Web前端开发</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>一、作用域的内部原理JavaScript的作用域机制是理解变量如何被访问和存储的重要概念。下面详细介绍作用域的内部原理，包括编译、执行、查询、嵌套和异常处理这五个步骤。1.编译在JavaScript的执行过程中，首要的步骤是编译。尽管JavaScript是解释性语言，但现代JavaScript引擎（如V8）在执行代码前会先进行编译。编译阶段主要完成以下几项工作：词法分析：将源代码分解成语法单元（t</div>
                    </li>
                    <li><a href="/article/1949875239387197440.htm"
                           title="即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突" target="_blank">即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突</a>
                        <span class="text-muted"></span>

<div>即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干</div>
                    </li>
                    <li><a href="/article/1949872340728868864.htm"
                           title="技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性" target="_blank">技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性</a>
                        <span class="text-muted">aadwje</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
                        <div>即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干</div>
                    </li>
                    <li><a href="/article/1949803748612173824.htm"
                           title="深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。" target="_blank">深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。</a>
                        <span class="text-muted">海派程序猿</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>各位观众老爷们，晚上好！今天咱们就来聊聊Node.js的大心脏——V8引擎，看看它到底是怎么把咱们写的JavaScript代码给“消化”掉的。别害怕，今天咱不搞那些生涩难懂的学院派理论，尽量用大白话，外加一些“栗子”，保证让你听得津津有味。V8引擎：JavaScript的超级翻译官首先，简单介绍一下V8。V8是Google开发的高性能JavaScript和WebAssembly引擎，用C++写的。</div>
                    </li>
                    <li><a href="/article/1949801101146517504.htm"
                           title="Tailwind CSS 响应式设计实战指南" target="_blank">Tailwind CSS 响应式设计实战指南</a>
                        <span class="text-muted">qcidyu</span>
<a class="tag" taget="_blank" href="/search/%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/1.htm">用户体验</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/1.htm">代码优化</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E4%BC%98%E5%85%88/1.htm">移动优先</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E5%B8%83%E5%B1%80/1.htm">网站布局</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/Tailwind/1.htm">Tailwind</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/1.htm">响应式设计</a>
                        <div>title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计</div>
                    </li>
                                <li><a href="/article/72.htm"
                                       title="Java开发中，spring mvc 的线程怎么调用？" target="_blank">Java开发中，spring mvc 的线程怎么调用？</a>
                                    <span class="text-muted">小麦麦子</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
                                    <div>今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 
 
问题： 
    在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局</div>
                                </li>
                                <li><a href="/article/199.htm"
                                       title="maven依赖范围" target="_blank">maven依赖范围</a>
                                    <span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 
 
2.compile 只有编译和打包时才会依赖 
 
3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 
 
4.runtime 运行时依赖，编译不依赖 
 
5.默认compile 
 
依赖范围compile是支持传递的，test不支持传递 
 
1.传递的意思是项目A，引用</div>
                                </li>
                                <li><a href="/article/326.htm"
                                       title="Jaxb org.xml.sax.saxparseexception : premature end of file" target="_blank">Jaxb org.xml.sax.saxparseexception : premature end of file</a>
                                    <span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/premature/1.htm">premature</a><a class="tag" taget="_blank" href="/search/JAXB/1.htm">JAXB</a>
                                    <div>如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： 
org.xml.sax.saxparseexception : premature end of file 
很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In</div>
                                </li>
                                <li><a href="/article/453.htm"
                                       title="CSS Specificity" target="_blank">CSS Specificity</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%87%8D/1.htm">权重</a><a class="tag" taget="_blank" href="/search/Specificity/1.htm">Specificity</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div>  
有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity   
CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。   
    规则： 
  
  HTML标签的权重是1

Class 的权重是10

Id 的权重是100

</div>
                                </li>
                                <li><a href="/article/580.htm"
                                       title="java与servlet" target="_blank">java与servlet</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
                                    <div>servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 
下面是java官方网站上对servlet的介绍：  java官网对于servlet的解释 写道   
Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha</div>
                                </li>
                                <li><a href="/article/707.htm"
                                       title="eclipse中安装maven插件" target="_blank">eclipse中安装maven插件</a>
                                    <span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>1.首先去官网下载 Maven： 
http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 
下载完成之后将其解压， 
我将解压后的文件夹：apache-maven-3.2.3， 
并将它放在 D:\tools目录下， 
即 maven 最终的路径是：D:\tools\apache-mave</div>
                                </li>
                                <li><a href="/article/834.htm"
                                       title="jpa@OneToOne关联关系" target="_blank">jpa@OneToOne关联关系</a>
                                    <span class="text-muted">布衣凌宇</span>
<a class="tag" taget="_blank" href="/search/jpa/1.htm">jpa</a>
                                    <div>Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 
Nruser实体类 
//***************************************************************** 
@Entity 
@Table(name="nruser") 
@DynamicInsert @Dynam</div>
                                </li>
                                <li><a href="/article/961.htm"
                                       title="我的spring学习笔记11-Spring中关于声明式事务的配置" target="_blank">我的spring学习笔记11-Spring中关于声明式事务的配置</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a>
                                    <div>这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中</div>
                                </li>
                                <li><a href="/article/1088.htm"
                                       title="java 动态代理简单实现" target="_blank">java 动态代理简单实现</a>
                                    <span class="text-muted">antlove</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/handler/1.htm">handler</a><a class="tag" taget="_blank" href="/search/proxy/1.htm">proxy</a><a class="tag" taget="_blank" href="/search/dynamic/1.htm">dynamic</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a>
                                    <div>dynamicproxy.service.HelloService 
package dynamicproxy.service;

public interface HelloService {
	public void sayHello();
}
 
  
dynamicproxy.service.impl.HelloServiceImpl 
package dynamicp</div>
                                </li>
                                <li><a href="/article/1215.htm"
                                       title="JDBC连接数据库" target="_blank">JDBC连接数据库</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/JDBC%E7%BC%96%E7%A8%8B/1.htm">JDBC编程</a><a class="tag" taget="_blank" href="/search/JAVA%E6%93%8D%E4%BD%9Coracle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">JAVA操作oracle数据库</a>
                                    <div>      
    如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中; 
  
JDBC链接数据库的代码和固定写法; 
  
  
1,加载oracle数据库的驱动; 
    &nb</div>
                                </li>
                                <li><a href="/article/1342.htm"
                                       title="单例模式中的多线程分析" target="_blank">单例模式中的多线程分析</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a>
                                    <div>谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 
饿汉式： 
package com.bijian.study;

public class Singleton {

private Singleton() {
	}

// 注意这是private 只供内部调用
	private static</div>
                                </li>
                                <li><a href="/article/1469.htm"
                                       title="javascript读取和修改原型特别需要注意原型的读写不具有对等性" target="_blank">javascript读取和修改原型特别需要注意原型的读写不具有对等性</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a>
                                    <div>        对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有</div>
                                </li>
                                <li><a href="/article/1596.htm"
                                       title="【持久化框架MyBatis3六】MyBatis3集成第三方DataSource" target="_blank">【持久化框架MyBatis3六】MyBatis3集成第三方DataSource</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/dataSource/1.htm">dataSource</a>
                                    <div>MyBatis内置了数据源的支持，如： 
  
	<environments default="development">
		<environment id="development">
			<transactionManager type="JDBC" />
			<data</div>
                                </li>
                                <li><a href="/article/1723.htm"
                                       title="我程序中用到的urldecode和base64decode,MD5" target="_blank">我程序中用到的urldecode和base64decode,MD5</a>
                                    <span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/MD5/1.htm">MD5</a><a class="tag" taget="_blank" href="/search/base64decode/1.htm">base64decode</a><a class="tag" taget="_blank" href="/search/urldecode/1.htm">urldecode</a>
                                    <div>这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码：

string Base64Decode(const char* Data,int DataByte,int& OutByte)
{
    //解码表
    const char DecodeTable[] =
    {
        0, 0, 0, 0, 0, 0</div>
                                </li>
                                <li><a href="/article/1850.htm"
                                       title="腾讯资深运维专家周小军：QQ与微信架构的惊天秘密" target="_blank">腾讯资深运维专家周小军：QQ与微信架构的惊天秘密</a>
                                    <span class="text-muted">ronin47</span>

<div>社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心</div>
                                </li>
                                <li><a href="/article/1977.htm"
                                       title="java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素" target="_blank">java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>

public class MinOfShiftedArray {

/**
	 * Q69 旋转数组的最小元素
	 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。
	 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。
	 */
	publ</div>
                                </li>
                                <li><a href="/article/2104.htm"
                                       title="看博客，应该是有方向的" target="_blank">看博客，应该是有方向的</a>
                                    <span class="text-muted">Cb123456</span>
<a class="tag" taget="_blank" href="/search/%E5%8F%8D%E7%9C%81/1.htm">反省</a><a class="tag" taget="_blank" href="/search/%E7%9C%8B%E5%8D%9A%E5%AE%A2/1.htm">看博客</a>
                                    <div>看博客，应该是有方向的: 
 我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客. 
 我刚突然想到的: 
 1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。 
 2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的. 
  
 为什么要写</div>
                                </li>
                                <li><a href="/article/2231.htm"
                                       title="[开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖" target="_blank">[开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">开源项目</a>
                                    <div> 
 
     为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。 
 
      所以，为避免这种不确定性风险，我</div>
                                </li>
                                <li><a href="/article/2358.htm"
                                       title="一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ）" target="_blank">一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ）</a>
                                    <span class="text-muted">cwqcwqmax9</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
                                    <div>见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 
 
 
 
 
Web翻页优化实例 
 提交时间: 2004-6-18 15:37:49      回复    发消息  
 
 
环境： 
Linux ve</div>
                                </li>
                                <li><a href="/article/2485.htm"
                                       title="Hibernat and Ibatis" target="_blank">Hibernat and Ibatis</a>
                                    <span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a>
                                    <div>Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi</div>
                                </li>
                                <li><a href="/article/2612.htm"
                                       title="备份MYSQL脚本" target="_blank">备份MYSQL脚本</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>#!/bin/sh
# this shell to backup mysql
#1413161683@qq.com (QQ:1413161683 DuChengJiu)

_dbDir=/var/lib/mysql/
_today=`date +%w`
_bakDir=/usr/backup/$_today
[ ! -d $_bakDir ] && mkdir -p </div>
                                </li>
                                <li><a href="/article/2739.htm"
                                       title="iOS第三方开源库的吐槽和备忘" target="_blank">iOS第三方开源库的吐槽和备忘</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a>
                                    <div>转自 
ibireme的博客       做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。       目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。       首先整理了一份 
Github上排名靠</div>
                                </li>
                                <li><a href="/article/2866.htm"
                                       title="html wlwmanifest.xml" target="_blank">html wlwmanifest.xml</a>
                                    <span class="text-muted">eoems</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
                                    <div>所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 
 
步骤： 
 
加入到function.php 
 
remove_action('wp_head', 'wp_generator'); 
//wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog 
 
remov</div>
                                </li>
                                <li><a href="/article/2993.htm"
                                       title="浅谈Java定时器发展" target="_blank">浅谈Java定时器发展</a>
                                    <span class="text-muted">hacksin</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a>
                                    <div>java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 
Timer与ScheduleThreadPoolExecutor对比： 
1. 
  
 Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列</div>
                                </li>
                                <li><a href="/article/3120.htm"
                                       title="移动端页面侧边导航滑入效果" target="_blank">移动端页面侧边导航滑入效果</a>
                                    <span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascirpt/1.htm">javascirpt</a>
                                    <div>效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： 
<!DOCTYPE html>
<h</div>
                                </li>
                                <li><a href="/article/3247.htm"
                                       title="AspectJ+Javasist记录日志" target="_blank">AspectJ+Javasist记录日志</a>
                                    <span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/aspectj/1.htm">aspectj</a><a class="tag" taget="_blank" href="/search/javasist/1.htm">javasist</a>
                                    <div>在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。 
  
@Override
public String get(String key) {
//	long start = System.currentTimeMillis();
//	System.out.println("Be</div>
                                </li>
                                <li><a href="/article/3374.htm"
                                       title="redis学习笔记" target="_blank">redis学习笔记</a>
                                    <span class="text-muted">MJC410621</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a>
                                    <div>1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 
1，处理超大量的数据 
2，运行在便宜的PC服务器集群上， 
3，击碎了性能瓶颈。 
1)对数据高并发读写。 
2)对海量数据的高效率存储和访问。 
3)对数据的高扩展性和高可用性。 
 
redis支持的类型： 
 
Sring 类型 
set name lijie 
get name lijie 
set na</div>
                                </li>
                                <li><a href="/article/3501.htm"
                                       title="使用redis实现分布式锁" target="_blank">使用redis实现分布式锁</a>
                                    <span class="text-muted">qifeifei</span>

<div>在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下： 
  
public Long setnx(final byte[] key, final byte[] value) {
	checkIsInMulti();
	client.setnx(key, value);
	ret</div>
                                </li>
                                <li><a href="/article/3628.htm"
                                       title="BI并非万能，中层业务管理报表要另辟蹊径" target="_blank">BI并非万能，中层业务管理报表要另辟蹊径</a>
                                    <span class="text-muted">张老师的菜</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/BI/1.htm">BI</a><a class="tag" taget="_blank" href="/search/%E5%95%86%E4%B8%9A%E6%99%BA%E8%83%BD/1.htm">商业智能</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8C%96/1.htm">信息化</a>
                                    <div>       BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。 
       BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有</div>
                                </li>
                                <li><a href="/article/3755.htm"
                                       title="安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题" target="_blank">安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题</a>
                                    <span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/function/1.htm">function</a>
                                    <div>1.在~/.bashrc最后加入 
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" 
 2.重新启动terminal输入： 
  
rvm use ruby-2.2.1 --default 
 把当前安装的ruby版本设为默</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

        </div>
    </div>
</footer>

<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>

</body>

</html>