您的位置：首页 > 职场人生

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

2018-03-20 16:27 525 查看

核心内容概述

1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。2.Ajax传统编程。3.jQuery框架，九种选择器为核心学习内容4.JQuery UI插件5.jQuery Ajax编程6.jQuery第三方插件7.反向Ajax编程(彗星)

一、JavaScript基础加强

JavaScript是在浏览器内容运行，无需编译、解释执行动态脚本语言，是一种弱类型语言，所有变量使用var定义。JavaScript的3个组成部分分别为：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)

1.ECMAScript核心语法

①：代码编写位置分为内部JS和外部JS【使用src进行引入】<meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>JavaScript程序编写</title><script type="text/javascript">// 编写JavaScript代码alert(1);</script> <script type="text/javascript" src="1.js"></script>②：学习顺序JavaScript依次从变量(标示符、关键字)，运算符，程序结构(if while for)，以及函数来进行学习。(1)所有的变量使用var来定义，是弱类型变量，不代表没有类型，变量本身还是有类型的。【var a=10，var b=1.5；他们分别为整数以及浮点数类型】(2)每行结尾分号可有可无，建议编写。(3)注释和Java类似，支持单行注释(//)和多行注释(/* */)③：数据类型JavaScript分为原始数据类型和引用数据类型，分别存储于栈和堆中。原始数据类型：number、string、boolean、null和undefined引用数据类型：存在很多种，每种都是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);//falaealert(a instanceof Object);//falae var s = new String("abc"); // 对象类型alert(s instanceof Object);</script>④：null和undefined的区分null：对象不
4000
存在；undefined：对象存在，访问属性或者方法不存在(对象未初始化)

2.ECMAScript对象

