ClareQi的博客

学习心得总结

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

小编前面两篇文章向大家介绍了一下什么是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();获取下拉框选中的内容。

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ClareQi/article/details/52368692
个人分类: JQuery
上一篇jQuery学习心得----鼠标经过时改变table行的背景色
下一篇jQuery学习心得----第三集:jQuery中的DOM操作总结
想对作者说点什么? 我来说一句

jQuery选择器速查表

2013年12月12日 440KB 下载

PPT和案例\jQuery选择器

2011年05月04日 440KB 下载

没有更多推荐了,返回首页

关闭
关闭