jQuery选择器

来源:互联网 发布:钢管租赁软件下载 编辑:程序博客网 时间:2024/06/11 20:44
选择器是jQuery的根基,熟练使用选择器能达到事半功倍的效果



选择器的种类:
1. 基本选择器
$("#id")    // 按ID选取元素
$(".mini")  // 按class选取元素
$("div")    // 按tag name选取元素
$("*") // 选取所有元素
$("#id,.mini") // 混合选取,返回所有符合条件的元素


2. 层次选择器
$("div span") // div 下所有的 span
$("div>span") // div下一层所有span但是测试并没有发现不同
$("div+span") // div 后紧接着的下一个span 
== $("div").next("div");
$("div~span") // div 后所有的span
== $("div").nextAll("div");


3. 过滤选择器
基本过滤选择器
$("div:first") // 第一个div
$("div:last")  // 最后一个div
$("input:not(.myClass)") //所有类不是myclass的input
$("table tbody tr:even") // 偶数行
$("table tbody tr:odd")  // 奇数行
$("tr:eq(2)") // 选取第二行
$("tr:gt(3)") // 第3个之后的所有
$("tr:lt(3)") // 第3个之前的所有
$(":header")  // 所有header <h1> <h2> <h3> ...
$("div:animated") //正在执行动画的div


内容过滤选择器
$("div:contains('text')") //div 下所有包含文本text的元素
$(div:empty) // 空div,没有文本,没有子元素
$(div:has(p)) // 选取含有 <p>元素的div
$(div:parent) // 选取拥有子元素的div元素(包括文本)


可见性过滤选择器
$("div:hidden")  // 所有不可见的div
$("div:visible") // 所有可见的div


属性过滤选择器
$("div[id]") // 拥有id的元素
$("div[title=test]") // 属性title为test的元素
$("div[title!=test]")// 不等于test
$("div[title^=test]")// 以test开头
$("div[title$=test]")// 以test结束
$("div[title*=test]")// 包含test
$("div[id][title!=test]")// 多个元素同时选择


子元素过滤选择器
:nth-child(even/odd/index/equation)
:first-child
:last-child
:only-child


表单对象过滤选择器
$("#form1:enabled") // id为form1下所有可用元素
$("#form2:disabled")// id为form2下所有不可用元素
$("input:checked")//所有选中的<input>元素
$("select:selected")//所有被选中的select元素


4. 表单选择器
$(":input") // 选取所有的<input>,<textarea>,<select>,<button> 元素
$(":text") // 所有的单行输入文本框
$(":password") // 所有的密码框
$(":radio") // 所有的单选框
$(":checkbox") // 所有的多选框
$(":submit") // 所有的提交按钮
$(":image") // 所有的图片元素
$(":reset") // 所有的重置按钮
$(":button") // 所有的按钮
$(":file") // 所有的文件域
$(":hidden") // 所有不可见元素


手机放在无线键鼠前面会导致键鼠偶尔失灵
原创粉丝点击