ECMAScript常用的有7个对象，依次为String、Number、Boolean、Math、Date、Array以及Regxp。①：String类型常用属性方法建议查看手册，这里需要注意的为length属性以及match方法charAt()、concat()、indexOf()、lastIndexOf()、match()、replace()、split()、substr()、substring()、toLowerCase()、toUpperCase()Java中提供matches方法例如："1234".matches("\\d+") ---- 返回trueJavaScript 与 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() 返回当地本地化日期格式 2012年12月12日 11:07:52getTime() 返回从1970年1月1日到目前为止毫秒值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到endDemo：<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-3alert(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(){// 访问对象属性通过关键字 thisreturn this.name;}};// 访问对象属性 [] 和 .//alert(obj.name);//alert(obj["age"]);alert(obj.getName()); // 添加一个方法到 obj对象obj.getAge = function(){return this.age;}alert(obj.getAge()); JavaScript中的对象是通过 new function创建的，在Js中function等同于一个类结构// 定义类结构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 //trueJavaScript 中所有对象都是通过 new Function实例(function) 获得 ------ Object instance Function //trueJavaScript所有对象构造函数都是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) //truealert(Object instanceOf Function) //trueC：创建一个对象，需要使用new functionVar s = new String()Var o = new Object()Var arr = new Array()Var date = new Date()结论：JavaScript中，一切对象都是object实例alert(s instanceOf Object) //truealert(Function instanceOf Object) //true var f = new Function(); // 实例化Function对象var o = new Object(); // 实例化Object对象alert(f instanceof Function); // truealert(f instanceof Object); // truealert(o instanceof Function); // falsealert(o instanceof Object); // true③：function原型属性JavaScript所有对象都由function构造函数得来的，通过修改 function构造函数 prototype属性，动态修改对象属性和方法。

④：继承A：使用原型链完成JavaScript单继承var A = function(){this.name = 'xxx';}var B = function(){this.age = 20;}// 方式一可以通过 prototype原型完成单继承 B的原型指向AB.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和Dthis.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);

二、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外面窗口中显示内容

显示结果如上图所示，实现思路如下：子窗体：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>

②：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>

④：定时操作setInterval & setTimeoutsetInterval：定时任务会重复执行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>

三、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 ElementDOM AttrDOM TextDOM DocumentHTML DOM是对XML DOM的扩展， HTML DOM比XML DOM 开发JS来说更加简单方便！HTML DOM最优秀的地方是，操作form对象和table数据

1.BOM和HTML DOM关系图

学习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 属性检索，获得NodeListdocument.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相对位置关系访问元素 childNodesfirstChildlastChildnextSiblingparentNodepreviousSibling用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)内部文本元素的修改 innerHTMLDOM 删除节点：removeChild 删除子元素、removeAttribute(name)删除节点指定属性 * 要删除节点o o.parentNode.removeChild(o)DOM 替换节点：replaceChild：父节点.replaceChild(新节点,被替换节点) ;如果对于一个已经存在节点，执行 appendChild、 replaceChild都会造成该节点一个移动效果，可以采取先克隆再复制来消除此效果。DOM 创建节点：document对象提供createElement() 创建元素、createAttribute(name) 创建属性、createTextNode() 创建文本节点DOM 添加节点 appendChild 父元素.appendChild(新的子节点) ; insertBefore 父节点.insertBefore(新子节点, 已经存在子节点)DOM 克隆节点 源节点.cloneNode(true); 该方法可以返回一个节点的克隆节点，克隆节点包含原节点的属性和子元素此节内容有大量的练习，建议大家做写，增强代码的熟练度。

四、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>

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/resetonsubmit = "return validateForm" 对表单进行校验

7.改变事件

onchange 制作select联动效果 ---- 省市联动重点： onclick 、onchange 、onblur、 onsubmit

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

使用场景极为常见，超链接用户点击后，取消了不发生跳转。 <script type="text/javascript">// 阻止默认事件发生function confirmDel(e){var isConfirm = window.confirm("确认删除吗？");if(!isConfirm){// 用户选择了取消// 阻止默认事件if(e && e.preventDefault){// 火狐e.preventDefault();}else{// IEwindow.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

五、Ajax编程入门

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

①：2种交互模式的流程

②：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%较为合适！

结合编程图解，我们将第一个案例的代码进行解剖：

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

常见的服务器响应数据类型：html片段、JSON格式数据、xml格式数据①：HTML片段的数据处理练习1：验证用户名是否有效Ø 通过xmlhttp.responseText获得返回数据Ø 通过Dom查找获得元素Ø 调用元素的innerHTML进行操作

说明：三个文件的具体内容请双击方框内的图标即可查看，这里推荐使用Notepad++进行关联效果图展示：(数据使用list存储，abc和def存在)

注意：在register.html文件中，与服务器建立连接是，url一定要写对，否则返回数据时出现404错误！【"/Ajax/CheckUsernameServlet?username="】②：JSON格式数据处理练习2：通过链接获得table数据，显示 --- 返回HTML片段

通过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时必须导入至少5个jar包

开发时我们使用6个jar包，双击json-lib-all.zip即可获取所需jar包。1）将数组/list集合解析成JSON串使用JSONArray可以解析Array类型JSONArray jsonArray = JSONArray.fromObject(list变量);

2）将Javabean/Map解析成JSON串使用JSONObject可以解析javabean类型JSONObject jsonObject = JSONObject.fromObject(javabean);

3）对象属性过滤转换JSON串通过JsonConfig对象配置对象哪些属性不参与转换。JsonConfig jsonConfig = new JsonConfig();jsonConfig.setExcludes(new String[]{"price"});

重构练习2

运行效果：

④：XML格式数据处理练习3：select完成省级联动1) XStream的使用问题：服务器端如何将java对象，生成XML格式数据？需要第三方类库支持XStreamXStream 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)：将类型解析或者序列化时，取一个别名代码案例：(序列化)

解析xml时，要注意别名的命名规则要与序列化时保持一致！3) XStream注解在Javabean中进行注解把某属性的名称取别名为city：@XStreamAlias(value="city")注解生效：xStream.autodetectAnnotations(true);@XStreamAsAttribute 设置变量生成属性@XStreamOmitField 设置变量不生成到XML@XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量别名

