JavaScript基础

如何引入JavaScript

外联文件

Js输出语句

用于基本的调试：

document.write()	//向body中写入字符串
cosole.log()	//向控制台输出
alert()		//弹出框

基础语法

• 语句分号（ ；）结尾，大括号包裹语句块（基本与Java语法类似）

• 严格区分大小写

• 没有添加分号时浏览器自动添加，但是消耗资源并且可能添加出错

注释

Hbuilder快捷键 Ctrl + / 添加注释**

• 单行注释：//

• 多行注释：/* */

JavaScript基本数据类型

​ JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等

• Number

  • Js中只有一种数值类型Number
  • Js中的Number可以表示十进制，八进制，十六进制整数，浮点数，科学记数法

• Js中的Number基本类型可以精确表示的最大整数是2^53，BigInt可以表述任意大的整数

• String

• 字符串被引号包围。可以使用单引号或双引号

• Boolean

• 布尔值只有两个值 true false，经常用在条件测试中

• undefined

  • 表示声明了但未赋值的变量，其值是 undefined ，typeof 也返回 undefined

    //已经声明的变量未赋值则成为undefined
          var a;
          console.log(typeof a);
    //结果为undefined
    

  • 任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined

  • 空值与 undefined 不是一回事，空的字符串变量既有值也有类型。

    var car = "";	// 值是 ""，类型是 "string"
    

• null

  • null表示一个对象不存在，其数据类型为Object

    //表示一个空对象
           var a = null;
           console.log(typeof a);
    //结果为object
    

• Object

  • Function

    • Function是一个功能完整的对象，作为JS的内置对象之一。JS的普通函数都是Function对象的实例，所以函数本身也是一个对象，就像var一样，只不过这个对象具有可调用特征而已。
    • function只是一个关键字，用来创建一个普通函数或对象的构造函数。

  • RegExp

    • RegExp 对象是带有预定义属性和方法的正则表达式对象

    • 正则表达式，在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()

      search()	//使用表达式来搜索匹配，然后返回匹配的位置。
      replace()	//返回模式被替换处修改后的字符串。
      

    • 正则表达式修饰符

      i	//执行对大小写不敏感的匹配
      g	//执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
      m	//执行多行匹配
      

  • Date

    • 日期对象是一个静态的对象，计算机时间会不断变化，但日期对象不会

    • new Date() 用当前日期和时间创建新的日期对象，参数可以填year, month, ...，用于指定日期和时间创建新的日期对象

      var d = new Date(2018, 11, 24, 10, 33, 30, 0); 		//变量分别为年、月、日、小时、分钟、秒和毫秒
      

  • JSON

    • JSON对象语法

      { "name":"Nya", "age":21, "car":null }
      

      • JSON 对象被花括号{}包围
      • JSON对象以键/值对的方式书写
      • 键必须是字符串，值必须是有效的 JSON 数据类型（字符串、数字、对象、数组、布尔或 null）
      • 键和值由冒号分隔
      • 每个键/值对由逗号分隔

    • 访问JSON对象值

      • 使用点（.）访问对象JSON值

        myObj =  { "name":"Nya", "age":21, "car":null };
        x = myObj.name;
        

      • 也可以使用户方括号（[]）访问JSON对象值

        myObj =  { "name":"Nya", "age":21, "car":null };
        x = myObj["name"];
        

    • 遍历JSON对象

      • 使用for-in遍历JSON对象

        myObj =  { "name":"Nya", "age":21, "car":null };
        for (x in myObj){
            document.getElementById("demo").innerHtml += myObj[x];
        }
        

      • 对于嵌套的JSON对象，使用点号和括号访问嵌套的JSON对象

        /***实例***/
        myObj =  {
           "name":"Bill Gates",
           "age":62,
           "cars": {
        	  "car1":"Porsche",
        	  "car2":"BMW",
        	  "car3":"Volvo"
           }
        }
        

        /***访问方法***/
        x = myObj.cars.car2;
        //或者：
        x = myObj.cars["car2"];
        

    • 修改值

      • 也是使用点号或括号来修改JSON对象中的任意值

        myObj.cars.car3 = "Mercedes Benz";	//使用点号
        myObj.cars["car3"] = "Mercedes Benz";	//使用括号
        

    • 删除对象属性

      • 使用delete删除JSON对象的属性

        delete myObj.cars.car1;
        

typeof 操作符的注意点：

• typeof 是操作符，不是方法。虽然我们经常使用 typeof() 的方式获取对象的数据类型
• 对 null 取 typeof 是 object（这是因为 null 是 空的对象引用），对函数取 typeof 是 function

