jQuery
概述
概述
jQuery是一种快速，简洁的JavaScript库。对代码进行了封装存放。宗旨是write less do more。j是JavaScript ，query查询。常见的JavaScript库有juery，Prototype，YUI，Dojo, Ext JS和移动端的zepto等等。
优点
1，轻量级。核心文件小，不会影响页面加载速度
2，跨浏览器兼容。基本兼容现在主流浏览器
3，链式编程，隐式迭代
4，对事件，样式，动画支持是，大大简化了Dom操作
5，支持插件扩展开发，有丰富的插件：树形菜单，日期控件，轮播图等
6，免费，开源
基本使用
网站：https://jquery.com
版本：版本1：兼容IE678等低版本浏览器，官网不更新
版本2：不兼容IE678等低版本浏览器，官网不更新
版本3：不兼容IE678等低版本浏览器，是官方更新维护版本
版本网站：https://code.jquery.com/
1,用原生js获取来的对象就是DOM对象 document.querySelector(“ “)
2,jQuery方法获取的元素就是jQuery对象 $(“”)
jQuery对象只能使用jQuery方法
3,DOM对象转换为jQuery对象：$(DOM对象)
$('div')4,jQuery对象转换为DOM对象
$('div')[index] //$('video')[0].play()
$('div').get(index) //$('video').get(0).play()jQuery中选择器获取的是存储了HTML元素对象的数组
JQuery入口函数：
$(document).ready(function(){
// 执行代码
});
或者简写为：
$(function(){
// 执行代码
});
js入口函数：window.onload = function () {...}
区别：
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行，可定义多次。
- JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行，且只能定义一次，多次定义后边将前边覆盖。- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行，可定义多次。
- JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行，且只能定义一次，多次定义后边将前边覆盖。
$(".btn1"); //选中class="btn1"的元素
$(".btn1,btn3"); //选中class="btn1"或class="btn3"的元素
| 选择器 | ||
|---|---|---|
| 基本选择器和css一样 | ||
| $(“p:first”) | 选取第一个 p 元素 | |
| $(“ul li:first”) | 选取第一个 ul元素的第一个li元素 | |
| $(“ul li:first-child”) | 选取每个ul元素的第一个 li元素 | |
| $(“p:first-of-type”) | 属于其父元素的第一个元素的所有元素 | |
| $(“p:nth-child(2)”) | 属于其父元素的第二个子元素的所有元素，从最后一个子元素开始计数 | |
| $(“[href]”) | 选取带有 href 属性的元素 | |
| $(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的a元素 | |
| $(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 a 元素 | |
| $(“:button”) | 选取所有 type=”button” 的 input 元素 和 button 元素 | |
| $(“tr:even”) | 选取偶数位置的 tr 元素 | |
| $(“tr:odd”) | 选取奇数位置的 tr 元素 | |
| $(“:lt(num)”) | 选取索引值小于num的元素 | |
节点操作
appdend()
appendTo() 把当前的元素追加到目标元素内部的后面，类似于:after
remove() 删除移中元素的自身
empty() 清空子元素
eq(n)绑定事件
$("p").click(function(){
// 动作触发后执行的代码!!
});
//事件监听
$(".btn1").on("click", function (event) {
console.log("回调函数的执行，on的绑定");
});
$(选择器).off(事件类型,函数名?);
//如果没有写函数名，则会移除所有的
//单次事件
var btn1 = document.querySelector(".btn1");
btn1.addEventListener("click", function () {
console.log("你点了我一下");
btn1.removeEventListener("click", arguments.callee);
});
//jQuery单次事件
$(".btn1").one("click",function(){
console.log("你点了我一下");
});
动态特效
//元素隐藏，（速度("slow"、"fast" 或毫秒)，匀速(linear,swing)，回调函数）
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
//元素显示
$("p").show();
//显示和隐藏的切换
$("p").toggle();
//淡入淡出
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
//一次添加淡入淡出
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
//渐变为给定的不透明度
$("#div1").fadeTo("slow",0.15);
//向上下滑出
$("#panel").slideDown();
$("#panel").slideUp();
//一次添加
$("#panel").slideToggle();
//动画
$("div").animate({
left:'250px',
opacity:'0.5',
height:'+=150px',
width:'-=150px'
});
//可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
height:'toggle'
//默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
//色彩动画并不包含在核心 jQuery 库中,即无法操作颜色变换
//定义多个animate是随代码逐行依次执行
//停止动画
$("#panel").stop();
//链式写法，依次执行
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
text();//获取文本内容
html();//获取标签内容
val();//设置或返回表单字段的值
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
//设置属性
$("#runoob").attr("href","http://www.runoob.com/jquery");
//设置多个属性
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
//使用回调函数
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
获取偏移量
修改样式
修改类名
addClass() 在选定的元素上面添加一个class样式
removeClass() 在选定的元素上面移除一个class样式
toggleClass() 在选定的元素上面切换一个class样式
$("#userName").attr("type"); //取type属性的值
$("#userName").attr("type","password"); //对type属性赋值
$("#userName").removeAttr("placeholder"); //移除placeholder这个属性
$("#reading").prop("checked"); //获取单属性checked的状态
$("#reading").prop("checked",false); //对单属性checked赋值SASS相关介绍
CSS的不足
1. 无法嵌套书写导致代码繁重、冗杂、逻辑混乱。
2. 没有变量和样式复用机制，属性值只能以字面量的形式重复输出
1. SCSS/SASS
SASS (.scss)。于2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
2. LESS
LESS (.less)。于2009年诞生，借鉴了SASS的长处，并兼容了CSS语法，使得开发者使用起来更为方便顺手，但是相比于SASS，其编程功能不够丰富，反而促使SASS进化成为了SCSS。
3. Stylus
Stylus (.styl)。于2010年诞生，出自Node.js社区，主要用来给Node项目进行CSS预处理支持，人气较前两者偏低。1.优点
CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让CSS更加简洁、提高代码复用性、逻辑分明等等
2.缺点
css的文件体积和复杂度不可控；增加了调试难度和成本等。Sass有两套语法：
1.第一种或更新的语法被称为SCSS。它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了此语法。使用此语法的文件扩展名为.scss。
2.第二种或更旧的语法被称为SASS。提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass。
任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式
1. 官方介绍
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
2. 特色功能
- 完全兼容 CSS3
- 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令 (control directives)等高级功能
- 自定义输出格式环境配置
Node环境
安装cnpm并使用安装（npm容易报错）
$npm i -g cnpm --registry=https://registry.npm.taobao.orgsass安装$cnpm i -g node-sass
检查是否安装成功$node-sass -v
使用：
1. 单文件编译 $node-sass 原有的scss文件 生成的css文件 $node-sass 原有的scss文件 -o 生成目录 # example: $node-sass a.scss b.css $node-sass a.scss css_files 2. 多文件编译 $node-sass 原有的scss文件目录 -o 生成的css文件目录 # example: $node-sass c -o d 3. 文件监听模式 # 在"1"和"2"的基础上填加"-w"命令行参数即可 $node-sass -w 原有的scss文件 -o 生成目录 $node-sass -w 原有的scss文件目录 -o 生成的css文件目录 # example: $node-sass -w scss -o css 效果：编译进程不结束，监听文件内容
vscode编译
安装Easy Sass（编译）和Sass（代码提示）两个插件即可
注释
Sass 支持标准的 CSS 多行注释
/* */，以及单行注释//，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。将
!作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。插值语句 (interpolation) 也可写进多行注释中输出变量值
变量
声明变量：
$width: 1600px;
$pen-size: 3em;
使用：
#app {
height: $width;
font-size: $pen-size;
}
将局部变量转换为全局变量可以添加 !global
#foo {
$width: 5em !global;
width: $width;
}
#bar {
width: $width;
}数据类型
SassScript 支持 7 种主要的数据类型：
- 数字，`1, 2, 13, 10px`
- 字符串，有引号字符串与无引号字符串，`"foo", 'bar', baz`
- 颜色，`blue, #04a3f9, rgba(255,0,0,0.5)`
- 布尔型，`true, false`
- 空值，`null`
- 数组 (list)，用空格或逗号作分隔符，`1.5em 1em 0 2em, Helvetica, Arial, sans-serif`
- maps, 相当于 JavaScript 的 object，`(key1: value1, key2: value2)`
SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 `!important` 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。
判断数据类型的方式：`type-of($value)` 1.字符串 (Strings)
SassScript 支持 CSS 的两种字符串类型：`有引号字符串 (quoted strings)`，和`无引号字符串 (unquoted strings)`。
$name: 'Tom Bob';
$container: "top bottom";
$what: heart;
// 注：在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 `#{}` (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名
2.数字(Numbers)
SassScript支持两种数字类型：`带单位数字`和`不带单位数字`。（可正可负可为零，可正可浮点）
$my-age: 19;
$your-age: 19.5;
$height: 120px;
// 注：单位会和数字当做一个整体，进行算数运算
3.空值(Null)
$value: null;
// 注：由于它代表空，所以不能够使用它与任何类型进行算数运算
4.布尔型(Booleans)
只有两个取值：`true`和`false`
$a: true;
$b: false;
// 注：只有自身是false和null才会返回false，其他一切都将返回true
5.数组 (Lists)
通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。索引从`1`开始
$list0: 1px 2px 5px 6px;
$list1: 1px 2px, 5px 6px;
$list2: (1px 2px) (5px 6px);
数组中可以包含子数组，比如 `1px 2px, 5px 6px` 是包含 `1px 2px` 与 `5px 6px` 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 `(1px 2px) (5px 6px)`。变化是，之前的 `1px 2px, 5px 6px` 使用逗号分割了两个子数组 (comma-separated)，而 `(1px 2px) (5px 6px)` 则使用空格分割(space-separated)。
当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），所以 `(1px 2px) (5px 6px)` 与 `1px 2px, 5px 6px` 在编译后的 CSS 文件中是完全一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。
用 `()` 表示不包含任何值的空数组（在 Sass 3.3 版之后也视为空的 map）。空数组不可以直接编译成 CSS，比如编译 `font-family: ()` Sass 将会报错。如果数组中包含空数组或空值，编译时将被清除，比如 `1px 2px () 3px` 或 `1px 2px null 3px`。
基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如 `(1,)` 表示只包含 `1` 的数组，而 `(1 2 3,)` 表示包含 `1 2 3` 这个以空格分隔的数组的数组。
### 6.映射(Maps)
Maps必须被圆括号包围，可以映射任何类型键值对（任何类型，包括内嵌maps，不过不推荐这种内嵌方式）
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
### 7.颜色 (Colors)
CSS原有颜色类型，十六进制、RGB、RGBA、HSL、HSLA和色彩单词
SCSS提供了内置Colors函数，从而更方便地使用颜色
$color0: green;
$color1: lighten($color, 15%);
$color2: darken($color, 15%);
$color3: saturate($color, 15%);
$color4: desaturate($color, 15%);
$color5: (green + red);
嵌套CSS 规则
选择器嵌套同css
//编译前
article {
~ article { border-top: 1px dashed #ccc }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//编译后
article ~ article { border-top: 1px dashed #ccc }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
嵌套属性
//编译前
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
//编译后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}导入@import
包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss
@import "foo.scss";
@import "foo";
// 以上两种方式均可
@import "rounded-corners", "text-shadow";
// 以下方式均不可行
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
& 父层选择器
#{} 插值语句，可用于选择器、属性名、变量、注释
`!default`如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值；
变量是 null 空值时将视为未被 `!default` 赋值
`!global`将局部变量提升为全局变量
@media的 queries 允许互相嵌套使用，编译时，Sass 自动添加 `and`
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
// 编译为：
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }注释
Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会。