六、jQuery框架

jQuery 1.4 是企业主流版本，从jQuery1.6 开始引入大量新特性。最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性)jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.jsjquery-1.8.3.js jQuery框架源码，没有被精简，体积较大（主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过）

1.jQuery程序快速入门

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'});

});</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"); //设置执行动画元素

$(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");

});</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").addClass("itcast"); // 设置table所有可见 tr 背景色黄色$("tr:visible").css("background-color","yellow"); // 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值$("tr:hidden").each(function(){alert($(this).text());}); $("tr:hidden").css("color","red");

$("tr:hidden").css("display","block"); });</script><body><form>订单号 itcast-xxxx 金额 100元<input type="hidden" name="token" value="12312-0xccx-zx-asd-21-asd-gdfgd" /><input type="submit" value="确认支付" /></form><table><tr style="display:none;"><td>冰箱</td></tr><tr style="visibility:hidden;"><td>洗衣机</td></tr><tr><td>热水器</td></tr></table></body> ⑥：属性过滤选择器通过元素的属性来选取相应的元素[attribute] 选取拥有此属性的元素 $("div[id]")[attribute=value] 选取指定属性值为value的所有元素[attribute !=value] 选取属性值不为value的所有元素[attribute ^= value] 选取属性值以value开始的所有元素[attribute $= value] 选取属性值以value结束的所有元素[attribute *= value] 选取属性值包含value的所有元素练习6：² 设置所有含有id属性的div，字体颜色红色² 设置所有class属性值含有itcast元素背景色为黄色² 对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 设置所有含有id属性的div，字体颜色红色$("div[id]").css("color","red"); // 设置所有class属性值含有itcast元素背景色为黄色$("[class *= 'itcast']").css("background-color","yellow"); // 对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容$("div[id][class]").click(function(){

