HTML5程序的设计基础教程第14章jQuery程序的设计.ppt

;第14章 jQuery程序设计 ;本章知识点;14.1 jQuery基础 ;14.1.1 下载jQuery ;【例14-1】 一个jQuery 编程的简单实例 ;实例说明如下 ;提示 ;【例14-2】 ;14.2 jQuery选择器 ;14.2.1 基础选择器 ;1．#Id ;2．使用标签名 ;3．根据元素的css类选择 ;【例14-3】 ;浏览【例14-3】的结果 ;4．选择所有HTML元素 ;【例14-4】 演示选择所有HTML元素的简单实例 ;浏览【例14-4】的结果 ;5．同时选择多个HTML元素 ;【例14-5】 ;浏览【例14-5】的结果 ;14.2.2 层次选择器 ;1．ancestor descendant（祖先 后代）选择器;【例14-6】 ;浏览【例14-6】的结果 ;2．parent child（父 子）选择器 ;【例14-7】 ;接上;浏览【例14-7】的结果 ;3．prev + next（前 + 后）选择器 ;【例14-8】 ;浏览【例14-8】的结果 ;4．prev ～ siblings（前 ～ 兄弟）选择器;【例14-9】 ;接上;浏览【例14-9】的结果 ;14.2.3 基本过滤器 ;1．:first ;【例14-10】 ;浏览【例14-10】的结果 ;2．:last ;3．:not(选择器) ;4．:even ;5．:odd ;6． :eq(index) ;7． :gt(index) ;8． :lt(index) ;9． :header ;【例14-11】 ;浏览【例14-11】的结果 ;10． : animated ;14.2.4 内容过滤器 ;1．:contains() ;【例14-12】 ;浏览【例14-12】的结果 ;2．:empty() ;3．:has() ;4．:parent() ;【例14-13】 ;浏览【例14-13】的结果 ;14.2.5 可见性过滤器 ;【例14-14】 ;浏览【例14-14】的结果 ;14.2.6 属性过滤器 ;1．[属性名] ;【例14-15】 ;浏览【例14-15】的结果 ;2．[属性名=值] ;【例14-16】 ;浏览【例14-16】的结果 ;3．[属性名!=值] ;4．[属性名^=值] ;5．[属性名$=值] ;6．[属性名*=值] ;7．复合属性过滤器 ;14.2.7 子元素过滤器 ;1．:nth-child(index/even/odd/equation);【例14-17】 ;浏览【例14-17】的结果 ;2．:first-child;3．:last-child;4．:only-child;14.3 设置HTML元素的属性与CSS样式 ;14.3.1 设置HTML元素的属性 ;1．通过DOM对象访问HTML元素的属性 ;遍历元素 ;【例14-18】 ;2．使用attr()方法访问HTML元素的属性 ;【例14-19】 ;表单的常用属性及说明 ;3．使用removeAttr()方法删除HTML元素的属性 ;【例14-20】 ;4．使用text()方法设置HTML元素的文本内容 ;【例14-21】 ;14.3.2 设置CSS样式 ;1．使用css()方法获取和设置CSS属性 ;2．与HTML类别有关的方法 ;【例14-22】 ;浏览【例14-22】的结果 ;３．获取和设置HTML元素的尺寸 ;【例14-23】 ;???上;浏览【例14-23】的结果 ;4．获取和设置元素的位置 ;5．滚动条相关 ;14.4 表单编程 ;14.4.1 表单选择器 ;1．:input ;【例14-24】 演示:input选择器的简单实例 ;接上; 浏览【例14-24】的结果 ;2．:text ;【例14-25】 演示: text选择器的简单实例 ;接上;浏览【例14-25】的结果 ;3．:password ;4．:radio ;5．:checkbox ;6．:submit ;7．:image ;8．:reset ;9．:button ;10．:file ;14.4.2 表单过滤器 ;1．:enabled ;【例14-26】 演示:enabled过滤器的简单实例;浏览【例14-26】的结果 ;2．:disabled ;3．:checked ;【例14-27】 演示: checked过滤器的简单实例 ;接上;浏览【例14-27】的结果 ;4．:selected ;14.4.3 表单API ;1．blur()方法和focus()方法 ;提示 ;【例14-28】 ;【例14-29】 ;2．change()方法 ;提示 ;【例14-30】 演示change()方法简单实例 ;浏览【例14-30】的结果 ;3．select()