js嵌套，BOM，DOM，内置对象，数组，自定义对象，正则表达式

最新推荐文章于 2024-05-17 13:52:13 发布

weixin_30610755

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量140

点赞数

文章标签： javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/lxd564965917/p/6751669.html

版权

嵌套

[循环嵌套特点]
外层循环转一次，内层嵌套转一圈；
外层循环控制行数；内层循环控制每行元素个数‘

[做图形题思路]
1，确定图形一共几行，即为外层的循环的次数；
2，确定每行有几种元素，代表有几个内层循环；
3，确定每种元素的个数，即为每个内层循环的次数
tips：通常，找出每种元素个数，与行号的关系式，即为当前内层循环的最大值。

【浏览器控制台打印输出】

console.log("请输入0-6之间的数字\n111");

\n 表示换行 \t 制表符，使光标退到下一个指标单位。

练习图片已存

var sum=0,sumrow=0;
for(var i=1;i<=5;i++){
sumrow=0;

if(i!=1)document.write("(");

for(var j=1;j<=i;j++){
if(j!=i)document.write(j+"+");
else document.write(j)
sumrow+=j;
}
if(i==1) document.write("+");
else if(i==5) document.write(")=");
else document.write(")+")
sum+=sumrow;
}
document.write(sum+"<br/>");

/*长方形*/

for(var a=1;a<=5;a++){
for(var b=1;b<=5;b++){
document.write("*");
}
document.write("<br/>")
}

/*直角三角形*/
for(var a=1;a<=5;a++){
for(var b=1;b<=a;b++){
document.write("&")
}
document.write("<br/>")
}

/*平行四边形*/
for(var a=1;a<=5;a++){
for(var b=1;b<=a-1;b++){
document.write("&nbsp");
}
for(var c=1;c<=5;c++){
document.write("*");
}
document.write("<br/>")
}

/* [数字等边三角形]
1
121
12321
1234321
*/
for(var i=1;i<=4;i++){
// 空格
for(var k=1;k<=4-i;k++){
document.write("<span style='display: inline-block;width: 8px;'></span>");
}
var n = 1;
// 递增
for(var j=1;j<=i;j++){
document.write(n);
n++;
}
n-=2;
// 递减
for(var m=1;m<=i-1;m++){
document.write(n);
n--;
}
// 回车
document.write("<br/>");
}

/* [99乘法表]以table表格的形式打印
1*1=1
2*1=2 2*2=4
3*1=3 3*2=6 3*3=9
4*1=4 4*2=8 4*3=12 4*4=16
……

*/
document.write("<table width='700'>")
for(var i=1;i<=9;i++){
document.write("<tr>")
for(var j=1;j<=i;j++){
document.write("<td>"+i+"*"+j+"="+i*j+"</td>");
}
document.write("</tr>")
}
document.write("</table>")

js中的函数及BOM

【函数的声明及调用】
1、函数声明的格式：
>>>function 函数名(参数1，参数2，……){
//函数体
return 结果;
}
>>>函数调用的格式：
直接调用：函数名(参数1的值，参数2的值，……);
事件调用：事件名=函数名();
2、函数声明的几点强调：
①函数名的声明，必须符合小驼峰法则(首字母小写，之后每个单词首字母大写)；
②参数列表：可以有参数，可以无参数，分别称为有参函数，无参函数；
③声明函数时的参数列表，称为“形参列表”(变量的名)；
调用函数时的参数列表，称为“实参列表”(变量的值)；
函数中实际有效的参数取决于实参的赋值，未被赋值的形参，将为undefined;
④函数如果需要返回值，可用return返回结果；
调用函数时，使用var 变量名=函数名();的方式，接受返回结果；
如果函数没有返回值，则接受的结果为undefined。
⑤函数中变量的作用域：
在函数中，使用var声明的变量，默认为函数局部变量，只在函数内容能用；
不使用var声明的变量，默认为全局变量(函数中的全局变量，必须在函数调用后，才能使用)；
函数的形参列表，为函数局部列表，只在函数内部能用；
⑥函数声明与函数调用没有先后之分。即，调用语句可写在声明语句之前。

console.log(num);
var num=10;
funcN();
function funcN(){
console.log(num);
}