alert($(this).html());});});</script><body> <div>AAAA</div><div id="mydiv" class="itcast1">BBBB</div><div class="itcast2">CCCC</div><div id="mydiv2">DDDD</div><div class="divclass">EEEE</div><div id="xxx" class="itcast3">FFFF</div><p class="p-itcast">PPPPPP</p></body> ⑦：子元素过滤选择器对某元素中的子元素进行选取:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始区别 eq:first-child 选取第一个子元素:last-child 选取最后一个子元素:only-child 选取唯一子元素，它的父元素只有它这一个子元素练习7：² 选择id属性mytable 下3的倍数行，字体颜色为红色² 表格奇数行背景色黄色² 表格偶数行背景色灰色² 只有一个td的 tr元素字体为蓝色<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 选择id属性mytable 下3的倍数行，字体颜色为红色$("#mytable tr:nth-child(3n)").css("color","red"); // 表格奇数行背景色黄色 / 表格偶数行背景色灰色$("table tr:nth-child(even)").css("background-color","gray");//$("table tr:nth-child(odd)").css("background-color","yellow"); // 从1计数$("tr:even").css("background-color","yellow");// 从0计数 // 只有一个td的 tr元素字体为蓝色$("tr td:only-child").css("color","blue");

});</script></head><body><table border="1" width="400" id="mytable"><tr><td>1</td><td>冰箱</td></tr><tr><td>2</td><td>洗衣机</td></tr><tr><td>3</td><td>热水器</td></tr><tr><td>4</td><td>电饭锅</td></tr><tr><td>5</td><td>电磁炉</td></tr><tr><td>6</td><td>豆浆机</td></tr><tr><td>7</td><td>微波炉</td></tr><tr><td>8</td><td>电视</td></tr><tr><td>9</td><td>空调</td></tr><tr><td>10</td><td>收音机</td></tr><tr><td>11</td><td>排油烟机</td></tr><tr><td>12</td><td>加湿器</td></tr><tr><td>13 电暖气</td>加湿器</tr></table></body> ⑧：表单过滤选择器选取表单元素的过滤选择器:input 选取所有<input>、<textarea>、<select >和<button>元素:text 选取所有的文本框元素:password 选取所有的密码框元素:radio 选取所有的单选框元素:checkbox 选取所有的多选框元素:submit 选取所有的提交按钮元素:image 选取所有的图像按钮元素:reset 选取所有重置按钮元素:button 选取所有按钮元素:file 选取所有文件上传域元素:hidden 选取所有不可见元素练习8：² 对所有text框和password框，添加离焦事件，校验输入内容不能为空² 对button 添加点击事件，提交form表单<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 对所有text框和password框，添加离焦事件，校验输入内容不能为空$(":text,:password").blur(function(){// 获得表单元素内容 val()var value = $(this).val(); // 获得value 属性// 将输入内容 trimif($.trim(value) == "" ){alert("用户名和密码不能为空");}}); // 对button 添加点击事件，提交form表单

$(":button").click(function(){$("#myform").submit();});});</script><body><form action="regist" method="post" id="myform">用户名 <input type="text" name="username" /><br/>密码 <input type="password" name="password" /><br/>性别 <input type="radio" name="gender" value="男" />男<input type="radio" name="gender" value="女"/><br/>城市 <select name="city"><option value="北京">北京</option><option value="上海">上海</option></select>个人简介 <textarea rows="5" cols="60" name="introduce"></textarea><input type="button" value="提交"/></form></body>⑨：表单对象属性过滤选择器选取表单元素属性的过滤选择器:enabled 选取所有可用元素:disabled 选取所有不可用元素:checked 选取所有被选中的元素，如单选框、复选框:selected 选取所有被选中项元素，如下拉列表框、列表框练习9：² 点击button 打印radio checkbox select 中选中项的值<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 点击button 打印radio checkbox select 中选中项的值$("#mybutton").click(function(){// 打印选中性别的值$("input[name='gender']:checked").each(function(){alert($(this).val());}); // 打印爱好$("input[name='hobby']:checked").each(function(){alert($(this).val());}); // 打印城市$("select[name='city'] option:selected").each(function(){alert($(this).val());

});});});</script></head><body>性别：<input type="radio" name="gender" value="男" /> 男<input type="radio" name="gender" value="女"/> 女 <br/>爱好: <input type="checkbox" name="hobby" value="体育" />体育<input type="checkbox" name="hobby" value="读书" />读书<input type="checkbox" name="hobby" value="音乐" />音乐<input type="checkbox" name="hobby" value="旅游" />旅游 <br/>城市：<select name="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select><br/><input type="button" value="获取选中的值 " id="mybutton" /></body>

3.jQuery选择器总结

①：对象访问核心方法 each(function(){}) 遍历集合size()/length属性返回集合长度index() 查找目标元素是集合中第几个元素②：CSS样式操作 css(name,value) css({name:value,name:value}); 同时修改多个CSS样式基本过滤选择器与筛选过滤 API功能是相同$("tr:first") 等价于 $("tr").first() ③：九种选择器重点 l 基本选择器和层级选择器 锁定元素l 使用属性过滤选择器和内容过滤选择器 具体选中元素 l 表单操作 :checked :selected 选中 表单选中元素配合基本过滤选择器，缩小选中的范围

4.jQuery的DOM操作

