1.$.getJSON("接口",{uname:"tom"},function(){});
index.html
$(document).click(function(){
$.getJSON("index.json",function(res){
console.log(res.name);
})
});
index.json
{
"name":"jerry"
}
2.$.getScript("第三方js文件",function(res){});
index.html
$(document).click(function(){
$.getScript("index.js",function(res){
//console.log(res);//输出的是js中整个文件内容
//alert(a+b);//也可输出值
alert(box())// 也可以调用函数
});
});
index.js
var a = 6;
var b = 8;
function box(){
return a+b;
}
3.jquery插件
定义:用jquery代码封装好的某种功能的一个外部模块。引入进来就可以使用。
1)//全局定义插件
;((function(){//自调用函数
$.extend({
sayHello:function(a){//函数
alert(a)
}
})
})(jQuery));
//调用:
$.sayHello("Hello")
2)//局部插件定义:必需通过jquery选择器调用
;((function(){//自调用函数
$.fn.extend({
sayHello:function(a){
alert(a)
},
eat:function(a){
alert(a)
}
})
})(jQuery));
//调用局部插件
$("body").eat("吃饭")
对象合并
var obj = $.extend({name:"Tom",age:23},{name:"Tom",age:54},{phone:123})
案例表单验证:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入文件要有顺序-->
<script src="../../jquery.js"></script>
<script src="jquery.validate.js"></script><!--实现某种功能的插件-->
<script src="jquery.validate.messages_zh.js"></script><!--中文包-->
</head>
<body>
<form action="123.html">
//要验证哪个就在其加一个属性class=“值”(值就是对应的)name属性值必须要写且要写对
<p>用户名:<input type="text" class="required" minlength = "6" maxlength="10" name="uname"/></p>
<p>邮箱:<input type="text" class="required email" name="email"/></p>
<p>网址:<input type="text" class="url" name="url"/></p>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
$("form").validate();
</script>
自定义插件案例:导航栏
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.nav_list{
width: 600px;
height: 30px;
padding: 0px;
margin: 50px auto;
font-size: 13px;
list-style: none;
color: white;
}
.nav_list li{
background: black;
width: 120px;
float: left;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<ul class="nav_list">
<li>一级导航列表
<ul class="nav">
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
</ul>
</li>
<li>一级导航列表
<ul class="nav">
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
</ul>
</li>
<li>一级导航列表
<ul class="nav">
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
</ul>
</li>
<li>一级导航列表
<ul class="nav">
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
</ul>
</li>
<li>一级导航列表
<ul class="nav">
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
</ul>
</li>
</ul>
<br> <br> <br> <br> <br> <br> <br>
<ul class="nav_list">
<li>一级导航列表
<ul class="nav">
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
<li>二级导航1</li>
</ul>
</li>
<li>一级导航列表
<ul class="nav">
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
<li>二级导航2</li>
</ul>
</li>
<li>一级导航列表
<ul class="nav">
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
<li>二级导航3</li>
</ul>
</li>
<li>一级导航列表
<ul class="nav">
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
<li>二级导航4</li>
</ul>
</li>
<li>一级导航列表
<ul class="nav">
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
<li>二级导航5</li>
</ul>
</li>
</ul>
</body>
</html>
<script src="../../jquery.js"></script>
<script src="jQuer.nav.js"></script>
<script type="text/javascript">
// $.nav();//全局调用
$(".nav_list").eq(1).nav("blue");//局部调用
$(".nav_list").eq(0).nav("red");
</script>
jQuer.nav.js(命名一般中间要实现哪个地方功能就写什么)
;((function(){//插件要写在自调用函数里
//局部插件
/* $.extend({
"nav":function(){
$(".nav").css({
"list-style":"none",
"padding":0,
"display":"none"
})
$(".nav").parent().hover(function(){
$(this).find(".nav").stop().slideDown("fast");
},function(){
$(this).find(".nav").stop().slideUp("fast");
})
}
});*/
//创建局部的插件方法
$.fn.extend({
"nav":function(color){
$(this).find(".nav").css({
"list-style":"none",
"padding":0,
"display":"none",
"color":color
})
$(this).find(".nav").parent().hover(function(){
$(this).find(".nav").stop().slideDown("fast");
},function(){
$(this).find(".nav").stop().slideUp("fast");
})
}
});
})(jQuery));
4.sass
1)主要用来写css样式的。
HBuilder里创建一个. scss文件。然后把css文件夹拖到考拉里面,设置输出路经,然后文件名以.css结尾的文件,然后双击选择Auto Compile,Output Style:选择expanded。就会在css文件夹下生成一个index.css的文件。
识别中文:@charset "utf-8"
两种格式
一:sass格式
body
background:red;
font-size:12px;
二:scss(一般用这个)
body{
}
index.scss(写代码的规则就是层级关系,父子关系下写,同级关系下写)就是嵌套
#box{
width:200px;
height:200px;
.content{
width: 400px;
height: 50px;
background: red;
p{
font-size: 20px;
color:yellow;
//&是继承 &:hover{
color: steelblue;
}//鼠标放上去就显示其他样式
}
ul li{
list-style: none;
color:blue;
float: left;
}
}
p{
color: aqua;
background: greenyellow;
}
}
2)sass基本语法
//1.通过import把第三方代码引入
@import "pub.scss";
@import "public.css";
//2.定义变量(变量的使用)
$a:200px;
$b:100px;
//3.代码的复用1
.pub{
width: $a;
height:$b;
background: yellow;
}
#box1{
@extend .pub;
}
//4.代码的复用2
@mixin public($w:200px,$h:500px,$bg:red,$b:2px){//后面的值是默认值(可以不用设置默认值)
width:$w;
height:$h;
background: $bg;
border:$b solid black;
}
#box2{
@include public(600px,300px,blue,5px);(有参数就必须要传参)
}
//5.数组的使用
$arr:(red,5px,200px,500px);
#box3{
width: nth($arr,3);
height:nth($arr,4);
border:nth($arr,2) solid nth($arr,1);
z-index:index($arr,200px);
z-index:length($arr);
}
//6.if条件
$i:3;
$y:3;
@if($i<$y){
.con{
width:$i*nth($arr,2);
}
}@else if($i>$y){
.con{
width:$i*nth($arr,3);
}
}@else{
.con{
width:100px;
}
}
//7.for循环
@for $i from 1 through 10{
.a#{$i}{
width:10px*$i;
}
}
@for $i from 1 through length($arr){//这个有误区
.a#{$i}{
width:nth($arr,$i);
}
}
//7.for循环
@function box($a){
@return $a/2;
}
.bb{
width:box(2000px);
}
//8.函数
@function box($a){
@return $a/2;
}
.bb{
width:box(2000px);
}
5.svn
版本控制工具
集中式版本控制工具(只有一个服务器)
缺点:一旦服务器出 问题,容易造成数据丢失
不安全,数据容易丢失
必需联网,网络共享,开发人员都要访问同一服务器,造成服务器压力
git:
分布式版本管理控制工具
开发人员的电脑,既可做服务器,也可做客户端
可以把代码共享一到github备份,不用担心数据丢失问题
1.svn项目检出(拉取)checkout
2.添加新文件后,add添加操作(添加到本地的svb,以准备提交,并没有共享到服务器上)add
3.提交文件到vcn服务器,commit