`

原生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() 添加监听事件 注意事件冒泡。 

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






分享到:
评论

相关推荐

    50款原生js案例(绝美整合)

    这个“50款原生js案例(绝美整合)”集合了作者半年的辛勤整理,包含了各种JavaScript插件和效果,旨在帮助开发者们提升技能,找到灵感。下面我们将深入探讨这些标签所代表的知识点,并对每个部分进行详细的阐述。 ...

    原生JS前端框架SYSUI后台管理系统页面基本事例级文档详细配置说明+多种插件

    使用原生JS代码开发一个前端框架,框架名称SYSUI,纯原生js开发,不使用任何第三方库。SYSUI本身支持网站模板界面编辑开发,也支持配置后台系统界面,是个多用途的框架。 使用SYSUI开发一个后台管理系统界面,支持...

    原生js生成二维码(完美可用)

    总结,这款“原生js生成二维码(完美可用)”的工具对于开发人员来说是一个实用的资源,无论是快速原型开发还是生产环境部署,都能提供便捷的二维码生成功能。它的独立性、易用性和灵活性使其成为开发中的理想选择。...

    原生JavaScript飞机大战

    原生JS是指不依赖任何外部库或框架,直接使用JavaScript语言进行编程。这使得开发者能够更深入地理解JavaScript的核心机制,包括DOM操作、事件处理、定时器、对象和数组等基础知识。 在“飞机大战”游戏中,积分...

    前端原生js实现MD5加密

    前端原生js实现MD5加密

    原生JS经典小项目-DOM练习

    在本项目"原生JS经典小项目-DOM练习"中,我们将深入探讨JavaScript与DOM(文档对象模型)的交互,这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口,它允许我们通过JavaScript来查找、修改和操作页面元素。在...

    原生js select下拉选项框给文本框赋值代码

    原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码

    原生JS实现HTML- TABLE 自动行合并插件

    该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。

    原生js月份/年月选择器

    织织网应实际使用开发的一个js年月选择器,采用原生js开发,兼容IE、FF(Firefox)、谷歌(Chrome),其他杂牌浏览器都是基于这三种内核的,就不一一测试了。 插件非常的简单,完全开源,可以做二次开发。 因为很...

    原生js实现jquery函数animate()动画效果的简单实例

    本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中,jQuery提供了一套非常方便的API来实现动画效果,但随着Web标准的发展和性能优化需求的提高,原生JavaScript的方法逐渐...

    原生js实现精美放羊动画效果

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。...本人热爱使用原生js实现各种好看的前端页面,从而提高自己的前端开发水平。原生js实现精美放羊动画效果。

    原生js写的弹窗效果(alert效果)

    总结起来,创建原生JS弹窗效果涉及HTML布局、CSS样式和JavaScript逻辑,同时需要考虑浏览器兼容性,确保在不同的环境下都能正常工作。通过这样的方式,开发者可以根据实际需求定制弹窗的样式和功能,提高用户体验。

    网易严选【原生JS】.zip

    【原生JS】.zip 文件包含了关于使用原生JavaScript开发的网易严选相关技术细节,主要聚焦于JavaScript语言的核心概念和应用。JavaScript是一种广泛应用于Web开发的脚本语言,尤其在网页交互、动态内容更新以及前后端...

    原生JS制作爱心表白代码.zip

    原生JS制作爱心表白代码.zip原生JS制作爱心表白代码.zip 原生JS制作爱心表白代码.zip原生JS制作爱心表白代码.zip 原生JS制作爱心表白代码.zip原生JS制作爱心表白代码.zip 原生JS制作爱心表白代码.zip原生JS制作爱心...

    简单原生js文字向上滚动消息框代码

    这个"简单原生js文字向上滚动消息框代码"提供了一种实现方式,它不依赖于任何JavaScript库如jQuery,而是完全基于原生JavaScript编写,这使得它在性能和加载速度上具有优势。 首先,`index.html`是网页的主文件,它...

    基于原生JavaScript实现的扫雷小游戏.zip

    基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...

    原生js扫雷游戏

    基于原生js写的扫雷游戏,代码里面有详细注释,大家可以看看。

    网页动画素材 原生JS制作爱心表白特效(抖音资料)

    网页动画素材 原生JS制作爱心表白特效(抖音资料)网页动画素材 原生JS制作爱心表白特效(抖音资料)网页动画素材 原生JS制作爱心表白特效(抖音资料)网页动画素材 原生JS制作爱心表白特效(抖音资料)网页动画素材...

Global site tag (gtag.js) - Google Analytics