使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用 ①：查询children([expr]) 获取指定的子元素find(expr) 获取指定的后代元素parents([expr]) 获得祖辈元素parent() 获取父元素next([expr]) 获取下一个兄弟元素prev([expr]) 获取前一个兄弟元素siblings([expr]) 获取所有兄弟元素在XML 解析中 find 方法使用最多对查找结果进行遍历操作 each(function(){… }) ，在each函数中可以通过this 获得DOM对象，$(this) 获得jQuery对象 ②：属性操作设置属性 attr(name,value)读取属性 attr(name)同时设置多个属性 attr({name:value,name:value... });attr("checked","true") 等价于 prop("checked")练习1：² 点击一个button，动态设置 div的属性 id name class² 尝试能否设置一个不存在的属性？<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">// 点击一个button，动态设置 div的属性 id name class// 尝试能否设置一个不存在的属性？$(function(){$("#mybutton").click(function(){// 可以设置一个不存在属性$("#mydiv").attr({'id':'xxxdiv','name':'xxxxname','class':'xxxclass','itcastinfo':'xxxxitcast'});

});});</script></head><body><div id="mydiv">itcast</div><input type="button" value="设置属性" id ="mybutton" /></body> ③：CSS操作通过attr属性设置/获取 style属性attr('style','color:red'); // 添加style属性设置CSS样式属性css(name, value) 设置一个CSS样式属性css(properties) 传递key-value对象，设置多个CSS样式属性设置class属性addClass(class) 添加一个class属性removeClass([class]) 移除一个class属性toggleClass(class)如果存在（不存在）就删除（添加）一个类练习2：² 点击button，使一个div的背景颜色变为黄色² 通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 点击button，使一个div的背景颜色变为黄色$("#button1").click(function(){$("#div1").css("background-color","yellow");}); // 通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原$("#button2").click(function(){$("#div1").toggleClass("divclass");});});</script>

});</script></head><body>用户名 <input type="text" id="username" /> <br/>性别 <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" /> 女<br/>城市 <select id="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select> <br/><input type="button" value="获取val" id="mybutton"/></body>设置 val控制radio select checkbox 选中$("#city").val("广州");$("input[name='gender']").val(['女']); 练习4：² 输出所有select元素下的所有option元素中对应的文本内容例如:<option value="中专">中专^^</option> 输出--->中专^^<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){$("#edu option").each(function(){alert($(this).text());});});</script></head><body><select id="edu"><option>博士</option><option>硕士</option><option>本科</option><option>大专</option></select> ⑤：jQuery添加元素l 创建元素拼接好HTML代码片段 $(html片段) ---- 产生jQuery对象l 内部插入： $node.append($newNode) 内部结尾追加$node.prepend($newNode) 内部开始位置追加l 外部插入：$node.after($newNode) 在存在元素后面追加 -- 兄弟$newNode.insertBefore($node) 在存在元素前面追加练习5：² 在id=edu下增加<option value="大专">大专</option><script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 追加 option 内容大专// 创建元素var $newNode = $("<option value='大专'>大专</option>");// 添加元素//$("#edu").append($newNode); // 内部结尾//$("#edu").prepend($newNode); // 内部开始 //$("option[value='本科']").after($newNode);$newNode.insertBefore($("option:contains('高中')"));});

