JavaScript & ajax & JQuery的ajax

js网站：www.jq22.com

百谷歌度搜索

1.javaScript:与html混用的语言，编写的程序可以在浏览器中解释执行。

区分大小写

三种方式：第一种在直接写在html里面

第二种：声明js代码块，可以在html里面任意位置声明,包括<html>标记之外，大量js则推荐body之后。

function testJs02(){ alert("第二个js测试"); }

</script>

第三种：新建js文件夹，outJs文件，外部引入

function testJs03(){ alert("外部引入"); }

2.变量：

全局变量：声明在js代码块内部，函数外部，全部的script都能使用

局部变量：声明在函数内部

不能使用未声明的变量。

如果在局部变量中，变量声明的时候没有加var,在第一次使用的时候会变为全局变量。(不推荐)

函数返回值 : 默认返回值为undefined

特殊类型：(Object)

null(空对象)和undefined(只声明未初始化)

因为undefined派生于null，所以null和undefined相等

对象类型：object，数组，函数

隐式转换：

做加法运算时，所有类型都向number类型靠拢

boolean类型：true=1 false=0

遇到字符串类型就会进行字符串的拼接

显示转换：

parseInt('str'); //显示转换成整型

parseFloat('str'); //转成浮点型

会执行最后一个test02,因为js从上往下执行，最后一个test02把前面的覆盖了，最终会提示test02()未定义，报错

console.log("aaa"); //控制台输出 typeof 显示数据的类型

3.变量：

var num = 5;

数据类型：分为原生类型和对象类型

原生类型：数值型、布尔型、字符串型

number:整型，浮点型，Infinity，NaN（自身不等于自身）

特殊类型:（Object）

null(空对象)和undefined(只声明未初始化)

因为undefined派生于null，所以null和undefined相等

对象类型：object,数组,函数 Date Array

var a=100; b ="abc"; c=true; alert(a+c+b); //101abc 此处true代表1

运算符：

等同符：=== 不会发生隐式转换，既比较数据类型也比较数值

等值： == 会发生隐式转换,比较数值是否相等

NaN:与任何数字相减都等于NaN,并且自己不等于自己

var a=1; var c=true; alert(a==c);//true

隐式转换：

做加法运算时，所有类型都向number类型靠拢。

boolean类型:true = 1 false = 0

遇到字符串类型就会进行字符串的拼接

显式转换：

parseInt('str'); //显式转换成整型

parseFloat('str') //显式转换成浮点型

5.window.document.write("aaa"); //打印

6.数组:

长度可变，元素类型可以不同，JS数组长度随时可以变，随时可以修改，可以通过修改数组长度清空数组。

array.length获取数组长度，也可以修改数组长度。

array.push("aaa"); //数组末尾添加aaa

array.pop(); //删除数组最后一项

array.unshift("aa"); //数组第一个元素位置添加元素

array.shift(); //删除数组第一个元素

array.join("-") //以-形式，连接所有元素

7.函数:

写法1.function var fun01(var a,var b){ //var一般省略调用onclick="fun01(3,4);"

return a+b;

}

写法2. var fun02=new Function("a","b","var c=a+b;alert(c);return c"); //函数也是对象(几乎不用)

写法3. var fun03=function(var a,var b){ //把函数的引用指向变量使用fun03(3,4)

return a+b;

}

a.函数之间可互相调用 b.函数可以当实参传递

var fun04=new Function("a","b","c","fun03(a,b,c)"); //调用的时候onclick="fun04(10,20,3);"

8.常见内置方法

Math.random(); [0,1) Math.round(4.3) 四舍五入

ParsetInt() escape()对字符串进行编码(16进制) unescape()解码 escape(m2) unescape(m4)

encodeURI(m2) 对字符串进行编码(IE进行base64编码)

eval()把字符串当成动态的js代码进行解析(可以对内部数据继续运算) 如"122+3"会得到结果为125

针对于字符串内部中有运算符而言

var m5="var num=123";eval(m5);

var m5="var abc='a',b=1122"; num=eval(m5); alert(num); 显示1122

9.Date:

var tdate=new Date(); //当前时间

