荷蘭之光：阿賈克斯

                                星哥自述

荷蘭一個著名的城市：阿賈克斯（ajax）

 

.load();
 做用：加載遠程的HTML文件代碼，並插入到指定的DOM節點中；

 能夠只傳入一個參數，表示加載一個靜態的HTML代碼片斷。


eg:$("#div1").load("load.html")

 

定義：

$.ajax():是jQuery裏面最底層的一個ajax函數，參數接受一個大對象，
對象裏面的屬性和方法，表示ajax請求的相關社會設置

①：url:請求遠程文件的路徑
②：type:Ajax請求的類型，可原值 get/post
③：dataType:預期後臺返回的是什麼類型的數據
"text"-字符串 "json"-JSON對象

④：data：對象格式，向後臺發送一個對象，表示傳遞的數據，
經常使用於type爲"post"的請求方式：
若是type爲"get"，能夠直接使用?追加在url的後面

⑤：success:請求成功的回調函數，參數接受一個data，表示後臺的返回的數據。
⑥：error:請求失敗的回調函數
⑦：statusCode:接受一個對象，對象的鍵值對是status狀態瑪和對應的回調函數，表示請求狀態瑪是對應的數字時，
執行具體的操做函數
200-正常請求成功 404-頁面沒有找到  

  $.aja            url : "http://192.168.5.123/json.php ?name='zhangsan'&age=12",

 type: "post", data : { name : "李四", age : 28 }, dataType : "json", success : function(data){ // JQuery中吧JSON字符串轉成JSON對象 var jsons = $.parseJSON(data); console.log(jsons); }, //error: function(){ // alert("請求失敗啦！"); //},  statusCode:{ "404":function(){ alert("404表示頁面沒有找到"); }, "500":function(){ alert("500表示服務器內部錯誤"); }, "200":function(){ alert("200表示請求成功"); } 

 } });

 

 

 

$.get(); $.post(); 這兩個函數，是在$.ajax()的基礎上進行封裝而來。能夠直接默認發送get請求或post請求；
 接受四個參數：
 ① 請求的URL路徑。 至關於$.ajax()裏面的url；
 ② 向後臺傳遞的數據。 至關於$.ajax()裏面的data；
 ③ 請求成功的回調函數。 至關於$.ajax()裏面的success；
 ① 預期返回的數據類型。 至關於$.ajax()裏面的dataType；

$.post("http://192.168.5.123/json.php ",{data:"aaa"},function(data){
            console.log(data);
        },"json");

 

 

 

$.parseJSON(str) 將JSON字符串轉爲JSON對象

 標準的JSON字符串，鍵必須用雙引號包裹。

var str = '{"age":12}'
        var obj = $.parseJSON(str);
        console.log(obj);
        

 

 .trim() 去除掉字符串兩端空格

 

var str1 = "   123    ";
        console.log(str1.trim());

 

 

 

用戶遍歷數組和對象
遍歷數組時，函數的第一個參數是下標，第二個參數是值；
 遍歷對象時，函數的第一個參數是鍵，第二個參數是值

var arr = [1,2,3,4,5,6,7];
        var obj = {
            name : "zhangsan",
            age : 12,
            sex : "nan"
        }
        $.each(obj,function(index,item){
            console.log(index);
            console.log(item);
        });

 

 

 fullPage

     導入：

<!--fullPage.js必須在JQuery.js以前導入-->
<script type="text/javascript" src="../../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<!--JQUery動畫必須放在jquery之下fullPage之上-->
<script type="text/javascript" src="scrolloverflow.min.js"></script>
<script type="text/javascript" src="scrolloverflow.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js "></script>
<link rel="stylesheet" href="../../css/jquery.fullPage.css" />

 

 

首先插入HTML代碼：

