[Java面试九]脚本语言知识总结.

2019年11月30日 阅读数:286
这篇文章主要向大家介绍[Java面试九]脚本语言知识总结.,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

核心内容概述

1.JavaScript增强,涉及到ECMAScript语法、BOM对象、DOM对象以及事件。javascript

2.Ajax传统编程。php

3.jQuery框架,九种选择器为核心学习内容css

4.JQuery UI插件html

5.jQuery Ajax编程java

6.jQuery第三方插件node

7.反向Ajax编程(彗星)jquery

1、JavaScript基础增强

JavaScript是在浏览器内容运行,无需编译、解释执行动态脚本语言,是一种弱类型语言,全部变量使用var定义。web

JavaScript的3个组成部分分别为:核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)ajax

1.ECMAScript核心语法

①:代码编写位置正则表达式

分为内部JS和外部JS【使用src进行引入】

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>JavaScript程序编写</title>

<!-- 内部JS -->

<script type="text/javascript">

// 编写JavaScript代码

alert(1);

</script> 

<!-- 外部JS-->

<script type="text/javascript" src="1.js"></script>

②:学习顺序

JavaScript依次从变量(标示符、关键字),运算符,程序结构(if while for),以及函数来进行学习。

(1)全部的变量使用var来定义,是弱类型变量,不表明没有类型,变量自己仍是有类型的。【var a=10var b=1.5;他们分别为整数以及浮点数类型】

(2)每行结尾分号无关紧要,建议编写。

(3)注释和Java相似,支持单行注释(//)和多行注释(/* */)

③:数据类型

JavaScript分为原始数据类型和引用数据类型,分别存储于栈和堆中。

原始数据类型numberstringbooleannullundefined

引用数据类型:存在不少种,每种都是object对象

可使用typeof查看数据类型,使用instanceof判断变量数据类型

Demo:

<script type="text/javascript">

// 定义全部变量都用var,可是变量自己具备类型

var a = 10;    // 整数

var b = 1.5;   // 浮点数

var c = true;  // 布尔

var d = "abc"; // 字符串 基本数据类型

var e = 'abc'; // 字符串

 

// 经过typeof查看数据类型

alert(typeof d);

// 经过instanceof判断变量数据类型

alert(d instanceof Object);//falae

alert(a instanceof Object);//falae

 

var s = new String("abc"); // 对象类型

alert(s instanceof Object);

</script>

④:null和undefined的区分

null:对象不存在;

undefined:对象存在,访问属性或者方法不存在(对象未初始化)

2.ECMAScript对象

ECMAScript经常使用的有7个对象,依次为StringNumberBooleanMathDateArray以及Regxp

①:String类型经常使用属性方法

建议查看手册,这里须要注意的为length属性以及match方法

charAt()concat()indexOf()lastIndexOf()match()replace()split()substr()substring()toLowerCase()toUpperCase()

Java中提供matches方法 例如:"1234".matches("\\d+") ---- 返回true

JavaScript 与 matches方法等价的那个方法,是 RegExp 对象提供test方法 

例如:/^\d+$/.test("1234") --- 返回true

/^\d+$/ 等价于 new RegExp("^\\d+$")

"1234".match("^\\d+$") 返回是匹配正则表达式内容,而不是布尔值,等价于 /^\d+$/.exec("1234")

②:Math经常使用属性和方法

PI 属性

round(x) 把数四舍五入为最接近的整数

random() 返回 0 ~ 1 之间的随机数

pow(x,y) 次幂

sqrt(x) 平方根

③:Date经常使用属性和方法

toLocaleString() 返回当地本地化日期格式 2012121211:07:52

getTime() 返回从197011日到目前为止 毫秒值

Demo

<script type="text/javascript">

var s1 = "abc"; // s1是基本数据类型

var s2 = new String("abc") ; // s2是对象类型

//alert(s1 == s2); // 

 

//alert("98"==98);// true

//alert("true"==true); // false

//alert(1==true); // true

 

var d = 010;// 八进制

var d2 = 0x10; // 十六进制

 

// match方法 相似 Java中 matches,有区别

//alert(/^\d+$/.test("1234abc")); // 等价于 java中matches

//alert("1234".match("^\\d+$")); // math方法返回的是匹配正则表达式内容,而不是布尔值

//alert(/^\d+$/.exec("1234abc1234"));// 返回匹配的内容

 

// Date使用

var date = new Date(); //当前日期

alert(date.toLocaleString());// 返回当地国际化日期格式

var dateStr = date.getFullYear()+"-"+date.getMonth()

+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()

+":"+date.getSeconds();

alert(dateStr);

</script>

④:Array经常使用属性方法

push() 加入元素到数组

pop()  从数组移除最后一个元素

reverse()反转

join() 链接数组元素 经过特定内容 返回字符串

sort() 排序

slice() 截取数组中指定元素 从start到end

Demo

<script type="text/javascript">

// 定义数组 使用Array对象

// 方式一

var arr1 = [1,2,3];

// 数组的遍历 经过长度和下标

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

//alert(arr1[i]);

}

// 方式二

var arr2 = new Array(3);// 定义长度为3的数组

arr2[0] = "aa";

arr2[1] = "bb";

arr2[2] = "cc"

arr2["100"] = "dd";

//alert(arr2.length);

//alert(arr2[4]);

// 方式三

