荷兰之光:阿贾克斯

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了荷兰之光:阿贾克斯相关的知识,希望对你有一定的参考价值。

                                星哥自述

荷兰一个著名的城市:阿贾克斯(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的每一项

 









































































































































































以上是关于荷兰之光:阿贾克斯的主要内容,如果未能解决你的问题,请参考以下文章

ajax介绍

求火炬之光2 控制台各装备,套装,宝石代码.齐全的大神来!跪求!! 有的直接给我 谢了!!!

火炬之光2 报错,急。。。。急。。。。急

源代码:科技殿堂の自由之光

海神之光Matlab王者学习之路---代码获取方式

第137篇 荷兰拍卖