var ddate=new Date('2016-10-12");

var vardate=new Date(2016,10,28);

var str="aBcDeFg"; str.substr(int,length); str.substring(startpos,endpos); 不包括endpos

10.创建对象两种方式：

方法一：function testnewObj(username,userpwd){

var mobj=new Object();

this.name=username;

mobj.fav=["aa",11,new Date()];

mobj.pwd=userpwd;

return mobj;

}

方法二： function testnewObj02(username,pwd){

var newObj02={};

newObj02.name=username;

newObj02.pwd=pwd;

newObj02.m=function(){

alert("mmmm");

}

return newObj02;

}

跟地址有关

prototype: 存放一些公共的相同属性或者方法（每个类都有）

function testFactoryClass(a,b){

this.name=a;

this.pwd=b;

this.prototype=['ss',11];

}

function testFactoryClass022(a,b){

var cobj=new testFactoryClass(a,b);

cobj.prototype=["菜啊擦擦啊",1122];

var cobj22=new testFactoryClass(a,b);

alert(cobj.prototype+"---"+cobj22.prototype);

}

11.JSON对象表示法：www.json.org/json-zh.html

第一种方式：json是一种轻量级的数据交换格式，易于阅读和编写，也易于机器解析和生成。

function testJson01(){

var json02={username:"aaa",

fav:["1111",22,new Date()],

met:function(){ alert("ssss"); }

};

alert(json02.fav[2]+"--"+json02.username+"--"+json02.met());}

第二种方式：//数组格式json

function testJson02(){

var json=[{username:"aaa",pwd:111},{username:"bbb",pwd:222},{username:"ccc",pwd:333}];

alert(json[1].pwd);

}

第三种方式：//json嵌套json

function testJson03(){

var json=[{

{username:"aaa",pwd:333,ppee:{pname:"sss",pwww:{pwqq:"pqs"}}}];

alert(json[0].ppee.pwww.pwqq);

}

12.常见事件：

1. JavaScript能在客户端写硬盘。IE浏览器里面可以通过ActiveX操作文件, 写在服务器里面的（nodejs）就可以操作

13.BOM:浏览器对象模型 window.xxx() //window可写可不写

window对象

1.alert("aaa");

2.confirm("aaa"); //返回boolean

3.prompt("aaa","kkk"); //确定返回输入框内容取消返回null

4.window.open("url");

window.close(); //关闭本页面

5.ThreadId=window.setTimeOut(function(){ //定时执行一次

window.open("url");

},3000);

clearTimeOut(ThreadId); 关闭定时器

threadId02=window.setInterval(function(){ //间隔执行

window.open("url");

},3000)

clearInterval(threadId02) 关闭

var openId;

function testOpen(){

openId=window.open("http://www.jd.com");

}

function testClose(){ 关闭已打开的指定页面

openId.close();

}

6.获取屏幕属性

window.screen.height //屏幕的高度

window.location //获得当前页面的URL，并吧浏览器重定向到新的页面。

window.location.href="http://www.baidu.com" //跳转百度 *

window.location.reload() //刷新页面 *

window.history.go(0) //同样有刷新页面功能

window.history.go(1) //下一个页面

window.history.go(-1) //找到上一个页面

history.back()：返回前一个浏览页面（如果存在）

history.forward()：前往下一个浏览页面（如果存在）

history.go()：前往 history 列表中的某个指定页面（如果存在）

window.navigator.userAgent //获取浏览器头部

6.子页面调用父页面方法:

父页面:window.open("son.html");

window.opener.testAlert() //子页面调用父页面(testAlert())，必须有父页面打开子页面时才能调用

7.dom: window可省略

获取文档对象方式：

a.通过id获取

window.document.getElementById("id");

b.通过name获取

返回数组对象：object NodeList

obj= window.document.getElementByName("sex");

obj[1].value

c.通过标签名称获取

返回数组对象:

obj=document.getElementByTagName("input");

obj03[2].value="sq";

间接：

var varSex=window.document.getElementById("id").childNodes 获取子节点，包括元素之间的空白区域

var varSexUp=varSex.previoudSibling.previousSibling.value; //取上上个节点

var nextsub=obj07.nextSibling.nextSibling.name; //取下一个节点名称

nextsub.nodeValue nextsub.textContent //获取元素value值

8.获取属性：

a.对象.属性（针对系统自带的属性）

var ss= document.getElementById("id").type 获取类型

ss.value="aaaa";

b.对象.getAttribute("aa") (针对新建的属性)

对象.setAttribute("value","ssss");

c.innerHTML和innerText(只设置文本)

9.js操作样式:

对象.style.样式的名称 style
a. document.getElementById("id").style.backgroundColor="red";

对象.style.样式类 className

b. document.getElementById("id").className=".divClass";

10.增加节点

11.event代表事件的状态，如事件在其中发生的元素、键盘按键的状态，通常搭配函数使用，函数不会在事件触发前执行

event || window.event //避免浏览器兼容问题，函数传参

event.onkeydown:键盘按下的时触发的状态

获取x左边： e.x或者e.pageX(火狐使用)

12.form表单操作

a.id获取表单对象

var f=document.getElementById("id");

b.name获取表单对象

document.formName -->form name="formName"

c.动态提交 f.submit()

d.重置 f.reset()

e.f.elements.length 等价 f.length //表单域的元素，不是节点数量

Readonly只针对input(text / password)和textarea有效，disabled对于所有的表单元素都有效，

包括select, radio, checkbox, button等。

但使用了disabled后，当我们将表单以POST或GET的方式提交的话，该元素的值不会被传递出去，

而readonly会将该值传递出去。可以通过js操作

13.正则表达式：

不能与onChange事件处理程序相关联的表单元素___button_

14.var agreeCheck=document.getElementsByName("agreeCheck"); //获取对象之后，要用数组形式操作，才能取到真正的数据

subBtn.disabled=!agreeCheck[0].checked;

debug调试：

f5单步调试

f6倒回一步

f7倒回return

Ajax常见的面试题： http://blog.csdn.net/chow__zh/article/details/9149811

Ajax的xml与json数据传输：http://www.cnblogs.com/fcx09/p/5305084.html

2.原生AJAX（XMLHttpRequest）:创建交互式网页应用的技术，浏览器端使用DOM动态局部刷新

xhtml 不是Ajax技术体系的组成部分

a).区别：Mozilla和IE

if(window.XMLHttpRequest){ //Mozilla

request=new XMLHttpRequest();

}else if(window.ActiveXObject){ //IE老版本

request=new ActiveXObject("Msxml2.XMLHTTP");

}

//method(请求方式get,post),url(请求资源路径),async(是否为异步请求,默认true),一般用前三个

b)request.open(method,url,async,username,password );