var arr3 = new Array(1,2,3);// 数组三个元素 1, 2 ,3

//alert(arr3.join("-")); // 1-2-3

alert(arr3.slice(1,3)); // 从1下标,截取到3下标,1下标包含,3下标不包含

</script>

3.ECMAScript核心语法——函数

①:函数定义的三种方式

注意:第二种方式使用愈来愈多,第三种不经常使用,第一种经常使用

<script type="text/javascript">

// 方式一

function add(a,b){ // 没有返回值,形参不须要声明类型

return a+b; // 能够返回

}

//alert(add(1,2));

 

// 方式二  function 匿名函数, sub成为函数名称

var sub = function(a,b){

return a-b;

}

//alert(sub(10,8));

 

// 方式三 使用Function对象 定义函数

// 语法 new Funtion(arg1,arg2 ... , body)

var mul = new Function("a","b","return a*b;"); // 不经常使用

//alert(mul(10,20));

 

// 全部函数 都是Function实例

alert(mul instanceof Function);// true

</script>

②:JavaScript全局函数(内置函数)

一组与编码解码相关的函数

encodeURI()&decodeURI()

encodeURIComponent()&decodeURIComponent()

escape()&unescape()

此块具体内容请参照W3C文档查看。

4.ECMAScript核心——JavaScript面向对象编程

Java是面向对象,写Java程序,写类和对象。JavaScript是基于对象,写Js,不用建立类,使用Js内部已经定义好的对象。

①:定义JavaScript对象的两种方式

方式一:使用已经存在的对象,经过关键字进行建立

var s = new String("aaaa");

var o = new Object();

var date = new Date();

//alert(date instanceof Object);// true

 

// JS对象 相似一个map结构

var arr = new Array(3);

arr[0] = 100;// 使用数组下标 为数组元素赋值

arr['aaa'] = 1000; // 定义对象属性

//alert(arr['aaa']);

arr.showInfo = function(){// 定义对象方法

alert(arr.join(","));

};

//arr.showInfo();  //100, ,

Js其实就是一个相似map结构,key为属性名和方法名,value为属性值和方法定义

 

方式二:经过{}建立

var obj = {

name : '张三',

age : 20,

getName : function(){

// 访问对象属性 经过关键字 this

return this.name;

}

};

// 访问对象 属性 [] 和 .

//alert(obj.name);

//alert(obj["age"]);

alert(obj.getName());

 

// 添加一个方法到 obj对象

obj.getAge = function(){

return this.age;

}

alert(obj.getAge());

 

JavaScript中的对象是经过 new function建立的,在Jsfunction等同于一个类结构

// 定义类 结构

var Product = function(name,price){

this.name = name; // 保存name的值 到对象属性中

this.price = price;

}

// 基于类结构建立对象使用new 关键字

var p1 = new Product("冰箱",1000);

var p2 = new Product("洗衣机",1500);

 

//alert(p1.name);

//alert(p1.price);

function自己表明一个函数,JavaScript对象经过new function来得到的,理解function就是对象构造函数

②:Object和function的关系

JavaScript中全部引用类型都是对象Object实例 ------- Function instanceOf Object //true

JavaScript 中全部对象都是经过 new Function实例(function) 得到 ------ Object instance Function  //true

JavaScript全部对象构造函数都是function实例;JavaScript全部对象都是object实例,function也是object实例。

 

使用JavaScript的传递性进行推论!

A:function是用来定义一个函数,全部函数实例都是Function对象

B:JavaScript中,全部对象都是经过new function获得的

Var Object = function(){...}

Var String = function(){...}

Var Array = function(){...}

Var Date = function(){...}

结论:全部对象构造器都是Function实例

alert(String instanceOf Function)   //true

alert(Object instanceOf Function)   //true

C:建立一个对象,须要使用new function

Var s = new String()

Var o = new Object()

Var arr = new Array()

Var date = new Date()

结论:JavaScript中,一切对象都是object实例

alert(s instanceOf Object)    //true

alert(Function instanceOf Object)    //true

 

var f = new Function(); // 实例化Function对象

var o = new Object();   // 实例化Object对象

alert(f instanceof Function); // true

alert(f instanceof Object); // true

alert(o instanceof Function); // false

alert(o instanceof Object); // true

③:function原型属性

JavaScript全部对象都由function构造函数得来的 ,经过修改 function构造函数 prototype属性,动态修改对象属性和方法。

wpsD42C.tmp 

④:继承

A:使用原型链完成JavaScript单继承

var A = function(){

this.name = 'xxx';

}

var B = function(){

this.age = 20;

}

// 方式一 能够经过 prototype原型完成单继承 B的原型指向A

B.prototype = new A(); // 从A实例中,继承全部属性

 

var b = new B();

alert(b.name);

 

//  练习:经过prototype为String类添加一个trim方法

String.prototype.trim = function(){

return this.replace(/(^\s*)(\s*$)/g, "");

}

B:对象冒充完成多继承

var C = function(){

this.info = 'c';

}

var D = function(){

this.msg = 'd';

}

var E = function(){

// 同时继承C和D

this.methodC = C;

this.methodC();

delete this.methodC;

 

this.methodD = D;

this.methodD();

delete this.methodD;

 

this.desc = 'e';

}

 

var e = new E();

//alert(e.info);

//alert(e.msg);

//alert(e.desc);

⑤:动态方法调用

能够改变this的指向,能够完成对象多继承

