前端框架

No tag

发布日期: 2020-05-29

更新日期: 2020-07-09

字数: 1.7k

阅读时长: 6 分钟

阅读量:

JavaScript

在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互

新兴的Node.js把JavaScript引入服务器端；

基础

JavaScript代码可写在哪里

1.JavaScript代码可以直接嵌在网页的任何地方，通常放在<head>中，由<script></script>包含，可被浏览器直接执行；

2.把JavaScript代码放在一个单独的.js文件中，然后在HTML中通过<script src="..."></script>引入.js文件；

3.多个页面可以各自引用同一份.js文件，同一个页面可以引入多个.js文件，还可以在页面中多次编写<script>...</script>代码，浏览器按照顺序依次执行，关于<script>标签的type属性，不必显示指定，默认是JavaScript；

4.注释形式有两种：//...行注释，/*...块注释*/

在谷歌浏览器开发者工具中，点击Console，在这个面板中可直接输入JavaScript代码，按回车后执行；在Sources可以打断点、单步执行等高级调试技巧。

语法

每个语句以;结束，语句块{...}，但是，并不强制要求在每个语句的结尾加 ;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;，严格区分大小写。

数据类型和变量

1.Number

JavaScript不区分整数和浮点数，统一用Number表示

NAN——表示Not a Number，当无法计算结果时用NAN表示

Infinity——表示无限大，当数值超过了JavaScript的Number所能表示的最大值时

十六进制用0x前缀和0-9,a-f表示

可直接进行四则运算，规则和数学一致

2.字符串

字符串用以单引号''，或双引号""括起来的任意文本。

字符串内部既包含''又包含""可以使用转义字符\；

//字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果
var s = 'Hello, world!';
s.length; // 13
var s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined
/*toUpperCase()全部变大写，toLowerCase()全部变小写，indexOf()搜索指定字符串出现的位置
substring()返回指定索引区间的子串：substring(0,5)——[0,5)，substring(7)，从7开始
*/

3.布尔值

与Java一致

4.比较运算符

支持对任意数据类型做比较；

==：自动转换数据类型再比较；

===：不会自动转换数据类型，如果数据类型不一致，返回false,如果一致，再比较

NaN与所有其他值都不相等，包括它自己，判断NaN的方法是isNaN(NaN)

要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

1 / 3 === (1 - 2 / 3); // false
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

undefined：值未定义，仅仅在判断函数参数是否传递的情况下有空；

5.数组

5.1(推荐使用) JavaScript数组可以包括任意数据类型[1, 2, 3.14, 'Hello', null, true]；

5.2 通过new Array(num1,num2,num3)。

//获取Array的长度，直接访问length属性
var arr = [1, 2, 3];
arr.length; // 3
//length的赋值会导致Array大小的变化
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]

6.对象

JavaScript对象是一组由键-值组成的无序集合

//对象的键都是字符串类型，值可以是任意类型，
var person={
    name:'Bob',
    age:20,
    tags:['js','web','mobile'],
    city:'Shanghai',
    hasCar:true,
    zipcode:null
};
//获取一个对象的属性：对象变量.属性名
person.name;//'Bob'

7.变量

变量可以是任意数据类型，变量是大小写英文、数字、$、_的组合，不能用数字开头，也不能是JavaScript的关键字，申明一个变量用var语句，变量名也可以是中文，不适用var申明的变量，会自动被申明为全局变量，启用strict模式则需要强制通过var变量申明，在JavaScript代码的第一行写上'use strict';

刷新

2.全页面刷新

//刷新当前页
window.loaction.reload();
//刷新父亲对象
parent.location.reload();
//刷新

BootStrap

select标签

样式选择

设置按钮的样式data-style=""；
菜单的箭头class="show-menu-arrow"；
style自定义样式；
data-icon="glyphicon-heart"给option添加小图标；
data-content可以在option中插入html元素；
data-subtext实现option二级标题，实现提示或者其他效果；
select标签展示二级标题，初始化selectpicker时设置showSubtext="true";
通过设置data-actions-box="true"来添加全选和全不选的按钮，按钮的文本;
设置option的data-divider="true"添加数据分割线；
用data-header为下拉菜单设置菜单头；
在对应的select,option,optiongroup上设置disabled即可设置为不可用

单选框

单选框默认是没有多选框的选中之后的”√”图标的，如果想要加上这个图标的话，需要在样式中加入show-tick即可

<!--若想支持模糊查询，添加data-live-search="true"-->
<select class="selectpicker"data-live-search="true">
    <option>value1</option>
    <option>value2</option>
</select>

多选框

相对于单选框，添加multiple；
多选限制：data-max-options=””/初始化selectpicker时设置maxOptionsText；
title自定义按钮的文本；
通过属性 data-selected-text-format 来控制选中的值的显示
可选的值有如下4个：
1.values：逗号分隔的选定值列表（系统默认）；
2.count：如果选择了一个项，则显示选项值。如果选择多于一个，则显示所选项的数量,如选择2个，则下拉框显示2个已被选中；
3.count > x：当count的值小于x时，展示逗号分隔的选定值列表;当count>x时，显示x个被选中；
4.static：无论选中什么，都只展示默认的选中文本。

<select class="selectpicker" multiple data-max-options="2" title="请选择一个">
    <option>value1</option>
    <option>value2</option>
</select>

$('.selectpicker').selectpicker({
'selectedText':'cat',
'maxOptionsText':2;
})