星哥自述
荷兰一个著名的城市：阿贾克斯（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的每一项