// 定义函数

function printInfo(){

alert(this.name);

}

 

// 属性name 值 张三

var o = {name: '张三'};

//o.printInfo();// 函数不属于对象o

// JS提供动态方法调用两个方法,容许一个对象调用不是属于它本身的方法(call apply)

//printInfo.call(o);

//printInfo.apply(o);

 

function add(a,b){

this.sum = a+b;

}

// call传 多个参数

//add.call(o,8,10);

// apply 传递参数数组

add.apply(o,new Array(8,10));

//alert(o.sum);

 

// 动态方法调用 ,实现多重继承,原理就是对象冒充

var A = function(){

this.info = 'a';

}

var B = function(){

// 动态方法调用继承

A.call(this);

}

var b = new B();

alert(b.info);

2、JavaScript浏览器对象BOM

DOM Window  表明窗体

DOM History  历史记录

DOM Location  浏览器导航

DOM Navigator  浏览器信息 不讲

DOM Screen  屏幕  不讲

重点:window、history、location ,最重要的是window对象 

1.window对象

Window 对象表示浏览器中打开的窗口若是文档包含框架(frame iframe 标签),浏览器会为 HTML 文档建立一个 window 对象,并为每一个框架建立一个额外的 window 对象

window.frames 返回窗口中全部命名的框架

