jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 姚敦红 杨凌 张志美 李晓黎 等编著 第3章.pdfVIP

jQuery 程序设计基础教程 jQuery 程序设计基础教程 jQuery 程序设计基础教程 授课教师： 授课教师： 职务： 职务： 第3章 jQuery选择器 课程描述 课程描述 在jQuery程序中可以对HTML元素 进行管理和操作，通常需要首先 选择要管理和操作的HTML元素， 使用jQuery选择器（selector） 就可以实现此功能。由于篇幅所 限，本书没有详细介绍HTML元素 的具体情况，请读者查阅相关资 料理解。 本章介绍基础选择器、层次选择 器和过滤器等jQuery选择器的使 用方法。关于表单选择器和过滤 器将在第6章介绍。 本章知识点 3.1 基础选择器 1.2 jQuery对象和DOM对象 1.3 jQuery开发工具 3.1 基础选择器  3.1.1 Id选择器  3.1.2 标签名选择器  3.1.3 根据元素的css类选择  3.1.4 选择所有HTML元素  3.1.5 同时选择多个HTML元素 3.1.1 Id选择器 每个HTML元素都有一个id，可以根据id选取对 应的HTML元素。例如，使用$(#Id)可以选取 ID为Id的HTML元素。 【例3-1】 html head script type=text/javascript src=jquery.js/script script type=text/javascript $(document).ready(function(){ $(#button1).click(function(){ alert(hello); }); }); /script /head body button id=button1单击我/button /body /html 3.1.2 标签名选择器 使用标签名可以选取网页中所有该类型的元素 。例如，使用$(div)可以选取网页中所有的 div元素；使用$(a)可以选取网页中所有的 a元素；使用$(p)可以选取网页中所有的p 元素；使用$(document.body) 可以选取网页中 body元素。 【例3-2】 html head meta charset=utf-8 titleDemo/title /head body a href=/jQuery/a script src=jquery.js/script script $(document).ready(function(){ $(a).click(function(event){ alert(Hello jQuery); event.preventDefault(); }); }); /script /body /html 3.1.3 根据元素的css类选择 使用$(.ClassName)可以选取网页中所 有应用了CSS类（类名为ClassName）的 HTML元素。关于CSS类的基本情况将在第8 章中介绍。 【例3-3】 html head script type=text/javascript src=jquery.js/script script $(document).ready(function(){ $(.myClass).css(border,3px solid red); }); /script style div,span { width: 150px; height: 60px; float:left; padding: 10px; margin: 10px; bac