文档章节

JavaScript常见小问题

汐蓝-空
 汐蓝-空
发布于 2015/06/24 16:55
字数 2831
阅读 27
收藏 0

1.Form的onsubmit

elemForm.submit();不会触发表单的onsubmit事件
 

2.根据name属性获取html页面对象,这个也适用于ID ,注意大小写,JAVASCRIPT 对大小写敏感

<!DOCTYPE HTML>
<html>

<body>
<form >
<input type="text" name="aaa" value="xxx">
</form>
</body>
<script  type="text/javascript" >
alert(document.all.aaa.value);
</script>
</html>

 javaScript中的css改变

document.getElementById("p2").style.color="blue";

 

3.JS常见事件处理

事件就是用户或浏览器自身执行的某种动作,如click,laod,mouseover都是事件的名称。

事件流描述的是从页面中接收事件的顺序。

事件处理程序就是对事件作出响应的函数。事件处理程序的名字以“on”开头,

如click事件对应的事件处理程序的名称为onclick。为事件指定处理程序的方式有多种,

如:HTML事件处理程序、DMO0级事件处理程序、

DOM2级事件处理程序、IE事件处理程序、跨浏览器事件处理程序。

 

当产生一个事件时,就会产生一个事件流,这个留从父组件开始向子组件流去,这个过程叫做捕获阶段

当找到发出事件的子组件时叫做目标阶段

然后事件流会从目标组件反向流向父组件,这个过程叫冒泡阶段

三个阶段都可以相应事件。

 

(1)html事件处理程序

即:将事件处理程序,写在相应的html标签中。

eg:

<input type="button" value="click me" onclick="alert("hello")" />

缺点:①存在一个时间差,当用户在html元素一出现在页面上就去触发相应的事件时,

事件的处理程序可能还不具备执行条件(比如说调用的函数还木有被解析),

就会引发错误。eg:

<input type="button" value="click me" onclick="message()" />

<script type="text/javascript">

function message(){

alert("hello world");

}

</script>

因为调用的函数处于按钮的下方,如果在message函数被加载之前就点击了按钮就会引发错误。

②html和js代码耦合度太高,如果要改变事件处理程序,就要改动两个地方:html代码和javascript代码。

(2)DMO0级事件处理程序

eg:

var btn=document.getElementById("myBtn");

btn.onclick=function(){alert(this.id)};

注意:如果这段代码位于按钮之后,就有可能在一点时间内怎么点击都木有反应,

因为在这段代码运行以前不会指定事件处理程序。

DMO0级事件处理程序被认为是元素的方法,换句话说,

DMO0级事件处理程序是在元素的作用域中运行的,

所以程序中的this引用当前元素。可以在事件处理程序中通过this访问元素的任何属性和方法。

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

也可删除指定的事件处理程序,只要将事件处理程序的属性设置为null就Ok了。

eg:

btn.onclick=null;将处理程序设置为null以后,再点击按钮不会发生任何动作。

(3)DOM2级事件处理程序

DOM2级事件定义了两个方法,用于指定和删除事件处理程序。

这两个操作分别为:addEventListener()和removeEventListner().所有的DOM节点都包含这两个方法。

他们要接受3个参数,分别为:要处理的事件名,处理函数,布尔值。

最后的布尔值参数如果为ture,表示在捕获阶段处理程序,如果为false,表示在冒泡阶段调用事件处理程序。

例如在按钮上为click添加事件处理程序,可以用下面的代码:

var btn=document.getElementById("myBtn");

btn.addEventListner("onclick",function(){alert("hello world");false});

这里添加的事件处理程序也是依附于元素的的作用域

使用DOM2事件处理程序的优点是:可以为同一个元素添加多个事件处理程序。

例:var btn=getElementById("myBtn");

btn.addEventListner("click",function(){alert(this.id);},flase);

btn.addEventListner("click",function(){alert("hello world");},flase);

结果:先显示id,后显示hello world。

通过addEventListner()添加的事件处理程序只能通过removeEventListner来删除。

移除时使用的参数与添加事件处理程序的参数相同。

另:通过addEventListner添加的匿名函数无法删除。

(4)IE事件处理程序。

IE添加和删除事件处理程序的函数分别为:attachEvent()和detachEvent();

这两个函数接收相同的两个参数:事件处理程序名与事件处理函数。

由于IE只支持事件冒泡,所以通过attachEvent添加的事件处理程序都会添加到冒泡阶段。

例如:var btn=document.getElementById("myBtn");

btn.attachEvent("onclick",function(){alert("hello world");});

IE在使用attachEvent方法的情况下,事件处理程序的作用域为全局作用域

因此this等于window。(在编写跨浏览器的代码时,记住这一点非常重要)。