parent是父窗口(若是窗口是顶级窗口,那么parent==self==top

top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe

self是当前窗口(等价window

opener是用open方法打开当前窗口的那个窗口

①:父子窗体之间的通信

在页面内嵌入一个iframe,在iframe中提供一个输入项,输入后,在iframe外面窗口中显示内容

wpsD42D.tmp 

显示结果如上图所示,实现思路以下:

子窗体:2.html

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>Untitled Document</title>

<script type="text/javascript">

function showOutter(){

// 得到输入内容

var content = document.getElementById("content").value;

// 将输入的内容显示主窗体info 中

window.parent.document.getElementById("info").innerHTML = content;

}

</script>

</head>

<body>

<h1>子窗体</h1>

<input type="text" id="content" /> 

<input type="button" value="显示到主窗体" onclick="showOutter();"/>

</body>

主窗体:1.html

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>父子窗体通讯</title>

<script type="text/javascript">

function showContent(){

// 用主窗体读取子窗体内容

var content = window.frames[0].document.getElementById("content").value;

alert(content);

}

</script>

</head>

<body>

<h1>主窗体</h1>

<div id="info"></div>

<!-- 在主窗体中得到子窗体内容 -->

<input type="button" value="获取子窗体输入内容" onclick="showContent();" />

<iframe src="2.html"></iframe>

</body>

wpsD42E.tmp 

②:window的open close

<head>

    <title>打开关闭窗体</title>

    <meta http-equiv="content-type" content="text/html; charset=gbk">

    <script type="text/javascript">

    //用一个变量记录打开的网页

    var openNew;

    function openWindow(){

    openNew = window.open("http://www.itcast.cn");

    }

    //关闭的时候须要注意关闭的是打开的网页,而不是自己

    function closeWindow(){

    openNew.close();

    }

    </script>

  </head>

  <body>

    <input type="button" value="打开传智播客网页" onclick="openWindow()">

    <input type="button" value="关闭传智播客网页" onclick="closeWindow()">

  </body>

③:window弹出对话框相关的3个方法

alert()警告框  confirm()确认框  prompt()输入框

<script type="text/javascript">

alert("这是警告框!")

var con = confirm("你想好了吗?");

alert(con);

var msg = prompt("请输入姓名","张三");

alert(msg);

</script>

wpsD42F.tmp 

④:定时操做setInterval & setTimeout

setInterval:定时任务会重复执行

setTimeout:定时任务只执行一次

在页面动态显示当前时间

 <script type="text/javascript">

    window.onload = function(){

    var date = new Date();

   document.getElementById("time1").innerHTML =date.toLocaleString();

    document.getElementById("time2").innerHTML =date.toLocaleString();

    setInterval("show1();",1000); //间隔1秒后重复执行

    setTimeout("show2();",1000);//1秒后执行,执行1次

    }

    function show1(){

    var date = new Date();

    document.getElementById("time1").innerHTML =date.toLocaleString();

    }

    function show2(){

    var date = new Date();

    document.getElementById("time2").innerHTML =date.toLocaleString();

    setTimeout("show2();",1000);//不终止

}

</script>

<body>

   <div id="time1"></div>

   <div id="time2"></div>

</body>

2.history 对象

表明历史记录,经常使用来制做页面中返回按钮

<input type="button" value="返回" onclick="history.back();" />

<input type="button" value="返回" onclick="history.go(-1);" />

3.Location 对象

表明浏览器导航  在js函数中发起href连接效果

location.href='跳转后url' ; 等价于 <a href='xxx'></a>

3、JavaScript文档对象模型DOM

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>History和Location使用</title>

</head>

<body>

<input type="button" value="返回" onclick="history.back();" />

</body>

</html>

DOM 解析模型,将文档加载到 内存,造成一个树形结构 <html> 就是根节点,每一个标签会成为一个元素节点、标签的属性成为属性节点,标签内部的文本内容成为文本节点

注意:属性节点,它不属于DOM树形结构,不属于任何节点父节点,也不属于任何节点的子节点 ,属性节点依附于元素节点上 一种附加节点

上面代码 产生6个元素节点,5个属性节点,9个文本节点 

HTML 自己也是 XML,全部可使用XML DOM API规范

DOM Element

DOM Attr

DOM Text

DOM Document

HTML DOM是对XML DOM的扩展, HTML DOMXML DOM 开发JS来讲更加简单方便

HTML DOM最优秀的地方是,操做form对象和table数据

1.BOM和HTML DOM关系图

wpsD440.tmp 

学习DOM 编程,从Document对象开始,document表明当前HTML网页文档对象,是window对象一个属性,能够直接使用 ,全部HTML DOM对象都是Document子对象

2.DOM编程开发

window.document 表明整个HTML文档

①:经过document得到Node节点对象 

document.forms 得到页面中全部form元素集合

document.body 访问页面中<body> 元素

document.cookie 用JS操做网页cookie信息

全局检索提供了三个重要的方法:

document.getElementById():经过id属性检索,得到Node节点(Element元素)

document.getElementsByName 经过name 属性检索 ,得到NodeList

document.getElementsByTagName 经过标签元素名称 得到NodeList

其中NodeList能够做为数组进行操做

Demo:在每个h1标签后追加itcast

<script type="text/javascript">

    //在每个h1标签内追加一个itcast

    window.onload = function(){

    var nodeList = document.getElementsByTagName("h1");

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

 //   var h1 = nodeList[i];

var h1 = nodeList.item(i);

    alert(h1.innerHTML);

    h1.innerHTML += "itcast";

    }

    }

</script>

<body>

   <h1>AAA</h1>

   <h1>BBB</h1>

   <h1>CCC</h1>

   <h1>DDD</h1>

 </body>

②:得到node

若是node是元素,去操做里面文本内容 innerHTML (HTML页面内全部元素,必定是HTML 元素,innerHTML 是全部HTML元素通用属性 )

XML 取得一个元素内部文本内容 element.firstChild.nodeValue(看批注32) 

③:经过节点Node相对位置关系访问元素 

childNodes

firstChild

lastChild

nextSibling

parentNode

previousSibling

2种方式打印——明天休息

<h1 id="h1">明天休息</h1> <br>

var h1 = document.getElementById("h1");

alert(h1.innerHTML);//方式一

alert(h1.firstChild.nodeValue);//方式二

3.DOM元素常见操做

DOM 获取节点:节点查询 参上

DOM 改变节点:  元素属性修改setAttribute(name,value)

内部文本元素的修改 innerHTML

DOM 删除节点:removeChild 删除子元素 、removeAttribute(name)删除节点指定属性 

  * 要删除节点o   o.parentNode.removeChild(o)

DOM 替换节点replaceChild:父节点.replaceChild(新节点,被替换节点) ;

若是对于一个已经存在节点,执行 appendChildreplaceChild都会形成该节点一个移动效果,能够采起先克隆再复制来消除此效果。

DOM 建立节点:document对象提供createElement() 建立元素、createAttribute(name) 建立属性、createTextNode() 建立文本节点

DOM 添加节点 appendChild  父元素.appendChild(新的子节点) ; 

insertBefore   父节点.insertBefore(新子节点, 已经存在子节点)

DOM 克隆节点 源节点.cloneNode(true);  该方法能够返回一个节点的克隆节点, 克隆节点包含原节点的属性和子元素

此节内容有大量的练习,建议你们作写,加强代码的熟练度。

 

4、JavaScript事件

事件一般与函数配合使用,这样就能够经过发生的事件来驱动函数执行。事件是基于对象存在,事件一般能够修饰多种对象。

1.对象添加事件的2种方式

①:在HTML元素中添加对象的事件

<head>

    <title>事件</title>

    <meta http-equiv="content-type" content="text/html; charset=gbk">

  <script type="text/javascript">

  function overtest(){

  alert("移动到图片上方");

  }

  </script>

</head>

<body>

   <img src="1.jpg" width="200" height="300" onmouseover = "overtest()";/>

</body>

②:在JS代码中为元素添加事件

<head>

    <title>事件</title>

    <meta http-equiv="content-type" content="text/html; charset=gbk">

  <script type="text/javascript">

  function overtest(){

  alert("移动到图片上方");

  }

  window.onload = function(){

  document.getElementById("myimg").onmouseover = overtest;

  }

  </script>

  </head>

  <body>

    <img src="1.jpg" width="200" height="300" id="myimg";/>

  </body>

总结:优先使用第二种,将js代码与HTML元素代码分离开,更加方便统一管理维护。

问题:HTML 元素添加事件, 与JS添加事件是否能够彻底等价?

在实际开发中,若是传参数,使用HTML元素绑定事件,若是不传参数,使用JS绑定事件。传参数也可使用与JS绑定事件【使用匿名函数】。示例代码以下:

<head>

   <title>HTML事件绑定与JS绑定</title>

   <meta http-equiv="content-type" content="text/html; charset=gbk">

   <script type="text/javascript">

    function clicktest(o){

    alert(o);

    }

    window.onload = function(){

    document.getElementById("mybutton").onclick = function(){

    clicktest('次奥');

    }

    }

   </script>

</head>

<body>

   <input type="button" id="mybutton" value="点击我!">

   <input type="button" value="别碰我!" onclick = "clicktest('次奥')"/>

</body>

2.鼠标移动事件

Mousemove 鼠标移动时触发事件 鼠标跟随效果

Mouseover 鼠标从元素外,移动元素之上信息提示、字体变色

Mouseout 鼠标从元素上,移出元素范围,和mouseover一块儿使用

3.鼠标点击事件(左键相关事件)

click 鼠标单击事件

dbclick 鼠标双击事件

mousedown/mouseup  鼠标按下、按键弹起  click = mousedown + mouseup;

oncontextmenu 鼠标右键菜单事件 (不是浏览器兼容事件)

4.聚焦离焦事件

focus 聚焦  页面焦点定位到目标元素

blur 离焦  页面焦点由目标元素移开

Demo:

<script type="text/javascript">

   window.onload= function(){

   //页面加载后,在输入框加入默认值,并以灰色显示

   document.getElementById("username").value= "用户名";

   document.getElementById("username").style.color="gray";

   //聚焦事件

   document.getElementById("username").onfocus= function(){

   document.getElementById("username").value="";

   document.getElementById("username").style.color="black";

   }

   //离焦事件

   document.getElementById("username").onblur=function(){

   var name = document.getElementById("username").value;

   if(name==""){

   document.getElementById("username").value="张三";

   document.getElementById("username").style.color="gray";

   }

   }

   }

</script>

</head>

<body>

    请输入用户名:<input type="text" id="username"><br/>

</body>

wpsD441.tmp 

5.键盘事件

使用场景:没有提交按钮,咱们通常采用回车进行提交

Demo:

<script type="text/javascript">

window.onload = function(){

document.getElementById("message").onkeypress = function(e){

// 判断用户 按键是否为 回车键

if(e && e.which){

// 火狐浏览器

if(e.which == 13){

alert("提交")

}

}else{

// IE浏览器

if(window.event.keyCode ==13 ){

alert("提交")

}

}

}

}

</script>

<body>

发送消息 <input type="text" name="message" id="message"/>

</body>

IE 中window对象,提供event属性,因此在IE中能够直接使用 event对象

火狐没有全局event对象,必须在发生事件时,产生一个event对象 ,传递默认方法

6.form的提交、重置事件

submit/reset

onsubmit = "return validateForm" 对表单进行校验

7.改变事件

onchange 制做select联动效果 ---- 省市联动

重点 : onclick onchange onbluronsubmit

8.默认事件的阻止和传播阻止

使用场景极为常见,超连接用户点击后,取消了不发生跳转。 

<script type="text/javascript">

// 阻止默认事件发生

function confirmDel(e){

var isConfirm = window.confirm("确认删除吗?");

if(!isConfirm){// 用户选择了取消

// 阻止默认事件

if(e && e.preventDefault){

// 火狐

e.preventDefault();

}else{

// IE

window.event.returnValue = false;

}

}

}

// 阻止事件冒泡

function aclick(e){

alert("a");

if(e && e.stopPropagation){

// 火狐浏览器

e.stopPropagation();

}else{

// IE 浏览器

window.event.cancelBubble = true;

}

}

 

function divclick(){

alert("div");

}

</script>

<body>

<h1>默认事件</h1>

<!-- 删除时,询问用户是否删除,而后再跳转-->

<a href="del?id=1" onclick="confirmDel(event);">这是一个连接</a>

<h1>事件传播</h1>

<!-- 事件冒泡传播 -->

<div onclick="divclick();"><a href="#" onclick="aclick(event);">这个连接 会触发两个事件执行</a></div>

</body>

HTML DOM Event对象

提供preventDefault()用于阻止默认事件的发生, 该方法IE 不支持 ,在IE中使用 returnValue

提供stopPropagation()用与阻止事件传播,该方法IE不支持在IE中 cancelBubble

5、Ajax编程入门

1.web交互的2种模式对比

①:2种交互模式的流程

wpsD442.tmp 

②:2种交互模式用户体验

同步交互模式客户端提交请求,等待,在响应回到客户端前,客户端没法进行其余操做

异步交互模型客户端将请求提交给Ajax引擎,客户端能够继续操做,由Ajax引擎来完成与服务武器端通讯,当响应回来后,Ajax引擎会更新客户页面,在客户端提交请求后,用户能够继续操做,而无需等待 。

2.Ajax快速入门

①:开发步骤

1).建立XMLHttpRequest对象