console.log(typeof null);	//返回object

function demo(){  
	console.log('demo');  
}  
console.log(typeof demo);	// 返回function 

JavaScript变量

JavaScript 变量是存储数据值的容器，作用和Java里的变量类似

其声明形式不需要指定具体类型，统一用var关键字声明

var x = 7;
var y = 8;
var z = x + y; 

Js标识符：所有JavaScript变量必须以唯一的名称标识。这些唯一的名称称为标识符，标识符命名规则与java基本一致

JavaScript 变量可存放多种数据类型：

​ 字符串被包围在双引号或单引号中。数值不用引号。如果把数值放在引号中，会被视作文本字符串。

程序控制语句

条件语句

用来执行逻辑判断的语句

• 条件判断语句

  var a = 1;
  if(a = 1){
  	console.log("A");
  }else{
  	console.log("B");
  	if(a != 5)｛
  		console.log("C");
  	｝
  }
  

• 条件分支语句

   var a = 1;
    switch(a){
       case 1:
           console.log("1");
           break;
       case 2:
           console.log("2");
           break;
       default:
           console.log("其他");
           break;
    }
  

循环语句

使代码能在某种条件下不断执行的语句

• for循环

   /**语法**/
   for(初始化变量; 条件表达式; 更新变量){
       语句...
   }
       
   /**例**/
   function p(i){
      document.write(i);
      document.write("<br>");
   }
   for(var i = 0; i < 10; i++){
   	 p(i);
   }
  

• for…in循环：

  • 用于对数组或者对象的属性进行循环操作
  • 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作

  /**语法**/
  for (变量 in 对象){
      执行代码...
  }
  
  /**例**/
  var x
  var mycars = new Array()
  mycars[0] = "Saab"
  mycars[1] = "Volvo"
  mycars[2] = "BMW"
  for (x in mycars){
  	document.write(mycars[x] + "<br />")
  }
  

对象

自定义对象

• 使用new关键字创建对象

  var person = new Person();
  person.name = "Nya";
  person.age = 21;
  person.sex = "男";
  //创建了对象的一个新实例，并向其添加了四个属性
  

  new所调用的函数是一个构造函数constructor()，构造函数是专门用来创建对象的函数，使用typeof语句会返回object

• 通过function设计一个对象

  //创建函数构造器
  function person(name, age, sex){
      this.name = name;
      this.age = age;
      this.sex = sex	//在JS中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）
  }
  
  //创建对象实例
  var myFather = new person("Ton", 51, "男");
  var myMother = new person("Sally", 49, "女");
  

  构造函数内部也可以定义方法

• 使用JSON创建对象

  –-详见数据类型一节-–

JS内置对象

Window对象

• Document对象

  Document对象包含当前文档的信息，例如：标题、背景、颜色、表格等

  常用方法：

  • 通过write()方法在浏览器中显示内容

  • getElementById()和getElementByTagName()，这两个方法会忽略文档的结构，可查找整个HTML文档中的任何元素（不论它们在文档中所处的位置，例如通过getElementByTagName()可以把文档中所有的

    元素找到）

  • cookie方法会返回一个包含所有的cookie的字符串，每条cookie以分号和空格(; )分隔(即key*=*value键值对)：

    allCookies = document.cookie;
    

  • body方法会返回道歉文档中的<body>元素或者<frameset>元素

• Screen对象**

  window.screen对象在编写时可以不使用 window 这个前缀

  一些属性：

  • screen.availWidth - 可用的屏幕宽度

    document.write("可用宽度: " + screen.availWidth);
    

  • screen.availHeight - 可用的屏幕高度

    document.write("可用高度: " + screen.availHeight);
    

• Location对象

  location.href 属性

  //改变当前网页地址（加载新的网页）：
  location.href = 'http://www.baidu.com';
  
  //返回（当前页面的)整个URL：
  document.write(location.href);
  

• History对象**

  一些方法：

  • history.back()

    <input type="button" value="Back" onclick="goBack()">
    <script>
    	function goBack(){
        	window.history.back()
    	}
    </script>
    
    

    以上代码效果为返回上一页按钮

  • history.forward()

    <input type="button" value="Forward" onclick="goForward()">
    <script>
        function goBack(){
        	window.history.forwardk()
    	}
    </script>
    

    以上代码效果为跳到下一页按钮

函数

JavaScript函数语法

function functionname( 参数.../*可选*/ ){
    // 执行代码
}
//注：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数

​ 当调用该函数时，会执行函数内的代码。

​ 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

