jQuery学习心得----第二集:层次选择器和过滤选择器

原创 2016年08月30日 14:00:11

小编前面两篇文章向大家介绍了一下什么是jQuery选择器,今天呢,将会说说高级一点的选择器,层次选择器和过滤选择器。

层次选择器:

顾名思义,层次选择器就是说利用元素之间的层次关系来选择我们需要的元素。通过查阅书籍资料,我简单总结了一下以下几种层次选择器:

1.$("#tb tr")在上一篇文章里有这个,tb是一个table的id,这样写表示选择id为tb的table下的tr(行);$("div p")选择div里所有的p元素(即div下的所有后代p元素)。

2.$("div>p"),这样写的意思是选择div元素下的子p元素。与第一个的区别在于,一个是后代p元素,一个是子p元素。后代元素和子元素的区别不懂可以另百度。

3.$(".one+div"),选择class为one的下一个同辈div元素,$(".one+div")=$(".one").next("div");

4.$(".one~div"),选择class为one的后面的所有同辈div元素,$(".one~div")=$(".one").nextAll("div");

过滤选择器:

就是说按照一定的条件来筛选需要的元素。我就举几个常用的吧。

1.$(":focus").css("background","#00FFCC");表示改变当前获取焦点的元素的背景色。

2.$("div:contains(dihe)").css("background","#00FFCC");表示改变含有文本“dihe”的div元素的背景色。

3.$("div:has(.one)").css("background","#00FFCC");表示改变含有class为one的div的背景色。

4.$("div:visible"),$("div:hidden")选择可见的idv和不可见的div。

5.$("div[title=sd]").css("background","#00FFCC");选择属性title等于sd的div,更改背景色。

6.$('input:radio[name="sex"]:checked').val(),获取已选择的radio的value值,radio的name为sex。

7.$("select :selected").text();获取下拉框选中的内容。

暂时就写这么多吧,希望能帮助到跟我一样的初学者,一起在项目实践中慢慢积累。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

学习jQuery第一天:演示jQuery层次选择器

body{ font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; c...

jQuery层次选择器

jQuery基础教程之强大的选择器(层次选择器) 无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点:...
  • huaben
  • huaben
  • 2012年02月23日 16:16
  • 1364

jQuery_层次选择器

Untitled Document div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; b...

jQuery笔记之层次选择器

层次选择器 层次选择器通过DOM元素之间的层次关系来获取元素 //下面通过demo演示上面的理论 $(fu...

Jquery层次选择器

Jquery层次选择器的入门案例

jQuery的层次选择器

Untitled Document div, span, p { width: 140px; height: 140px; margin: 5px...

黑马day16 jquery&层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器. 1 、ancestor descendant       用法: $(”f...

jquery的 层次选择器

无标题文档 $(function(){ $("#bt1").click(function(){ $("div > p").css("background","red") }) })...
  • ling811
  • ling811
  • 2013年12月20日 19:22
  • 441

Jquery-层次选择器

层次选择器 后代选择器后代选择器的语法是使用空格隔开(ancestor  descendant) 选取ancestor元素里的所有descendant(后代)元素 ,返回元素集合,如:$("#menu...

使用jQuery层次选择器选择元素

1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery学习心得----第二集:层次选择器和过滤选择器
举报原因:
原因补充:

(最多只允许输入30个字)