2).将状态触发器绑定到一个函数

3).使用open方法创建与服务器的链接

4).向服务器端发送数据

5).在回调函数中对返回数据进行处理

Demo

<script type="text/javascript">

// 第一步 建立XMLHttpRequest

    function createXMLHttpRequest(){

    try {

        xmlHttp = new XMLHttpRequest();

        }catch (tryMS) {

        try {

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

            }catch (otherMS) {

            try {

                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

                }catch (failed) {

                xmlHttp = null;

                    // 这里能够报一个错误,没法得到 XMLHttpRequest对象

                }

             }

         }

         return xmlHttp;

     }

     var xmlHttp = createXMLHttpRequest();

 

// 第二步  响应从服务器返回后,Ajax引擎须要更新页面,绑定一个回调函数

xmlHttp.onreadystatechange = function(){

// 第五步,响应返回后执行

// 状态依次 是 0 - 4

// 0 未初始化  1 正在加载   2 已经加载   3 交互中   4 响应完成

if(xmlHttp.readyState == 4){

// 判断数据是否正确

if(xmlHttp.status == 200){

// 响应有效

alert("响应返回了..." + xmlHttp.responseText);

}

}

};

 

// 第三步 创建与服务器链接

//xmlHttp.open("GET","helloworld?name=张三");//helloworld表明 Servlet URL

 