</script><body><select id="edu"><option value="博士">博士</option><option value="硕士">硕士</option><option value="本科">本科</option><option value="高中">高中</option></select> ⑥：jQuery删除元素选中要删除元素.remove() ---- 完成元素删除选中要删除元素.remove(expr) ----- 删除特定规则元素 remove删除节点后，事件也会删除detach删除节点后，事件会保留从1.4新API 练习6：² 分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){$("p").click(function(){alert($(this).text());});// 使用remove方法删除 p元素，连同事件一起删除//var $p = $("p").remove();// 使用detach删除，事件会保留var $p = $("p").detach();

$(document.body).append($p);});</script></head><body><p>AAA</p><div>BBB</div></body> 练习7：² 表格数据添加与删除练习<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){$("#mybutton").click(function(){var name = $("#name").val();var email = $("#email").val();var phone = $("#phone").val();// DOM添加var $tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='javascript:void(0)' onclick='del(this)'>删除</a></td></tr>");$("table").append($tr);});}); function del(o) {// 对象o 代表a 标签$(o).parents("tr").remove();}</script></head><body><form>姓名 <input type="text" id="name" />邮箱 <input type="text" id="email" />手机<input type="text" id="phone" /> <br/><input type="button" value="提交" id="mybutton"/></form>

<hr/><table border="1" width="400"><tr><th>姓名</th><th>邮箱</th><th>手机</th><th>删除</th></tr></table> ⑦：jQuery复制和替换l 复制节点$(“p”).clone(); 返回节点克隆后的副本，但不会克隆原节点的事件$(“p”).clone(true); 克隆节点，保留原有事件l 替换节点$("p").replaceWith("<b>ITCAST</b>"); 将所有p元素，替换为"<b>ITCAST</b>“$(“<b>ITCAST</b>”).replaceAll(“p”); 与replaceWith相反 ⑧：全选以及左右移动练习练习8：² 全选练习<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 全选/ 全不选$("#checkallbox").click(function(){var isChecked = this.checked;$("input[name='hobby']").each(function(){this.checked = isChecked;});});// 全选$("#checkAllBtn").click(function(){$("input[name='hobby']").attr("checked","checked");});// 全不选$("#checkAllNotBtn").click(function(){$("input[name='hobby']").removeAttr("checked");}); // 反选$("#checkOppoBtn").click(function(){$("input[name='hobby']").each(function(){this.checked = !this.checked;

});});});</script><body>请选择您的爱好<br/><input type="checkbox" id="checkallbox" /> 全选/全不选 <br/><input type="checkbox" name="hobby" value="足球" /> 足球<input type="checkbox" name="hobby" value="篮球" /> 篮球<input type="checkbox" name="hobby" value="游泳" /> 游泳<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/><input type="button" value="全选" id="checkAllBtn" /><input type="button" value="全不选" id="checkAllNotBtn" /><input type="button" value="反选" id="checkOppoBtn" /></body>

