星哥自述
荷兰一个著名的城市:阿贾克斯(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>
![](https://i-blog.csdnimg.cn/blog_migrate/f9ac32316aef86f3fe88e2821910b992.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c3bd084067e0304c7d7c0010a5e177aa.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0364d58e304b34e8d1a4b1ac98bedf78.png)
点击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").οnclick=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>
![](https://i-blog.csdnimg.cn/blog_migrate/0d216b970578e22b62d851ebc5be67be.png)
<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的每一项