与addEventListner类似,attachEvent()方法也可以用来为一个元素添加多个事件处理程序;

eg:

var btn=document.getElementById("myBtn");

btn.attachEvent("onclick",function(){alert("clicked");});

btn.attachEvent("onclick",function(){alert("hello world");});

值得注意的是:这些事件的处理程序是按逆序触发的,也就是说,先弹出hello world 再弹出clicked。

detach()使用方法略。

(5)跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件,主要可以使用两个方法:

①使用能隔离浏览器差异的js库。

②自己编写最适合的事件处理方法。这里要用到能力检测,

即:识别浏览器的能力。要保证代码能在大多数浏览器下一致的运行,只须关注冒泡阶段。

代码步骤如下:

首先要创建的方法是addHandler(用于处理跨浏览器的兼容性问题,这里没有给出具体代码),

它的职责是视情况判定使用DOM0级方法,DOM2级方法,IE方法来添加事件。

addHandler接收3个参数:要操作的元素、事件名称、事件处理程序函数。

这个方法属于一个名叫EventUtil的对象。这里使用这个对象来处理浏览器之间的差异。

与addHandler对应的方法是removeHandler(),它也接受相同的参数。

这个事件的职责是移除之前添加的事件处理程序。

不论事件是以什么方式添加到对象中的,如果其他方法程序无效,则默认使用DOM0级方法。

使用EventUtil的方法如下:var btn=document.getElementById("myBtn");

var hander=function(){alert("hello")};//事件处理程序

EventUtil.addHandler(btn,"onclick",handler);

//其他代码

EventUtil.removeHandler(btn,"onclick",handler);

addHandler()和removeHandler()没有考虑到所有的浏览器问题,

例如IE中作用域的问题,但是使用它们添加和移除事件处理程序还是足够了。

(6)onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

navigator.cookieEnabled==true 检测浏览器是否启用cookie

(7)onmouseover 和 onmouseout 事件 onmousedown、onmouseup 以及 onclick onfocus

 

4.JS输出html


<!DOCTYPE HTML>
<html>
<body>
<form name="myform">
<input type="button" id="myBtn" value="xxx">
</form>
<div   id="divs"></div>
</body>
<script  type="text/javascript" >
//var form=document.forms[0];//获取form表单方法一
var form=document.forms['myform'];//获取form表单方法二
for(var i=0;i<form.length;i++){//获取表单内部组件
alert(form[i].value);
}
//写出html
document.write("<input type='button' id='myBtn2' value='qqq'>");
//下面2方法,innerHTML属性只有根据ID获取到的对象有此属性
document.all.divs.innerHTML="<input type='button' id='myBtn3' value='555'>";
document.getElementById("divs").innerHTML="My First JavaScript";
//代码折行
document.write("Hello \
World!");
</script>
</html>

5.JS数据类型

除了基本类型外,值得注意的类型有:

对象:对象可以如下生成,同时   var carname=new String(); 使用new的方式也可以生成对象

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};



使用

name=person.lastname;
name=person["lastname"];



通过new出来的对象可以赋给属性

var carname=new Object();
carname.name='xqqqq';
alert(carname.name);



 

空以及不存在:

unifined,null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

6、JS对象(属性,方法)

JS中同样纯在break、跳出循环

JS中也有try{}catch{}


try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }
try{
alert(aa);
}catch(e){
alert(e.message);//aa is not defined
}
JavaScript中的throw命令事实上可以抛出任何对象,
并且我们可以在catch接受到此对象。例如:
try {
 throw new Date(); // 抛出当前时间对象 
} catch (e) {
 alert(e.toLocaleString()); // 使用本地格式显示当前时间 
}

<script language="javascript"> 
try 
{ 
throw new Error(10,"asdasdasd") 
} 
catch (e) 
{ 
alert(e.message); 
alert(e.description) 
alert(e.number) 
alert(e.name) 
throw new Error(10,"asdasdasd") 
} 
</script>

7.JS节点,父子关系

<script  type="text/javascript" >
//创建一个组件,p为组件
var p=document.createElement("p");
p.id='p1';
//文本是一个TextNode
var node =document.createTextNode("xxxxxxxxx");
//向p组件追加节点
p.appendChild(node);
//同时,组件可以被追加到其他组件中
document.all.divs.appendChild(p);

同理,可追加即可移除
var child=document.getElementById("p1");
document.all.divs.removeChild(child);
</script>


8.JS 正则表达式的使用

