JavaScript_2
2015-08-24 14:08
609 查看
JavaScript事件处理：
1.内联模型，事件处理函数是HTML标签的一个属性，<input type="button" value="按钮" onclick="function();"/>
2.一个函数放到另一个函数里边，里层的函数将会失效;
3.脚本模型，css,js,html实现分离。
4.js获得某个标签，点击该标签出发事件：
var input = document.getElementsByTagName('input')[0];//获得页面中的第一个input标签
input.onclick=function(){};//点击该标签触发一个函数
也可以换一种写法：
<script>
function fun(){
};
</script>
input.onclick = fun;//也可以通过这种方式调用，这里没有括号
5.window.onload = function(){};//页面加载完成后执行函数
6.JavaScript事件处理函数分为三种：鼠标事件，键盘事件，HTML事件，所有的事件处理函数都是由俩部分组成的"on+事件名称";
7.鼠标事件
单击：onclick;
双击：ondblclick;
鼠标移动到某个元素上的时:onmouseover;
鼠标离开某个元素的时:onmouseout;
8.键盘事件:
点击任意键:onkeydown;
9.html事件：
加载时候执行:onload;//就是说能看到整个页面内容的时候执行的事件
页面整个卸载的时候:onunload;//关闭页面或者是刷新页面的时候
文本框改变，并失去焦点时候;onchange;
获得焦点:onfocus;
失去焦点:onblur;
提交事件:onsubmit//<from>标签下
窗口变化的时候执行:onresize;//windows下执行
滚动条事件:onscroll//widows下执行
10.事件处理由三部分组成:document.onclick=function(){};//对象（this指的是当前绑定的对象 ），事件处理函数，函数
11.js函数：定义一次却可以调用或执行多次的函数代码块，function name(){}，函数本身没有运行功能，必须调用才可以执行，调用可以放在函数声明之前，圆括号传参，大括号函数体
12.调用函数返回：function(){return '只用调用才会被执行！'}//调用该函数时将return内容赋值给调用对象;
13.实际操作中80%-90%都是用到带返回值的函数：function name(){return %},同时return之后，不会再执行下边的代码;
14.如果一个页面有多个js,俩个window.load=function(){},第一个会被覆盖，即后边的会自动覆盖前边的;
15.匿名函数：box.onclick = function(){};
16. 表单处理： <from></from>对应的是HTMLFormElement类型;
17.submit提交表单，reset重置表单;
18.获取from的三种方式：
var fm = document.getElementById('myForm');
var fm = document.getElementsByTagName('form')[0];//获取第一个form标签
var fm = document.forms[0];//HTML DOM通过0下标获取
19.在表单中尽量避免使用name="submit"或者是id="submit",因为这样会和type="submit"冲突;
20.模拟延迟：setTimeOut(function(){
fm.submit();},5000);
21.共有的表单字段属性：disabled,布尔值，表示当前字段是否被禁用,document.getElementById('sub').disabled=true;//第一次提交后将按钮禁用
22.F5刷新只是缓存级别的刷新，从源头刷新，需要Ctrl+F5刷新;
23.避免表单重复提交的俩种方法：
document.getElementById('sub').disabled=true;//第一次提交后将按钮禁用（第一种方法）
//(第二种方法)
var flag = false;
function test(){
if(flag==true)
return;
flag=true;//表示表单提交过一次
fm.submit();
}
24.重置：<input type="reset" value="重置"/>
25.复选框：<input type="radio" name="sex" value="男" checked="checked"/>男//checked="checked"表示首选项
<input type="radio" name="sex" value="女" checked="checked"/>女
26.<from></from>标签中：
var fm = document.getElementById('myFrom');
var u = fm.elements['user'];//user表示标签中name="user"的那个标签，u表示获取到的那个标签的对象
u.focus();//将焦点移入
u.blur();//将焦点移出
27.html中，<input type="test" value="预览值"/>会在输入框中显示“预览值",在<testarea name="content">预览值</testarea>，这样才会显示预览值，js中<input>和<testarea>中都有value属性,或者通过content.getAttribute('value')这种方式;
28.过滤输入的俩种模式：
禁止屏蔽非数字键的输入，阻止非数字键的默认行为、验证后取消，你可以先输入非法的字符，然后判断后，取消你输入的文本;
29.<input type="test" maxlength="1" >//输入只能长度为1
30.下拉列表选择框
<select name="city">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option>无</option>
</select>
var city = fm.elements("city");
var firstOption = city.options[0]//获取到了第一个下拉框的选项
31.JSON（说白了就是一个字符串，所以任何表示都应该加上引号表示字符串）是一种结构化的数据表示方式, 是JavaScript的一种严格子集,在很多语句都可以使用，有俩种操作方式，解析和序列化;
32.JavaScript对象的表示方法：var box = {name:"Lee",age:"100"} alert(box.name);
33.JSON的对象的表示方法要都加上双引号'{"name":"Lee","age":100}'//要使用双引号，否则会出现转换错误,字符串要使用双引号，数字可以不需要
34.普通数组的表示方式：var box = [100,'Lee',true];
35.JSON数组[100,"Lee",ture],JSON数组与普通数组相比较少了分号，少了变量的赋值，而且本身应该是字符串表示
36.JSON中值如果是字符串用双引号，如果是数字直接写;
[
{"name":"liubo","age":24},
{"name":"liubo","age":24},
{"name":"liubo","age":24}
]
37.使用eval()来解析JSON字符串，让其变成JavaScript代码
var json = '[{"title":"a","num":1},{"title":"b","num":2}]';
var box = eval(json);
alert(box[1].title);
38.ECMAScript对解析JSON的行为进行了规范，定义了全局对象JSON。将原生的JavaScript值转换为JSON字符串：stringify(),将JSON字符串转换为JavaScript原生值：parse();
39.Ajax的一个核心的对象：XMLHttpRequest,这种技术可以向服务器请求额外的数据而无需卸载页面（刷新）;
40支持Ajax技术的浏览器：IE7+,Firefox,OPera,Chrome,Safari;
41.根据不同版本创建XMLHttpRequest:
function createXHR(){
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
var version=[
'MSXML2.XMLHttp6.0'
'MSXML2.XMLHttp3.0'
'MSXML2.XMLHttp'
];
for(var i = 0,version.length;i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
}
}
}
}
41.第一步创建XMLHttpRequest对象。第二步调用open()方法，open()方法接受三个参数，请求的类型（get/post）,请求的路径，是否表示异步，open()方法并不是正真发送请求，只是启动请求准备发送。第三步调用send()方法，接受一个参数，作为请求主体发送的数据，如果不需要则填写null，执行send()方法后，请求数据将发送到服务器上;
42.当请求
4000
发送到服务器端，收到响应后，相应数据会自动填充到XMLHttpRequest对象的属性
responseText:作为相应主体被返回的文本
responseXML:如果相应的主体是"text/xml”或者"application/xml",则返回相应数据的XML DOM文档
status:相应HTTP状态
statusText:HTTP状态说明
43.杂么处理缓存？可以使用JS随机字符串：
XMLHttpRequest.open('get','demo.jsp?rand='+Math.random,false);//这样每次都是新的请求地址了
44.使用异步调用时需要触发XMLHttpRequest.readstatechange=function() {}事件，然后检测readyState属性即可;
45.XMLHttpRequest.abort()//取消异步请求
46.解决中文乱码问题，Ajax返回的数据其实是UTF-8的，最简单的解决方法是全部设置为UTF-8即可:
47.XMLHttpRequest执行异步Ajax请求顺序：
XMLHttpRequest.onreadstatechange=function(){};
XMLHttpRequest.open(method,url,async);
XMLHttpRequest.send();
47.var arr=[];for (var i in data){
arr.push(data[i])
};
1.内联模型，事件处理函数是HTML标签的一个属性，<input type="button" value="按钮" onclick="function();"/>
2.一个函数放到另一个函数里边，里层的函数将会失效;
3.脚本模型，css,js,html实现分离。
4.js获得某个标签，点击该标签出发事件：
var input = document.getElementsByTagName('input')[0];//获得页面中的第一个input标签
input.onclick=function(){};//点击该标签触发一个函数
也可以换一种写法：
<script>
function fun(){
};
</script>
input.onclick = fun;//也可以通过这种方式调用，这里没有括号
5.window.onload = function(){};//页面加载完成后执行函数
6.JavaScript事件处理函数分为三种：鼠标事件，键盘事件，HTML事件，所有的事件处理函数都是由俩部分组成的"on+事件名称";
7.鼠标事件
单击：onclick;
双击：ondblclick;
鼠标移动到某个元素上的时:onmouseover;
鼠标离开某个元素的时:onmouseout;
8.键盘事件:
点击任意键:onkeydown;
9.html事件：
加载时候执行:onload;//就是说能看到整个页面内容的时候执行的事件
页面整个卸载的时候:onunload;//关闭页面或者是刷新页面的时候
文本框改变，并失去焦点时候;onchange;
获得焦点:onfocus;
失去焦点:onblur;
提交事件:onsubmit//<from>标签下
窗口变化的时候执行:onresize;//windows下执行
滚动条事件:onscroll//widows下执行
10.事件处理由三部分组成:document.onclick=function(){};//对象（this指的是当前绑定的对象 ），事件处理函数，函数
11.js函数：定义一次却可以调用或执行多次的函数代码块，function name(){}，函数本身没有运行功能，必须调用才可以执行，调用可以放在函数声明之前，圆括号传参，大括号函数体
12.调用函数返回：function(){return '只用调用才会被执行！'}//调用该函数时将return内容赋值给调用对象;
13.实际操作中80%-90%都是用到带返回值的函数：function name(){return %},同时return之后，不会再执行下边的代码;
14.如果一个页面有多个js,俩个window.load=function(){},第一个会被覆盖，即后边的会自动覆盖前边的;
15.匿名函数：box.onclick = function(){};
16. 表单处理： <from></from>对应的是HTMLFormElement类型;
17.submit提交表单，reset重置表单;
18.获取from的三种方式：
var fm = document.getElementById('myForm');
var fm = document.getElementsByTagName('form')[0];//获取第一个form标签
var fm = document.forms[0];//HTML DOM通过0下标获取
19.在表单中尽量避免使用name="submit"或者是id="submit",因为这样会和type="submit"冲突;
20.模拟延迟：setTimeOut(function(){
fm.submit();},5000);
21.共有的表单字段属性：disabled,布尔值，表示当前字段是否被禁用,document.getElementById('sub').disabled=true;//第一次提交后将按钮禁用
22.F5刷新只是缓存级别的刷新，从源头刷新，需要Ctrl+F5刷新;
23.避免表单重复提交的俩种方法：
document.getElementById('sub').disabled=true;//第一次提交后将按钮禁用（第一种方法）
//(第二种方法)
var flag = false;
function test(){
if(flag==true)
return;
flag=true;//表示表单提交过一次
fm.submit();
}
24.重置：<input type="reset" value="重置"/>
25.复选框：<input type="radio" name="sex" value="男" checked="checked"/>男//checked="checked"表示首选项
<input type="radio" name="sex" value="女" checked="checked"/>女
26.<from></from>标签中：
var fm = document.getElementById('myFrom');
var u = fm.elements['user'];//user表示标签中name="user"的那个标签，u表示获取到的那个标签的对象
u.focus();//将焦点移入
u.blur();//将焦点移出
27.html中，<input type="test" value="预览值"/>会在输入框中显示“预览值",在<testarea name="content">预览值</testarea>，这样才会显示预览值，js中<input>和<testarea>中都有value属性,或者通过content.getAttribute('value')这种方式;
28.过滤输入的俩种模式：
禁止屏蔽非数字键的输入，阻止非数字键的默认行为、验证后取消，你可以先输入非法的字符，然后判断后，取消你输入的文本;
29.<input type="test" maxlength="1" >//输入只能长度为1
30.下拉列表选择框
<select name="city">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option>无</option>
</select>
var city = fm.elements("city");
var firstOption = city.options[0]//获取到了第一个下拉框的选项
31.JSON（说白了就是一个字符串，所以任何表示都应该加上引号表示字符串）是一种结构化的数据表示方式, 是JavaScript的一种严格子集,在很多语句都可以使用，有俩种操作方式，解析和序列化;
32.JavaScript对象的表示方法：var box = {name:"Lee",age:"100"} alert(box.name);
33.JSON的对象的表示方法要都加上双引号'{"name":"Lee","age":100}'//要使用双引号，否则会出现转换错误,字符串要使用双引号，数字可以不需要
34.普通数组的表示方式：var box = [100,'Lee',true];
35.JSON数组[100,"Lee",ture],JSON数组与普通数组相比较少了分号，少了变量的赋值，而且本身应该是字符串表示
36.JSON中值如果是字符串用双引号，如果是数字直接写;
[
{"name":"liubo","age":24},
{"name":"liubo","age":24},
{"name":"liubo","age":24}
]
37.使用eval()来解析JSON字符串，让其变成JavaScript代码
var json = '[{"title":"a","num":1},{"title":"b","num":2}]';
var box = eval(json);
alert(box[1].title);
38.ECMAScript对解析JSON的行为进行了规范，定义了全局对象JSON。将原生的JavaScript值转换为JSON字符串：stringify(),将JSON字符串转换为JavaScript原生值：parse();
39.Ajax的一个核心的对象：XMLHttpRequest,这种技术可以向服务器请求额外的数据而无需卸载页面（刷新）;
40支持Ajax技术的浏览器：IE7+,Firefox,OPera,Chrome,Safari;
41.根据不同版本创建XMLHttpRequest:
function createXHR(){
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
var version=[
'MSXML2.XMLHttp6.0'
'MSXML2.XMLHttp3.0'
'MSXML2.XMLHttp'
];
for(var i = 0,version.length;i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
}
}
}
}
41.第一步创建XMLHttpRequest对象。第二步调用open()方法，open()方法接受三个参数，请求的类型（get/post）,请求的路径，是否表示异步，open()方法并不是正真发送请求，只是启动请求准备发送。第三步调用send()方法，接受一个参数，作为请求主体发送的数据，如果不需要则填写null，执行send()方法后，请求数据将发送到服务器上;
42.当请求
4000
发送到服务器端，收到响应后，相应数据会自动填充到XMLHttpRequest对象的属性
responseText:作为相应主体被返回的文本
responseXML:如果相应的主体是"text/xml”或者"application/xml",则返回相应数据的XML DOM文档
status:相应HTTP状态
statusText:HTTP状态说明
43.杂么处理缓存？可以使用JS随机字符串：
XMLHttpRequest.open('get','demo.jsp?rand='+Math.random,false);//这样每次都是新的请求地址了
44.使用异步调用时需要触发XMLHttpRequest.readstatechange=function() {}事件，然后检测readyState属性即可;
45.XMLHttpRequest.abort()//取消异步请求
46.解决中文乱码问题，Ajax返回的数据其实是UTF-8的，最简单的解决方法是全部设置为UTF-8即可:
47.XMLHttpRequest执行异步Ajax请求顺序：
XMLHttpRequest.onreadstatechange=function(){};
XMLHttpRequest.open(method,url,async);
XMLHttpRequest.send();
47.var arr=[];for (var i in data){
arr.push(data[i])
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript_1
- JS中的盒子模型
- js alert
- JSONP跨域的原理解析
- jsonc库使用
- 什么是JSON
- js算法：分治法-快速排序
- JS 添加到事件的多个对象
- JS获取当前手机浏览器可视区域大小
- javascript没有块级作用域
- js中json对象和字符串的转换
- javascript ~~ 符号的使用
- js substr substring slice splice
- javascript中SetInterval与setTimeout的定时器用法
- js中的substring和substr的小区别
- JS选中OPTION
- ExtJs combobox下拉框宽度设置
- JavaScript中，本周、上周、本月、上月日期判断
- html-firefox与IE对javascript和CSS的区别(浏览器兼容)
- js创建对象的几种方式