脚本语言知识总结.

核心内容概述

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进行引入】

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

// 编写JavaScript代码

alert(1);

</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:

// 定义所有变量都用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个对象，依次为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+") ---- 返回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() 返回当地本地化日期格式 2012年12月12日 11:07:52

getTime() 返回从1970年1月1日到目前为止毫秒值

Demo：

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：

// 定义数组使用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核心语法——函数

①：函数定义的三种方式

注意：第二种方式使用越来越多，第三种不常用，第一种常用

// 方式一

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创建的，在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 //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属性，动态修改对象属性和方法。

④：继承

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

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

<title>Untitled Document</title>

function showOutter(){

// 获得输入内容

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

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

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

}

</script>

</head>

<body>

</body>

主窗体：1.html

<head>

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

function showContent(){

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

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

alert(content);

}

</script>

</head>

<body>

</body>

②：window的open close

<head>

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

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

var openNew;

function openWindow(){

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

}

//关闭的时候需要注意关闭的是打开的网页，而不是本身

function closeWindow(){

openNew.close();

}

</script>

</head>

<body>

</body>

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

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

alert("这是警告框！")

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

alert(con);

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

alert(msg);

</script>

④：定时操作setInterval & setTimeout

setInterval：定时任务会重复执行

setTimeout：定时任务只执行一次

在页面动态显示当前时间

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>

</body>

2.history 对象

代表历史记录，常用来制作页面中返回按钮

3.Location 对象

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

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

三、JavaScript文档对象模型DOM

<html>

<head>

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

</head>

<body>

</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 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 属性检索，获得NodeList

document.getElementsByTagName 通过标签元素名称获得NodeList

其中NodeList可以作为数组进行操作

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

//在每一个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>

</body>

②：获得node后

如果node是元素，去操作里面的文本内容 innerHTML (HTML页面内所有元素，一定是HTML 元素，innerHTML 是所有HTML元素通用属性 )

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

③：通过节点Node相对位置关系访问元素

childNodes

firstChild

lastChild

nextSibling

parentNode

previousSibling

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

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(新节点,被替换节点) ;

如果对于一个已经存在节点，执行 appendChild、 replaceChild都会造成该节点一个移动效果，可以采取先克隆再复制来消除此效果。

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

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

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

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

此节内容有大量的练习，建议大家做写，增强代码的熟练度。

四、JavaScript事件

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在，事件通常可以修饰多种对象。

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

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

<head>

function overtest(){

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

}

</script>

</head>

<body>

</body>

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

<head>

function overtest(){

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

}

window.onload = function(){

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

}

</script>

</head>

<body>

</body>

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

问题：HTML 元素添加事件，与JS添加事件是否可以完全等价？

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

<head>

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

function clicktest(o){

alert(o);

}

window.onload = function(){

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

clicktest('次奥');

}

</script>

</head>

<body>

</body>

2.鼠标移动事件

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

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

Mouseout：鼠标从元素上，移出元素范围，和mouseover一起使用

3.鼠标点击事件（左键相关事件）

click 鼠标单击事件

dbclick 鼠标双击事件

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

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

4.聚焦离焦事件

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

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

Demo:

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:

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 、onblur、 onsubmit

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

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

// 阻止默认事件发生

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>

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

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

// 第一步创建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格式数据？需要第三方类库支持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)：将类型解析或者序列化时，取一个别名

代码案例：(序列化)

解析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.js

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

1.jQuery程序快速入门

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

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

①：jQuery基本使用

传统Js写法：

window.onload = function(){

alert("传统JS，Ok");

}

</script>

jQuery写法：

