小编前面两篇文章向大家介绍了一下什么是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();获取下拉框选中的内容。
暂时就写这么多吧,希望能帮助到跟我一样的初学者,一起在项目实践中慢慢积累。