jQuery完美版教学 说明.docVIP

昨天内容回顾 json使用 数据交换格式：json、xml php里边：json_encode(数组/对象) json_decode(json字符串) FormData收集表单信息 普通表单域 和 上传文件域 信息都可以收集 注意： ① 主流浏览器支持使用 ② 有name属性 ③ 不用设置header头( setRequestHeader) ④ 不用设置enctype属性(有上传文件域) ⑤ 表单域信息里边有特殊内容( = 空格 + ?等)无需编码 大附件上传进度条显示 ajax对象.upload.onprogress事件，该事件0.1秒就会执行一次 天气预报 ajax由于浏览器限制，禁止跨域请求 解决：可以利用php代理解决。 二. jQuery 1. 什么是jquery 其是对javascript封装的一个框架包 简化对javascript的操作 javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象 jquery代码：无需考虑浏览器兼容问题、代码足够少 2. 宗旨和特点 特点： 语法简练、语义易懂、学习快速、丰富文档。 jQuery 是一个轻量级的脚本，其代码非常小巧 jQuery 支持 CSS1~CSS3 定义的属性和选择器 jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。 能将 JavaScript 脚本与 HTML 源代码完全分离，便于后期编辑和维护。 插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能 3. 出现的年代 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架，由 John Resig 于 2006 年初创建， 目前最新版本为 1.11.2，官方地址为：/，中文地址为 /。 4. 其他相关的javascript框架包 Prototype、YUI、Extjs、bindows、JSVM(国内)、mootools、jQuery Prototype：与面向对象的原型继承关键字一致，该框架的特点是功能扩展比较容易。 YUI: yahoo user interface 雅虎用户接口，该框架可以实现各种页面布局效果。 例如效果之一：标签切换对应内容 Extjs: 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。 该框架可以实现效果之一：页面不同区域进行拖拽效果。 该框架由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。 jQuery：javascript+query 使用前期，jquery侧重快速找到页面上各种节点。 后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。 jquery的版本： 1.0.0 1.0.1 1.0.2 1.1.x 1.2.1 1.2.x 1.3.x 1.4.x 1.5.x.........1.11.2 简单使用 三. 选择器 在页面上获得各种元素节点对象而使用的条件就是选择器。 document.getElementById() document.getElementsByTagName(); document.getElementsByName(); 基本选择器 $(‘#id属性值’) -----------document.getElementById() $(‘tag标签名称’)-----------document.getElementsByTagName(); $(‘.class属性值’) class属性值选择器 $(‘*’) 通配符选择器 $(‘s1,s2,s3’)联合选择器 2. 层次选择器 2.1 $(s1 s2) [父子] 派生选择器：在s1内部获得全部的s2节点(不考虑层次) $(“div span”) div span/span p span/span /p /div span/span 2.2 $(s1 s2) [父子] 直接子元素选择器:在s1内部获得s2的子元素节点 $(“div span”) div span/span p span/span /p span/span /div span/span 2.3 $(s1 + s2) [兄弟] 直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点 $(“div + span”) div span/span p span/span /p span/span /div span/span span/span div/div span/span 2.4 $(s1 ~ s2) [兄弟] 后续全部