//正则表达式对象,拥有的方法是test,exec,complie
//test检索字符串中的指定值。返回 true 或 false。
//exec检索字符串中的指定值。返回被找到的值。
//如果没有发现匹配,则返回 null。
var pattern = new RegExp('he');
alert(pattern.test("the"));//输出true,包含he
alert(pattern.exec('the'));//输出he
//查找字符串中所有此字符的时候
var pattern2=new RegExp('e','g');
var result="";
do{
result=pattern2.exec('wewewerwerwerew');
alert(result);
}while(result!=null)
//complie改变检索条件
var patt1=new RegExp("e");
document.write(patt1.test(" life are free"));
patt1.compile("x");
document.write(patt1.test("life are free"));
//输出true 和 false



正则表达式:

1.匹配正整数:/^[0-9]*[1-9][0-9]*$/

2.匹配非负整数(正整数+0):/^\d+$/

3.匹配中文:/^[\u4e00-\u9fa5]/

4.匹配Email:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/

5.匹配网址URL:/^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/

6.匹配字母开头,5-16字符,字母数字下划线:/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/

7.匹配数字,字母,下划线,中文:/^[\u4e00-\u9fa5A-Za-z0-9_]+$/

8.匹配中国邮政编码:/^[1-9]\d{5}$/

9.匹配IP地址:/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/

10.匹配中国大陆身份证:/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/


var str = "abc@126.com";  
var preg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; 
//匹配Email  
if(preg.test(str)){    
var msg = "匹配成功";  
}else{    
var msg = "匹配失败!";  
}  
alert(msg);

9.JS window

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

获取window长宽

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;



window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸



10.JS location

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)

加载新的页面:
window.location.assign("http://www.w3school.com.cn")

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
 




 


 


 

© 著作权归作者所有

共有 人打赏支持
汐蓝-空
粉丝 0
博文 25
码字总数 13306
作品 0
深圳
私信 提问
前端进阶(第一期)-调用堆栈笔记

1-1 理解 Javascript 执行上下文和执行栈 原文地址 知识点有: JavaScript程序的内部执行机制; 理解执行上下文和执行栈; 理解以上知识点有助于理解JavaScript的提升机制、作用域和闭包 执行...

xszi
2018/12/04
0
0
10 个你需要了解的最佳 javascript 开发实践

原文:Top 10 “Must Follow” JavaScript Best Practices Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。 尽管很多的开发人员...

justjavac
2013/10/15
679
1
JS实现按钮onclick提交表单

1:在做ssm增删改查是遇到form表单提交问题 在input中设置了onclick=“addUser”事件,那么怎么提交了? 还有比如删除,修改也用js表示: 连接:https://blog.csdn.net/sinat41104353/artic...

小橙子的曼曼
03/14
0
0
SCRIPT1003:IE11报错,无法打开vue+elementui项目,谷歌等正常

问题:IE11报错SCRIPT1003:缺少":"... 常见解决方式 1. 安装babel-polyfill插件,并在入口文件中引入 2. 安装babel-polyfill插件,如果是webpack打包,则在webpack配置中添加 使用上述方式后...

YXMBetter
2018/12/29
0
0
[招聘][昆明]前端开发工程师

猪哥来招人了,地点在昆明,月薪2500起,视能力而定。 要求: 1、良好学习习惯和工作习惯。 2、会沟通。 3、掌握HTML+CSS,能处理常见浏览器兼容问题。 4、熟练使用js,熟知js、html、css与浏...

铂金小猪
2013/06/09
817
13

没有更多内容

加载失败,请刷新页面

加载更多

nginx反向代理配置去除前缀

使用nginx做反向代理的时候,可以简单的直接把请求原封不动的转发给下一个服务。设置proxy_pass请求只会替换域名,如果要根据不同的url后缀来访问不同的服务,则需要通过如下方法: 方法一:...

架构师springboot
21分钟前
1
0
QianBill API 开发笔记

JWT

BeanHo
32分钟前
3
0
Elasticsearch实战篇——Spring Boot整合ElasticSearch

当前Spring Boot很是流行,包括我自己,也是在用Spring Boot集成其他框架进行项目开发,所以这一节,我们一起来探讨Spring Boot整合ElasticSearch的问题。 本文主要讲以下内容: 第一部分,通...

JAVA_冯文议
42分钟前
3
0
不错的linux下通用的java程序启动脚本

#!/bin/sh#该脚本为Linux下启动java程序的通用脚本。即可以作为开机自启动service脚本被调用,#也可以作为启动java程序的独立脚本来使用。##Author: tudaxia.com, Date: 2011/6/7...

sprouting
今天
3
0
Linux manjaro系统安装后无法连接wifi,解决方案

笔记本为联想 thinkpad E480 首先通过命令lspci -k看一下原因是否为缺少wifi驱动,如下,如果没有Kernel driver in use,说明缺少驱动。 05:00.0 Network controller: Realtek Semiconducto...

bluecoffee
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部