【JS中代码执行顺序】：
JS中代码运行，会先进行检查、装载，即声明变量、函数等操作；
然后再进入执行阶段(变量的赋值等属于执行阶段)

所以，函数的声明属于检查装载阶段，函数的调用属于执行阶段。所以，函数调用语句写在函数声明语句之前，并没有任何关系。

所以，上述代码，执行流入
--------检查装载阶段---------
var sum;//声明变量
function funcN(){}//声明函数

--------执行阶段-------
console.log(num);
num=10;
funcN();//执行函数的{}中代码

【匿名函数的声明及调用】
1、声明一个匿名函数，直接赋给某个事件；
window.οnlοad=function(){}
2、使用函数表达式声明匿名函数；
声明函数表达式var func=function(){}
调用函数表达式： func();
>>>使用匿名函数表达式，则调用语句，必须在声明语句之后，否则报错(对比常规函数声明与调用区别？)
3、使用自执行函数，声明并直接调用匿名函数：
① ！function(参数1){}(参数1的值);//使用任意运算符开头，一般使用！
② (function(){}())//使用()将匿名函数及之后的括号包裹
③ (function(){})()//使用()只包裹匿名函数表达式

三种写法特点：
①结构清晰，开头加！，结尾加()，不容易乱，推荐使用；
②可以表明匿名函数与之后的()为一个整体，推荐使用；
③无法表明函数与之后()为一个整体，不推荐使用；

window.οnlοad=function(){
console.log("使用window.onload调用匿名事件");
}

var func3=function(){
console.log("使用函数表达式，调用匿名函数");
}
func3();

function func1(){
console.log("调用无参函数");
}

function func2(num1,num2,num3){
var num=num1;
console.log("调用有参函数");
console.log("num为"+num);
console.log("参数1为"+num1);
console.log("参数1为"+num2);
console.log("参数1为"+num3);
return;
}
var num=func2(1,2,3);

[Arguments对象]
1,作用：用于保存调用函数时，所赋值的实参列表。
》当我们调用函数，并使用实参赋值时，实际上参数已经保存到arguments数组中。即使没有形参，
也可以使用arguments[n]的形式调用参数；

2，arguments数组的个数，取决于实参列表，与形参无关；
但，当第N个位置的形参，实参，arguments都存在时，形参与arguments是同步的。（即在函数中
修改其中一个的值，另一个会同步变化）

3，arguments.callee是arguments的重要属性，用于返回arguments所在函数的引用。

arguments.callee() 可以调用自身函数执行；

在函数内容调用函数自身的写法，被称为递归，所以arguments.callee()是递归调用时常用的方式；

【this】:
指向函数调用语句所在作用域，即，谁调用函数，this指向谁；

function func4(){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);

}

func4(1,2,3,4);

bom笔记

/*
* screen对象
*/
console.log(screen.width);// 屏幕宽度
console.log(screen.height);// 屏幕高度
console.log(screen.availWidth); //可用宽度
console.log(screen.availHeight); //可用高度=屏幕高度-底部任务栏

/*
* location对象
*
* 完整的URL路径：
* 协议://主机名(IP地址):端口号/文件路径？传递参数(name1=value1&name2=value2)#锚点
*/
console.log(location.href); // 完整路径
console.log(location.protocol
); // 使用的协议 http: https: ftp: file: mailto:
console.log(location.pathname
); // 文件路径
console.log(location.port
); // 端口号
console.log(location.search); // 从?开始往后的部分
console.log(location.hostname); // 主机名(IP地址)
console.log(location.host); // 主机名+端口号
console.log(location.hash); // 从#开始的锚点
// 使用JS设置页面跳转
//window.location = "http://www.baidu.com";

function locationAssign(){
/*
* 加载新的文档，加载以后，可以回退
*/
location.assign("http://www.baidu.com");
}
function locationReplace(){
/*
* 使用新的文档，替换当前文档。替换以后，不能回退；
*/
location.replace("http://www.baidu.com");
}
function locationReload(){
/*
* 重新加载当前页面。
* reload(true)：从服务器重新加载当前页面
* reload():在本地刷新当前页面
*/
location.reload(true);
}