request.open("get","testajaxServlet" , true); //ServletName为内部服务器的servelt url

c)//接收服务器响应的数据

request.onreadystatechange=function(){

if(request.readyState==4 && request.status==200){

alert("readyState:"+request.readyState+"status:"+request.status+" statusText:"+request.statusText

+"responseText:"+request.responseText);

}

readyState: 0 XMLHttpRequest已建立，但还未初始化，尚未调用open方法

1 open 方法已经调用，但未调用send方法

2 send方法已经调用，但数据未知

3 请求已经成功发送，正在接受数据

4 数据已经成功接收

d)//发送请求，如果不写null,火狐会报错

request.send(null);

2.1中文乱码：

get a)jsp页面编码格式utf-8 //会走缓存，导致不再与后台成功进行交互

b)设置Servlet的请求编码格式 req.setCharacterEncoding

c)设置响应信息的编码格式 resp.setCharacterEncoding和resp.setContentType

d)设置tomcat的server.xml的useBodyEncodingForURI="UTF-8"

e)增加request.open("get","testajaxServlet?realname="+encodeURIComponent("张三丰"),true); //(元素ajax需要加)

可以通过修改url达到不走缓存目的，如

request.open("get","testajaxServlet?realname="+encodeURIComponent("张三丰")+"&num="+Math.random(),true);

post a)jsp页面编码格式utf-8

b)设置Servlet的请求编码格式 req.setCharacterEncoding

c)设置响应信息的编码格式 resp.setCharacterEncoding和resp.setContentType

d)request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

e)request.send("realname="张三丰"");

2.3 ajax数据传输(xml)：

服务器端：

a)resp.setContentType("text/xml;charset=utf-8");

resp.getWriter().print("<user><uname>kkkq</uname></user>"); //返回xml数据

客户端：

//可以通过typeof测试数据类型

