CSS 选择器 上节课 讲完了 这节课 将 层级选择器 ,这名字 是我自己起的,如果一会我讲完了大家有别的好名字,可以提下建议
-------------------------------------------- 开讲了-----------------------------------------------
在 HTML 中 经常会出现 嵌套 的结构,如果用白话 来说,就是 一个标签内部 好包含其他标签,以此类推吧~~
那么,如果 我们想的 得到某一个标签下的所有子标签,第一个子标签 等等的,用 CSS 选择器 直接操作可能不是那么容易~
JQ 提供了一些选择器,方便我们的查找~
现在 先说 所有后代元素吧 !!语法为:$("ancestor descendant") 这里,请大家注意,两个单词之间是有一个空格的
现在 我来说 这两个单词是什么意思~,首先,这两个都是 选择器,第一个 是父标签的选择器,第二个是子标签的选择器
貌似有点乱,我来举个例子
双击复制代码
1
2
3
4
5
6
|
< table id = "table父" >
< tr id = "table的子,td的父" >
< td id = "tr的子1" ></ td >
< td id = "tr的子2" ></ td >
</ tr >
</ table >
|
通过 id 应该很容易看出 他们的父子关系了把 (id 这里 ,只是为了给大家举例子!又用汉字,有用符号的,是不规范的,不建议大家模仿 )
那么 根据语法 ,我想得到 table中的所有 tr 的写法应该为
以前 好像一直没强调过,JQ 获得的对象,一般是一个集合! id 除外~~~~ 这个 希望大家 留心一下,以后会在将另一个 方法 each的时候 看的很明显!~~
接着说 所有后代元素 ! 有人说,这很麻烦啊,我在每个 tr 都加一个 class 属性,然后 用上节课 讲的 CSS 选择器 中的标签选择器 和 class 选择器 都能得出来啊!
这里我只能说 条条大路通罗马! 上吊不一定都吊死在一个歪脖树上呢! 所以 这个具体选择用什么选择器 ,是要根据实际情况来定的
这个 以后我也就不强调了,我只负责讲~至于怎么用,我只建议 不强求~
时间还够~ 再讲一个 层级选择器 中的 一级子元素
所谓一级子元素 就是 父选择器下的第一层子元素 !语法 $("parent > child") 这里 > 是一个 大于号,这个应该不难看出来吧
还是上面的例子 我要得到所有 tr
写法应该为
有人会很纳闷,为什么 多出来个 tbody !! 看下图!相信大家有点 朦朦胧胧的 明白了
看完图,我在说下 一级子元素 和所有 所有后代元素 有什么不同~
举个形象点的例子!
有个 姓张的老头,儿孙满堂的!!
有一天 他好奇,他儿子谁右脸上 有痣 ,好嘞! 他用了一级子元素 选择器,筛选了一下儿子,结果找出张三 李四 王五…………
又有一天 他又好起了, 在他们 张氏家族中 有多少个人 右脸 上有痣 ,结果他用了 所有后代元素 !筛选了一下 所有后代! 结果找出了张三 李四 王五………… ,还有张三儿子,李四姑娘,王五孙子,赵六加丫头…………
是不是 理解了~~
那我就再概括下~~
一级子元素 选择器就是 儿子辈元素~
所有后代元素 选择器 就是 父类元素 标签内所有标签都要参与选择
从上面的说明 应该很容易发现,在选择 子元素的时候 用一级子元素 选择器 效率会高出 所有后代元素
好了,今天就讲这么多吧~ 讲多了容易 混乱
下周一接着讲 层级选择器~
本人的原文出自 http://bbs.coderli.com/forum.php?mod=viewthread&tid=409&fromuid=7
有需要样例代码的 童鞋 可以去下载
分享到:
相关推荐
NULL 博文链接:https://mmmzzc.iteye.com/blog/1579593
NULL 博文链接:https://mmmzzc.iteye.com/blog/1579590
NULL 博文链接:https://mmmzzc.iteye.com/blog/1576396
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
jQuery 3.1 标准课程第二章 选择器层级选择器
jquery文本框选择器_商品尺寸选择和商品价格选择添加到购物车 jquery文本框选择器_商品尺寸选择和商品价格选择添加到购物车 jquery文本框选择器_商品尺寸选择和商品价格选择添加到购物车
JQuery选择器,xpath类型等的选择器
jQuery date_input日期选择器 发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示...
包含有JQuery树状菜单代码 JQuery多层级树形菜单 JQuery的树形地区菜单选择
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
Jquery表单-层级-内容-属性-子元素选择器知识点整理,主要是关于Jquery选择器的知识点整理包括页面属性的选择如$(":empty")等,子元素的选择,层级选择$("parent > child")等
JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
jQuery时间选择器点击选择小时分钟代码
jquery 城市选择器代码
jquery 选择器 描述
主要介绍了jQuery层级选择器用法,实例分析了常见的四种层级选择器的使用技巧,并给出了实例总结,需要的朋友可以参考下
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器,方便以后查找。
主要为大家详细介绍了jQuery层级选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery商品价格选择器
Jquery颜色选择器插件,通过Jquery模拟实现颜色选择器,便于网页中设置颜色