/* history
* 1、length：浏览历史列表的个数
* 2、history.forward(); 前进到前一个页面
* 3、history.back(); 后退到后一个页面
* 4、history.go(-1); 跳转到浏览历史列表的任意位置
* 位置标志：当前页为第0个，前一个页面第1个，后一个页面-1个
*
*/
console.log(history);
function historyForward(){
history.forward();
}
function historyBack(){
history.back();
}
function historyGo(){
history.go(2);
}

/*
* Navigator 了解
*/
console.log(navigator.appName); //产品名称
console.log(navigator.appVersion); //产品版本号
console.log(navigator.userAgent); //用户代理信息
console.log(navigator.platform); //系统平台

/* navigator.plugins。返回一个数组，检测浏览器安装的所有插件
>>>主要的属性：
description:插件的描述信息
filename:插件在本地磁盘的文件名
length:插件的个数
name：插件名
*/
console.log(navigator.plugins);//检查浏览器安装的插件信息

/*navigator.mimeTypes 浏览器插件，所支持的文件类型
>>>主要属性
description：MIME类型描述
enabledPlugin：支持此类型的浏览器插件
suffixes：此类型可能的后缀名
type：MIME类型的写法，例如： image/x-icon text/css
*/
console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型

/* 【重点】 window对象的常用方法
* >>> window对象中的所有方法，均可以省略前面的window. ,比如close();
*
* 1、prompt：弹窗接收用户输入；
* 2、alert:弹窗警告；
* 3、confirm：带有确认/取消按钮的提示框；
* 4、close:关闭当前浏览器选项卡
* 5、open：重新打开一个窗口，传入参数：URL/窗口名称/窗口特征
* 6、setTimeout：设置延时执行，只会执行一次；
* 7、setInterval：设置定时器，循环每个N毫秒执行一次；
* 两个参数：需要执行的function / 毫秒数
*
* 8、clearTimeout：清除延时
* 9、clearInterval：清除定时器
* 传入参数：调用setInterval时返回一个ID，通过变量接受ID,传入clearInterval
*/

<button οnclick="locationReplace()">location.replace();使用新的文档替换当前文档</button>
<button οnclick="locationAssign()">location.assign();加载新的文档</button>
<button οnclick="locationReload()">location.reload();重新加载当前的文档</button>
<br />
<button οnclick="historyBack()">使用history.back()后退</button>
<button οnclick="historyForward()">使用history.forward()前进</button>
<button οnclick="historyGo()">使用history.go()跳转到历史列表任意位置</button>
<br />

<button οnclick="closeWindow()">关闭浏览器窗口</button>
<button οnclick="openWindow()">打开一个新的浏览器窗口</button>

<button οnclick="clearTimeOutBtn()">clearTimeOut</button>
<button οnclick="clearIntervalBtn()">clearInterval</button>

DOM

/* 【DOM树节点】
* DOM节点分为三大类：元素节点、文本节点、属性节点
*
* 文本节点、属性节点，为元素节点的两个子节点；
*
* 通过getElement系列方法，可以去到元素节点。
*/

/* 【查看节点】
* 1、getElementById：通过ID获取唯一的节点；多个同名ID，只会取第一个；
* 2、getElementsByName：通过Name取到一个数组，包含1到多个节点；
* 使用方式：通过循环，取到每一个节点。循环次数：从0开始,<数组.length
*
* 【查看和设置属性节点】
* 1、查看属性节点： getAttribute("属性名");
* 2、设置属性节点： setAttribute("属性名","属性值");
*
*
* 【JS修改样式总结】
* 1、.className : 为元素设置一个新的class名字；
* div1.className = "class1";
*
* 2、.style : 为元素设置一个新的样式，注意驼峰命名法；
* div1.style.backgroundColor = "red";
*
* 3、.style.cssText : 为元素同时修改多个样式；
* div1.style.cssText = "width:100px;height100px;";
*
* 【查看节点】
* 1、tagName属性：获取节点的标签名；
* 2、innerHTML:设置或者获取节点内部的所有HTML代码；
* 3、innerText:设置或者获取节点内部的所有文字；
*
*/
window.onload = function(){
var div1 = document.getElementById("div1");
}
function getById(){
// 取到元素节点的样式属性节点
var divStyle = document.getElementById("div1").style;
//divStyle.backgroundColor = "blue";// 所有节点属性，一律驼峰命名法

// 取到元素节点
var div = document.getElementById("div1");

console.log(div.innerHTML); //取到div中所有内容
div.innerHTML = "<s>jianghao</s>"; // 重置修改div中的HTML代码
}
function getByName(){
var div = document.getElementsByName("div1");
//div.style.backgroundColor = "blue"; ×
for(var i=0;i<div.length;i++){
div[i].style.backgroundColor = 'blue';
}
}

