css向右移动，mdx后缀css，css分页样式修改，css图片路径波浪线，css 美观下拉菜单，css选择器 伪类，css中图片样式的引用
jQuery通用的全局遍历方法？
1.test.json文件代码：
[
{
“username”: “张三”,
“content”: “沙发.”
},
{
“username”: “李四”,
“content”: “板凳.”
},
{
“username”: “王五”,
“content”: “地板.”
}
]
2.html代码：
<p>
<input type=”button” id=”send” value=”加载”/>
</p >
<div class=”comment”>已有评论：</div>
<div id=”resText” ></div>
3.jQuery代码：
<script src=”jquery-1.3.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
/*
1.$.each()是jquery的一个通用的遍历方法，可用于遍历对象和数组
2.$.each()函数不同于jquery对象的each()方法，它是一个全局函数，不操作jquery对象，而是以一个数组或者对象作为第一个参数，以一个回调函数作为第二个参数。回调函数拥有两个参数：第一个参数为对象的成员或数组的索引，第二个参数为对应变量或内容
*/
$(function(){
$(‘#send’).click(function() {
$.getJSON(‘test.json’, function(data) {
$(‘#resText’).empty();
var html = ”;
$.each( data , function(commentIndex, comment) {
html += ‘<div class=”comment”><h6>’ + comment[‘username’] + ‘:</h6><p class=”para”>’ + comment[‘content’] + ‘</p ></div>’;
})
$(‘#resText’).html(html);
})
})
})
</script>
jQuery如何定义插件？
Query编写插件的两种方法
1.添加jQuery对象级的插件，是给jQuery类添加方法
写法：
;(function($){
$.fn.extend({
“函数名”:function(自定义参数){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.fn.函数名=function(自定义参数){
//这里写插件代码
}
})(jQuery);
调用方法：$(“#id”).函数名(参数);
2.jQuery类级别的插件，相当于添加静态方法
;(function($){
$.extend({
“函数名”:function(自定义参数){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.函数名=function(自定义参数){
//这里写插件代码
}
})(jQuery);
调用方法：$.函数名(参数);
jquery插件的种类：
1.对象级别的插件开发，即给jQuery对象添加方法，封装对象方法的插件，如:parent()、appendTo()
2.一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法，jQuery的全局函数就是属于jQuery命 名空间的函数，封装全局函数的插件
3.选择器插件
jQuery插件机制
jQuery为开发插件提拱了两个方法，分别是：
jQuery.fn.extend(object); 给jQuery对象添加方法。
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法，可以理解为添加静态方法。
这两个方法都接受一个参数，类型为Object，Object对应的”名/值对”分别代表”函数或方法体/函数主体”。
fn 是什么东西呢？
查看jQuery代码，就不难发现：
jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//…. //…… };
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然javascript没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如 大家用 语句 $(“#btn1”) 会生成一个 jQuery类的实例。
jQuery.fn.extend(object)， 对jQuery.prototype进行扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。即：$(“#id”).object();
jQuery.extend()方法除了可以扩展jQuery对象外，还可以扩展已有的Object对象，经常被用于设置插件方法的一系列默认参数，可以很方便的用传入的参数来覆盖默认值
jQuery.extend(object1,object2)object1默认参数值，object2传入的参数值；详细说明，请点击这里
var settions ={validate:false,limit:5,name=”foo”};
var options ={validate:true,name=”bar”};
var newOptions=jQuery.extend(settings,options);
结果为：
newOptions = {validate:true,limit:5,name=”bar”};
function foo(options){
options = jQuery.extend({
name=”bar”,
length:5,
dataType=”xml” /*默认参数*/
},options /*options 为传递的参数*/
);
}
如果用户调用foo()方法的时候，在传递的参数options对象中设置了相应的值，
那么就使用设置的值，否则使用默认值，调用方法：
foo({name:”a”,length:4,dataType:”json”});
foo({name:”a”});
foo();
编写jQuery插件
封装jQuery对你方法的插件，首先需要在javaScript文件里搭好框架，代码如下：
;(function($){
//这里写插件代码
})(jQuery);
1.对象级别的插件开发，即给jQuery对象添加方法，封装对象方法的插件，如:parent()、appendTo()
由于是对jQuery对象的方法扩展，因此采用扩展第1类（封装对象方法）插件的方法jQuery.fn.extend()来编写
;(function($){
$.fn.extend({
“color”:function(value){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.fn.color=function(value){
//这里写插件代码
}
})(jQuery);
这里的方法提供一个参数value,如果调用方法时传入value，那么就用这个值来设置字体颜色,否则就是获取匹配无此的字体颜色的值
;(function($){
$.fn.extend({
“color”:function(value){
return this.css(“color”,value);
}
});
})(jQuery);
插件内部的this指向的是jQuery对象，而非普通的DOM对象。接下来注意的是，插件如果不需要返回字符串之类的特定值，应当使其具有可链接性。
为此，直接返回这个this这个对象，由于css()方法也会返回调用它的对象，即此外的this，因此可以将代码写成上面的形式;
调用时可直接写成：$(“div”).color(“red”);
另外如果要定义一组插件，可以使用如下所示写法：
;(function($){
$.fn.extend({
“color”:function(value){
//这里写插件代码
},
“border”:function(value){
//这里写插件代码
},
“background”:function(value){
//这里写插件代码
}
});
})(jQuery);
2.封装全局函数的插件
这类插件是在jQuery命名空间内部添加一个函数。这类插件很简单，只是普通的函数，没有特别需要注意的地方。
例如新增两个函数，用于去除左侧和右侧的空格。
首先构建一个Object对象，把函数名和函数都放进去，其中的名/值对分别为函数名和函数主体
然后利用jQuery.extend()方法直接对jQuery对象进行扩展
jQuery代码如下：
;(function($){
$.extend({
ltrim:function(text){
return (text||””).replace(/^\s+g,””);
},
rtrim:function(text){
return (text||””).replace(/\s+$/g,””);
}
});
})(jQuery);
或者
;(function($){
$.ltrim=function(text){
return (text||””).replace(/^\s+g,””);
},
$.rtrim=function(text){
return (text||””).replace(/\s+$/g,””);
}
})(jQuery);
*(text||””)部分是用于防止传递进来的text这个字符串变量处于未定义的特殊状态，如果text是undeined，则返回字符串””，否则返回字符串text。
这个处理是为了保证接下来的字符串替换方法replace()方法不会出错
*运用了正则表达式替换首末的空格
调用函数：
$(“trimTest”).val(
jQuery.trim(” test “)+”\n”+
jQuery.ltrim(” test “)+”\n”+
jQuery.rtrim(” test “)
);
运行代码后，文本框中第一行字符串左右两侧的空格都被删除。
第二行的字符串只有左侧的空格被删除。
第三行的字符串只有右侧的空格被删除。
3.自定义选择器
sass系统产品介绍？
Sass是CSS的预处理器，它提供了许多便利的写法方法
可以使用变量，常量，嵌套，函数，混合，继承等功能，让css的开发变得更加简单可维护。
直接写出来的sass文件其实就是普通的文本文件，以.sass或.scss作为文件后缀名。
里面可以直接使用css语法以及sass特有的语法特性，完成后通常需要经过编译成合法的css文件以供浏览器使用。
sass的安装
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。
安装完成后需测试安装有没有成功,运行CMD输入以下命令：
ruby -v
如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。大家可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：
安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
在每一个安装过程中，你都会看到如下输出：
Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed
安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：
sass -v
Sass 3.x.x (Selective Steve)
compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
sass的编译
1.命令行编译;
//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass –watch input.scss:output.css
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass –watch app/sass:public/stylesheets
2.编译工具Koala
3.使用vscode中的Live Sass Compiler插件来实现scss文件的实时编译
变量
Sass 让人们受益的一个重要特性就是它为 CSS 引入了变量。你可以把反复使用的 CSS 属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。
变量的定义是以$符号开头，加上变量名，比如：
$text-warning: red;
$border-radius: 5px;
.tip {
color: $text-warning;
border: 1px solid $border-radius;
}
变量也可以通过加减乘除等运算符号进行计算，比如：
$font-base: 10px;
.article {
font-size: $font-base * 2 – 4px;
border-width: $font-base / 10;
}
变量的注意事项
变量需要提前声明才能使用，因为编译是从上往下进行的，如果在还未声明变量的地方使用，会找不到这个变量。
变量都是全局变量，如果在大括号内部定义的变量则属于局部变量。
嵌套
通常所用到的选择器嵌套是这样的，将新的选择器放到父级选择器当中，并且可以无限多级嵌套。
继承
如果存在两个class，他们有一些不同但又有许多相似之处，以前的做法可能是把所有样式重复声明两次。但是有sass之后更好的做法是创建一个基础的class，然后在第二个class中用@extend继承它，同时还可以添加一些额外的样式，或者对某些样式进行重写。比如大家之前学过bootstrap的按钮的构建思想，是对基础样式进行附加和重写，而现在想要定义自己的样式时就可以很方便地进行这一操作了。首先声明一个标准样式的class，然后继承这个样式，然后设置不同的主题色：
混合
当出现大段大段重用样式代码时，独立的变量就难以应付，这个时候可以通过sass的混合器@mixin 和 @include 实现大段样式的重用。在定义mixin时，需要在前面添加@符号，使用时需要用@include来引用该@mixin：
导入
导入规则可以从外部文件导入mixin混合器等等。在sass中有一个命名惯例，被导入的样式文件名用下划线做前缀。导入的语法是@import “xxx”，这里的xxx不需要带文件后缀和下划线前缀。也就是说导入“_style.sass”或者“_style.scss”的时候，只需要写@import “style”就可以了：
1.为什么要使用SASS？
它是预处理语言，它为CSS提供缩进语法（它自己的语法）。
它允许更有效地编写代码和易于维护。
它是包含CSS的所有功能的CSS的超集，是一个开源的预处理器，以 Ruby 编码。
它提供了比平面CSS好的结构格式的文档样式。
它使用可重复使用的方法，逻辑语句和一些内置函数，如颜色操作，数学和参数列表。
2.列出SASS的一些功能？
它是更稳定，强大，与CSS的版本兼容。
它是超集的CSS和基于JavaScript。
它被称为CSS的语法糖，这意味着它使用户更容易阅读或表达的东西更清楚。
它使用自己的语法并编译为可读的CSS。
你可以在更少的时间内轻松地编写CSS代码。
它是一个开源的预处理器，被解释为CSS。
3.SASS的优点是什么？
它允许在编程结构中编写干净的CSS。
它有助于编写CSS更快。
它是CSS的超集，帮助设计师和开发人员更有效率和快速地工作。
由于Sass兼容所有版本的CSS，大家可以使用任何可用的CSS库。
可以使用嵌套语法和有用的函数，如颜色操作，数学和其他值。