javascript总结
JavaScript
JavaScript简介:
JavaScript历史:
大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。Cmm 背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持与 C （和 C ++）足够的相似性，以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中，它首次向开发人员展示了这种语言的威力。
Nombas 最终把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）听起来过于消极，同时字母 C “令人害怕”。
现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。
当 Netscape Navigator 崭露头角时，Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。
当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。此时，大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络，即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次地往返交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段。
那时正处于技术革新最前沿的 Netscape，开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。
当时工作于 Netscape 的 Brendan Eich，开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。
就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报，JavaScript 从此变成了因特网的必备组件。
JavaScript与java的关系:
Java 和 Javascript 的关系就像雷锋和雷峰塔的关系，像老婆和老婆饼的关系.javascript有点蹭热度的意思,因为当时java是当时最流行的编程语言,带有 “Java” 的名字有助于这门新生语言的传播与发展.当然他们也有相同之处:
1.它们的语法和 C 语言都很相似；
2.它们都是面向对象的（虽然实现的方式略有不同）；
3.JavaScript 在设计时参照了 Java 的命名规则；
不同之处在于:
1.JavaScript 是动态类型语言，而 Java 是静态类型语言；
2.JavaScript 是弱类型的，Java 属于强类型；
3.JavaScript 的面向对象是基于原型的（prototype-based）实现的，Java 是基于类（class-based）的. 4.JavaScript 除了长得和 Java 比较像之外，语言风格相去甚远。JavaScript 在设计时所参考的对象不包括 Java，而包括了像 Self 和 Scheme 这样的语言。
JavaScript与ECMAScript的关系:
ECMAScript是JavaScript的规格，JavaScript是ECMAScript的实现。
JavaScript版本:
JavaScript 由 Brendan Eich 于 1995 年发明，并于 1997 年成为 ECMA 标准。
ECMAScript 是该语言的官方名称。ECMAScript 通常缩写为 ES。
从 2015 年起，ECMAScript 按年命名（ECMAScript 2015）。
所有浏览器都完全支持 ECMAScript 3,所有现代浏览器都完全支持 ECMAScript 5。
Javascript基础:
基础语法:
基本和Java相似,都是;号结尾,大括号包裹语句块,算术运算符,赋值运算符,逻辑运算符,比较运算符,条件运算符,按位操作符都基本一样.
注释:
//:单行注释
/**/:多行注释
ps:和java一样.哈哈
区分大小写:
不管是命名变量还是使用关键字的时候,区分大小写,变量名、函数等比较敏感.
在HTML网页中加入JavaScript的方式:
内联:
通过HTML标记的触发事件属性实现，比如通过onclick事件直接调用JavaScript代码。在HTML中有很多这样的事件属性，通常都是配合JavaScript这样的前端脚本语言来使用，示例代码如下：
外部定义:
本地定义:
通过下面的
<Script>Script>
标记嵌入JavaScript，这是最常用也是最简便的一种引用方式，可以在HTML代码的任何位置嵌入
<head>
<script type="text/javascript">
document.write("Hello world!");
script>head>
远程定义:
通过引用HTML文件的方式加载JavaScript文件，这种方式可以使HTML代码更简洁，方便代码复用。
<head>
<script type="text/javascript" src="路径"> script>
head>
可以放在标签内，如果是非关键javascript代码可以放在后面.
数据类型:
Number:
javaScript只有一个数字类型，它在内部被表示为64位的浮点数，类似于java的double浮点类型,在javaScript中1和1.0的值相同，在java等语言中是不等价的，是两种数字类型。
实例为:
var count =10;
var price = 10.0;
var price =10.00;
String字符串:
在javaScript中所有字符是16位的，使用的是Unicode字符编码集。可以使用单引号或双引号来表示，它可能包含0个或多个字符。
在javaScript中没有字符类型的概念，若需要转义字符则使用/（斜杠）+符号或相关的字母来表示。
实例为:
var longString ="Here's the story , of a man " + " named Brady.";
Boolean布尔值:
布尔(逻辑)只能有两个值:true或者false.
实例:
var x = true;
var y = false;
Object:
js中，任何引用数据类型都属于object,两种创建对象方式:1,使用new关键字.2,用字面量创建空对象.
ps：访问对象的属性值：
方式一：对象名.属性名
方式二：对象名[ “属性名” ]
Array:
javascript的数组可以存放任意类型的数据；
javascript数组的大小可以随着数据的大小而改变；
javascript数组是特殊的对象object；
javascript数组中元素存放的下标只能是整数数字。如果是其他类型，只会被当作对象来处理。
1）数组定义方式：
方式一：
var array = new Array( );
方式二：
var array = [ ];
2）数组的数据存放和获取：
存放：array.name=“zhangsan”;
获取:
alert(array[0]);
3）数组操作：
a、往数组的首尾存入新的元素：
头部添加：array.unshift(“hello”);
尾部添加：array.push(“world”);
b、删除数组的首尾元素：
头部删除：array.shift( );
尾部删除：array.pop( );
Function:
Function实际上是对象，与其他引用类型一样具有属性和方法。Function可以通过三种方法进行定义，分别是函数声明语法定义，函数表达式定义和Function构造函数定义。
1.函数声明语法定义
function functionName(value1...){
//函数体
}
2.函数表达式定义
var functionName = function(value1...){
//函数体
}
3.Function构造函数定义
通过Function构造函数创建函数，可向构造函数中传入任意数量的参数，但值得注意的是传入的最后一个参数会作为函数体，而其他参数则作为参数传入函数中。用该方法去定义函数是不推荐使用的，因为该语法会导致解析两次代码，第一次解析常规ECMAScript代码，第二次解析传入构造函数的字符串，影响性能。
var functionName = new Function("value",...,"函数体");
**注：**函数是引入值类型，所以函数名仅仅是指向函数的指针，当使用函数名去赋值给另一个变量名时，仅仅复制的是一个指针。即在下列a设置为null时，仅将a存的指针消除而已，不会影响b调用函数。
var a = b = function(value1){
return value1;
}
a = null;
b(1);
RegExp:
RegExp 是正则表达式的缩写。
当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。
定义RegExp: RegExp 对象用于存储检索模式,通过 new 关键词来定义 RegExp 对象。
var patt1=new RegExp("e");
RegExp对象的方法(三种):test()、exec() 以及 compile()
Date:
Data对象用于处理日期和时间,创建Data对象的语法:
var myDate=new Date()
ps：Date 对象会自动把当前日期和时间保存为其初始值。
Data对象的属性:
constructor :返回对创建此对象的 Date 函数的引用。
prototype : 向对象添加属性和方法。
JSON:
JSON 英文全称 JavaScript Object Notation,是一种轻量级的数据交换格式,是独立的语言,易于理解,用于存储和传输数据的格式,用于服务端向网页传递数据.
ps : JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。
JOSN实例:
{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}
JSON语法规则:
1.数据为 键/值 对。
2.数据由逗号分隔。
3.大括号保存对象
4.方括号保存数组
JSON 格式化后为 JavaScript 对象:
JSON 格式在语法上与创建 JavaScript 对象代码是相同的,由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。
JSON 字符串转换为 JavaScript 对象:
首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
最后，在页面中使用新的 JavaScript 对象：
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
相关的函数:JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。
Undefined:
undefined是一个特殊值，那些没被变量初始化的变量都有一个初始值，即undefined，表示这个变量等待被赋值.
var person =null;
console.log(person=== null);
Null:
-
用来初始化一个变量，这个变量可能赋值为一个对象。
-
用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象。
-
当函数的参数期望是对象时，用作参数传入。
-
当函数的返回值期望是对象时，用作返回值传出
-
不要使用null来检测是否传入了某个参数。
-
不要使用null来检测一个未初始化的变量
作返回值传出的实例为:
function getperson () { if (condition){ return new person ("Nicholas"); } else { return null; } }用来初始化一个变量，这个变量可能赋值为一个对象的实例为:
var person = getPerson (); if(person != null ){ dosomething(); }ps.最好把null理解为占位符
变量:
和java中的类似,不需要声明什么类型,都用var声明
例如:
var person = getPerson ();
var age = 18;
程序控制语句:
分支:
有if语句,有if-else语句,有if-else-if语句,switch-case语句
跟java类似
循环:
常规for循环:
for(var i = 0; i < 10; i++) {
// 循环10次
}
for in
for(var idx in arr) {
// console.log(arr[idx]);
}
对象:
自定义对象:
1,定义function,使用new关键字创建对象
2,{}的方式
内置对象:
1,window:
是所有其它对象的“祖先”，对一个window对象的引用方法取决于它与当前位置的关系。这个对象最常用的地方在于从一个窗口中新开一个窗口。基本语法如下:
[new window=]window.open(url,windowName[,windowPros]);
2,document:
document对象包含当前文档的信息，例如：标题、背景、颜色、表格等。
方法:（1） 通过write()/writeln()方法在浏览器中显示内容。
（2） 获得当前文档中的元素、属性和节点信息（例如：通过“document.formName”来获得表示页面中的表单名称为fromName的表单对象）。
（3） getElementById()和getElementByTagName()。这两个方法会忽略文档的结构，可查找整个HTML文档中的任何元素（不论它们在文档中所处的位置，例如通过getElementByTagName()可以把文档中所有的
元素找到）
<html>
<head>
<script type="text/javascript">
function message() {
var label = document.getElementById("test")
label.innerText = "kobe bryant"
}
script>
head>
<body>
<input id="test" type="text" style="border-color:Red"/><br />
<input type="button" value="确定" onclick="message()"/>
body>
html>
cookie:
格式为::name=value
Cookie是什么？
借助document的cookie属性，Javascript程序就可
以实现与www服务器一样的cookie功能，即获取当前的
cookie信息和产生一个新的cookie。
cookie的工作原理和过程：
在浏览器中，有一个cookie存储区，这个cookie存储区可以是硬
盘上的一个目录，也可以是浏览器进程中的一片内存，它里面存储
着各个服务器发送过来的状态信息。当浏览器每次访问某个服务器
的时候 ，它都会来检查是否存在与那个服务器相关的状态信息，
如果有，它就会将这些状态信息连同访问请求一起发给服务器。
3,screen:
作用:用于获取用户的屏幕信息。
语法:window.screen.属性
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
-
screen.height 返回屏幕分辨率的高
-
screen.width 返回屏幕分辨率的宽
ps:
1.单位以像素计。-
window.screen 对象在编写时可以不使用 window 这个前缀
-
4,location:
作用:用于获取或设置窗体的URL，并且可以用于解析URL。
语法:location.[属性|方法]
location:对象属性:
hash:设置或返回从#号开始的URL
host:设置或返回主机名与当前URL的端口号
hostname:设置或返回当前URL的主机名
href:设置或返回完整的URL
pathname:设置或返回当前URL的路径部分
port:设置或返回当前URL的端口号
protocol设置或返回当前URL的协议
search:设置或返回从问号?还是得URL
location对象的方法:
assign() 加载新的文档
reload() 重新加载当前的文档
replace()用新的文档替换当前的文档
5,history:
作用:记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
ps:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法:
window.history.[属性|方法]
ps,window可以省略
history对象的属性:
length:返回浏览器历史列表中的URL数量
history对象的方法:
back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go() 加载history列表中的某个具体的页面
使用length属性，当前窗口的浏览历史总长度为
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
script>
函数:
获取函数参数:
1,常规方法:用function获取函数参数
2,通过内置arguments对象获取:
自调用函数:
定义:函数在页面载入后或者之前就自行调用，无需借助其他函数或方法来启动；自己调用自己的函数：
//函数的自调用
//一次性函数
(function (){
``console.log("一次性");
})();
(function(win){
``var num=20;
``win.num=num;
})(window);
//把局部变量给父类就可以了
console.log(num);
jQuery:
基础:
jQuery简介:
- jQuery是一个JavaScript类库，对原生的JS进行了全方面的封装。
- jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
- 本质上就是别人写好一段通用的JS代码。
jQuery有哪些功能？
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
为什么要使用jQuery？
jQuery对原生JS API进行了封装， 使用起来非常方便。 可以极大的提高我们的开发效率。
如何引入jQuery?
jQuery本质上就是一段普通的JavaScript代码， 通常使用引入外部JS的方式来使用jQuery
<script type="text/javascript" src="js/jquery.js"></script>
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
-
$(this).hide() - 隐藏当前元素
-
$(“p”).hide() - 隐藏所有
元素
-
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
-
$("#test").hide() - 隐藏所有 id=“test” 的元素
选择器:
语法：
$(slector)
selector就是选择器表达式，语法基本和CSS选择器一致。
示例：
- $("#container")
- $(".container")
- $(“img”)
- $(“input[type=‘password’]”)
- $("#container image")
HTML操作:
Dom操作:
Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。
属性操作:
语法：
读取属性
$(selector).attr(attrName);
示例：
var href = $("a").attr("href");
var id = $("div").attr("id");
修改属性
$(selector).attr(attrName, "属性值");
示例：
var href = $("a").attr("href", "http://www.jd.com");
属性名不仅支持标准属性，还支持自定义属性
内部操作:
三个相同的方法来设置内容：
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容（包括 HTML 标记）
-
val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
例子:
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); });样式操作:
1 $("#div").addClass("divClass") //为id为div的对象追加样式divClass 2 $("#div").removeClass("divClass") //移除id为div的对象的class名为divClass的样式 3 $("#div").removeClass("divClass01 divClass02") //移除多个样式 4 $("#div").toggleClass("anotherClass") //重复切换anotherClass样式
事件:
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
效果:
显示隐藏:
实例:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
淡入淡出:
jQuery 拥有下面四种 fade 方法：
fadeIn() 语法:
$(selector).fadeIn(speed,callback);
fadeOut() 语法:
$(selector).fadeOut(speed,callback);
fadeToggle() 语法:
$(selector).fadeToggle(speed,callback);
fadeTo() 语法:
$(selector).fadeTo(speed,opacity,callback);
滑动:
jQuery 拥有以下滑动方法：
-
slideDown() 语法
$(selector).slideDown(speed,callback); -
slideUp() 语法:
$(selector).slideUp(speed,callback); -
slideToggle() 语法:
$(selector).slideToggle(speed,callback);
动画:
animate() 方法:
语法:
$(selector).animate({params},speed,callback);
实例:
$("button").click(function(){
$("div").animate({left:'250px'});
});
遍历:
遍历jQuery对象:
方法:child()
定义和用法:children() 方法返回被选元素的所有直接子元素。
语法:
.children(selector)
参数:selector,字符串值，包含匹配元素的选择器表达式。
实例:找到类名为 “selected” 的所有 div 的子元素，并将其设置为蓝色：
$("div").children(".selected").css("color", "blue");
遍历数组:
Ajax:
Ajax 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
下面是ajax的方法:
| $.ajax() | 执行异步 AJAX 请求 |
|---|---|
| $.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 |
| $.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
| $.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
| $.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
| $.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
| $.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
| $.param() | 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串） |
| $.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
| ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
| ajaxError() | 规定 AJAX 请求失败时运行的函数 |
| ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
| ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
| ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
| ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
| load() | 从服务器加载数据，并把返回的数据放置到指定的元素中 |
| serialize() | 编码表单元素集为字符串以便提交 |
| serializeArray() | 编码表单元素集为 names 和 values 的数组 |
EasyUI:
简介:
EasyUI是什么?
EasyUI是一套前端框架。 它封装jQuery、Vue等前端JS框架，另外它还提供了一套完善的UI组件，比如窗体、表单、表格、树、进度条、手风琴菜单…
EasyUI的应用场景:
主要用来做一些公司内部使用的管理系统， 因为它提供了丰富的组件，可以直接拿来使用， 降低了后台系统开发的时间。但是它的UI不是特别美观，不建议用来做和客户交互的系统界面。
使用步骤:
1,下载EasyUI
https://www.jeasyui.com/download/v18.php
2,引入EasyUI相关的JS,CSS
<head>
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js">script>
<script type="text/javascript" src="js/jquery.easyui.min.js">script>
<script src="js/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8">script>
head>
3,需要有一个HTNL标签:
比如说：
使用datagrid组件需要添加：
或者创建标签时一并指定样式：
<table id="xxx" class="easyui-datagrid"></table>
4,给标签添加相应的easyUI样式(可选)
比如：
- 按钮
EasyUI按钮
- 窗口
<div class="easyui-window" title="EasyUI窗口"></div>
5,调用EasyUI相关的JS方法来初始化,设置组件参数(可选)
语法:
// 无参数初始化一个组件
$(selector).组件();
//比如初始化一个日期选择控件
$("#calendar").calendar();
// 有参数初始化一个组件
$(selector).组件({参数key/value形式});
// 示例参见下面的数据表格使用方法
// 调用组件的某个方法
$(selector).组件('组件的方法名');
// 例如：调用窗口的打开方法
$("#win").window('open');
使用示例:
比如：
- 数据表格组件
html代码：
js代码：
$("#dynamic_table").datagrid({
title: "学生信息-动态表格",
columns:[[
{field:'sname',title:'学生姓名',width:80,sortable:true},
{field:'age',title:'年龄',width:80,sortable:true},
{field:'gender', title:'性别'},
{field:'hobby', title:'爱好'}
]],
// url: 'xxxx.php', // 远程加载数据
// 加载本地数据
data: [
{sname:"好金磊", age: 23, gender: '男', hobby: "抽烟"},
{sname:"坏金磊", age: 25, gender: '男', hobby: "抽烟"},
{sname:"哈银磊", age: 27, gender: '男', hobby: "抽烟"},
{sname:"去银磊", age: 29, gender: '男', hobby: "抽烟"},
{sname:"ui金磊", age: 33, gender: '男', hobby: "抽烟"}
]
});
主要组件:
窗口相关:
创建窗口:
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>
表格相关:
详情参考EasyUI,上面很详细.
树形组件:
详情参考EasyUI,上面很详细.
表单相关:
详情参考EasyUI,上面很详细.
layUI:
简介:
layUI与EasyUI类似,都封装了JQuery和一套完整的组件样式,是国产的一个前端框架,使用起来更容易上手
布局:
类似Bootstrap的栅格布局,支持响应式
使用步骤:
第一步. 引入LayUI相关的JS、CSS
一共两个文件
第二步. 添加样式、或者引入JS模块
LayUI中的组件分为两种：
- 一种不要引入单独的模块，直接给原生的DOM元素添加class样式即可，比如按钮、小图标（印章）
- 另一种需要引入LayUI相关的模块，比如弹出层layer
组件分类:
需要引入layUI相关的模块才能使用的
只添加class样式就可以使用的
后台开发常用组件:
表格组件,Tab标签页,面板,弹出层,树形组件,轮播图,导航菜单,表单相关组件,面包屑导航条
JavaScript的应用场景:
添加交互事件,操作DOM元素,操作样式,验证表单,异步请求Ajax,正则匹配
JavaScript 和JSON:
区别:
JSON:仅仅是一种数据格式,可以跨平台数据传输，速度快,
表现上:1.键值对方式，键必须加双引号.
2.值不能是方法函数，不能是undefined/NaN,
相互转换:
Json转换Js对象
1.JSON.parse(JsonStr);(不兼容IE7)
2.eval("("+jsonStr+")");(兼容所有浏览器，但不安全，会执行json里面的表达式?)
JavaScript:表示类的实例,不能传输.
表现上:1.键值对方式，键不加引号
2.值可以是函数、对象、字符串、数字、boolean 等
相互转换:js对象转换Json
JSON.stringify(jsObj);
定时器:
setlnterval:
按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
参数:code 必须,要调用的函数或要执行的代码串
millisec 必须,周期性执行或调用code之间的时间间隔,以毫秒计
lang 可选, JScript | VBScript | JavaScript
语法:
setInterval(code,millisec,lang)
实例:每 1000 毫秒执行 clock() 函数,也包含了停止执行的按钮
<html>
<body>
<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>
<button onclick="int=window.clearInterval(int)">停止</button>
</body>
</html>
setTimeout:
在指定的毫秒数后调用函数或计算表达式。
语法:
setTimeout(code,millisec,lang)
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>
事件:
onchange: HTML元素已被改变
onclick: 用户点击了 HTML 元素
onblur: 元素失去焦点
onmouseout: 用户把鼠标移开 HTML 元素
onload: 浏览器已经完成页面加载
onkeydown: 用户按下键盘按键