function getAttr(){
var img1 = document.getElementById("img1");
alert(img1.getAttribute("src"));
}

function setAttr(){
var img1 = document.getElementById("img1");
img1.setAttribute("src","../../2_CSS基础语法/img/cat.jpg");
img1.setAttribute("title","我被setAttribute设置了title");
img1.setAttribute("style","width: 100px; height: 100px;");
}

</script>

<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
}

.div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>

<button οnclick="getById()" id="btn1">通过ID修改divcolor</button>
<button οnclick="getByName()">通过name修改divcolor</button>
<button οnclick="getByTagName()">通过TagName修改divcolor</button>
<button οnclick="getByClassName()">通过className修改divcolor</button>
<button οnclick="getAttr()">取到img的src属性值</button>
<button οnclick="setAttr()">修改img的src属性值</button>

<img src="../../1_HTML基本标签/img/abc.jpg" id="img1" />

<div id="div1" name="div1" class="div1">
<s>div文字</s>
</div>

<div id="div1" name="div1" class="div1">
div文字
</div>

<div id="div1" name="div1" class="div1">
div文字
</div>

DOM操作表格

/* [表格对象]
* 1、 rows属性：返回表格中的所有行，数组；
* 2、 insertRow(index)：在表格的第index+1行，插入一个新行
* 3、 deleteRow(index)：删除表格的第index+1行。
*
* [表格的行对象]
* 1、 cells属性：返回当前行中的所有单元格，数组；
* 2、 rowIndex属性：返回当前行，在表格中的索引顺序，从0开始；
* 3、 insertCell(index)：在当前行的第index+1处插入一个<td>
* 4、 deleteCell(index)：删除当前行的第index+1个<td>
*
* [表格的单元格对象]
* 1、 cellIndex属性：返回单元格在改行的索引顺序，从0开始；
* 2、 innerHTML属性：返回或设置当前单元格中的HTML代码；
* 3、 align属性：设置当前单元格的水平对齐方式；
* 4、 className属性：设置单元格的class名称；
*
*/

function newRow(){
var table = document.getElementById("table");
// 在表格的最后一行，插入一个新行
var newRow = table.insertRow(table.rows.length-1);
// 给新行设置单元格
var cell0 = newRow.insertCell(0);
cell0.innerHTML = "聂鹏飞";
var cell1 = newRow.insertCell(1);
cell1.innerHTML = "2.50元";

getSum();
}

function delRow(){
var table = document.getElementById("table");
if(table.rows.length>2){
table.deleteRow(table.rows.length-2);
}else{
alert("已经没了！删毛线啊！");
}

getSum();
}

function changeTitle(){
var color = prompt("请输入6位16进制颜色值：");
var table = document.getElementById("table");
table.rows[0].style = "background-color:#"+color;
}

function copyRow(){
var table = document.getElementById("table");
var copyRow = table.rows[table.rows.length-2].cloneNode(true);
var heji = table.rows[table.rows.length-1];

// 由于浏览器，自动将表格的<tr>包裹在<tbody>中
// 所以<tr>实际并非<table>的子节点，故需取到<table>中的<tbody>进行插入
if(table.rows.length>2){
table.getElementsByTagName("tbody")[0].insertBefore(copyRow,heji);
}else{
alert("没有可以复制的行");
}

getSum();
}

function getSum(){
var table = document.getElementById("table");
var rows = table.rows;
if(rows.length<=2){
alert("没有可计算的行！");
rows[rows.length-1].cells[1].innerHTML = 0+"元";
return;
}

var sum = 0;
for(var i=1;i<=rows.length-2;i++){
var cells = rows[i].cells;
sum += parseFloat(cells[cells.length-1].innerText);
}

rows[rows.length-1].cells[1].innerHTML = sum.toFixed(2)+"元";
}

window.onload = function(){
getSum();
}