xmlHttp.open("POST","helloworld");

 

// 第四步 发送数据

// xmlHttp.send(null);

xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

xmlHttp.send("name=李四");

</script>

②:XMLHttpRequest对象的属性及方法

属性:

1)onreadystateonchange:状态回调函数

2)readystate:对象状态

3)status:服务器返回的http状态码

4)reqsponseText/responseXML:服务器响应的字符串

5)statusText:服务器返回的http状态信息

方法:

1)open:

2)send:

③:客户端向服务器提交数据

1)get方式发送数据

xmlHttp.open("GET","url?key=value"); // 参数已经在url上

xmlHttp.send(null);

2)post方式发送数据

xmlHttp.open("POST","url"); // 不须要写参数

xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); // post发送参数前,须要设置编码格式

xmlHttp.send("name=xxx&pwd=xxx"); // 发送post数据

④:Ajax编程图解

说明:查看时,请将文档放到为180%较为合适!

wpsD443.tmp 

 

结合编程图解,咱们将第一个案例的代码进行解剖:

wpsD454.tmp 

3.三种不一样服务器响应数据类型编程

常见的服务器响应数据类型:html片断、JSON格式数据、xml格式数据

①:HTML片断的数据处理

练习1:验证用户名是否有效

Ø 经过xmlhttp.responseText得到返回数据

Ø 经过Dom查找得到元素

Ø 调用元素的innerHTML进行操做

wpsD455.tmpwpsD456.tmpwpsD457.tmpwpsD458.tmpwpsD459.tmp 

说明:三个文件的具体内容请双击方框内的图标便可查看,这里推荐使用Notepad++进行关联

效果图展现:(数据使用list存储,abcdef存在)

wpsD45A.tmp 

wpsD45B.tmp 

注意:在register.html文件中,与服务器创建链接是,url必定要写对,不然返回数据时出现404错误!"/Ajax/CheckUsernameServlet?username="

②:JSON格式数据处理

练习2:经过连接得到table数据,显示 --- 返回HTML片断

wpsD45C.tmp 

经过product.jsp 生成HTML片断,返回客户端,客户端Ajax引擎接收,经过innerHTML table元素嵌入到页面内部,其思路与案例一相似,这里不作详细介绍。这里须要提出的是第二种解决方案JSON(HTML片断容易形成返回数据带回过多冗余的HTML标签元素)

JSON是一种JavaScript轻量级数据交互格式,主要应用于Ajax编程易于人阅读和编写同时也易于机器解析和生成。

格式一: {key:value,key:value,key:value } 键值对直接用 , 分开,键值之间用 : 自己必须是字符串常量

{name : '张三'}

{'name':'张三'}

是等价的

加不加引号,是有区别的,不加引号是变量,加引号常量字符串

格式二: [1, 2 ,3 ] 数组结构

组合后复杂格式

[{name:'aaa'}, {name:'bbb'}, {name:ccc}] 表示三个对象数组

JSON应用场景: AJAX请求参数和响应数据

问题: 服务器端如何生成 json格式数据------->>依赖第三方开源类库

③:JSON-lib的使用

是java类库 ,支持javabean  map list array转换json格式字符串, 支持将json字符串转换javabean对象(反过来只支持这一种,使用不多) 

在使用JSON-lib时必须导入至少5jar

wpsD45D.tmpwpsD45E.tmp 

开发时咱们使用6jar包,双击json-lib-all.zip便可获取所需jar包。

1)将数组/list集合解析成JSON

使用JSONArray能够解析Array类型

JSONArray jsonArray = JSONArray.fromObject(list变量);

wpsD45F.tmp 

2)将Javabean/Map解析成JSON

使用JSONObject能够解析javabean类型

JSONObject jsonObject = JSONObject.fromObject(javabean);

wpsD460.tmp 

3)对象属性过滤转换JSON

经过JsonConfig对象配置对象哪些属性不参与转换

JsonConfig jsonConfig new JsonConfig();

jsonConfig.setExcludes(new String[]{"price"});

wpsD461.tmp 

wpsD471.tmp重构练习2

wpsD472.tmpwpsD473.tmpwpsD474.tmp 

运行效果:

wpsD475.tmp 

④:XML格式数据处理

练习3select完成省级联动

1) XStream的使用

问题:服务器端如何将java对象,生成XML格式数据?须要第三方类库支持XStream

XStream is a simple library to serialize objects to XML and back again.

XStream主要完成Java对象的序列化(xstream-1.3.1.jar)以及解析(xpp3_min-1.1.4c.jar)

2) XStream的核心方法

Ø xStream.toXML(obj):将对象序列化XML

Ø xStream.fromXML(inputStream/xml片断):将xml信息解析成对象

Ø xStream.alias(String name,Class):将类型解析或者序列化时,取一个别名

代码案例:(序列化)

wpsD476.tmp 

解析xml时,要注意别名的命名规则要与序列化时保持一致!

3) XStream注解

Javabean中进行注解

把某属性的名称取别名为city@XStreamAlias(value="city")

注解生效:xStream.autodetectAnnotations(true);

@XStreamAsAttribute  设置变量生成属性

