没有合适的资源?快使用搜索试试~ 我知道了~
韩顺平AJAX和jquery笔记整理
需积分: 13 17 下载量 40 浏览量
2018-04-23
21:15:18
上传
评论 1
收藏 1.78MB PDF 举报
温馨提示
试读
80页
韩顺平AJAX和jquery笔记整理,对于学习jquery和AJAX有很大的帮助。
资源推荐
资源详情
资源评论
第一天 .............................................................................................................................................. 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
改变元素名为 <div> 的所有元素的背景色为 #00FFFF........................................... 28
改变所有元素的背景色为 #00FF33 ............................................................................ 28
改变所有的<span>元素和 id 为 two class .mini 的元素的背景色为 #3399FF ...... 29
2 层次选择器 ................................................................................................................. 30
改变 <body> 内所有 <div> 的背景色 ....................................................................... 32
改变 <body> 下 <div> 的背景色 body > div ............................................................ 32
改变 id 为 one 的下一个 <div> 的背景色#one + div ............................................. 33
改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色'#two ~ div' ............ 33
改变 id 为 two 的元素所有 <div> 兄弟元素的背景色 .......................................... 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> 元素的值 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
<html>
<head>
<title>用户注册</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
//创建 ajax 引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象 xmlhttprequest 对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
//验证用户名是否存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建 ok
if(myXmlHttpRequest){
//通过 myXmlHttpRequest 对象发送请求到服务器的某个页面
//第一个参数表示请求的方式, "get" / "post"
//第二个参数指定 url,对哪个页面发出 ajax 请求(本质仍然是 http 请
剩余79页未读,继续阅读
资源评论
huoju3752
- 粉丝: 2
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功