jQuery页面特效jquery页面特效.ppt

第10章jQuery页面特效jQuery是一个基于JavaScript的开源框架。与JavaScript相比，jQuery具有代码高效、浏览器兼容性更好等特征，极大地简化了对DOM对象、事件处理、动画效果的操作。本章学习jQuery的基本知识，并运用jQueryUI以及jQuerymobile进行页面特效制作。了解jQuery和jQueryUI以及jQuerymobile的基本特点和基本应用理解jQuerymobile的移动互联网基本应用方法掌握各种jQueryUI常用插件的的基本功能能熟练使用jQuery制作页面特效。

内容安排jQuery基础10.1jQueryUI10.2jQuerymobile10.3小试牛刀10.4

10.1jQuery基础jQuery的设计理念是“写得更少，做得更多”（TheWriteLess，DoMore），是一种将JavaScript、CSS、DOM等特征集于一体的强大框架，通过简单的代码来实现各种页面特效。用户可以在jQuery的官方网站/下载最新的jQuery库。jQuery有两个版本的库可供下载：一个版本用于实际的网站中，是已被精简和压缩的min版；另一个版本用于测试和开发，是未压缩的。本书采用的是jquery-3.6.0.min.js。“3.6.0”是版本号。jQuery不需要安装，把下载的jQuery库存入网站上的一个公共位置（通常保存在一个独立的文件夹js中），想要在某个页面中使用jQuery时，要事先引入该jQuery库文件（也可以直接引用互联网的地址）。

jQuery基础jQuery工厂函数与选择器jQuery中被誉为工厂函数的是“$()”。在jQuery中，无论我们使用哪种类型的选择器，都需要从一个“$”符号和一对“()”开始。例如，$(div)表示文档中全部的div元素对象；$(#tt)表示文档中id属性值为tt的一个元素对象；$(.red)表示文档中使用CSS类名为red的所有元素对象。$(document)选中的是整个html所有元素的集合，也就是整个网页文档对象。1.jQuery入口函数jQuery使用$(document).ready()方法代替传统JavaScript的window.onload事件，表示获取文档对象就绪的时候。jQuery库只建立一个名为jQuery的对象，其所有函数都在该对象之下，该函数称为jQuery入口函数。jQuery入口函数有两种写法，分别是：（1）入口函数完整写法：$(document).ready(function(){程序代码段…})（2）入口函数简略写法：$(function(){程序代码段…})2.jQuery语法结构jQuery语法是为HTML元素的选取而编制的，可以对元素执行某些操作。其基础语法是：$(selector).action()（1）美元符号$定义jQuery；（2）选择器（selector）用于“选择”HTML元素；（3）jQuery的action()用于执行对元素的操作。

jQuery基础10.13.jQuery选择器在页面中要为某个元素添加属性或事件时，第一步必须先准确地找到这个元素。在jQuery中可以通过选择器来实现这一重要功能。（1）selector为CSS选择器，列表如表10-1所示。选择器举例说明标签选择器$(a)选择所有的a标签群选择器$(h1,h2,h3)选择所有的h1标签、h2标签和h3标签id选择器$(#myId)选择id为myId的网页元素类选择器$(.myClass)选择class为myClass的元素属性选择器$(input[name=tt])选择name属性等于tt的input元素后代选择器$(diva)选择div里面的a元素父子选择器$(diva)选择div里面的子元素为a元素兄弟选择器$(div+img)选择div元素后的img元素伪类选择器$(div:first-child)选择div元素，该div元素位于父元素下的第一元素

jQuery基础10.1（2）selector为jQuery过滤选择器，列表如表10-2所示：选择器举例说明:first$(a:first)选择网页中第1个a元素:odd$(tr:odd)选择表格的奇数行:even$(tr:even)选择表格的偶数行:input$(#myForm:input)选择表单中的input元素:visible$(div:visible)选择可见的div元素?:hidden$(div:hidden)选择不可见的div元素?:enabled$(:enabled)所有启用的元素:disabled$(:disable