前端知识

关于var类型

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

$.getJSon():
参数：url,[data],[callback] String,Map,Function
发送请求的地址 、待发送Key/value参数 、载入成功时回调函数

$.each()是对数组、json和dom结构的遍历：

遍历一维数组
var arr1=['aa','bb','cc','dd'];
 $.each(arr1,function(i,val){ //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
 console.log(i+""+val);
遍历二维数组
var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
 console.log(i+'````'+item);
处理json
var json1={key1:'a',key2:'b',key3:'c'};
 $.each(json1,function(key,value){  //遍历键值对
            console.log(key+'````'+value);
  })
当二维数组中有json对象时：
var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];
        $.each(arr3,function(i,val){
            console.log(i+""+val);   
　　　　//输出
　　　　/* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/
            console.log(val.name); //获取每一个json里面的name值
            console.log(val["name"]);
            $.each(val,function(key,val2){
                console.log(key+""+val2);
            })
        });

在每个 p 元素结尾插入内容：

$("button").click(function(){
  $("p").append("<b>Hello world!</b>");
});

系统时间获取后：

now = new Date(response.data);
var date = now.toLocaleDateString();//date=2019/7/8
var arr_week = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var week = arr_week[now.getDay()];//now.getDay()=8;
var date1 = now.getFullYear()+"/"+(now.getMonth()+1)+"/"+now.getDate();// 2019/7/8

isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况
通过查找id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：
document.getElementById("demo").innerHTML = "Hello JavaScript";//能同时接受双引号和单引号

var str = "HELLO WORLD";
str[0] = "A";             // 不产生错误，但不会工作,它是只读的
str[0];                   // 返回 H

Ajax:readyState(状态值)和status(状态码)的区别：
readyState = 4：完成，XMLHttpRequest对象读取服务器响应结束
status = 200: 交易成功

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。
document.getElementById(“select”).selectedIndex;
document.getElementBuId(“select”).options;//获取值

<script>
function displayResult(){
	var x=document.getElementById("mySelect").selectedIndex;
	var y=document.getElementById("mySelect").options;
	alert("索引: " + y[x].index + " is " + y[x].text);
}
</script>
<select id="mySelect">
	<option>Apple</option>
	<option>Orange</option>
	<option>Pineapple</option>
	<option>Banana</option>
</select>
获取到下拉框中索引和值

关于表单验证：

var name = form1.name.value;
// 验证用户名不能包含可空格
	for (var i = 0; i < name.length; i++) {
		if (name.charCodeAt(i) == 32) {
			alert("用户名不能够包含空格");
		}
	}
// 验证名字以字母开头，可以包含数字和字母
	// 正则表达式
	var ss = /^[a-zA-Z][0-9a-zA-Z]*$/;
	if (!ss.test(name)) {
		alert("名字以字母开头，可以包含数字和字母");
	}
var age = form1.age.value;
	var yu = /^[0-9]{2}$/;
	if (!yu.test(age)) {
		alert("只能输入两位数字");
		return ;
	}

bgcolor 属性规定规定表格的背景颜色
cellspacing 属性规定单元格之间的空间
align 属性规定 div 元素中的内容的水平对齐方式(center/right)
<span> 标签被用来组合文档中的行内元素

id和name的区别：
id一个标签唯一的标识，所以var inputNode = document.getElementById(“id”);获取的是一个对象,主要是用来展示css元素样式
name可以有多个，document.getElementsByName(“name”);获取的是一个对象数组，主要用来展示和传递数据

window.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
window.clearTimeout() 方法来阻止函数的执行

var myVar;
function myFunction() {
    myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
    clearTimeout(myVar);
}

onchange="checkField(this.value)"属性在元素值改变是触发，可适用于<input><textarea>和<select>元素
document.ready方法在DOM树加载完成后就会执行
window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行
也就是说$(document).ready要比window.onload先执行

js中获取属性值相加：

var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var num3 = parseInt(num1.value) + parseInt(num2.value);

设置图片的各种属性：

<img src="images/1.jpg" height="450px" width="423px" id="image">
var image = document.getElementById("image");
image.height += 10;
image.width = 420；
image.src = "images/2.jpg";

通过数组变颜色：

var colorr = ["red","yellow","green","blue","pink"];
var clo1 = document.getElementById("clo1");
clo1.style.color = colorr[parseInt(Math.random() * 5)];

制作时钟：

function time() {
		var ss = document.getElementById("ddd");
		ss.innerHTML = new Date().toLocaleString();
		window.setTimeout(time,1000);
	}
<body onload="time()">
	<div align="center" style="font-size: 70px;color: red" id="ddd">	
	</div>
</body>

根据本地时间把 Date 对象转换为字符串：

new Date().toLocaleString();

$(function(){})也就是$(document).ready(function(){})的简写

$(function () {
    console.log("ready执行");
});
 
$(function() {
    console.log("ready1执行");
});
 
window.onload = function () {
    console.log('load执行');
};
window.onload = function () {
    console.log('load1执行');
}
输出结果：
ready执行
ready1执行
load1执行

DOM 文档加载步骤：
解析 HTML 结构
加载外部的脚本和样式文件
解析并执行脚本代码
执行 $(function(){}) 内对应代码
加载图片等二进制资源
页面加载完毕，执行 window.onload

返回带有类名 “intro” 的所有 <p> 元素：$("p").filter(".intro")
获取内容：text()、html()、val()：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

获取select选中的option的值：$("#ddlRegType").find("option:selected").val();
获取select选中的value:$("#ddlRegType").val();

String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})";
        if(!empName.matches(regx)){
            return Msg.fail().add("va_msg","用户名必须是2-5位中文6-16位数字或者字母");
        }

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");

当页面载入完毕后执行Javascript代码：
在 HTML 中:<body onload="SomeJavaScriptCode">
在 JavaScript 中:window.onload=function(){SomeJavaScriptCode};