</script>

<style type="text/css">
table{
border-collapse: collapse;
width: 400px;
}
td,th{
border: 1px solid #000000;
}
table tr:last-child{
color: red;
}
</style>
</head>

<body>

<table id="table">
<tr>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>看得见风景的房间</td>
<td>30.00元</td>
</tr>
<tr>
<td>幸福从天而降</td>
<td>18.50元</td>
</tr>
<tr>
<td>60个瞬间</td>
<td>30.99元</td>
</tr>
<tr>
<td>合计</td>
<td></td>
</tr>
</table>

<br />

<button οnclick="newRow()">增加一行</button>
<button οnclick="delRow()">删除最后一行</button>
<button οnclick="changeTitle()">修改标题样式</button>
<button οnclick="copyRow()">复制最后一行</button>
<button οnclick="getSum()">合计</button>

</body>

js事件

/* [JS中的事件分类]
* 1、鼠标事件：
* click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup
*
* 2、键盘事件：
* keydown: 键盘按下去触发
* keypress: 键盘按下并松开的瞬间触发
* keyup: 键盘抬起时触发
*
* [注意事项：(了解)]
* ① 执行顺序： keydown——keypress——keyup
* ② 长按时，会循环不断的执行keydown-keypress
* ③ 有keydown事件，不一定有keyup事件(事件触发过程中，鼠标移走，可能就没有keyup)
* ④ keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)
* ⑤ keypress区分大小写，keydown和keyup不区分；
* ⑥ keydown/keyup区分主键盘和小键盘，keypres不区分；
*
* [确定键盘触发按键]
* ① 在触发函数中，传入参数e，代表按键时间；
* ② 通过e.keyCode ，确认按键Ascii码值，进而确定按键；
* ③ 所有浏览器系统的写法(一般不必要)：
* var evn = e||event; //取到键盘事件
* var code = evn.keyCode||evn.which||evn.charCode;//取到按键编码

【JS中的DOM0事件模型】
*
* 1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
* eg: <button οnclick="func()">按钮</button>
* 缺点：违反W3C关于Html与JavaScript分离的基本原则；
*
* 2、脚本模型：在JS脚本中通过事件属性进行绑定；
* eg: window.onload = function(){}
* 局限性：同一节点，只能绑定一个同类型事件；
*
*
* 【JS中的DOM2事件模型】
* 1、添加事件绑定：
* IE10之前：btn1.attachEvent("onclick",函数);
* 其他浏览器：btn1.addEventListener("click",函数,true/false);
* 参数三：false(默认)，表示事件冒泡，true，表示事件捕获
* 兼容写法：if(btn1.attachEvent){
* btn1.attachEvent();
* }else{
* btn1.addEventListener();
* }
*
* 优点：同一节点，可以添加多个同类型事件的监听器；
*
* 2、取消事件绑定：
* 注：如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件绑定时，需要传入函数名；
* .removeEventListener("click",函数名);
* .detachEvent("onclick",函数名);

[JS中的事件流]
*
* 1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；
* DOM0模型，均为事件冒泡；
* IE中使用.attachEvent()添加的事件，均为冒泡；
* 其他浏览器，.addEventListener添加的事件，当第三个参数为false时，为冒泡；
*
* 2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；
* 只有使用.addEventListener添加事件，并设置第三个参数为true时，才进行捕获；
*
* ↓ 当前元素 ↑
* ↓ ↑
* 冒父元素捕
* ↓ ↑
* 泡爷爷元素获
* ↓ ↑
* DOM根节点
*
* 3、阻断事件冒泡：
* IE浏览器中：将e.cancelBubble属性设为true；
* 其他浏览器：调用e.stopPropagation();方法
* 兼容写法：function myParagraphEventHandler(e) {
* e = e || window.event;
* if (e.stopPropagation) {
* e.stopPropagation(); //IE以外
* } else {
* e.cancelBubble = true; //IE
* }
* }
*
* 3、阻止默认事件：
* IE浏览器中：将e.returnValue属性设为false；
* 其他浏览器：调用e.preventDefault();方法
* 兼容写法：function eventHandler(e) {
* e = e || window.event;
* // 防止默认行为
* if (e.preventDefault) {
* e.preventDefault(); //IE以外
* } else {
* e.returnValue = false; //IE
* }
* }

内置对象笔记

/*Boolean类*/
var isTrue = true; // 单纯的变量
var isTrue1 = new Boolean(true); // 一个Boolean类型的对象