练习9：² 左右移动练习<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){//选中的去右边$("#chooseToRight").click(function(){$("#right").append($("#left option:selected"));}); // 全去右边$("#allToRight").click(function(){$("#right").append($("#left option"));}); // 全去左边$("#allToLeft").click(function(){$("#left").append($("#right option"));}); //选中的去左边$("#chooseToLeft").click(function(){$("#left").append($("#right option:selected"));});});</script></head><body><select id="left" multiple="multiple" size="15"><option>北京</option><option>上海</option><option>天津</option><option>杭州</option><option>武汉</option><option>广州</option><option>深圳</option><option>南京</option></select> <input type="button" value="-->" id="chooseToRight" /><input type="button" value="==>" id="allToRight" /><input type="button" value="<--" id="chooseToLeft" /><input type="button" value="<==" id="allToLeft" /> <select id="right" multiple="multiple" size="15"><option>郑州</option></select></body>

5.jQuery事件

①：事件绑定传统js 一般一个对象只能绑定某种事件一个函数jQuery 支持对同一个对象，同一个事件可以绑定多个函数

绑定事件函数到对象有两种写法写法一$("div").click(function(){……});取消绑定：$("div").unbind("click"); *** live 为满足条件对象，实时追加绑定、取消live事件用die方法Demo:<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 使用live绑定$("div").live("click",function(){alert($(this).text());}); //$("div").click(function(){//alert($(this).text());//}); // 解除绑定//$("div").unbind("click"); // 新加入div元素没有之前div元素绑定事件$(document.body).append($("<div>CCC</div>"));

});</script></head><body><div>AAA</div><div>BBB</div></body> ②：事件一次性绑定和自动触发一次性事件 one(type, [data], fn) 为对象绑定一次性事件，只有一次有效触发事件 trigger(type, [data]) 触发目标对象指定的事件执行练习1：² 为页面内所有p 元素绑定一次性事件，点击打印p元素中内容² 页面内有两个按钮，点击按钮1，触发按钮2的 click事件执行 <script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){//为页面内所有p 元素绑定一次性事件，点击打印p元素中内容$("p").one("click",function(){alert($(this).text());}); //页面内有两个按钮，点击按钮1，触发按钮2的 click事件执行$("#mybutton1").click(function(){alert("点击了按钮一");// 触发2 click事件$("#mybutton2").trigger("click");});

$("#mybutton2").click(function(){alert("点击了按钮二");});});</script><body><p>传智播客</p><input type="button" value="按钮一" id="mybutton1" /><input type="button" value="按钮二" id="mybutton2" /></body> ③：事件切换hover(mouseover,mouseout) 模拟鼠标悬停事件toggle(fn1,fn2,fn3...) ; 鼠标点击一次触发一个函数练习1：² 编写一个div元素，光标移动上去字体变为红色，移开后变为蓝色² 建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 编写一个div元素，光标移动上去字体变为红色，移开后变为蓝色$("div").hover(function(){// over$(this).css("color","red");},function(){// out$(this).css("color","blue");}); // 建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张$("img").toggle(function(){$(this).attr("src","2.jpg");},function(){$(this).attr("src","3.jpg");},function(){$(this).attr("src","4.jpg");});});</script><body><div>鼠标移动上会变色的内容！</div><img src="1.jpg" width="240" height="180" /></body>

④：事件阻止默认动作和传播l 默认动作阻止$("a").click(function(event){ event.preventDefault(); // do something});l 取消事件冒泡$("p").click(function(event){event.stopPropagation();//do something});<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){// 通过event阻止默认事件$("#dellink").click(function(event){var isConfirm = window.confirm("确认删除吗？");if(!isConfirm){event.preventDefault();}}); $("div").click(function(){alert($(this).html());}); // 阻止事件冒泡$("p").click(function(event){alert($(this).html());event.stopPropagation();});});</script><body><a href="del?id=1" id="dellink">删除资料</a><div><p>信息</p></div></body>

七、jQuery的Ajax编程

1.回顾传统Ajax开发步骤

①：创建xmlHttpRequest对象var xmlHttp = creatHttpRequest();②：绑定回调函数xmlHttp.onreadystatechange = function(){……}③：建立连接xmlHttp.open(“GET”,”url”);④：发送数据xmlHttp.send(null) //GET请求如果是POST请求需要设置编码格式：xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");xmlHttp.send(“key=value?key=value”)⑤：书写回调函数if(readyState == 4){if(status ==200){……//操作xmlHttp.responseText主要针对返回HTML片段和json//操作xmlHttp.responseXML主要针对返回XML片段。}}

2.jQuery的Ajax开发

jQuery提供了最底层的Ajax调用方法：$.ajax$.ajax{type:”POST”url: “some.php”data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );}}// 因为使用比较繁琐，所以在实际开发中，应用很少为了简化Ajax开发，jQuery提供了对$.ajax（）进一步的封装方法$load、$get、$post。这三个方法不支持跨域，$getJSON、$getScript支持跨域。①：load方法load方法是jQuery中最为简单和常用的Ajax方法，处理HTML片段此方法最为合适。语法$("jquery对象").load("url","data") ;url：Ajax访问服务器地址data：请求参数返回内容HTML片段，自动放入$("jquery对象")innerHTML 中(如果返回的数据需要处理，我们可以使用get或者post) load()方法的传递参数根据参数data来自动自定。如过没有参数的传递，采用GET方式传递，否则采用POST方式练习一：校验用户名是否存在此练习在第五章的第三小节有实现代码，这里使用jQuery的方式进行简要的列出核心代码：$(function(){// 为用户名添加离焦事件$("input[name='username']").blur(function(){// 获得当前输入 usernamevar username = $(this).val();// 提交Ajax校验$("#info").load("/Ajax/checkUsername" , {'username': username});});});<form>用户名 <input type="text" name="username" /> <span id="info"></span> <br/>密码 <input type="password" name="password"/><br/> <input type="submit" value="注册" /></form>②：get方法和post方法语法：$.get/$.post("url","parameter",function(data){...});url Ajax访问服务器地址parameter 代表请求参数function 回调函数 data 代表从服务器返回数据内容这里data代表各种数据内容： HTML片段、JSON、XML 如果传递参数给服务器使用 $.post , 不需要传参数可以使用 $.get

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航