Java___js_将class属性值为itcast的元素下所有a元素的字体变为红色-CSDN博客

脚本语言总结

核心内容概述

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依次从变量(标示符、关键字)，运算符，程序结构(ifwhile for)，以及函数来进行学习。

(1)所有的变量使用var来定义，是弱类型变量，不代表没有类型，变量本身还是有类型的。【var a=10，var b=1.5；他们分别为整数以及浮点数类型】

(2)每行结尾分号可有可无，建议编写。

(3)注释和Java类似，支持单行注释(//)和多行注释(/* */)

③：数据类型

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

原始数据类型：number、string、boolean、null和undefined

引用数据类型：存在很多种，每种都是object对象

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

Demo:

// 定义所有变量都用var，但是变量本身具有类型

vara = 10; // 整数

varb = 1.5; // 浮点数

varc = true; // 布尔

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

vare = 'abc'; // 字符串

// 通过typeof查看数据类型

alert(typeof d)[ThinkPad1] ;

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

alert(d instanceof Object)[ThinkPad2] ;//falae

alert(a instanceof Object);//falae

vars[ThinkPad3] = new String("abc"); // 对象类型

alert(s instanceof Object);

</script>

④：null和undefined的区分

null：对象不存在；

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

2.ECMAScript对象[ThinkPad4]

ECMAScript常用的有7个对象[ThinkPad5] ，依次为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+$[ThinkPad6] ")

"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 == [ThinkPad7] 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[ThinkPad8] = 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][ThinkPad9] ;

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

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"][ThinkPad10] = "dd";

// alert(arr2.length)[ThinkPad11] ;

// alert(arr2[4])[ThinkPad12] ;

// 方式三

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核心语法——函数

①：函数定义的三种方式

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

// 方式一

functionadd(a,b){ // 没有返回值，形参不需要声明类型

returna+b; // 可以返回

}

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

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

varsub = function(a,b){

return a-b;

}

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

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

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

varmul = new Function("a","b","returna*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[ThinkPad13]

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

}

};

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

// alert(obj.name);

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

alert(obj.getName());

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

obj.getAge =function(){

return this.age;

}

alert(obj.getAge());

JavaScript中的对象是通过 newfunction创建的，在Js中function等同于一个类结构

// 定义类结构[ThinkPad15]

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中，所有对象都是通过newfunction得到的

Var Object = function(){...}

Var String = function(){...}

Var Array = function(){...}

Var Date = function(){...}

结论：所有对象构造器都是Function实例

alert(StringinstanceOf Function) //true

alert(Object instanceOf Function) //true

C：创建一个对象，需要使用new function

Var s = new String()[ThinkPad16]

Var o = new Object()

Var arr = new Array()

Var date = new Date()

结论：JavaScript中，一切对象都是object实例

alert(s instanceOf Object) //true

alert(Function instanceOfObject) //true

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

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

alert(f instanceof Function); // true

alert(f instanceof Object); // true

alert(o instanceof Function); // false[ThinkPad19]

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;[ThinkPad20]

this.methodC();[ThinkPad21]

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);[ThinkPad22]

}

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方法打开当前窗口的那个窗口

①：父子窗体之间的通讯[ThinkPad23]

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

显示结果如上图所示，实现思路如下：

子窗体：2.html

<head>

<title>UntitledDocument</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][ThinkPad24] .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("请输入姓名","张三"[ThinkPad25] );

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>

[ThinkPad26] <head>

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

</head>

<body>

</body>

</html>

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

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

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

HTML 本身也是 XML，所有可以使用XML DOMAPI规范

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编程开发[ThinkPad27]

window.document代表整个HTML文档

①：通过document获得Node节点对象

document.forms 获得页面中所有form元素集合

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

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

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

document.getElementById():通过id属性检索，获得Node节点（Element元素）

document.getElementsByName 通过name 属性检索，获得NodeList [ThinkPad28]

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);[ThinkPad29]

h1.innerHTML += "itcast";

}

</script>

<body>

</body>

②：获得node后

