Web前端开发技术与案例教程 课件 第九章 jQuery.pptx

;8.1 JavaScript基础 8.2 JavaScript基本语法 8.3 JavaScript对象 8.4 JavaScript事件 8.5 Ajax 8.6 案例;9.1 jQuery 9.2 eCharts 9.3 案例;9.1 jQuery;9.1 jQuery;9.1.1 jQuery选择器;9.1.1 jQuery选择器;层级选择器 根据HTML文档中各元素间的结构关系进行匹配选择的一种方式。 包含选择器：$(ancestor descendant) 子选择器：$(parentchild) 相邻选择器：$(prev+next) 兄弟选择器：$(prev~bro) ;过滤选择器 用来筛选特殊需求的DOM元素，以西文冒号“:”作为标识。 基本过滤器 子元素过滤器 内容过滤器 可见性过滤器 ;过滤选择器 基本过滤器 ;过滤选择器 子元素过滤器 ;过滤选择器 内容过滤器 根据匹配的元素内容进行筛选的一类选择器。;过滤选择器 可见性过滤器 根据根据元素是否隐藏来筛选元素。;过滤选择器 表单选择器 基本表单选择器;过滤选择器 表单选择器 表单属性选择器;CSS样式 使用css()函数来获取、设置指定元素的相关样式。;定位 DOM通过 Left和Top值来表示元素左边界和上边界相对于定位点的位置； ;大小 jQuery使用width()和height()方法获取、设置元素大小。;9.1.3 jQuery操作文档;内容操作 可通过html()和text()方法，返回或设置HTML文档的内容。 ;元素操作 插入 删除 替换 克隆 包裹 ;元素操作 插入 ;元素操作 删除 替换 ;元素操作 克隆 clone([includeEvent]) 包裹 ;属性操作 ;9.1.2 jQuery事件;jQuery封装事件 ;属性;Event对象 ;9.1.5 jQuery效果;简单效果 ;自定义效果 可以实现CSS属性集的自定义动画，通过CSS样式将元素从一种 状态逐渐改变为另一个状态。 animate(styles[ ,options]) style是产生动画效果的CSS样式和终值，且终值必须为数值， 不能为属性； options是可选的额外选项。 ;自定义效果 animate(styles[ ,options]) ;自定义效果 animate(styles[ ,options]) ;自定义效果 animate(styles[ ,options]) ;9.1.6 jQuery Ajax;jQuery对Ajax进一步封装，减少参数、简化操作， 但适用面也窄。 get(options)、post(options)方法是两个最常用的方法: ;38;39;40;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.2 eCharts基本使用;9.2.3 eCharts API;9.2.3 eCharts API;9.2.3 eCharts API;9.2.3 eCharts API;9.2.3 eCharts API;9.2.3 eCharts API;9.2.3 eCharts API;9.2.3 eCharts API;eCharts配置项 配置项可以包含不同的组件，不同的组件有不同的属性，用{}括起来，属性名和值采用“名:值”的键值对形式，多个属性间用“,”分隔。 （1）title （2）xAxis、yAxis （3）tooltip （4）series;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4 eCharts组件;9.2.4