day27jQuery插件使用 sass

最新推荐文章于 2020-08-09 13:55:56 发布

qq_38068491

最新推荐文章于 2020-08-09 13:55:56 发布

阅读量497

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83934240

版权

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>

</head>

<body>

//要验证哪个就在其加一个属性class=“值”（值就是对应的）name属性值必须要写且要写对

</form>

</body>

</html>

$("form").validate();

</script>

自定义插件案例：导航栏

index.html

<!DOCTYPE html>

<html>

<head>

.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>

<li>一级导航列表

</ul>

</li>

<li>一级导航列表

</ul>

</li>

<li>一级导航列表

</ul>

</li>

<li>一级导航列表

</ul>

</li>

<li>一级导航列表

</ul>

</li>

</ul>

<li>一级导航列表

</ul>

</li>

<li>一级导航列表

</ul>

</li>

<li>一级导航列表

</ul>

</li>

<li>一级导航列表

</ul>

</li>

<li>一级导航列表

</ul>

</li>

</ul>

</body>

</html>

// $.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;

font-size: 20px;

color:yellow;

//&是继承 &:hover{

color: steelblue;

}//鼠标放上去就显示其他样式

}

ul li{

list-style: none;

color:blue;

float: left;

}

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备份,不用担心数据丢失问题

任务：

在github上注册账户并激活

1.svn项目检出（拉取）checkout

2.添加新文件后，add添加操作（添加到本地的svb，以准备提交，并没有共享到服务器上）add

3.提交文件到vcn服务器，commit

qq_38068491

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day27jQuery插件使用 sass

1.$.getJSON("接口",{uname:"tom"},function(){});index.html $(document).click(function(){ $.getJSON("index.json",function(res){ console.log(res.name); })});index.j...
复制链接

扫一扫