如果node是元素，去操作里面的文本内容 innerHTML (HTML页面内所有元素，一定是HTML 元素，innerHTML[ThinkPad30] 是所有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>

functionovertest(){

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

}

</script>

</head>

<body>

</body>

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

<head>

functionovertest(){

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

}

window.οnlοad= function(){

document.getElementById("myimg").onmouseover = overtest[ThinkPad32] ;

}

</script>

</head>

<body>

</body>

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

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

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

<head>

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

function clicktest(o){

alert(o);

}

window.οnlοad= function(){

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

clicktest('次奥');[ThinkPad33]

}

</script>

</head>

<body>

</body>

2.鼠标移动事件

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

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

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

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

click 鼠标单击事件

dbclick 鼠标双击事件

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

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

4.聚焦离焦事件

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

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

Demo:

window.οnlοad=function(){

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

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

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

//聚焦事件

document.getElementById("username").οnfοcus= function(){

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

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

}

//离焦事件

document.getElementById("username").οnblur=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)[ThinkPad34] {

// 火狐浏览器

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

οnsubmit= "return validateForm" 对表单进行校验

7.改变事件

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

重点： onclick 、onchange 、onblur、 onsubmit

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

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

// 阻止默认事件发生

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>

HTMLDOM 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[ThinkPad36] = createXMLHttpRequest();

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

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格式数据[ThinkPad38] 、xml格式数据

①：HTML片段的数据处理

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

Ø 通过xmlhttp.responseText获得返回数据

Ø 通过Dom查找获得元素

Ø 调用元素的innerHTML进行操作

从Ajax编程图解我们可以知道，我们只需要分别编写客户端和服务器端就好。客户端我们以register.html文件为主，服务器端程度为CheckUsernameServlet以及配置文件web.xml。

下面分别对三个文件内容进行展示：

①：register.html

②：CheckUsernameServlet.java

③：web.xml

说明：三个文件的具体内容请双击方框内的图标即可查看，这里推荐使用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串[ThinkPad39]

使用JSONArray可以解析Array类型

JSONArrayjsonArray = JSONArray.fromObject(list变量);

2）将Javabean/Map解析成JSON串

使用JSONObject可以解析javabean类型

JSONObject jsonObject = JSONObject.fromObject(javabean);

3）对象属性过滤转换JSON串

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

JsonConfig jsonConfig [ThinkPad40] = new JsonConfig();

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

导入jsonlib需要的jar包

①：table.html(双击图标即可查看代码)

②：listProducts.java

③：web.xml(需要注意访问路径)

使用json数据格式，优化了性能，但是添加了程序员的代码量。

需要注意：

1)在table.html中点击超链接不发生跳转可以使用如下方法控制：

href="javascript:void(0);"

此外表格的拼接也需要注意

2)在listProducts.java中，注意使用JSONArray将list集合转化成json串：JSONArray.fromObject(products)

另外，发送数据的时候要设置编码格式：response.setContentType

("text/json;charset=utf-8");

3)使用eval将返回的json转换成js对象：

var text = xmlHttp.responseText;

var obj = eval(“(“+text+”)”);

重构练习2

运行效果：

④：XML格式数据处理

练习3：select完成省级联动

1)XStream的使用

问题：服务器端如何将java对象，生成XML格式数据？需要第三方类库支持XStream

XStream is a simple library toserialize 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(Stringname,Class)：将类型解析或者序列化时，取一个别名

代码案例：(序列化)

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

3)XStream注解

在Javabean中进行注解

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

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

@XStreamAsAttribute 设置变量生成属性

@XStreamOmitField 设置变量不生成到XML

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

六、jQuery框架

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

1.jQuery程序快速入门

window.οnlοad= function() {...}

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

①：jQuery[ThinkPad42] 基本使用

传统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九种选择器[ThinkPad43]

选择器是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])

概述

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery1.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");

// $("tabletr: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 checkboxselect 中选中项的值

