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 对象包含有关用户屏幕的信息。

  1. screen.height 返回屏幕分辨率的高

  2. screen.width 返回屏幕分辨率的宽

    ps:
    1.单位以像素计。

    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: 用户按下键盘按键

你可能感兴趣的:(javascript总结)