$(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:

$(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标签

$(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

$(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>

<p>info

</p>

</div>

</p>

</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背景绿色

$(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>

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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字体为蓝色

$(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>

</body>

⑤：可见性过滤选择器

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

:hidden 选取所有不可见元素 $("tr:hidden")

:visible 选取所有可见的元素 $("tr:visible")

练习5：

² 为表单中所有隐藏域添加 class属性，值为itcast

² 设置table所有可见 tr 背景色黄色

² 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值

$(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" />

</form>

<table>

</tr>

</tr>

<tr>

</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标签中内容

$(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>

<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元素字体为蓝色

$(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>

</body>

⑧：表单过滤选择器

选取表单元素的过滤选择器

:input 选取所有<input>、<textarea>、<select >和<button>元素

:text 选取所有的文本框元素

:password 选取所有的密码框元素

:radio 选取所有的单选框元素

:checkbox 选取所有的多选框元素

:submit 选取所有的提交按钮元素

:image 选取所有的图像按钮元素

:reset 选取所有重置按钮元素

:button 选取所有按钮元素

:file 选取所有文件上传域元素

:hidden 选取所有不可见元素

练习8：

² 对所有text框和password框，添加离焦事件，校验输入内容不能为空

² 对button 添加点击事件，提交form表单

$(function(){

// 对所有text框和password框，添加离焦事件，校验输入内容不能为空

$(":text,:password").blur(function(){

// 获得表单元素内容 val()

var value = $(this).val(); // 获得value 属性

// 将输入内容 trim

if($.trim(value) == "" ){

alert("用户名和密码不能为空");

}

});

// 对button 添加点击事件，提交form表单

$(":button").click(function(){

$("#myform").submit();

});

</script>

<body>

用户名 <input type="text" name="username" /><br/>

密码 <input type="password" name="password" /><br/>

性别 <input type="radio" name="gender" value="男" />男

城市 <select name="city">

</select>

个人简介 <textarea rows="5" cols="60" name="introduce"></textarea>

</form>

</body>

⑨：表单对象属性过滤选择器

选取表单元素属性的过滤选择器

:enabled 选取所有可用元素

:disabled 选取所有不可用元素

:checked 选取所有被选中的元素，如单选框、复选框

:selected 选取所有被选中项元素，如下拉列表框、列表框

练习9：

² 点击button 打印radio checkbox select 中选中项的值

$(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="checkbox" name="hobby" value="体育" />体育

<input type="checkbox" name="hobby" value="读书" />读书

<input type="checkbox" name="hobby" value="音乐" />音乐

城市：<select name="city">

</select><br/>

</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

² 尝试能否设置一个不存在的属性？

// 点击一个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>

</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) 实现点击字体变为紅色，再点击样式还原

$(function(){

// 点击button，使一个div的背景颜色变为黄色

$("#button1").click(function(){

$("#div1").css("background-color","yellow");

});

// 通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原

$("#button2").click(function(){

$("#div1").toggleClass("divclass");

});

</script>

.divclass {

color:red;

}

</style>

<body>

<div id="div1">AAAAAA</div>

</body>

④：HTML代码&文本&值操作

l 读取和设置某个元素中HTML内容

html() 读取innerHTML

html(content) 设置innerHTML

l 读取和设置某个元素中的文本内容

text() 读取文本内容

text(content) 设置文本内容

l 文本框、下拉列表框、单选框选中的元素值

val() 读取元素value属性

val(content) 设置元素value属性

练习3：

² <div><p>传智播客</p></div> 获取div中 html和text 对比

² 使用val() 获得文本框、下拉框、单选框选中的value

² 测试能否通过 val() 设置单选框、下拉框的选中效果

$(function(){

// <div><p>传智播客</p></div> 获取div中 html和text 对比

var $obj = $("<div><p>传智播客</p></div>");

//alert($obj.html());

//alert($obj.text());

//使用val() 获得文本框、下拉框、单选框选中的value

$("#mybutton").click(function(){

alert($("#username").val());

alert($("input[name='gender']:checked").val());

alert($("#city").val());

});

//测试能否通过 val() 设置单选框、下拉框的选中效果

$("#city").val("广州");

$("input[name='gender']").val(['女']);

});

</script>

</head>

<body>

用户名 <input type="text" id="username" /> <br/>

性别 <input type="radio" name="gender" value="男" />男

城市 <select id="city">

</select> <br/>

</body>

设置 val控制radio select checkbox 选中

$("#city").val("广州");

$("input[name='gender']").val(['女']);

练习4：

² 输出所有select元素下的所有option元素中对应的文本内容

例如:<option value="中专">中专^^</option> 输出--->中专^^

$(function(){

$("#edu option").each(function(){

alert($(this).text());

});

</script>

</head>

<body>

</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>

$(function(){

// 追加 option 内容大专

// 创建元素

var $newNode = $("<option value='大专'>大专</option>");

// 添加元素

//$("#edu").append($newNode); // 内部结尾

//$("#edu").prepend($newNode); // 内部开始

//$("option[value='本科']").after($newNode);

$newNode.insertBefore($("option:contains('高中')"));

});

</script>

<body>

</select>

⑥：jQuery删除元素

选中要删除元素.remove() ---- 完成元素删除

选中要删除元素.remove(expr) ----- 删除特定规则元素

remove删除节点后，事件也会删除

detach删除节点后，事件会保留从1.4新API

练习6：

² 分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在

$(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>

</body>

练习7：

² 表格数据添加与删除练习

$(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/>

</form>

<hr/>

<tr>

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

² 全选练习

$(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" name="hobby" value="足球" /> 足球

<input type="checkbox" name="hobby" value="篮球" /> 篮球

<input type="checkbox" name="hobby" value="游泳" /> 游泳

</body>

练习9：

² 左右移动练习

$(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>

<input type="button" value="-->" id="chooseToRight" />

<input type="button" value="==>" id="allToRight" />

</select>

</body>

5.jQuery事件

①：事件绑定

传统js 一般一个对象只能绑定某种事件一个函数

jQuery 支持对同一个对象，同一个事件可以绑定多个函数

绑定事件函数到对象有两种写法

写法一

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

……

});

取消绑定：$("div").unbind("click");

*** live 为满足条件对象，实时追加绑定、取消live事件用die方法

Demo:

$(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>

</body>

②：事件一次性绑定和自动触发

一次性事件 one(type, [data], fn) 为对象绑定一次性事件，只有一次有效

触发事件 trigger(type, [data]) 触发目标对象指定的事件执行

练习1：

² 为页面内所有p 元素绑定一次性事件，点击打印p元素中内容

² 页面内有两个按钮，点击按钮1，触发按钮2的 click事件执行

$(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>

</body>

③：事件切换

hover(mouseover,mouseout) 模拟鼠标悬停事件

toggle(fn1,fn2,fn3...) ; 鼠标点击一次触发一个函数

练习1：

² 编写一个div元素，光标移动上去字体变为红色，移开后变为蓝色

² 建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张

$(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>

</body>

④：事件阻止默认动作和传播

l 默认动作阻止

$("a").click(function(event){

event.preventDefault();

// do something

});

l 取消事件冒泡

$("p").click(function(event){

event.stopPropagation();

//do something

});

$(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>

</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(){

// 获得当前输入 username

var 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/>

</form>

②：get方法和post方法

语法：

$.get/$.post("url","parameter",function(data){...});

url Ajax访问服务器地址

parameter 代表请求参数

function 回调函数 data 代表从服务器返回数据内容

这里data代表各种数据内容： HTML片段、JSON、XML

如果传递参数给服务器使用 $.post , 不需要传参数可以使用 $.get

发表于 2018-02-07 14:59 木土aaa 阅读(281) 评论(0) 编辑收藏举报

刷新页面返回顶部

脚本语言知识总结.

脚本语言知识总结.

核心内容概述

一、JavaScript基础加强

1.ECMAScript核心语法

2.ECMAScript对象

3.ECMAScript核心语法——函数

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

二、JavaScript浏览器对象BOM

1.window对象

2.history 对象

3.Location 对象

三、JavaScript文档对象模型DOM

1.BOM和HTML DOM关系图

2.DOM编程开发

3.DOM元素常见操作

四、JavaScript事件

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

2.鼠标移动事件

3.鼠标点击事件（左键相关事件）

4.聚焦离焦事件

5.键盘事件

6.form的提交、重置事件

7.改变事件

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

五、Ajax编程入门

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

2.Ajax快速入门

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

六、jQuery框架

1.jQuery程序快速入门

2.jQuery九种选择器

3.jQuery选择器总结

4.jQuery的DOM操作

5.jQuery事件

七、jQuery的Ajax编程

1.回顾传统Ajax开发步骤

2.jQuery的Ajax开发

公告