@XStreamOmitField  设置变量不生成到XML

@XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量别名

 

6、jQuery框架

jQuery 1.4 企业主流版本,从jQuery1.6 开始引入大量新特性。最新版本 2.1.1,这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性)

jQuery 提供 jquery-1.8.3.js jquery-1.8.3.min.js

jquery-1.8.3.js jQuery框架源码,没有被精简,体积较大 (主要用来研究 jQuery源码),企业开发时,须要导入 jquery-1.8.3.min.js (精简过)

1.jQuery程序快速入门

window.onload = function() {...} 

等价于$(document).ready(function(){...});

①:jQuery基本使用

传统Js写法:

<script type="text/javascript">

window.onload = function(){

alert("传统JS,Ok");

}

</script>

jQuery写法:

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function(){

alert("ok");

});

$(document).ready(function(){

alert("OK");

});

</script>

②:jQuery核心函数

1)jQuery(callback)  // 页面onload 函数

2)jQuery(expression, [context])  // 查找指定对象 ------ 九种选择器

3)jQuery(elements) // 将dom对象转换为jQuery对象 

* document 是DOM对象 jQuery(document) 成为了jQuery对象

4)jQuery(html, [ownerDocument])  // 将html转换jQuery对象

* jQuery("<p>hello</p>") ----- 获得 jQuery对象

Demo:

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function(){

// 得到div对象

var domObject = document.getElementById("mydiv"); // 得到DOM对象

domObject.innerHTML = "ITCAST";

 

// 经过包装DOM对象,成为jQuery对象

var $jQueryObject = $(domObject); // DOM对象成为 jQuery对象

$jQueryObject.html("传智播客"); // html()是jQuery对象方法

 

// 经过访问jQuery对象下标0 元素,得到DOM对象

var dom1 = $jQueryObject[0]; // 转换jQuery对象为DOM对象

var dom2 = $jQueryObject.get(0);

dom2.innerHTML = "传智播客ITCAST";

});

</script>

<body>

<div id="mydiv">hello</div>

</body>

jQuery对象没法使用DOM对象属性方法DOM对象也没法使用jQuery对象属性方法。可是咱们可使用jQuery提供方法,将DOM对象经过jQuery()函数包装成为jQuery对象,一样咱们能够把jQuery对象转化成DOM对象。

jQuery--->DOM对象:$jQuery对象[0]或者$jQuery对象.get(0);

DOM对象--->jQuery$(DOM对象)

2.jQuery九种选择器

选择器是jQuery 的根基, jQuery , 对事件处理, 遍历 DOM Ajax 操做都依赖于选择器

jQuery(expression, [context])  在核心函数jQuery中传入表达式,对页面中元素进行选择======================jQuery核心函数第二种!

①:基本选择器

根据元素id属性、class属性、元素名称 对元素进行选择

id选择器$("#元素id属性")

class选择器$(".元素class属性")

元素名称选择器$("元素名称")

多个选择器同时使用 selector1,select2  例如 : $("#xxid ,.xxxclass") 同时选择id class匹配两类元素

练习1

² 经过each() 在每一个div元素内容前 加入 “传智播客”

² 经过size() / length 打印页面中 class属性为 itcast 的元素数量

² 经过index()  打印 id属性为foo 的div标签 是页面内的第几个div标签

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function(){

// 选中全部div 获得集合

$("div").each(function(){

// 在每一个div内容前加入传智播客

//this.innerHTML = "传智播客" + this.innerHTML ;

$(this).html("传智播客" + $(this).html());

});

 

// 经过size() / length 打印页面中 class属性为 itcast 的元素数量

//alert($(".itcast").size());

alert($(".itcast").length);

 

// 经过index()  打印 id属性为foo 的div标签 是页面内的第几个div标签

alert($("div").index($("#foo")));

});

</script>

<body>

<div>DIVAAAA</div>

<div class="itcast">DIVBBBB</div>

<div>DIVCCCC</div>

<div>DIVDDDD</div>

<div class="itcast">DIVEEEE</div>

<div id="foo">DIVFFFF</div>

<p>PAAAA</p>

<p class="itcast">PBBBB</p>

<p>PCCCC</p>

</body>

 

②:层级选择器

根据祖先、后代、父子关系、兄弟关系 进行选择

ancestor descendant  获取ancestor元素下边的全部元素  $("form input")

parent > child  获取parent元素下边的全部直接child 子元素   $("form > input")

prev + next  获取紧随pre元素的后一个兄弟元素 $("label + input")

prev ~ siblings 获取pre元素后边的全部兄弟元素 $("form ~ input")

练习2

² 将class属性值为itcast的元素下全部a元素字体变为红色

² 将class属性值为itcast的元素下直接a元素字体变为蓝色

² 将div元素后全部兄弟a元素,字体变为黄色,大小变为30px

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function(){

// 将class属性值为itcast的元素下全部a元素字体变为红色

$(".itcast a").css("color","red");

 

// 将class属性值为itcast的元素下直接a元素字体变为蓝色

$(".itcast>a").css("color","blue");

 

// 将div元素后全部兄弟a元素,字体变为黄色,大小变为30px

$("div~a").css({color:'yellow','font-size':'30px'});

wpsD477.tmp});

</script>

<body>

<div class="itcast">

<a>div link</a>

<p>info

<a>p link</a>

</p>

</div>

<a>link</a>

