`

原生js细节补习

 
阅读更多
js 输出:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

for ... in 循环遍历数组。
js 数据类型:
var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字 JavaScript 只有一种数字类型
var x = "John"; //为字符串
var x=true;
var y=false;

js 对象定义和对象调用:

var person = {name:"zhangsan",age:24,salary:20000,count:function  () {
					return $(this).get(0).name;//jq对象
                                        //return this.name;//js 对象

				}
			}
			
document.write(person.name);
document.write(person.salary)
document.write(person["salary"]);
document.write(person.count());

undefined 和 null 的区别。
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

js 声明变量类型,可以通过new 的方式。
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

//定义函数运用:

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
	alert("Welcome " + name + ", the " + job);
}
</script>

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

js 事件基础
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
你可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同:

js值和类型等于用=== 值等于==

//for in 的用法:
function myFunction(){
			var x;
			var txt="";
			var person={fname:"Bill",lname:"Gates",age:56}; 
			for (x in person){
				txt=txt + person[x];
			}
			document.getElementById("demo").innerHTML=txt;
		}// BillGates56


//js 常用的方法:

typeof "john" + "<br>" + 
	typeof 3.14 + "<br>" +
	typeof false + "<br>" +
	typeof [1,2,3,4] + "<br>" +//返回object
	typeof {name:'john', age:34};//返回object
        typeof function () {}         // 返回 function

typeof 检测类型 在 jq 中 是$.typeof()。需要注意的是null检测出来的也是 object 对象 ,可以给对象设null 来清空对象。也可以给对象来设 undefined 检测类型为undefined。

null 和 undefined 的区别;

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true
// 当我们取出相同的object 对象时候。无法判断类型。可以通过 constructor 来 获取他们的构造方法;
"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }
Date 方法 toString() 也有相同的效果。 类型转换。

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

var y = "John";   // y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)
全局方法 Number() 可将布尔值转换为数字。
Number(false)     // 返回 0
Number(true)      // 返回 1
d = new Date();
d.getTime()      

当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。

js 正则表达式:search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 用后面的替换前面的

/w3cschool/i  是一个正则表达式。
w3cschool  是一个模式 (用于检索)。
i  是一个修饰符 (搜索不区分大小写)。

使用 RegExp 对象
在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。
patt1.test("The best things in life are free")
test() 方法表示检测 RegExp 对象中是否含有一某一个正则表达式匹配对象。
exec() 方法。返回正在匹配的正则表达式。

try{
				adddlert("Welcome guest!");
				
			}catch(err){
				txt="本页有一个错误。\n\n"; 
		        txt+="错误描述:" + err.message + "\n\n"; 
		        txt+="点击确定继续。\n\n"; 
		        alert(txt); 
			}
try{ 
		var x=document.getElementById("demo").value;
		if(x=="")    throw "值为空";
		if(isNaN(x)) throw "不是数字";
		if(x>10)     throw "太大";
		if(x<5)      throw "太小";
	}
	catch(err){
		var y=document.getElementById("mess");
		y.innerHTML="错误:" + err + "。";
	}

字符串断行需要使用反斜杠(\),如下所示:
在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。onsubmit="return validateForm()"  return表示需要验证这个函数的返回值,只有当返回值为true的时候才提交表单
<div>
			<form name="myForm" action="www" onsubmit="return validateForm()" method="post">
				姓: <input type="text" name="fname">
				<input type="submit" value="提交">
				</form>
		</div>
function validateForm(){
				var x = document.forms["myForm"]["fname"].value;
				alert(x);
					if(x==null || x==""){
						alert("姓名必须填")
						return false;
					}
			}
//验证邮箱
function validateForm(){

var x = document.forms["myForm"]["email"].value;
					var at = x.indexOf("@");
					var dotpos = x.lastIndexOf(".");
					alert(dotpos);
					alert(x.length);
					if(at<1||dotpos<at+2||dotpos+2>=x.length){
						alert("不是一个有效的 e-mail 地址");
  						return false;
					}
}
isNaN() 函数用于检查其参数是否是非数字值。 
//奖json字符串 对象转换成js 对象

JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。
<script>
var text = '{"employees":[' +
	'{"firstName":"John","lastName":"Doe" },' +
	'{"firstName":"Anna","lastName":"Smith" },' +
	'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
	obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

 javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
如果你要定义一个死链接请使用 javascript:void(0) 
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
removeEventListener() 方法 移除监听事件,addEventListener() 添加监听事件 注意事件冒泡。 

事件冒泡是 事件有最内部到最外部 依次执行。 事件捕获是最外部到最内层的依次执行。






分享到:
评论

相关推荐

    三菱FX3G FX3S与四台E700变频器Modbus RTU通讯控制:正反转、频率设定与读取方案,三菱FX3G FX3S与四台E700变频器通讯:Modbus RTU协议实现正反转、频率设定与控制

    三菱FX3G FX3S与四台E700变频器Modbus RTU通讯控制:正反转、频率设定与读取方案,三菱FX3G FX3S与四台E700变频器通讯:Modbus RTU协议实现正反转、频率设定与控制,快速反馈与教程包含,三菱FX3G FX3S 485协议通讯四台三菱E700变频器程序资料 三菱FX3G FX3S+485bd扩展,采用modbus rtu协议,crc校验,通讯控制四台E700变频器,可以实现正反转,停止,频率的设定,频率,电流等的读取。 反馈快,使用方便,包括教程,plc和触摸屏程序,变频器参数设置和接线,别的变频器支持rtu协议也可以实现。 ,三菱FX系列PLC; 485协议通讯; 变频器E700; 通讯控制; 参数设置; 教程。,三菱PLC控制E700变频器:485协议通讯与程序设置全解

    hyphen-nl-0.20050617-10.el7.x64-86.rpm.tar.gz

    1、文件内容:hyphen-nl-0.20050617-10.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/hyphen-nl-0.20050617-10.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    西门子S7-1200PLC结构化编程在5轴伺服项目中的应用:模块化设计、触摸屏控制及电气图纸实战解析,西门子S7-1200PLC结构化编程实现多轴联动与多种伺服功能应用:CAD图纸、PLC程序和触摸屏

    西门子S7-1200PLC结构化编程在5轴伺服项目中的应用:模块化设计、触摸屏控制及电气图纸实战解析,西门子S7-1200PLC结构化编程实现多轴联动与多种伺服功能应用:CAD图纸、PLC程序和触摸屏程序协同运作。,西门子S7-1200PLC结构化编程5轴伺服项目 ,包含plc程序、威纶通触摸屏程序、cad电气图纸。 可以实现以下功能,规格有: 1.三轴机械手X轴-Y轴-Z轴联动取放料PTO脉冲定位控制台达B2伺服 2.台达伺服速度模式应用+扭矩模式应用实现收放卷 3.程序为结构化编程,每一功能为模块化设计,功能:自动_手动_单步_暂停后原位置继续运行_轴断电保持_报警功能_气缸运行及报警. 4.每个功能块可以无数次重复调用,可以建成库,用时调出即可 5.上位机采样威纶通触摸屏 6.参考本案例熟悉掌握结构化编程技巧,扩展逻辑思维。 博图14以上都可以打开 ,核心关键词:西门子S7-1200PLC; 结构化编程; 5轴伺服项目; PLC程序; 威纶通触摸屏程序; CAD电气图纸; 三轴机械手; PTO脉冲定位控制; 台达B2伺服; 速度模式应用; 扭矩模式应用; 模块化设计; 轴断电保

    情感分析算法的关键应用领域与典型实战案例

    情感分析算法在多个领域有着广泛的应用场景和丰富的案例

    基于MATLAB仿真的MMC整流站与逆变站柔性互联技术研究:快速工况仿真与环流抑制控制,基于MATLAB仿真的MMC整流站与逆变站运行分析及四端柔性互联工况仿真模拟研究,21电平MMC整流站、MMC逆

    基于MATLAB仿真的MMC整流站与逆变站柔性互联技术研究:快速工况仿真与环流抑制控制,基于MATLAB仿真的MMC整流站与逆变站运行分析及四端柔性互联工况仿真模拟研究,21电平MMC整流站、MMC逆变站、两端柔性互联的MATLAB仿真模型,4端柔性互联、MMC桥臂平均值模型、MMC聚合模型(四端21电平一分钟即能完成2s的工况仿真) 1-全部能正常运行,图四和图五为仿真波形 2-双闭环控制,逆变站PQ控制,整流站站Udc Q控制 3-最近电平逼近调制+子模块电容充电 4-环流抑制控制 ,1. 21电平MMC整流站; 2. MMC逆变站; 3. MATLAB仿真模型; 4. 两端柔性互联; 5. 桥臂平均值模型; 6. 聚合模型; 7. 双闭环控制; 8. 最近电平逼近调制; 9. 子模块电容充电; 10. 环流抑制控制。,基于柔性互联的MMC系统仿真模型:多电平控制与环流抑制研究

    有效应对网络舆情教育培训PPT.pptx

    有效应对网络舆情教育培训PPT.pptx

    高光谱解混和图片去噪 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    【轴承压力】基于matlab GUI止推轴承压力计算【含Matlab源码 12069期】.zip

    Matlab领域上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    娱乐小工具微信小程序源码下载支持多种流量主.zip

    淘宝买的,直接分享给大家了,没有测试环境,也没有办法去测。但我想,他应该是可以用的

    基于A、RBFS 和爬山算法求解 TSP问题 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    ACM比赛经验分享(基础知识与算法准备等).zip

    ACM比赛经验分享(基础知识与算法准备等)

    基于matlab平台的芯片字符识别.zip

    运行GUI版本,可二开

    比例-积分-微分 (PID) 鲁棒控制及电流反馈以确保 UPS 的稳定性 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    机器学习(预测模型):包含恶意网址的数据库或数据集

    该是指包含恶意网址的数据库或数据集,它通常被用于网络安全研究、恶意软件检测、网络欺诈防范等领域。研究人员和安全专家会利用这个数据集来分析恶意网址的特征、行为模式,进而开发出相应的检测算法和防护措施,以识别和阻止恶意网址对用户设备和网络环境造成的潜在威胁。该数据集包含约 651,191 条经过标记的 URL,涵盖了四种主要类型:良性(Benign)、篡改(Defacement)、钓鱼(Phishing)和恶意软件(Malware)。其中,良性 URL 占据了约 428,103 条,篡改 URL 有 96,457 条,钓鱼 URL 为 94,111 条,而恶意软件 URL 则有 32,520 条。该数据集的显著特点是其多类别分类的全面性,不仅包括常见的恶意 URL 类型,还涵盖了大量良性 URL,使得研究人员能够更全面地理解和区分不同类型的 URL。此外,数据集以原始的 URL 形式提供,研究人员可以根据需要提取和创建特征,而不受预设特征的限制。

    集字卡v4.3.4微信公众号原版三种UI+关键字卡控制+支持强制关注.zip

    字卡v4.3.4 原版 三种UI+关键字卡控制+支持获取用户信息+支持强制关注 集卡模块从一开始的版本到助力版本再到现在的新规则版本。 集卡模块难度主要在于 如何控制各种不同的字卡组合 被粉丝集齐的数量。 如果不控制那么一定会出现超过数量的粉丝集到指定的字卡组合,造成奖品不够的混乱,如果大奖价值高的话,超过数量的粉丝集到大奖后,就造成商家的活动费用超支了。我们冥思苦想如何才能限制集到指定字卡组合的粉丝数,后我们想到了和支付宝一样的选一张关键字卡来进行规则设置的方式来进行限制,根据奖品所需的关键字卡数,设定规则就可以控制每种奖品所需字卡组合被粉丝集到的数量,规则可以在活动进行中根据需要进行修改,活动规则灵活度高。新版的集卡规则,在此次政府发布号的活动中经受了考验,集到指定字卡组合的粉丝没有超出规则限制。有了这个规则限制后,您无需盯着活动,建好活动后就无人值守让活动进行就行了,您只需要时不时来看下蹭蹭上涨的活动数据即可。 被封? 无需担心,模块内置有防封功能,支持隐藏主域名,显示炮灰域名,保护活动安全进行。 活动准备? 只需要您有一个认证服务号即可,支持订阅号借用认证服务号来做活动。如果您

    DSP28035的CAN通信升级方案:包括源码、测试固件与C#上位机开发,支持周立功USBCAN-II兼容盒及BootLoader闪烁指示,DSP28035的CAN升级方案及详细配置说明:使用新动力开

    DSP28035的CAN通信升级方案:包括源码、测试固件与C#上位机开发,支持周立功USBCAN-II兼容盒及BootLoader闪烁指示,DSP28035的CAN升级方案及详细配置说明:使用新动力开发板与C#上位机软件实现固件升级,涉及用户代码、BootLoader代码及硬件连接细节,DSP28035的can升级方案 提供源代码,测试用固件。 上位机采用c#开发。 说明 一、介绍 1、测试平台介绍:采用M新动力的DSP28035开发板,CAN口使用GPIO30\31。波特率为500K。 2、28035__APP为测试用的用户代码,ccs10.3.1工程,参考其CMD配置。 3、28035_Bootloader_CAN为bootloader源代码,ccs10.3.1工程; 4、SWJ为上位机,采用VS2013开发,C#语言。 5、测试使用的是周立功的USBCAN-II,can盒,如果用一些国产可以兼容周立功的,则更这里面的ControlCAN.dll即可。 6、升级的app工程需要生成hex去升级,具体参考我给的工程的设置。 7、BootLoader代码,只有D400这一个灯1s闪烁一

    基于Matlab的数字验证码识别系统:预处理与不变矩算法的实践应用及GUI界面构建,基于MATLAB不变矩算法的数字验证码识别系统设计与实现,基于matlab不变矩算法实现数字验证码 过程:先对验证图

    基于Matlab的数字验证码识别系统:预处理与不变矩算法的实践应用及GUI界面构建,基于MATLAB不变矩算法的数字验证码识别系统设计与实现,基于matlab不变矩算法实现数字验证码 过程:先对验证图像进行去噪、定位、归一化等预处理,然后计算待识别数字的不变矩,再进行特征匹配,得到识别结果。 以Matlab软件为开发平台来进行设计实现及仿真,并构建相应的GUI界面。 实验结果表明利用不变矩在识别数字验证码方面具有可行性。 ,关键词:Matlab;不变矩算法;数字验证码;预处理;特征匹配;GUI界面;实验验证;可行性。,Matlab实现数字验证码识别:预处理与不变矩算法的GUI仿真

    基于STM32F103的磁编码器通讯方案:原理图、PCB设计与源码实现,附多摩川协议手册解析,基于STM32F103的精准多摩川绝对值磁编码器通讯解决方案:原理图、PCB设计与源码实践手册,完整包含多

    基于STM32F103的磁编码器通讯方案:原理图、PCB设计与源码实现,附多摩川协议手册解析,基于STM32F103的精准多摩川绝对值磁编码器通讯解决方案:原理图、PCB设计与源码实践手册,完整包含多摩川协议解析,基于STM32F103的多摩川绝对值磁编码器通讯方案 包含:原理图,PCB,源码,多摩川协议手册 ,核心关键词:STM32F103;多摩川绝对值磁编码器;通讯方案;原理图;PCB;源码;多摩川协议手册;,基于STM32F103的绝对值磁编码器通讯方案:原理图PCB与源码解析,附多摩川协议手册

    基于 BP 神经网络特征提取的指纹识别应用 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    php项目之学生成绩查询系统源码.zip

    php项目之学生成绩查询系统源码,项目仅供学习参考使用

Global site tag (gtag.js) - Google Analytics