jQuery选择器
来源:互联网 发布:nba常规赛数据 编辑:程序博客网 时间:2024/06/10 02:03
前言
本文内容摘自《锋利的jQuery》,梳理了jQuery里面的几种选择器的用法,这里只给出一个大概的结构,具体用法还请查资料
正文
jQuery选择器完全继承了CSS选择器的风格,可以随意将选择器组合在一起,下面来看看它支持哪些写法吧
常用选择器
标签选择器: $(“td”)
ID选择器: $(“#note”)
类选择器 : $(“.note”)
群组选择器:$(“td,#note, .note”)
后代选择器: $(“td input”) $(“td > input”)
通配符选择器: $(“*”) 、 $(“select *”) 、 $(“#note *”)
选择器可以组合使用,例如标签、Id、后代组合:$(“td#note span”)
层次选择器
选取ancestor所有后代: $(“ancestor descendant”)
选取parent元素子元素: $(“parent > child”)
prev元素下个同辈元素: $(“prev + next”)
prev之后所有兄弟节点: $(“prev~siblings”)
最后两个选择器注意和jQuery函数nextAll()、prevAll()、siblings()区分或者代替
过滤选择器
:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated
:focus
上面的选择器其实也可以和之前的常用选择器、层次选择器混合使用,代表不同的含义。例如select:first 与select :first 一个表示相同类型下的第一个元素,而另一个表示这个类型下元素的第一个子元素;当然组合还有很多种方式:var name = $(“select > option:first”).val();
<body> <select name="review"> <option value="0">苹果</option> <option value="1">香蕉</option> <option value="2">荔枝</option> <option value="3">芒果</option> </select> <select class="retrieve"> <option value="3">芒果</option> <option value="2">荔枝</option> <option value="1">香蕉</option> <option value="0">苹果</option> </select> <script> $(function(){ var name = $("select:first").attr("name") alert(name); var val = $("select.retrieve :first").val(); alert(val); }) </script></body>
内容过滤选择器
:contains
:empty
:has
:parent
可见性过滤选择器
:hidden
:visible
属性过滤选择器
[attribute] 例:$(“div[id]”)
[attribute=value] 例: $(“div[name=’test’]”)
[attribute!=value]
[attribute^=value] 注:以value开头
[attribute$=value] 注:以value结束
[attribute*=value]
[attribute|=value]
[attribute~=value]
[attribute1][attribute2][attributeN] 注:合并成复合属性熟悉器,范围每选择一次,缩小一次
这里用一个select的例子来说明
<body> <select name="review"> <option value="0">苹果</option> <option value="1" selected="selected">香蕉</option> <option value="2">荔枝</option> <option value="3">芒果</option> </select> <script> var text = $("select[name='review'] option[selected]").text(); alert(text); //输出香蕉 </script></body>
子元素过滤选择器
:first-child
:last-child
:only-child
:nth-child
nth-child可以使用n这个字母,组成任意表达式,如2n 、2n+1 ,n会从1开始将满足条件的元素选取
表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
selected这个选择器,我想用select来举个例子
<body> <select name="review"> <option value="0">苹果</option> <option value="1" selected="selected">香蕉</option> <option value="2">荔枝</option> <option value="3">芒果</option> </select> <script> var text = $("select[name='review'] option:selected").text(); alert(text); //输出香蕉 </script></body>
表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
例子
<body> <input type="radio" name="test" value="0" /> 一级 <input type="radio" name="test" checked value="1"/> 二级 <script> var val = $("input:radio:checked").val(); alert(val); //输出1 </script></body>
结束语
jQuery非常的强大,还有很多优秀的开源,搬砖越来越容易了&_&
- CSS选择器,jQuery选择器
- jQuery选择器 CSS选择器
- JQuery选择器(选择器简介)
- jQuery选择器 基本选择器
- jQuery选择器 层次选择器
- jQuery选择器 表单选择器
- Jquery选择器-基本选择器
- jQuery选择器之类选择器
- jQuery选择器之类选择器
- jQuery选择器之类选择器
- Jquery选择器--过滤选择器
- JQuery选择器
- jquery 选择器
- Jquery选择器
- jQuery选择器
- jQuery 选择器
- JQuery选择器
- JQuery选择器
- Altium Designer 有用快捷设置
- Altium Designer 10 介绍、原理图及其模板常规设计
- <Android学习笔记五>——JSON数据的解析
- Leetcode题解 206. Reverse Linked List
- datanode节点超时时间设置
- jQuery选择器
- Tomcat Context reloadabled 与 OutOfMemory(PermSpace)
- linux内核分析笔记----上半部与下半部
- [UnityUI]UGUI背包
- Altium Designer 16 (AD16) 破解版下载 百度网盘分享 16.1.9 (Build 221) 更新
- java和c之间进行数据传递
- myBatis配置
- Android中生成xml文件小demo
- IIS6⇒IIS7网站注意点