if(request.readyState==4 && request.status==200){

var getname=request.responseXML.getElementsByTagName("uname")[0].firstChild.data;

2.4 json传输：

eval转：

服务器端：

resp.getWriter().print("{\"uname\":\"kkk\",\"realname\":\"中核\"}");

客户端：

eval("var jsonStr="+request.responseText);

alert(jsonStr.uname+"---"+jsonStr.realname);

使用Gson转

服务端

User user1=new User("kk4", "中文4", new Addr("附件4","sss4"));

List<User>list=new ArrayList<User>();

list.add(user1);

Gson gson=new Gson(); //导gson包

String gsonStr=gson.toJson(list);

resp.getWriter().print(gsonStr);

客户端

eval("var jsonStr="+request.responseText);

alert(jsonStr[1].addr.area);

或者JSON.parse 常用

var user=JSON.parse(request.responseText);

alert(user[1].addr.area);

跨域问题解决：http://sanwen8.cn/p/147FmRD.html

http://harttle.com/2015/10/10/cross-origin.html

JsonView下载：http://download.csdn.net/download/wp__wp/6196601

JQuery的ajax:须先导入JQuery类库

//使用JQuery的ajax

function testJQueryAjax(){

$.ajax({

type:"post", //请求的方法

url:"testajaxServlet", //请求的url

data:{uname:"zhangsan",upwd:123}, //请求servlet的参数

async:true, //是否异步

cache:false,

success:function(result){ //result是servlet返回的结果

alert(result);

}

});

}

//封装后的get请求 get(url,param,callback) result是返回的结果

function testJQueryGet(){

//get(url,param,result)

$.get("testajaxServlet",{uname:"lisi",upwd:123456},function(result){

alert(result);

});

}

//封装后的post请求 post(url,param,callback) result是返回的结果

function testJQueryPost(){

$.post("testajaxServlet",{uname:"post",upwd:123333},function(result){

alert(result);

});

}

$.trim(); //去除空格

eq(index)通过下标获取指定的元素

$(".bgcolors").prevAll().length; //获取统计兄弟个数，除本身

var e=event||window.event; //必须写event

resp.setHeader("Access-Control-Allow-Origin", "*"); //JQuery设置dataType为JsonP，不同项目之间访问使用(跨域)

//省、市、县三级联动效果

$(function(){

$.post("treeSelectServlet",{parentId:0},function(result){ //默认页面加载完成时加载0id对应的数据

var area=JSON.parse(result);

var vprovinceId=$("#provinceId");

vprovinceId.empty(); //清空上一次查询的结果，防止数据错乱

for(var i=0;i<area.length;i++){

vprovinceId.append("<option value='"+area[i].areaid+"'>"+area[i].areaname+"</option>"); //在对应的div下追加option

}

loadCity();

});

//加载市

function loadCity(){

//获取下拉框选中时的value

var provinceId=$("#provinceId").val(); //取到上一级被选中的选项value(即id)

$.post("treeSelectServlet",{parentId:provinceId},function(result){ //由于上一级的id时当前的父id，因此根据上一级id作为查询值

var area=JSON.parse(result);

var vcityid=$("#cityId");

vcityid.empty();

for(var i=0;i<area.length;i++){

vcityid.append("<option value='"+area[i].areaid+"'>"+area[i].areaname+"</option>");

}

loadTown();

});

}

//加载县

function loadTown(){

//获取下拉框选中市区的value

var cityId=$("#cityId").val();

$.post("treeSelectServlet",{parentId:cityId},function(result){

var area=JSON.parse(result);

var town=$("#townId");

town.empty();

for(var i=0;i<area.length;i++){

town.append("<option value='"+area[i].areaid+"'>"+area[i].areaname+"</option>");

}

});

}

生成验证码:http://blog.csdn.net/lwcumt/article/details/8065503

1.js对大小写敏感，会忽略多余的空格，用 \（反斜杠）进行换行

// 输出段落：单行注释

多行注释以 /* 开始，以 */ 结尾。

eval(string)   计算 string 得到的值（如果有的话）    //如eval("2+2")  得到结果为4

2.按钮的不同形式

<button type="button" onclick="alert('aaa')">ddddd</button> // 运用js弹出框进行显示信息

区别：button元素内部，可以放置内容，比如文本或图像

两者按钮的名称：Input可以用value="xxx" button 直接放在<button>xxx</button>

3.根据源图片属性进行比较：

docement.getElementById("id").src.match("a"); id代表具体位置的id号，a代表图片的名称

getElementById("id") 通过id获取源控件的对象，因此可以操作源对象的属性

4.引用外部的js文件

外部脚本不必须包含<script>标签

4.document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

5.js变量定义

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
变量声明可以跨行，当变量无值时，会使用undefined作为默认值

（1）.把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。如carname="Volvo";

（2）.函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

(3).局部变量会在函数运行以后被删除;全局变量会在页面关闭后被删除。

6.js中数组定义：

1.var a=new Array();

a[0]="c";

a[1]=2;

a[2]=true; //js中数组可以存多种不同数据,已有数据最好不要再存Null会将整个数组置空

a[3]=undefined;

2.var b=new Array("c",2,false);//创建时直接给值

3.var b=["c",2,false]; //传统形式的数组定义

4.数组合并：a.concat(b); //想当与a数组后再加b数组

5.数组元素组成字符串：a.join(); //c,2,true

6.数组排序：a.sort() 文字和数组均可排序 //文字根据首字母依次排序；数字比较大小排序

文字：var a=new Array("a","b","c"); a.sort()

数字：var b=new Array(1,3,2); a.sort(sortNumber); //调用sortNumber方法进行数组排序

function sortNum(a,b){

return a-b;
}
var arr=new Array(11,2,6,4,8);
document.write(arr.sort(sortNum));

7.js中对象定义：采用名称:值形式

var person={name:"kk",age:12,id:123};

var person2={ //可以换行进行定义，中间以逗号隔开

name:"qq",

age:23,

id:22}

对象的使用：

name=person.name; //获取person的name属性值

name=person["name"];

字符串对象特点：

var txt="hello"; //通过txt.length可以获得字符串的长度

txt.indexOf() //定位某一个字符首次出现的位置

txt.replace() //替换字符串 var str2=str.replace(/Visit/,"ssss"); 将Visit替换为ssss,记得用/将要替换的字符串包围

txt.search() //寻找字符 var str = "123456789.abcde";

document.write( str.indexOf("\\.") ); //indexOf根据字符进行匹配

document.write( str.search("\\.") ); // search 强制正则匹配模式。

txt.match() //查找到特定的字符，如果找到则返回这个字符

8.Undefined 表示不含有值

null 可以用来清空变量值。一个对象可以存储不同的数据类型。

var carname=new String;      //new 一个新的对象    carname=null;  //将carname设置为空
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

对象的方法：

ObjectName.methodName()

var x="hello";

var s=x.toUpperCase();//将字符串转为大写

9.函数

function test(a,b){ //定义的时候不用考虑参数类型，因为js中的变量可以接收多种不同的类型，

alert(a+"--"+b); //变量和参数必须以一致的顺序出现

}

document.write(test(2,3));

</script>

onclick="test('1','2')" //调用时给出参数,但是参数不能用双引号来修饰，比如"a"会导致test无法正常接收参数，只能用单引号或者数字

当有返回结果时，在<script>中也可以直接调用

函数名称不能为click，因为在按钮点击事件中，调用的就是click()方法，会导致调用失败。

10.运算符：

(1).把数字与字符串相加，结果将成为字符串

var x=5+5 -->结果为x=10;

var x="5"+5 -->结果为x=55;

var x="5"+"5" -->结果为x=55;

var x=5+"5" -->结果为x=55;

较特殊的运算符:可以用？a：b 条件表达式

%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y	x=4

==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false

var x="5";

if(x===5){ //值和类型都要一致才能全等

alert("x:"+x);

}else{

alert("error");

}

var time=new Date().getHours(); //获取小时

var day=new Date().getDay(); //获取周几

11.Switch分支

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

12.循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性 //对象和数组都可以
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

var person=["a","c",12];

for(var tmp in person){

alert(person[tmp]); //通过tmp作为数组的下标

}

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

cars=["BMW","Volvo","Saab","Ford"];

list:

{

document.write(cars[0] + "<br>");

document.write(cars[1] + "<br>");

break list; //执行到此位置，就会跳出标签，输出BMW Volvo

document.write(cars[3] + "<br>");

}

13.异常：

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

try{

var x=document.getElementById("demo").value;

if(isNaN(x)) throw "不是数字";

}catch(err) { //捕捉throw抛出的异常，传给err,打印err能得到具体的异常信息。

document.getElementById("mess").innerHTML="错误：" + err + "。";

}

14.with代码块

with 语句可以方便地用来引用某个特定对象中已有的属性，但是不能用来给对象添加属性。要给对象创建新的属性，必须明确地引用该对象。

onsubmit="return validate_form(this); //当validate_form返回的结果为true时，就提交，否则就不提交；this代表当前表单 onsubmit：提交的事件

focus() 方法用于给予该元素焦点。这样用户不必点击它，就能编辑显示的文本了。

with(aa){ //aa为被引用的属性

//操作aa的代码块

}

15.操作字符串

var pos=value.indexOf("@") //查找@符号所在的位置 var lastpos=value.lastIndexOf(".") //查找 . 上次最后出现的位置

lastpos-pos<2 代表两者相邻

语法：with(object instance){

var str=属性1;

}

function Person(){

this.name="kkk";

this.age=20;

}

var people=new Person();

with(people){ //操作people对象

var mstr="姓名:"+name; //people的属性name

var mage="年龄"+age; //people的属性age

document.write(mstr+"--"+mage);

}

</script>

16.Dom操作

操作html元素方法：

通过 id 找到 HTML 元素 getElementById("id")
通过标签名找到 HTML 元素 getElementsByTagName("p") 当获取多个标签的时候以数组形式保存，y[0].innerHTML
通过类名找到 HTML 元素

document.getElementById(id).attribute=new value     修改html元素的属性值

document.getElementById(id).src="new.jpg"

document.getElementById(id).style.property=new style  修改css样式的属性值

document.getElementById("id").style.fontFamily="blue";            //fontSize

document.getElementById("id").style.visibility='hidden'"

<input type="button" value="aa" onclick="document.getElementById('p1').style.visibility='hidden'" //外部有双引号，内部元素则要为单引号，以作区别

17.事件：

(1).<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> /点击修改文档

(2).js分配事件：

<button id="myBtn">点击这里</button>
document.getElementById("myBtn").onclick=function(){test()}; //对button分配事件
function test(){
document.getElementById("myBtn").innerHTML="sssss";
}

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

navigator.cookieEnabled 检查cookie是否已启用

(4).onchange()

function myFunction()

{ var x=document.getElementById("fname");

var x.value=x.value.toUpperCase(); //此处的var必须存在，否则x.value变为大写后，不能及时更新给文本

}

(5)onmouseover和onmouserout

<div onmouseover="over(this)" onmouseout="out(this)" //over(this) 此处this将当前鼠标对象传给over方法使用

style="background-color:green;width:200px;height:100px;border:1px solid #00ff00">鼠标</div>

function over(e)

{ e.innerHTML="谢谢"

}

(6)onmousedown()和onmouseup()

function mydown(obj){

obj.style.backgroundColor="blue"; //设置背景色，注意大小写

}

使用2：<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">

(7)onfocus

<input type="text" onfocus="myFunction(this)"> //获取焦点时，进行操作

18.节点：

(1).增加节点

<div id="div1"></div>
var pnode=document.createElement("p");
var textnode=document.createTextNode("新段落ssss");
pnode.appendChild(textnode);

var rootnode=document.getElementById("div1");
rootnode.appendChild(pnode);

(2)删除节点：由上一级节点，删除下一级节点

</div>

var root=document.getElementById("test");
var child=document.getElementById("p1");
root.removeChild(child);
</script>

19.把方法加到对象：

function person(name,age){ //person相当于一个类

this.name=name;

this.change=change;

function change(name){ //change相当于person中的私有方法

this.change=name;

}

等价/* this.change=function change(name){

this.name=name;

}*/

}

me=new person("kkk",12);

me.change("qqq"); //调用person类中的私有方法change

document.write(me.name); //输出qqq

</script>

person是一个类的概念，this表示这个类所生成的对象本体。this.changeName 则表示对象的方法
 function changeName，这个function函数，本身是person所生成对象的私有方法，外部是调用不到的，如果希望外部能够访问这个函数，就需要作一次 this.changeName = changeName;的赋值了。

http://zhidao.baidu.com/link?url=DBwyv3qahWioaUcGvfwSgdWJALmqE18i-om54RMUPyvGQu8Ud-Z2h7Ba3VyEUeYWch1o5b6PdqwwvHWv0850HBMb5g2aU0ft5kEQp_DE1Ri

20.js中数字均为64位

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。因此不要在数字前面写0，除非要进行八进制转换。

数字具有的属性

MAX VALUE MIN VALUE NEGATIVE INFINITIVE POSITIVE INFINITIVE NaN prototype constructor 返回创建此对象的 Number 函数的引用。

toExponential() 对象的值转换为指数计数法。
toFixed() 数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision() 把数字格式化为指定的长度。
toString()
valueOf() 返回一个 Number 对象的基本数字值

22.日期

var d=new Date() //获取当日的日期

d.getTime() //获取从1970到现在的毫秒数

d.setFullYear(1992,10,3) //设置完整的日期

d.toUTCString() //将当日的日期转化为字符串

d.getDay() //获取今天是周几

23.逻辑值

如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false

var s=new Boolean(0) //false

var d=new Boolean("bill"); //true

24.算数：

Math.round(0.60) //四舍五入取值，为1

Math.round(-4.40) //结果为-4

Math.random() //取0到1之间的随机数

Math.max(a,b) //求两者最大数

Math.floor() //返回小于或等于x并与之最接近的整数

Math.ceil() //返回大于或等于x，并与之最接近的整数

Math.E //常数
Math.PI //圆周率
Math.SQRT2 //2的平方根
Math.SQRT1_2 //1/2的平方根
Math.LN2 //2的自然对数
Math.LN10 //10的自然对数
Math.LOG2E //以2为底的e的对数
Math.LOG10E //以10为底的e的对数

Math.floor(Math.random()*11)    //求0到10之间的随机数

25.正则表达式：

var pattern=new RegExp("e"); //寻找e的字符串

正则表达式三种方法：

test() 检索是否存在正则式中的值，有的话返回true，没有返回false

exec() 检索是否存在正则式中的值。有的话返回该字符串，没有则返回 null。

var patt1=new RegExp("best");
patt1.exec("The best things in life are free")； //返回的结果为best
var patt1=new RegExp("e","g"); //g的作用，找到第一个"e",并存储位置；再次运行exec()时，则从下一个位置检索，存在则存储新的位置

compile()。 //修改正则表达式的检索值

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d"); //此时检索值改为 d
document.write(patt1.test("The best things in life are free"));

pattern.test("the best"); //返回true，因为存在e字母

26.window:

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window.status = "put your message here" 在浏览器的状态栏放入一条消息

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

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

location.assign() 方法加载新的文档 //location.assign("www.baidu.com");

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

27.警告框：

alert(); //普通警告框

confirm(); //确认警告框

prompt("a","b") //提示框，a为提示信息，b为默认文本框信息

例子：

var name=prompt("a","b") //name为输入后的文本值

var x=confirm("确认信息");

if(x==true){

alert("确认");

}else{

alert("取消");

}

28.计时:

setTimeout('startTime()',5000); //5秒之后，执行startTime()方法

setTimeout("document.getElementById('id').value='sss'",2000); //两秒后修改id对用控件的内容

t=setTimeout("count()",1000); clearTimeout(t); //清除计时

funtion count(){

document.getElementById('txt').value=c //在函数内c赋给id为txt的控件

c=c+1

t=setTimeout("count()",1000) //延迟1秒，类似递归调用每1秒后都会再执行count()

}

29.js库

JavaScript 库：

jQuery:使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）

Prototype、MooTools。

CDN:把框架库存放在一个通用的位置供每个网页分享

JQuery框架的CDN:https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

引用JQuery框架：<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

30.错误处理

var errmsg=handleErr();

function handleErr(msg,url,l){ //msg 接收具体的异常信息 url 接收爆出异常的网页 l 具体的log信息

errmsg="msg:"+msg+"\n";

errmsg+="url:"+url+"\n";

errmsg+="l:"+l;

alert(errmsg);

return(errmsg);

}

function test(){

adddlert("wwwwww"); //adddlert方法不存在，会报异常，异常信息由handleErr()方法接收

}

var element = document.getElementById('element');

function callback() {

  alert('Hello');

}

// Add listener

element.addEventListener('click', callback);

31::$("#id")主要用于操作DOM对象

JavaScript 方式：

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

等价的 jQuery 是不同的：

jQuery 方式：

function myFunction()                  //返回JQuery对象(有属性和方法)
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);   //ready相当于onload

$("#h01").attr("style","color:red").html("Hello jQuery")

特点：

jQuery html() 方法不适用于 HTML 和 XML 文档。

$("div.intro") 能够选取class="intro" 的所有 div 元素

hide()用于隐藏被选元素

jQuery.ajax()用于执行异步 HTTP 请求

如需使用 jQuery，您能够引用 Google 的 jQuery 库

$(document).ready()文档结束加载之前阻止代码运行

toggleClass() 用于添加或删除被选元素的一个或多个类

$("div#intro .head") 选取id="intro" 的首个 div 元素中的 class="head" 的所有元素

null

posted on 2018-03-06 17:59 xiaojiayu0011 阅读(577) 评论(0) 收藏举报

刷新页面返回顶部

xiaojiayu0011