jquery_day02(选择器&应用实例&表单插件)

jquery_day02(选择器&应用实例&表单插件)

ID:16486761

大小:780.00 KB

页数:16页

时间:2018-08-10

jquery_day02(选择器&应用实例&表单插件)_第1页
jquery_day02(选择器&应用实例&表单插件)_第2页
jquery_day02(选择器&应用实例&表单插件)_第3页
jquery_day02(选择器&应用实例&表单插件)_第4页
jquery_day02(选择器&应用实例&表单插件)_第5页
资源描述:

《jquery_day02(选择器&应用实例&表单插件)》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、陈浩夏JQuery1.8基础教程V1.3day02:jQuery选择器&应用实例学习要点:1、jQuery选择器(重点)a)基本选择器b)层次选择器c)过滤选择器d)表单选择器2、jQuery实用案例a)表格隔行变色b)表格的展开与收缩c)多选框与表格加亮d)广告/五屏幻灯片一、jQuery选择器详细(重点)ljQuery选择器分为:Ø基本选择器Ø层次选择器Ø过滤选择器Ø表单选择器l示例:demo-base.htmlØ说明:u创建jQuery选择器演示静态页面(里面包含各种div和span元素)u下面使用jQuery选择器来匹配元素并调整它们的样式时间:2012年12月授课:陈浩夏版权所有:陈

2、浩夏陈浩夏JQuery1.8基础教程V1.3Ø图示:Ø代码:(略)1、基本选择器1)概念/语法l基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素l在网页中,每个id名称只能使用一次,class允许重复使用l基本选择器的介绍说明如下表所示选择器描述返回示例#id根据给定的id匹配一个元素单个元素$("#test")选取id为test的元素.class根据给定的类名匹配元素集合元素$(".test")选取所有class为test的元素element根据给定的元素名匹配元素集合元素$("p")选取所有的

元素*匹配所有元素集合元素

3、$("*")选取所有的元素(组选择器)将每一个选择器匹配到元素合并后一起返回集合元素$("div,span,p,.时间:2012年12月授课:陈浩夏版权所有:陈浩夏陈浩夏JQuery1.8基础教程V1.3selector1,selectr2……,selectorNmyClass")选取所有

,和拥有class为myClass的

标签的一组元素1)示例l示例:demo01-jq.htmll可以使用这些基本选择器来完成绝大多数的工作l下面用它们来匹配刚才HTML代码中的

等元素并进行操作(改变背景色),示例如下表所示:功能代码改变id为one的元素的背

4、景色$('#one').css("background","#bbffaa")改变class为mini的所有元素的背景色$('.mini').css("background","#bbffaa")改变元素名是

的所有元素的背景色$('div').css("background","#bbffaa")改变所有元素的背景色$('*').css("background","#bbffaa")改变所有的元素和id为two的元素的背景色$('span,#two').css("background","#bbffaa")1、层次选择器1)概念/语法l如果想通过DOM元素之间的层次关系来

5、获取特定元素,例如后代元素、子元素、相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择l层次选择器的介绍说明如下表所示:选择器描述返回示例(后代选择器)$("ancestordescebdabt")选取ancestor元素里的所有descendant(后代)元素集合元素$("divspan")选取

里的所有的元素(子选择器)集合元素$("div>时间:2012年12月授课:陈浩夏版权所有:陈浩夏陈浩夏JQuery1.8基础教程V1.3$("parent>child")选取parent元素下child(子)元素,与$("ancestordescebdabt")有区别,$(

6、"ancestordescebdabt")选择的是后代元素span")选取

元素下元素名是的子元素(临近选择器)$('prev+next')选择进阶在prev元素后的next元素集合元素$('.one+.div')选取class为one的下一个div元素$('prev~slblings')选择prev元素之后的所有slblings元素集合元素$('#two~div'')选取id为two的元素后面的所有
兄弟元素1)示例l示例:demo01-jq.htmll继续沿用刚才例子中的HTML和CSS代码,然后用层次选择器来对网页中的
等元素进行操作,示

7、例如下表所示:功能代码改变(body>内所有

的背景色$('bodydiv).css("background","#bbffaa")改变内子
元素的背景色$('body>div').css("background","#bbffaa")改变class为one的下一个
元素背景色$('.one+div').css("background","#bbffaa")改变

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。