<ul id="menu">
            <li><a href="#page1">page1</a></li>
            <li><a href="#page2">page2</a></li>
            <li><a href="#page3">page3</a></li>
            <li><a href="#page4">page4</a></li>
        </ul>
    <div id="fullpage">
        <div class="section section1">
            
        </div>
        <div class="section section2">第二屏</div>
        <div class="section section3">
            <div class="slide slide1">第三屏的第一屏</div>
            <div class="slide slide2">第三屏的第二屏</div>
            <div class="slide slide3">第三屏的第三屏</div>
            <div class="slide slide4">第三屏的第四屏</div>
        </div>
        <div class="section section4">第四屏</div>
    </div>

$(function() {
            /*組建好網頁佈局後，必須選中包裹全部section的div的id，並調用fullpage()方法，才能加載佈局
                調用fullpage()方法後，能夠給函數傳入對象類型的參數，設置fullpage的各種類型。
             * */
            $('#fullpage').fullpage({
                //內容是否垂直居中，默認true
             // verticalCentered:false;
              //設置每一屏的背景色
             sectionsColor:["#FF0000","#00FF00","#0000FF"],
             /*設置每一屏的錨點*/
             anchors:["page1","page2","page3","page4"],
          /*  設置單頁滾動速度,默認700ms*/
             scrollingSpeed:300,
           /* 設置滾動動畫方式
            JQuery只支持幾種動畫,更多的動畫效果須要導入jquery.easings.js*/
           // easing:"easeInQuart",
            /*綁定一個菜單 詳見HTML部分*/
            //menu:"#menu",
             /*是否顯示導航小圓點  默認false*/
            navigation:true,
            /*設置導航圓點的位置，可選值left和right.默認right*/
           // navigationPosition:"left",
            /*設置鼠標指上時小圓點的提示文字*/
            navigationTooltips:["第一頁","第二頁","第三頁","哈哈"],
            /*設置幻燈片的導航*/
           //slidesNavigation:true,
          // slidesNavPosition:"top",
             /*設置幻燈片左右切換箭頭的背景色*/           
          // controlArrowColor:"RGBA(0,0,0,0.5)",
            
           /*最後一頁下滑，是否滾到首頁*/            
            //loopBottom:true,
             /*第一頁上滑，是否滾到首頁*/    
             //loopTop:true,
             /*是否能夠循環滾動，與上面兩個屬性不兼容。只能選其一*/
             continuousVertical:true,
             /*設置幻燈片是否水平循環，默認true*/
             //loopHorizontal:true,
             /*是否使用插件的翻頁滾動方式，選擇 false，則會出現瀏覽器自帶的滾動條*/
             //autoScrolling:false,
             /*設置內容超過滿屏後是否顯示滾動條，必需要導入scrolloverflow.min.js才能使用*/
             //scrollOverflow:true,
             
             //是否使用 CSS3動畫 滾動，默認false，使用JQ動畫滾動
            //css3:true,
            // paddingTop:"40px",
             //paddingBotoom:"40px",
             //是否使用鍵盤方向鍵導航,默認true;
            // keyboardScrolling:false,
             //手機花屏的力度，數值越大，越能翻頁
             //touchSensitivity:5,
             //瀏覽器直接打開指定錨點時，是否以動畫顯示,默認爲true
             animateAnchor:true,
             
             //afterLoad：當一個頁面加載完成以後出發；
             //anchorLink：當年頁面的錨點名，
             //index：當前頁面的序號，從一開始，
             afterLoad:function(anchorLink,index){
                 console.log(anchorLink);
                 console.log(index);
             },
             
             // onLeave:當頁面即將滾動離開的時候觸發；
             //index：當前所在的頁面的序號
            //nextIndex：即將去往頁面的序號
            //direction：離開的方向，up或down
             onLeave:function(index,nextIndex,direction){
                 console.log(index)
                 console.log(nextIndex)
                 console.log(direction)
             },
             // afterRender:頁面初次完成初始化的時候，執行一次
             //先執行第一個頁面的 afterLoad，而後在執行 afterRender
             afterRender:function(){
                 console.log("......afterRender.........")
             },
             //afterSlideLoad:當幻燈片加載完成時，執行的函數，
             //anchorLink：幻燈片所在scetion的錨點
             //index：幻燈片所在scetion的序號
             //slideAnchor：幻燈片自身的錨點(若是有的話，若是沒有顯示slideIndex)         
             //slideIndex：幻燈片自身的序號
             afterSlideLoad:function(anchorLink,index,slideAnchor,slideIndex){
                 console.log(anchorLink);
                 console.log(index);
                 console.log(slideAnchor);
                 console.log(slideIndex);
             },
             //onSlideLeave：當幻燈片離開去另外一張幻燈片時觸發！
          //   anchorLink:當前幻燈片所在的section的錨點
           //  index:當前幻燈片在section的序號，從1開始
            // slideIndex:當年幻燈片自身的的序號，從0開始
           //  direction:幻燈片移動的方向，left和right
           //  nexSlideIndex:即將顯示的幻燈片的序號，從0開始
             onSlideLeave:function(anchorLink,index,slideIndex,direction,nexSlideIndex){
                 console.log(anchorLink);
                 console.log(index);
                 console.log(slideIndex);
                 console.log(direction);
                 console.log(nexSlideIndex);
             }
             
             
            });
        });
    </script>

 

 

 

 