/* Number类
*
* Number.MIN_VALUE 可表示的最小数
* Number.MAX_VALUE 可表示的最大数
* .toString():将数字转为字符串，相当于 num+""
* .toFixed(n):将数字转为字符串，保留n位小数，四舍五入
* .valueOf():返回Number对象的基本数字值
* .toLocaleString():将数字按照本地格式的顺序转为字符串。一般，三个一组加逗号
* .toPrecision(n)：将数字格式化为指定长度，n=不含小数点的所有位数和
*
*/
var num = 100.456;
var num1 = new Number(2);
var str = num1.toString();
console.log(typeof num); //NUMBER
console.log(typeof num1); // Object
console.log(typeof str); //String

var str = num1.valueOf();
console.log(str);

/* 字符串String
* 1、属性：str.length 返回字符串的长度
* 2、方法：
* .toLowerCase() 所有字符转为小写；
* .toUpperCase() 所有字符转为大写;
* .charAt(n) 截取字符串中第n个字符
* .indexOf("查询子串",index) 查询从index开始的，第一个子串的索引。没找到返回-1，同数组的indexOf()方法；
* .substring(begin,end) 截取子串
* >>> 只写一个参数：从begin开始，到最后
* >>> 写两个参数：从begin开始，到end。左闭右开。
* .replace("old","new") 将字符串中，第一个old，替换为new。第一个参数可以为普通字符串，也可以为正则表达式（普通字符串将只匹配第一个，正则表达式则根据具体情况区分）。
* .split("") 将字符串，通过制定分隔符分为数组。传入""空字符串，将把单个字符存入数组
*/
var str = "JiangHao Is ShuaiGe";
console.log(str.split(""));

/* Date类
* 1、 new Date(); 拿到当前最新时间；
* new Date("2017,4,4,14:58:12") 设置指定时间
* 2、常用方法：
* .getFullYear(): 获取4位年份
* .getMonth(): 获取月份 0~11
* .getDate(): 获取一月中的某一天 1~31
* .getDay(): 获取一周中的某一天 0~6
* .getHours() 返回 Date 对象的小时 (0 ~ 23)
* .getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
* .getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
*/
function getNewTime(){
var timeDiv = document.getElementById("time");

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
var date1 = today.getDate();
var day = today.getDay();
var week = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
var hours = today.getHours();
var minutes = today.getMinutes()<10?"0"+today.getMinutes():today.getMinutes();
var seconds = today.getSeconds()<10?"0"+today.getSeconds():today.getSeconds();

timeDiv.innerHTML = year+"年"+(month+1)+"月"+date1+"日"+week[day]+hours+":"+minutes+":"+seconds;

// 使用setTimeout+递归实现时钟计时
setTimeout(arguments.callee,1000);
}
window.onload = function(){
getNewTime();
}

// 使用setInterval定时器实现时钟计时
//setInterval(getNewTime,1000);

js数组笔记