获取函数参数

常规方式

通过内置arguments对象获取

自调用函数

函数表达式可以 “自调用”，自调用表达式会自动调用。

如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式

(function () {
    var x = "Hello!!";      // 我将调用自己
})();
//以上函数实际上是一个匿名自我调用的函数(没有函数名)

JavaScript的使用场景

添加交互事件

​ 对事件做出反应

​ 可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

操作DOM元素

​ 可以使用JavaScript 来向HTML DOM元素分配事件：

//例：向button元素分配onclick事件：
document.getElementById("myBtn").onclick=function(){displayDate()};

操作样式

​ JavaScript操作style样式

//语法
dom.style.属性名 = 属性值;
//例如：
document.getElementsByClassName('box')[0].style.background = 'red';

验证表单

• 必填（或必选项目）

  JavaScript可以用来检查用户是否已填写表达中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出

  <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
  姓: <input type="text" name="fname">
  <input type="submit" value="提交">
  </form>
  
  function validateForm()
  {
    var x=document.forms["myForm"]["fname"].value;
    if (x==null || x=="")
    {
      alert("姓必须填写");
      return false;
    }
  }
  

• Email验证

  检查输入的数据是否符合电子邮件地址的基本语法，只能做些基本检查：

  输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号

  <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
      Email: <input type="text" name="email">
      <input type="submit" value="提交">
  </form>
  
  function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
      alert("不是一个有效的 e-mail 地址");
      return false;
    }
  }
  

异步请求Ajax

请求：

• 同步请求:只有当一次请求完全结束以后才能够发起另一次请求
• 异步请求:不需要其他请求结束就可以向服务器发起请求

**Ajax：**Asynchronous javaScript and xml (异步的JavaScript和xml技术)。

当我们向服务器发起请求的时候，服务器不会像浏览器响应整个页面，而是只有局部刷新。它是一个异步请求，浏览器页面只需要进行局部刷新，效率非常的高

正则匹配

详见上文正则部分

定时器

js 定时器有以下两个方法：

setInterval

不停地重复执行，按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

使用形式：函数setInterval(函数名, 重复执行的时间间隔毫秒数 );