點擊page跳轉頁面

 

 

 

<style>
        .div1{
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
    
    <body>
     <button id="btn1">點擊</button>
        <div class="div1">div1</div>
        
        
    <script type="text/javascript" src="move.js" ></script>
    <script>
    document.getElementById("btn1").onclick=function(){
     move(".div1")
     .set("margin-left","100px")//設置CSS相關的屬性
        .set("margin-left","200px")
        .set("margin-top","200px")
      // .set("width","200px")
      .add("width",200)     //將數值類型的屬性，在原有的基礎上加一個數
      //.rotate(90)//設置旋轉角度
     .duration('1s')//設置動畫完成的時間
      //.translate(50,100)//設置平移
     // .skew(30,40)//設置 X Y軸的旋轉角度
      // .scale(2,2)//設置縮放
      //.x(200)//設置x軸位置
      ///.y(200)//設置y軸位置
      .delay(1000)//動畫延時幾毫秒以後開始執行
      
      
      
       .end(function(){
           //move.js要是動畫生效，必須使用.end()結尾，
       //    .end())傳入一個函數，表示動畫結束後執行的回調函數
           //alert("動畫結束")
       });
    }
    
    </script>
       
        

 

 

 

    <script type="text/javascript" src="../../../js/jquery-3.1.1.js" ></script>
        <script type="text/javascript" src="additional-methods.js"></script>
        <script type="text/javascript" src="localization/messages_zh.js" ></script>
        
    </head>
    <body>
            <form class="cmxform" id="commentForm" method="get" action="">
          <fieldset>
            <legend>輸入您的名字，郵箱，URL，備註。</legend>
            <p>
              <label for="cname">Name (必需, 最小兩個字母)</label>
              <input id="cname" name="name" type="text" >
            </p>
            <p>
              <label for="cemail">E-Mail (必需)</label>
              <input id="cemail" type="text" name="email">
            </p>
            <p>
              <label for="curl">URL (可選)</label>
              <input id="curl" type="url" name="url">
            </p>
            <p>
              <label for="ccomment">備註 (必需)</label>
              <textarea id="ccomment" name="comment"></textarea>
            </p>
            <p>
              <input class="submit" type="submit" value="Submit">
            </p>
          </fieldset>
        </form>
        <script>
            $(function(){
                $("#commentForm").validate({
                    //rules:{}用於聲明各個input的驗證規則
                    rules:{
                        //選擇每一個input時，須要選中每一個input的name。並對應一個對象設置多條驗證，
                        name:{
                            required:true,
                            minlength:2
                        },
                        eamil{
                            required:true,
                            email:true
                        },                        
                    },
                    //message:{}對象，用於顯示各個input驗證不經過的提示文字
                    //message對應每一個規則都會有默認的提示文字,如非特殊須要,無需單獨設置
                    message:{
                        name:{
                            required:"這個內容，你必需要填",
                            minlength:"這裏最少輸入2個字符"
                        }
                        
                        
                    }
                    
                
                    
                });
            })
        
        
        </script>
        

 

 

 

 

    <script type="text/javascript" src="../../js/jquery-3.1.1.js" ></script>
    </head>
    <body>
        <div id="div1">這是DIV1裏面的文字！！！</div>
        <div id="div2">這是DIV1裏面的文字！！！</div>
        <script>
            /*jQuery自定義插件：
             * 1：全局插件的聲明
             * $.extend({
             *     func:function(){}  //func-->插件名
             * 
             * });
             * 全局插件的調用：
             * $.func();
             2 局部插件的聲明
             $.fn.func=function(){}
             局部插件的調用 $("選擇器").func();
             
             * */
        /*全局插件*/
        
        $.extend({
            sayHello:function(){
                alert("hello jQuery！！");
            },        
            say:function(message){
                alert("你說了："+message);
            }
        });
        //$.sayHello();    
        //$.say("ahahahhahah")
        
        /*局部插件*/
        $.fn.setBgColor = function(bgColor){
            //在$.fn聲明的插件函數中，能夠使用this代指調用的的這個插件的對象節點。
            //並且，這個this是一個jq對象
            //this代指$("#div1")
            bgColor =bgColor? bgColor : "#ccc";
           this.css("background-color",bgColor);
            }
        //$("#div1").setBgColor("red");
            $("#div2").setBgColor();
            
        $.fn.setFont = function(obj){
            var defaults = {// 設置默認值
                "font-size":"12px",
                "font-weight":"normal",
                "font-family":"宋體",
                //"color":"#CCC"
            }
            // 將默認值與傳入的obj比對。 並返回一個新對象。
            // 若是obj裏面有的屬性，則使用obj的屬性。
            // 若是obj沒有聲明的屬性則使用默認值裏面的屬性
            var newObj = $.extend(defaults,obj);
            return this.css(newObj);
            
            // 將調用當前函數的對象(this)返回，能夠保證JQuery的鏈式調用語法
            //return this;
        }
        $("#div1").setFont({
            //"font-size":"48px",
            //"font-weight":"bold",
            //"font-family":"微軟雅黑",
            //"color":"red",
        }).css("text-align","center");

            
            
            
            
            
        
        </script>

 

 

  less和sass

less的基礎語法：

 

 

 1聲明一個變量：@變量名 ：變量值；
 使用變量：@變量名
 》》》變量使用的基礎的原則：
屢次頻繁出現的值，後期須要贊成修改的值，牽扯到數值運算的值，推薦使用變量
 》》>less中的變量類型：
 ①：數值類：不帶單位的，123 帶單位的 1px;
 ②：字符串類型：帶""的， "hahaha" 不帶引號的 red #ff0000
 ③：顏色類：red #ff0000 RGB(255,255,0)
 ④：值列表類型： 多個值用逗號或者空格分割 10px solid red
 在CSS中出現的屬性值，在less中均可以用做變量名

 

 2 混合(Mixins)
 無參數混合：
 聲明：.class{}
 調用：再選擇器中使用.class；直接調用
 ②：有參無默認值混合：
 聲明. class(@param){}
 調用： . class(paramValue);

 

 3 有參數有默認值混合：
 聲明： .class(@param:10px){}
 調用：.class(paramValue); 或 .class();

 》》》若是聲明時。沒有給參數賦默認值，則調用必須賦值，不然報錯
 》》》無參混合就是一個普通的class選擇器，會被編譯到css文件中，有參混合，
 在編譯中，不會出如今CSS文件中

 

 

匹配模式

 3 less中的匹配模式
 ①聲明：
@pipei(條件1，參數){} @pipei(條件2，參數){} @pipei(@_，參數){}
 ②：調用：
 @pipei(條件的值，參數的值){}
 ②：匹配規則
 根據調用時輸入的條件值，去尋找與之匹配的混合執行，
 @_表示無論匹配成功與否，都會執行的選項。
 4 @arguments:特殊變量
 在混合中，@arguments表示混合傳入的全部參數；@arguments中的多個參數之間，用空格分割
 .border(@width,@style,@color){
border:@arguments;==> //border:@width @style @color;
}

5 less 中的 + / - * 運算
 less中的全部變量和數值，能夠進行+ - * / 運算，
 須要注意的是，當顏色值運算時，紅綠藍分三組運算，組內單獨運算，足間互不干涉。




 6 less中的嵌套
 LESS中容許CSS選擇器按照HTML代碼的結構進行嵌套，
 section{
 >p{}
 ul{
 &:hover{}
 }
 }
 less中的嵌套是後代選擇器，若是須要子代選擇器，須要在前面家>
 &符號，表示&所在的上一層選擇器，好比上述&表示section ul:hover

 

 註釋一：編譯時不會被編譯到css文件中

/*
註釋二：在非compressed壓縮模式下，會被編譯到css文件中。
* */
/*!
註釋三：重要註釋。在各類壓縮模式下，都會被編譯到css文件中
* */
[SCSS基礎語法]
 一、scss中的變量
①聲明變量：$變量名：變量值；

 SCSS中，容許將變量嵌套在字符串中，可是變量必須使用 井{} 包裹
 eg: border-井{$left}:10px solid yellow;

 二、scss中的運算，會將單位進行運算，使用時需注意最終的單位是否正確。
 eg:10px * 10px =100 px*px;

 三、scss中的嵌套：選擇器嵌套 屬性嵌套 僞類嵌套
 ①選擇器嵌套 ul{li{}}
 嵌套默認表示後代選擇器，若是須要子代選擇器，能夠在選擇器前加>
 能夠在選擇器的{}中，使用&表示上一層的選擇器。

 ②僞類嵌套： li{&:hover{}}
 在選擇器的{}中，使用&配合僞類事件，能夠表示當前選擇器的僞類。

 ③ 屬性嵌套： font:{size:18px;}
 對於屬性名有-分割爲多段的屬性，能夠使用屬性嵌套，屬性名的前半部分必須緊跟一個：才能用{}包裹屬性的後半部分。
 四、混合宏、繼承、站位符：
 ①混合宏：使用@mixin聲明混合宏，在其餘選擇器中使用@include調用混合宏

 @mixin hunhe{} .class{@include hunhe;}

 @mixin hunhe(@param){} .class{@include hunhe(value);}

 @mixin hunhe(@param:value){} .class{@include hunhe();}



 >>>聲明時能夠有參數也能夠沒有參數。參數能夠有默認值也能夠沒有默認值。可是調用時，必須符合聲明時的要求。與LESS中的混合相同
 >>>優勢：①能夠傳參 ②不會產生同名的class
 >>>缺點：調用時，會把混合宏中全部的代碼copy到選擇器中，產生大量重複代碼



 ②繼承：聲明一個普通class，在其餘選擇器中使用@extend繼承這個class
 .class{ } .class1{ @extend.class1;}
 >>>優勢：將相同代碼，提取並集選擇器，減小冗餘代碼；
 >>>缺點：①不能傳參；②會產生出一個多餘的class；



 ③佔位符：使用%聲明佔位符，在其餘選擇器中使用@extend 繼承佔位符；
 %class1{} .class1{@extend %class1;}
 >>>優勢：①將相同代碼，提取到並集選擇器，減小冗餘代碼；
②不會生出一個多餘的代碼
 》》》缺點：不能傳參

 if條件結構:
 條件結構須要寫在選擇器裏面，條件結構的大括號直接包裹樣式屬性。
 @if 條件 {}
 @else{}

 6. for循環:使用@for $i from 1 to 10{}//不包括10
使用@for $i from 1 through 10{}//包括10

 7. while循環：$i:0;
@while $i<10{
 $i:$i+1
 }
 8. each 循環便利：
 @each $item in a,b,c,d{
 //$item 表示 a,b,c,d的每一項