/* [JS中的数组]
*
* 1、数组的概念：数组是在内存中连续存储多个有序元素的结构
* 元素的顺序，称为下标，通过下标查找对应元素。
*
* 2、数组的声明：
* ① 字面量声明： var arr1 = [];
* JS中同一数组，可以储存多种不同的数据类型(但一般同一数组只用于存放同种数据类型)：
* 例如：var arr1 = [1,"2",true,{"name":"jianghao"},[1,2]];
*
* ② new关键字声明： var arr2 = new Array(参数);
* >>> 参数可以为：
* a.为空: 声明一个，没有指定长度的数组；
* b.数组的length：声明一个指定长度的数组，但是数组的长度随时可变可追加,最大长度为0-(2^32-1)；
* c.数组默认的N个值： new Array(1,"2",true); 相当于[1,"2",true]
*
* 3、数组中元素的读写/增删：
* ① 读写：通过下标来访问元素，例如 arr[2];
* ② 增删：delete arr[n]; 删除数组第n+1个值，但数组长度不变，对应位置值为Undefined
* arr3.push(值); 数组最后增加一个值，相当于arr3[arr3.length] = 7;
* arr3.unshift(值); 数组的第0位插入一个值，其余位数顺延；
* arr3.pop(); 删除数组最后一位，与delete不同的是，pop执行后数组长度也会减少一个；相当于 arr.length-=1;
* arr3.shift(); 删除数组第0位，长度也会减一；
*
* 4、数组中其他常用方法：
* ① join("分隔符"); 将数组用指定分隔符分隔，链接为字符串。参数为空时，默认用逗号分隔；
* ② concat(); 【原数组不被改变】将数组，与多个数组的值链接为新的数组；
* [1,2].concat([3,4],[5,6]) =[1,2,3,4,5,6]; //连接时，中括号至多拆一层
* [1,2].concat([1,2,[3,4]]) =[1,2,1,2,[3,4]];//多层中括号，以二维数组形式存在
*
* ③ push(): 数组最后增加数； unshift(): 数组开始增加一个数【返回数组新的长度】
* pop(): 删除数组最后一个； shitf():删除数组第一个【返回被删除的值】
* 【调用上述方法，原数组均被改变】
*
* ④ recerse(): 【原数组被改变】数组翻转，逆序排列。
*
* ⑤ slice(begin,end):【原数组不会被改变】截取数组中的某一部分，成为新数组
* >>> 传递一个参数：默认为begin index，当这个开始，截到最后一个；
* >>> 传递两个参数：截取从begin到end区间，左闭右开(包含begin，不含end)；
* >>> 参数可以为负数，-1表示最后一个；
*
* ⑥ sort(function): 【原数组会被改变】对数组进行排序；
* >>> 不指定排序函数：按照数值的ascii码值进行排练；
* >>> 传入排序函数：默认两个参数a,b，如果返回值>0,则a>b;反之返回值<0，则a<b
* arr3.sort(function(a,b){
* //return a-b; // b在前，a在后(升序排列)
* return b-a; // a在前，b在后(降序排列)
* });
*
* ⑦ indexOf(value,index): 返回数组中第一个value值对应的下标位置，若未找到返回-1
* lastIndexOf(value,index):返回最后一个value值对应的下标位置，。。。。。。
* >>> 若未指定index参数：默认在数组所有所有元素中查询；
* 若指定index参数：则从当前index开始，向后查询；
*
*
* 5、二维数组&稀疏数组(了解)：
* ① 稀疏数组：数组并不含有从0开始到length-1的所有索引(length值比实际元素个数多);
* ② 二维数组： var arr = [[1,2],[3,4],[5,6]]; //相当于三行两列的矩阵
* 取出二维数组元素： arr[行号][列号]; // 可使用嵌套循环遍历
*
* 6、引用数据类型&基本数据类型：
* 引用数据类型：(数组/对象)赋值时，是将原变量的地址，赋给新变量。两个变量，实际上操作的是同一份数据，所以，修改其中一个变量，另一个跟着变化；
* 基本数据类型：赋值时，是将原变量的值，赋值给新的变量。两个变量，属于不同的内存空间，修改其中一个，互不干扰；
*
*/

// 字面量声明
var arr1 = [1,"2",true,{"name":"jianghao"},[1,2]];
console.log(arr1[3].name);

var arr2 = new Array(1,"2",true);//相当于[1,"2",true]
arr2[5] = "1";
console.log(arr2);

var arr3 = [10,3,5,7,3,6,99];
//delete arr3[2];
//var num = arr3.push(7);
//arr3[arr3.length] = 7;
//arr3.unshift(0);
//arr3.pop(); //相当于 arr.length-=1; //不同于delete arr3[arr3.length-1];
//arr3.shift();

//var str = arr3.join("-");

//var arr4 = arr3.concat([1,2,[3,4]],[5,6]);

//arr3.reverse();

//var arr4 = arr3.slice(-5,-1);

// arr3.sort(function(a,b){
// //return a-b; // b在前，a在后(升序排列)
// return b-a; // a在前，b在后(降序排列)
// });

自定义对象

