第一天 .............................................................................................................................................. 3
ajax是什么 ....................................................................................................................... 3 ajax 的运行原理分析 ...................................................................................................... 3 ajax在什么地方用的多 ................................................................................................... 4 使用ajax与服务器通信的的步骤 .................................................................................. 4 ajax的post方式请求 ...................................................................................................... 8 ajax处理返回xml ............................................................................................................ 9 ajax处理返回的json ..................................................................................................... 12 小结: ............................................................................................................................... 13 省市联动 ......................................................................................................................... 14 黄金价格波动图 ............................................................................................................. 17
第二天 ............................................................................................................................................ 20
ajax实现聊天室的功能 ................................................................................................. 20
第4天 ............................................................................................................................................ 22
jquery是什么 ................................................................................................................. 22 为什么需要javascript框架? ......................................................................................... 22 目前流行的js ................................................................................................................. 22 安装js开发插件(apatana) ............................................................................................. 22 快速入门案例 ................................................................................................................. 23 为什么可以使用jquery方法? ....................................................................................... 24 jquery对象和dom对象切换 ........................................................................................ 24 jquery的选择器 ..................................................................................................................... 26
1 基本选择器 ................................................................................................................. 26 改变 class 为 mini 的所有元素的背景色为 #FF0033 ............................................. 28 改变元素名为 的所有元素的背景色为 #00FFFF........................................... 28 改变所有元素的背景色为 #00FF33 ............................................................................ 28 改变所有的元素和 id 为 two class .mini 的元素的背景色为 #3399FF ...... 29 2 层次选择器 ................................................................................................................. 30 改变 内所有 的背景色 ....................................................................... 32 改变 下 的背景色body > div ............................................................ 32 改变 id 为 one 的下一个 的背景色#one + div ............................................. 33 改变 id 为 two 的元素后面的所有兄弟的元素的背景色'#two ~ div' ............ 33 改变 id 为 two 的元素所有 兄弟元素的背景色 .......................................... 33 3 过滤选择器 ................................................................................................................. 33 3.1 基础过滤选择器 ...................................................................................................... 34 改变第一个 div 元素的背景色:eq(0) .......................................................................... 37 改变最后一个 div 元素的背景色:last ......................................................................... 37 改变class不为 one 的所有 div 元素的背景色:not(.one) ......................................... 37 改变索引值为偶数的 div 元素的背景色:odd ............................................................. 37 改变索引值为大于 3 的 div 元素的背景色:gt(3) ..................................................... 38 改变索引值为等于 3 的 div 元素的背景色:eq(3) .................................................... 38 改变索引值为小于 3 的 div 元素的背景色:lt(3) ...................................................... 38 改变所有的标题元素的背景色:header ......................................................................... 38 改变当前正在执行动画的所有元素的背景色:animated ............................................. 39
3.2 内容选择器 .............................................................................................................. 41 改变含有文本 ?di? 的 div 元素的背景色:contains('di') ............................................. 43 改变不包含子元素(或者文本元素) 的 div 的背景色:empty .................................... 43 改变含有 class 为 mini 元素的 div 元素的背景色:.mini ....................................... 44 改变含有子元素(或者文本元素)的div元素的背景色:parent .................................... 44 改变不含有文本 di; 的 div 元素的背景色:not(contains('di') .................................... 44 改变索引值为大于 3 的 div 元素的背景色:gt(3) ..................................................... 44 3.3 可见度选择器 .......................................................................................................... 44 改变所有可见的div元素的背景色:visible .................................................................. 45 选取所有不可见的元素并设置其背景:hidden，show() 方法 .................................... 45 选取所有的文本隐藏域, 并打印它们的值 .................................................................. 45 如何使用 each对数组遍历（重要） ........................................................................... 46
第6天 ............................................................................................................................................ 47
3.4 属性选择器（不以 : 开头） ................................................................................. 47 含有属性title 的div元素div[title].............................................................................. 48 属性title值等于test的div元素div[title=?test?] ......................................................... 49 属性title值不等于test的div元素div[title!='test']..................................................... 49 属性title值 以te开始 的div元素div[title^='te'] ..................................................... 49 属性title值 以est结束 的div元素div[title$='est'] .................................................. 49 属性title值 含有es的div元素div[title*='es'] .......................................................... 49 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素div[id][title*='es'] ............................................................................................................ 50 3.5 子元素选择器 .......................................................................................................... 50 每个class为one的div父元素下的第2个子元素div .one:nth-child(1) .................. 52 每个class为one的div父元素下的第一个子元素div .one:first-child ...................... 52 每个class为one的div父元素下的最后一个子元素div .one:last-child ................... 53 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素div .one:only-child .......................................................................................................... 53 3.6表单对象选择器 ....................................................................................................... 53 获取表单元素的两种方式 ............................................................................................. 55 改变表单内 type=text 可用 元素的值input[type='text']:enabled ............... 57 获取多选框选中的个数input[type='checkbox']:checked ............................................. 58 获取下拉框选中的内容select option:selected .............................................................. 58 总结一下过滤器使用的方式 ......................................................................................... 59 jquery对象集合遍历的四种形式 .................................................................................. 59 总结如何使用我们的选择器 ......................................................................................... 59 jquery如何操作dom ..................................................................................................... 60
第7天 ............................................................................................................................................ 61
创建对象 ......................................................................................................................... 61 一步到位添加重庆li到 上海下（有缺陷） ............................................................... 63 逐步添加我们的dom对象 ............................................................................................ 64 append和appendTo的区别........................................................................................... 64 添加成都li到 北京前................................................................................................... 64 外部插入在北京后面添加成都 ..................................................................................... 65
使用jquery去查找某对象，如果这个对象(id/class...)不存在，jquery不报错, val()......................................................................................................................................... 65 删除节点 ......................................................................................................................... 66 删除所有p ...................................................................................................................... 67 所有p清空 ..................................................................................................................... 67 删除上海这个li ............................................................................................................. 67 复制节点clone ............................................................................................................... 68 clone()和clone(true) ....................................................................................................... 69 节点替换replaceWith .................................................................................................... 69 在jquery开发中有这样几个函数，可以获取值，同时也可以设置值 ..................... 70 当dom对象加载完毕后，给 b1绑定一个focus事件 .............................................. 72 再绑定一个事件 blur .................................................................................................... 72 如何获取子元素和兄弟元素的方法 ............................................................................. 73 查找所有子元素（class 为 one 的div的子元素) children ....................................... 75 获取后面的同辈元素（class 为 one 的div的子元素) nextAll ................................ 75 获取前面的同辈元素（class 为 one 的div的子元素) prevAll ................................ 75 获取所有的同辈元素siblings ....................................................................................... 76 jquery和ajax整合的使用方法（重要） ..................................................................... 78 传统的ajax步骤 ............................................................................................................ 78 1，load(url,[data,],[callfunction]) ................................................................................... 78 2，get(url,[data,][callfunction]); ..................................................................................... 79 3，post(url,[data,][callfunctino]); ................................................................................... 79
第一天
ajax是什么 ？
① ajax(asynchronouse javascript and xml) 异步的javascript 和 xml ② 是7种技术的综合,它包含了七个技术( javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一个粘合剂, ③ ajax是一个与服务端语言无关的技术. 即可以使用在(php/java ee/.net网站/ asp) ④ ajax可以给客户端返回三种格式数据(文本格式 ，xml , json格式) ⑤ 无刷新数据交换技术有以下: flash, java applet, 框架, iframe, ajax)
ajax 的运行原理分析
看一个需求:
ajax在什么地方用的多
1 动态加载数据，按需取得数据。【树形菜单、联动菜单.../省市联动】 2 改善用户体验。【输入内容前提示、带进度条文件上传...】
3 电子商务应用。 【购物车、邮件订阅...】
4 访问第三方服务。 【访问搜索服务、rss阅读器】 5. 数据的布局刷新
? 经典的案例
使用ajax与服务器通信的的步骤
① 创建一个XMLHttpRequest对象 ② 创建url,data,通过 xmlHttpRequest.send() ③ 服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果(echo 语
句) ④ 客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据，然后就完成局部刷新当前页面任务
1. 使用 ajax完成用户名的验证
register.php
//创建ajax引擎
function getXmlHttpObject(){ var xmlHttpRequest; //不同的浏览器获取对象xmlhttprequest 对象方法不一样 if(window.ActiveXObject){ xmlHttpRequest=new ActiveXObject(\ }else{ xmlHttpRequest=new XMLHttpRequest(); } return xmlHttpRequest;
}
var myXmlHttpRequest=\
//验证用户名是否存在 function checkName(){ myXmlHttpRequest=getXmlHttpObject(); //怎么判断创建ok if(myXmlHttpRequest){ //通过myXmlHttpRequest对象发送请求到服务器的某个页面 //第一个参数表示请求的方式, \ //第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请