荷兰之光：阿贾克斯

Posted 2020-10-07

                                星哥自述

荷兰一个著名的城市：阿贾克斯（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基础语法]
 1、scss中的变量
①声明变量：$变量名：变量值；

 SCSS中，允许将变量嵌套在字符串中，但是变量必须使用 井{} 包裹
 eg: border-井{$left}:10px solid yellow;

 2、scss中的运算，会将单位进行运算，使用时需注意最终的单位是否正确。
 eg:10px * 10px =100 px*px;

 3、scss中的嵌套：选择器嵌套 属性嵌套 伪类嵌套
 ①选择器嵌套 ul{li{}}
 嵌套默认表示后代选择器，如果需要子代选择器，可以在选择器前加>
 可以在选择器的{}中，使用&表示上一层的选择器。

 ②伪类嵌套： li{&:hover{}}
 在选择器的{}中，使用&配合伪类事件，可以表示当前选择器的伪类。

 ③ 属性嵌套： font:{size:18px;}
 对于属性名有-分割为多段的属性，可以使用属性嵌套，属性名的前半部分必须紧跟一个：才能用{}包裹属性的后半部分。
 4、混合宏、继承、站位符：
 ①混合宏：使用@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的每一项