$(function(){

// 点击button 打印radio checkboxselect 中选中项的值

$("#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内容[ThinkPad44]

html() 读取innerHTML

html(content)设置innerHTML

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

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

$("#eduoption").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下增加<optionvalue="大专">大专</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><ahref='javascript:void(0)' οnclick='del(this)'[ThinkPad46] >删除</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($("#leftoption:selected"));

});

// 全去右边

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

$("#right").append($("#leftoption"));

});

// 全去左边

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

$("#left").append($("#rightoption"));

});

//选中的去左边

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

$("#left").append($("#rightoption:selected"));

});

</script>

</head>

<body>

</select>

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

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

</select>

</body>

5.jQuery事件

①：事件绑定

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

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

写法二

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

……

});

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

写法一

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

});

</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();[ThinkPad48]

}

});

$("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( "DataSaved: " + 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

显示数据类型为string

结果为false，变量d为string类型，属于原始数据类型，不是引用数据类型(对象)

这里的S是对象类型object，前面的d是基本数据类型

核心对象的常见方法仅作为学习的思路，不会没啥关系，查手册即可。

这里提到的为常用的，还有很多其他对象，可查看手册。

^和&分别为开始和结束符号

==比较，自动进行类型转换，如果要使它不进行自动转型，我们可以使用===

自定义日期格式！

JS中，{}代表对象，[]代表数组

JS中不存在越界问题

JS中，length为最大角标+1，此结果为101.

结果为undefined，对应的引用存在，只是值不存在，所以是undefined，而不是null！

之后类似此种格式均为运行结果。

使用[]访问对象属性要使用引号

注意定义类结构与定义对象的区别，不要混淆！

这的String()就是具体的function

在Js中，小写的function(f)代表的是一个类的结构

o代表的是一个对象

对象本身不是Function实例，他是Object实例，Object才是Function的实例。

在E中定义方法，引用C方法。

执行方法，实际是在执行C，---->this.info =‘c’；其中this是E，info被E继承了。

①：改变了this指向；

②：此语句等价于====>

this.methodA = A;

this.methodA();

Delete this.methodA;

常用必备技能，必须掌握！

子窗体只有1个，这里角标为0。

此处2个参数分别为提示信息和默认信息，均为String类型

空格即为1个文本节点。

Node是整个开发的核心。这里简单的总结一下：

①：通过BOM对象window的document属性进行全文检索。

②：检索结果不是Node就是NodeList

③：如果是NodeList就进行遍历，如果是Node操作文本或者属性了。

NodeList有一个length属性和一个item方法。

此行等价于：alert(h1.firstChild.nodeValue);

它不是所有xml元素通用属性

方式一：在HTML元素中添加对象事件

捆绑函数不能加括号！

使用匿名函数可以解决此类问题

这里需要考虑浏览器兼容问题

如果以后开发涉及到写原始JavaScript，那么兼容性需考虑！

XMLHttpRequest对象的方法：open send

属性：

①onreadystatechange ：状态回调函数

②readyState ：对象状态

③status：服务器返回的HTTP状态码

④responseText/responseXML：服务器的响应字符串

⑤statusText: 服务器返回的HTTP状态信息

回调函数编写模式固定，主要负责处理数据

重点练习！接下来的3个练习希望能独立完成！

截图内容注意看转后后json串的格式

创建1个jsonConfig对象

配置product对象的price属性不参与转换，这里需要的是一个String类型的数组

jQuery可以绑定多个onload函数，而传统模式只能绑定一个函数，后面的会将前面的覆盖掉。

选择器以练习为主，练习里面结合了jQuery手册里面涵盖的所有方法，请大家多写练习代码

这个函数不能用于XML文档。但可以用于XHTML文档

该方法既可以用于 XHTML也可以用于 XML 文档

jQuery不推荐这么干，在后面事件绑定章节会进行优化！【实时追加事件】

$(“a:contains(‘删除’)”)

.live(“click”,function(){

$(this).parents(“tr”).remove();

});

新加元素使用bind绑定，无法使用绑定的事件，live绑定可以！

之前在IE中是不兼容的，jQuery中完美解决兼容性问题