<p class="itcast">

<a>p link</a>

</p>

<a>link</a>

</body>

 

③:基本过滤选择器

:first  选取第一个元素 $("tr:first")

:last   选取最后一个元素 $("tr:last")

:not(selector)  去除全部与给定选择器匹配的元素 $("input:not(:checked)")

:even  选取全部元素中偶数索引的元素,从 0 开始计数 $("tr:even")  ----- 选取奇数元素

:odd  选取全部元素中奇数索引的元素 ,从0 开始计数 $("tr:odd")  ------ 选取偶数元素

:eq(index) 选取指定索引的元素  $("tr:eq(1)")

:gt(index) 选取索引大于指定index的元素  $("tr:gt(0)")

:lt(index) 选取索引小于指定index的元素  $("tr:lt(2)")

:header  选取全部的标题元素  如:h1, h2, h3   $(":header")

:animated  匹配全部正在执行动画效果的元素

练习3

² 设置表格第一行,显示为红色

² 设置表格除第一行之外 显示为蓝色

² 设置表格奇数行背景色 黄色

² 设置表格偶数行背景色 绿色

² 设置页面中全部标题 显示为灰色

² 设置页面中正在执行动画效果div背景黄色,不执行动画div背景绿色

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function(){

// 设置表格第一行,显示为红色

$("tr:first").css("color","red");

 

// 设置表格除第一行之外 显示为蓝色

//$("tr:not(:first)").css("color","blue");

$("tr:gt(0)").css("color","blue");

 

// 设置表格奇数行背景色 黄色 /设置表格偶数行背景色 绿色

$("tr:even").css("background-color","yellow");

$("tr:odd").css("background-color","green");

 

// 设置页面中全部标题 显示为灰色

$(":header").css("color","gray");

 

// 设置页面中正在执行动画效果div背景黄色,不执行动画div背景绿色

// 没法选中正在执行动画的元素

$("div:not(:animated)").css("background-color","green");

$("div").click(function(){

$(this).css("background-color","yellow"); //设置执行动画元素

wpsD488.tmp$(this).slideUp("slow");

});

});

</script>

<body>

<h1>表格信息</h1>

<h2>这是一张商品表</h2>

<table border="1" width="600">

<tr>

<th>商品编号</th>

<th>商品名称</th>

<th>售价</th>

<th>数量</th>

</tr>

<tr>

<td>001</td>

<td>冰箱</td>

<td>3000</td>

<td>100</td>

</tr>

<tr>

<td>002</td>

<td>洗衣机</td>

<td>2000</td>

<td>50</td>

</tr>

<tr>

<td>003</td>

<td>热水器</td>

<td>1500</td>

<td>20</td>

</tr>

<tr>

<td>004</td>

<td>手机</td>

<td>2188</td>

<td>200</td>

</tr>

</table>

 

<div>

slideDown(speed, [callback])

概述

经过高度变化(向下增大)来动态地显示全部匹配的元素,在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

参数

speedString,Number三种预约速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

callback (可选)FunctionFunction在动画完成时执行的函数

</div>

<div>

fadeOut(speed, [callback])

概述

经过不透明度的变化来实现全部匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说全部匹配的元素的高度和宽度不会发生变化。

参数

speedString,Number三种预约速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

callback (可选)Function在动画完成时执行的函数

</div>

</body>

 

④:内容过滤选择器

内容选择器是对子元素和文本内容的操做

:contains(text) 选取包含text文本内容的元素  $("div:contains('John')")  文本内容含有john 的全部div

:empty 选取不包含子元素或者文本节点的空元素 $("td:empty")  td元素必须为空

:has(selector) 选取含有选择器所匹配的元素的元素  $("div:has(p)").addClass("test");  含有p子元素的div

:parent  选取含有子元素或文本节点的元素  $("td:parent") 全部不为空td元素选中

练习4

² 设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色

² 设置没有子元素的div元素 文本内容 ”这是一个空DIV“

² 设置包含p元素 的 div 背景色为黄色

² 设置全部含有子元素的span字体为蓝色

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function(){

// 设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色

$("div:contains('传智播客')").css("color","red");

 

// 设置没有子元素的div元素 文本内容 ”这是一个空DIV“

$("div:empty").html('这是一个空DIV');

 

// 设置包含p元素 的 div 背景色为黄色

$("div:has(p)").css("background-color","yellow");

 

// 设置全部含有子元素的span字体为蓝色

$("span:parent").css("color","blue");

wpsD489.tmp});

</script>

<body>

<div>今天是个晴天</div>

<div>明天要去传智播客学 java</div>

<div><span>JavaScript</span> 是网页开发中脚本技术</div>

<div>Ajax 是异步的 JavaScript和 XML</div>

<div> <p>jQuery</p> 是 JavaScript一个 轻量级框架</div>

<div></div>

</body>

 

⑤:可见性过滤选择器

根据元素的可见与不可见状态来选取元素

:hidden  选取全部不可见元素 $("tr:hidden")

:visible  选取全部可见的元素 $("tr:visible")

练习5

² 为表单中全部隐藏域  添加 class属性,值为itcast

² 设置table全部 可见 tr 背景色 黄色

² 设置table全部 隐藏tr 字体颜色为红色,显示出来 ,并输出tr中文本值

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function(){

//  为表单中全部隐藏域  添加 class属性,值为itcast

$("input:hidden").