<script>
function printTime(){
	var d = new Date();
	var h= d.getHours();
	var m= d.getMinutes();
	var s= d.getSeconds();
	document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
function showTimeIn3Seconds(){
	setTimeout(printTime,3000); 
}
</script>

<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

/**
通过setInterval**重复执行同一个函数**，重复的时间间隔由第二个参数指定
**/

setTimeout

在指定的毫秒数后调用函数或计算表达式

使用形式：函数setTimeout(functionname, 距离开始时间毫秒数 );

//例：每隔1秒钟，打印当前时间
<script>
function printTime(){
	var d = new Date();
	var h= d.getHours();
	var m= d.getMinutes();
	var s= d.getSeconds();
	document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
var t = setInterval(printTime,1000);
</script>

<div id="time"></div>

/**
document.getElementById 获取id=time的div元素 
.innerHTML 修改该元素的内容
**/

事件

事件是JavaScript允许HTML与用户交互的行为。 用户任何对网页的操作，都会产生一个事件

onchange HTML元素改变事件

//例：离开输入字段时，会触发一个函数，将输入文本转换为大写
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

请输入您的名字：<input type="text" id="fname" onchange="myFunction()">

onclick 鼠标点击事件

//例：点击按钮弹出“Hello JavaScript”
<script>
function showHello(){
	alert("Hello JavaScript");
}
</script>

<button onclick="showHello()">点击一下</button>

onblur

onblur 事件会在对象失去焦点时发生

//例：离开输入框后会将文本转化为大写
<script type="text/javascript">
function upperCase(){
	var x=document.getElementById("fname").value
	document.getElementById("fname").value=x.toUpperCase()
}
</script>

输入您的姓名：
<input type="text" id="fname" onblur="upperCase()" />

onmouseover / onmouseout

//例：鼠标移入移出事件
<script>
function mOver(obj) {
	obj.innerHTML = "谢谢您"
}
function mOut(obj) {
	obj.innerHTML = "请把鼠标移上来"
}
</script>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
	请把鼠标移上来
</div>

onload

//onload事件
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookie 已启用";
  } else {
    text = "Cookie 未启用";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

<p id="demo"></p>

onkeydown

键盘按下事件

jQuery基础

如何引入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操作

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易

属性操作

attr()：用于获取属性值

读取属性

$(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()：设置或返回表单字段的值

//通过 jQuery text() 和 html() 方法获得内容:
$("#btn1").click(function(){
	alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
	alert("HTML: " + $("#test").html());
});
//通过 jQuery val() 方法获得输入字段的值：
$("#btn1").click(function(){
	alert("值为: " + $("#test").val());
});

样式操作

通过 jQuery，可以很容易地对 CSS 元素进行操作

• addClass() - 向被选元素添加一个或多个类

  $("button").click(function(){
  	$("h1,h2,p").addClass("blue");
  	$("div").addClass("important");
  });
  

• removeClass() - 从被选元素删除一个或多个类

  $("button").click(function(){
  	$("h1,h2,p").removeClass("blue");
  });
  

• toggleClass() - 对被选元素进行添加/删除类的切换操作

  $("button").click(function(){
  	$("h1,h2,p").toggleClass("blue");
  });
  

• css() - 设置或返回样式属性

  • 设置css属性

    $("p").css("background-color","yellow");
    

  • 返回css属性

    $("p").css("background-color");
    

事件

效果

显示隐藏

通过 jQuery使用hide()和show() 方法来隐藏和显示 HTML 元素

//例：
<script>
    $(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>

<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>

使用 toggle() 方法来切换 hide() 和 show()方法

$("button").click(function(){
	$("p").toggle();
});

淡入淡出

fadeIn()方法：用于淡入已隐藏的元素

$("button").click(function(){
	$("#div1").fadeIn();
	$("#div2").fadeIn("slow");
	$("#div3").fadeIn(3000);
});

fadeOut()方法：用于淡出可见元素

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

fadeToogle()方法：可以在 fadeIn() 与 fadeOut() 方法之间进行切换

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

fadeTo()方法：允许渐变为给定的不透明度（值介于 0 与 1 之间）

$("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
});

滑动

slideDown()方法：用于向下滑动元素

$("#flip").click(function(){
    $("#panel").slideDown();
});

slideUp()方法：用于向上滑动元素

$("#flip").click(function(){
    $("#panel").slideUp();
});

slideToggle()方法：可以在 slideDown() 与 slideUp() 方法之间进行切换

$("#flip").click(function(){
    $("#panel").slideToggle();
});

动画

使用jQuery animate() 方法可以创建自定义的动画

遍历

遍历jQuery对象

遍历数组

for...in循环语句用于遍历数组或者对象的属性进行循环操作

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作

//语法
for (变量 in 对象){
    在此执行代码
}

//例
<script type="text/javascript">
	var x
	var mycars = new Array()
	mycars[0] = "Saab"
	mycars[1] = "Volvo"
	mycars[2] = "BMW"

	for (x in mycars){
		document.write(mycars[x] + "<br />")
	}
</script>

Ajax

jQuery也可以实现异步加载

EasyUI

简介

EasyUI是什么？

EasyUI是一套前端框架。 它封装jQuery、Vue等前端JS框架，另外它还提供了一套完善的UI组件，比如窗体、表单、表格、树、进度条、手风琴菜单…

EasyUI的使用场景

主要用来做一些公司内部使用的管理系统， 因为它提供了丰富的组件，可以直接拿来使用， 降低了后台系统开发的时间。但是它的UI不是特别美观，不建议用来做和客户交互的系统界面

使用步骤

• 下载EasyUI

• 引入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>
  
  

• 需要有一个HTML标签

  • 比如说使用使用datagrid组件需要添加：

    <table id="xxx"></table>
    
    

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

    <table id="xxx" class="easyui-datagrid"></table>
    
    

• 给标签添加相应的EasyUI样式（可选），例如：

  • 按钮

    <a class="easyui-linkbutton">EasyUI按钮</a>
    
    

  • 窗口

    <div class="easyui-window" title="EasyUI窗口"></div>
    
    

• 调用EasyUI相应JS方法来初始化、设置组件参数（可选）

  • 语法

    // 无参数初始化一个组件
    $(selector).组件();
    //比如初始化一个日期选择控件
    <div id="calendar"></div>
    $("#calendar").calendar();
    
    // 有参数初始化一个组件
    $(selector).组件({参数key/value形式});
    // 示例参见下面的数据表格使用方法
    
    // 调用组件的某个方法
    $(selector).组件('组件的方法名');
    // 例如：调用窗口的打开方法
    $("#win").window('open');
    
    

主要组件

窗口相关

表格相关

树形组件

表单相关

• 表单验证
• 表单数据回显
• 表单常用组件
  • 文本框
  • 日期框
  • 密码框

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标签页

面板

弹出层

树形组件

轮播图

导航菜单

表单相关组件

面包屑导航条