javascript总结

最新推荐文章于 2024-08-29 18:57:45 发布
置顶 最新推荐文章于 2024-08-29 18:57:45 发布
阅读量1.8k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rookie_xiaoxian/article/details/100601753
版权

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这样的前端脚本语言来使用，示例代码如下：

<input type="button" value="" οnclick="alert（'你内联引用的方式调用了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("<b>Hello world!</b>"); }); $("#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样式
事件:
鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
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"></table>

或者创建标签时一并指定样式：

<table id="xxx" class="easyui-datagrid"></table>
4,给标签添加相应的easyUI样式(可选)

比如：

  • 按钮
<a class="easyui-linkbutton">EasyUI按钮</a>
  • 窗口
<div class="easyui-window" title="EasyUI窗口"></div>

5,调用EasyUI相关的JS方法来初始化,设置组件参数(可选)

语法:

// 无参数初始化一个组件
$(selector).组件();
//比如初始化一个日期选择控件
<div id="calendar"></div>
$("#calendar").calendar();


// 有参数初始化一个组件
$(selector).组件({参数key/value形式});
// 示例参见下面的数据表格使用方法



// 调用组件的某个方法
$(selector).组件('组件的方法名');
// 例如：调用窗口的打开方法
$("#win").window('open');

使用示例:

比如：

  • 数据表格组件

html代码：

<table id="dynamic_table"></table>

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
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

一共两个文件

第二步. 添加样式、或者引入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: 用户按下键盘按键

rookie_xiaoxian
关注
javascript基础语法总结
weixin_50939386的博客
03-26 2242
javascript基础语法 简介 javascript是一种运行在客户端(浏览器)的编程语言，实现人机交互效果 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 组成 ECMAscript js基础语法 ( 变量、分支语句、循环语句、对象等等 ) web APIs DOM 操作文档 ( 比如对页面元素进行移动、大小、添加删除等操作 ) BOM
JavaScript总结
m0_62174171的博客
10-07 173
一、JavaScript简介 Ⅰ、JavaScript是一种高级多范式、多范式、理解性的编程语言，支持面向对象编程、命令式编程以及函数式编程。 Ⅱ、JavaScript是一种基于事件和对象驱动并具有相对安全性的客户端脚本语言，也是一种广泛用于客户端Web开发的脚本语言。 Ⅲ、同时，JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。 Ⅳ、JavaScript外部脚本 外部文件：Myscript.js，javascript文件的扩展名为：文件名.js 外部
JavaScript语法总结
最新发布
2302_80445243的博客
08-29 349
【代码】JavaScript常见知识点总结。
javascript语法总结一
qq_35575544的博客
01-25 138
1.前端代码要行为（JavaScript）、样式（css）、结构（html）三分离； 2.建议jquery引入要在js之前，且js引入最好放页面最后； 3.Js数据类型：number、String、boolean、undefined、null、object、function。 （当变量未定义时类型为undefined，当变量只声明未赋值则类型为null，定义String类型的变量时...
JavaScript语法知识总结
lzyshizhu的博客
08-18 110
1、基础知识 1、一些注意的知识点 结尾记得写分号 区分大小写 会忽略连续的空格和回车 \作为转义字符 typeof 变量 用于检查变量类型 输出unicode编码，js中用"\u编码"（16进制)来输出，网页中用"&#编码"（10进制）来输出 2、六种数据类型 1、数据类型 number Number.MAX_VALUE(JS中数字表示的最大值)， Infinity表示无穷大，类型也为number NaN,not a number，类型也为number 使用浮点数进行
JavaScript基本语法总结
Noble Spirit
08-21 272
一、JavaScript常见触发事件 onClick:鼠标点击时触发事件 ondblclick-当用户双击 onfocus-元素获得焦点 onblur:失去焦点时触发事件 onmousedown-鼠标被按下 onkeypress-某个按键被按下并被松开 onload-一张页面或者一副图片完成加载 onmousedown-鼠标被按下 onmousemove-鼠标被移动 onmouseout-鼠标从...
JavaScript 总结
csbysj2020的博客
07-13 379
JavaScript 是一种轻量级的编程语言，被广泛用于网页开发中，以创建交互式的网页。它是一种实现网页中客户端脚本的语言，与HTML和CSS共同构成了网页开发的三大基础技术。JavaScript 可以用于网页的前端开发，也可以用于服务器端编程（如Node.js）。
前端JavaScript总结
06-19
在这个"前端JavaScript总结"中，我们将深入探讨JavaScript的基本概念、语法特性、核心功能以及在实际开发中的应用。 首先，JavaScript是一种解释型的、弱类型的脚本语言，它基于ECMAScript规范，并在Web浏览器中...
Javascript总结导图
10-08
本篇内容将围绕"JavaScript总结导图"展开，深入探讨JavaScript的基础知识、核心概念以及高级特性。 1. **基础语法** JavaScript的基础包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔值、null、...
【javascript的语法总结】
橙子的博客
05-04 1370
javascript进一步学习总结1、基本的语法规则2、注释符号3、输入输出语句4、变量5、变量的数据类型6、算术运算符 1、基本的语法规则 (1)严格区分大小写 (2)对空格、换行、缩进不敏感,一条语句可以多行写 (3)一条语句结束后可以是用分号,也可以不用分号 2、注释符号 (1)单行注释符：以 '//‘开始,到所在行结束.快捷键：ctrl+/ (2)多行朱师符：以’/‘开始,以’/'结束，中间可以包含多行.快捷键：shift+alt+a 3、输入输出语句 用于实现网页和页面的交互 (1)输出语
javascript基本语法总结
技术点滴记录
09-27 611
一、概括 javascript是浏览器的广泛支持的脚本语言，接收用户事件，处理web文档内容。下文没有提到的基本语法要素基本与c语言相同。 二、词法结构 　　2.1、支持unicode。 　　2.2、大小写敏感，忽略空白符，和C++兼容的注释。 　　2.3、不同行代码之
Javascript基础语法总结
dreams_deng的博客
06-25 2352
1、 内容1 1.函数中声明变量不使用var 就是全局变量，变量不使用var,属于window的一个属性 2.Js数据类型 Number,String,Array,Date 3. 调用属性方式 4. 时间对象 5. js中array 就是java list和stack 6. 事件绑定方式2 7. window api 定时器 8. 节点概念 代码实现： <!DOCTYPE html> <html> <head> <met...
JavaScript基础语法学习总结(完结)
是日前端
05-21 2252
一、初识JavaScript 1. JavaScript概述 Java是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思) 脚本语言：不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行 现在也可以基于Node.js技术进行服务器编程 2. JavaScript的作用 表单动态校验(密码强度检测)(JS产生最初的目的) 网页特效 服务端开发(Node.js) 桌面程序(Electron) App(Cordova) 控制硬件-物联网(Ruff) 游戏开发(co
JavaScript学习总结（一）—— JavaScript语法
weixin_44557024的博客
12-19 267
JavaScript学习总结（一）——基础语法
跟着狂神学JavaScript
qq_40649503的博客
11-12 982
跟着狂神学JavaScript
Javascript入门——语法基础汇总
m0_67316947的博客
04-04 1757
Javascript基础语法，包括Javascript的由来，JS的嵌入方式、注释方式、输出方式，以及变量、循环、分支等基础知识。
【精选】JavaScript语法大合集【附代码和超详细介绍以及使用】
guojiaqi_的博客
11-16 779
JavaScript是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值