第六章 jQuery选择器.pptx

第六章 jQuery选择器预习检查集中测试请列举出在CSS中学习过的选择器的类型jQuery选择器的优势有哪些？jQuery选择器包括哪几大类？ 通过位置选取元素的jQuery选择器有哪些？/51回顾及作业点评使用jQuery如何实现隔行变色效果？$(document).ready()与window.onload有什么区别？如何实现DOM对象和jQuery对象间的转化？在网页中有一个id为teacher的div，请使用jQuery隐藏此div点评作业的提交情况和共性问题提问作业点评/51本章任务制作图书简介页面使用jQuery美化英雄联盟简介页制作非缘勿扰页面特效制作隔行变色的商品列表制作全网热播视频页面/51本章目标会使用基本选择器获取元素会使用层次选择器获取元素会使用属性选择器获取元素会使用过滤选择器获取元素会使用基本过滤选择器获取元素会使用可见性过滤选择器获取元素/51jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");示例获取并设置网页中所有<h3>元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法/51jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下通过CSS选择器选取元素基本选择器层次选择器属性选择器通过过滤选择器选择元素基本过滤选择器可见性过滤选择器/51基本选择器基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器名称语法构成描述示例标签选择器element根据给定的标签名匹配元素$("h2"?)选取所有h2元素类选择器.class根据给定的class匹配元素$(" .title")选取所有class为title的元素ID选择器#id根据给定的id匹配元素$(" #title")选取id为title的元素并集选择器selector1,selector2,...,selectorN将每一个选择器匹配的元素合并后一起返回$("div,p,.title"?)选取所有div、p和拥有class为title的元素全局选择器*匹配所有元素$("*"?)选取所有元素/51标签选择器标签选择器根据给定的标签名匹配元素设置<dd>标签中的内容显示出来$(document).ready(function(){ $("dt").click(function(){ $("dd").css("display","block"); }); $("h1").css("color","blue");})示例设置<h1>标签中的字体颜色为蓝色演示示例1：基本选择器/51类选择器类选择器根据给定的class匹配元素$(".price").css({"background":"#efefef","padding":"5px"});示例设置class为price元素的背景颜色和内边距演示示例1：基本选择器/51ID选择器ID选择器根据给定的id匹配元素$("#author").css("color","#083499");设置id为author的元素的字体颜色示例演示示例1：基本选择器/51并集选择器并集选择器用来合并元素集合$(".intro,dt,dd").css("color","#ff0000");示例演示示例1：基本选择器/51全局选择器全局选择器可以获取所有元素$("*").css("font-weight","bold");示例设置所有元素的字体加粗显示演示示例1：基本选择器/51层次选择器层次选择器通过DOM 元素之间的层次关系来获取元素名称语法构成描述示例后代选择器ancestor descendant选取ancestor元素里的所有descendant（后代）元素$("#menu span"?)选取#menu下的<span>元素子选择器parent>child选取parent元素下的child（子）元素$(" #menu>span"?)选取#menu的子元素<span>相邻元素选择器prev+next选取紧邻prev元素之后的next元素$(" h2+dl "?)选取紧邻<h2>元素之后的同辈元素<dl>同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$(" h2~dl "?)选取<h2>元素之后所有的同辈元素<dl>/51后代选择器后代选择器用来获取元素的后代元素$(".textRight p").css("color","red");示例设置class为textRight元素中的所有<p>标签的字体全部为红色演示示例2：层次选择器/51子选择器子选择器用来获取元素的子元素$(".t