




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
B/S前端高级技术Jquery主讲教师:方丹JQUERY层次选择器本讲目标任务三:层次选择器实战案例任务一:什么是层次选择器任务二:层次选择器案例任务一、什么是层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器.1、层次选择器层次选择器如下:1、ancestordescendant用法:$(”forminput”);返回值集合元素
说明:在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent>child”区分开.2、parent>child
用法:$(”form>input”);返回值集合元素
说明:在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素3、prev+next用法:$(”label+input”);返回值集合元素说明:匹配所有紧接在prev元素后的next元素2、层次选择器4、prev~siblings用法:$(”form~input”);返回值集合元素说明:匹配prev元素之后的所有siblings元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意:(“prev~div”)选择器只能选择“#prev”元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取任务二、层次选择器案例ancedesc选择器parent>child选择器prev+next选择器prev~siblings选择器任务三:jQuery基本选择器综合案例作业一:获取所有div元素下第一代子元素span元素的语法是作业二:改变<body>内所有<div>的背景色为#0000FF改变<body>内子<div>的背景色为#FF0033改变id为one的下一个<div>的背景色为#0000FF改变id为two的元素后面的所有兄弟<div>的元素的
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年黑龙江农业工程职业学院单招职业倾向性测试题库及答案一套
- 2025年河南医学高等专科学校单招职业倾向性测试题库新版
- 2025年甘肃省甘南藏族自治州单招职业适应性测试题库带答案
- 2025年河南地矿职业学院单招职业适应性测试题库审定版
- 2025年河南工业职业技术学院单招职业倾向性测试题库完整
- 科技成果转化的国际经验与本土实践
- 2025年贵州省毕节地区单招职业适应性测试题库完整版
- 2025年湖北交通职业技术学院单招职业倾向性测试题库学生专用
- 2025年贵州建设职业技术学院单招职业倾向性测试题库及答案1套
- 2025年吉林交通职业技术学院单招职业适应性测试题库含答案
- 法规解读丨2024新版《突发事件应对法》及其应用案例
- JGJ46-2024 建筑与市政工程施工现场临时用电安全技术标准
- 2024年世界职业院校技能大赛高职组“关务实务组”赛项参考试题库(含答案)
- 河北美术出版社小学六年级下册书法练习指导教案
- 五下音乐《美丽的家乡(简谱、五线谱)》课件
- 2024年长沙职业技术学院高职单招(英语/数学/语文)笔试历年参考题库含答案解析
- 会计英语专业词汇全
- 拆除工程检验批质量检验记录
- 怎样把握文章线索
- LED与金卤灯对比(共4页)
- (完整版)部编四年级语文下词语表
评论
0/150
提交评论