/*[自定义对象]
*
* 1，基本概念
* ①对象：对象是包含一系列无序属性和方法的集合；
* ②键值对：对象中的数据，是以键值对的形式存在的，以键取值；
* ③属性：描述对象特征的一系列变量。【对象中的变量】
* ④方法：描述对象行为的一系列方法。【对象中的函数】
*
* 2，对象的声明：
* ①字面量的声明：var obj ={
* key1=value1,//属性
* key2=value2,
* func:function(){}//方法
* }
* 对象中的键，可以是任何数据类型。但，一般用作普通变量名即可。
* 对象中的值，可以是任何数据类型。但，字符串的话必须用“”包裹。
* 多组键值对之间用英文，分隔，键值对的键与值之间英文：分隔。
* ②new关键字声明：var lisi = new Object;
*
* 3，对象中属性和方法的读写：
* ①.运算符：对象内部：this.属性名 this.方法名（）
* 对象外部：对象名.属性名对象名.方法名（）
* ②通过["key"]调用：对象名["属性名"] 对象名["方法名"]（）
*
* 》》如果key中包含特殊字符，则无法使用第①种方式，必须使用第②种；
*
* 》》对象中，直接写变量名，默认为调用全局变量。如果需调用对象自身属性，则需要
* 通过this关键字
* ③删除对象的属性方法：delete对象名.属性/方法名
*
*/

var zhangsan={
name:"123",
age:"456",
sex:"789",
say:function(){
console.log("myname:"+this.name);
console.log("今年："+this.age+"岁");
console.log("性别是："+this.sex);
console.log(this);
}
}
zhangsan.say();

正则表达式

一、校验数字的表达式
数字：^[0-9]*$
n位的数字：^\d{n}$
至少n位的数字：^\d{n,}$
m-n位的数字：^\d{m,n}$
零和非零开头的数字：^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的负整数：^\-[1-9][]0-9″*$ 或 ^-[1-9]\d*$
非负整数：^\d+$ 或 ^[1-9]\d*|0$
非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
二、校验字符的表达式
汉字：^[\u4e00-\u9fa5]{0,}$
英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符：^.{3,20}$
由26个英文字母组成的字符串：^[A-Za-z]+$
由26个大写英文字母组成的字符串：^[A-Z]+$
由26个小写英文字母组成的字符串：^[a-z]+$
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
可以输入含有^%&’,;=?$\”等字符：[^%&',;=?$\x22]+
禁止输入含有~的字符：[^~\x22]+
三、特殊需求表达式
Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX)：^($$\d{3,4}-)|\d{3.4}-)?\d{7,8}$
国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
身份证号(15位、18位数字)：^\d{15}|\d{18}$
短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
钱的输入格式：
o有四种钱的表示形式我们可以接受:”10000.00″ 和 “10,000.00″, 和没有 “分” 的 “10000″ 和 “10,000″：^[1-9][0-9]*$
o这表示任意一个不以0开头的数字，但是，这也意味着一个字符”0″不通过，所以我们采用下面的形式：^(0|[1-9][0-9]*)$
o一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
o这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉，因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
o必须说明的是，小数点后面至少应该有1位数，所以”10.”是不通过的，但是 “10″ 和 “10.2″ 是通过的：^[0-9]+(.[0-9]{2})?$
o这样我们规定小数点后面必须有两位，如果你认为太苛刻了，可以这样：^[0-9]+(.[0-9]{1,2})?$
o这样就允许用户只写一位小数。下面我们该考虑数字中的逗号了，我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
o1到3个数字，后面跟着任意个逗号+3个数字，逗号成为可选，而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
o备注：这就是最终结果了，别忘了”+”可以用”*”替代。如果你觉得空字符串也可以接受的话(奇怪，为什么?)最后，别忘了在用函数时去掉去掉那个反斜杠，一般的错误都在这里
xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正则表达式：[\u4e00-\u9fa5]
双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
空白行的正则表达式：\n\s*\r (可以用来删除空白行)
HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

转载于:https://www.cnblogs.com/lxd564965917/p/6751669.html

weixin_30610755

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js嵌套，BOM，DOM，内置对象，数组，自定义对象，正则表达式

嵌套[循环嵌套特点]外层循环转一次，内层嵌套转一圈；外层循环控制行数；内层循环控制每行元素个数‘[做图形题思路]1，确定图形一共几行，即为外层的循环的次数；2，确定每行有几种元素，代表有几个内层...
复制链接

扫一扫