jQuery选择器分为几类：

  1. 基本选择器
  2. 层次选择器
  3. 过滤选择器
  • 简单过滤选择器
  • 内容过滤选择器
  • 可见性过滤选择器
  • 属性过滤选择器
  • 子元素过滤选择器
  • 表单对象属性过滤选择器

4.表单选择器

基础选择器

选择器 功能 返回值
#id 根据给定的id匹配一个元素 单个元素
element 根据给定的元素名匹配所有元素 元素集合
.class 根据给定的类匹配元素 元素集合
* 匹配所有元素 元素集合
selector1,selectorN 将每一个选择器匹配到的元素合并后一起返回 元素集合 
$(function(){ //id匹配元素$("#divOne").css("display","none");})$(function(){ //元素名匹配元素$("div span").css("display","none");})$(function(){ //类匹配元素$(".clsFrame .clsOne").css("display","none");})$(function(){ //匹配所有元素$("*").css("display","none");})$(function(){ //合并匹配元素$("#divOne,span").css("display","none");})

//$(document).ready(function(){}); 简写：$(function(){});

jQuery层次选择器

选择器 功能 返回值
ancestor descendant 根据祖先元素匹配所有的后代元素 元素集合
parent > child 根据父元素匹配所有的子元素 元素集合
prev + next 匹配所有紧接在prev元素后的相邻元素 元素集合
prev ~ siblings 匹配prev元素之后的所有兄弟元素 元素集合 
$(function(){ //匹配后代元素$("div span").css("display","none");//隐藏div中所有的<span>标记
})
$(function(){ //匹配子元素$("div>span").css("display","none");//隐藏div中子span标记
})
$(function(){ //匹配后面元素$("#divMid + div").css("display","none");//隐藏id为divMid元素后的下一个div$("#divMid").next().css("display","none");
})
$(function(){ //匹配所有后面元素$("#divMid ~ div").css("display","none");//隐藏id为divMid元素后的所有div$("#divMid").nextAll().css("display","none");
})
$(function(){ //匹配所有相邻元素$("#divMid").siblings("div").css("display","none");//隐藏id为divMid元素的所有相邻div
})

jQuery 简单过滤选择器

选择器 功能 返回值
first()或 :first 获取第一个元素 单个元素
parent >last() 或 :last 获取最后一个元素 单个元素
:not(selector) 获取除给定选择器外的所有元素 元素集合
:even 获取所有索引值为偶数的元素，索引号从0开始 元素集合
:odd 获取所有索引值为奇数的元素，索引号从0开始 元素集合
:eq(index) 获取指定索引值得元素，索引号从0开始 单个元素
:gt(index) 获取所有大于给定索引值的元素，索引号从0开始 元素集合
:lt(index) 获取所有小于给定索引值的元素，索引号从0开始 元素集合
:header 获取所有标题类型的元素，如h1、h2...... 元素集合
:animated 获取正在执行动画效果的元素 元素集合 
$(function(){ //增加第一个元素的类别$("li:first").addClass("GetFocus");
})
$(function(){ //增加最后一个元素的类别  $("li:last").addClass("GetFocus");
})
$(function(){ //增加去除所有与给定选择器匹配的元素类别$("li:not(.NotClass)").addClass("GetFocus");//
})
$(function(){ //增加所有索引值为偶数的元素类别，从0开始计数$("li:even").addClass("GetFocus"); //
})
$(function(){ //增加所有索引值为奇数的元素类别，从0开始计数$("li:odd") .addClass("GetFocus"); //
})
$(function(){ //增加一个给定索引值的元素类别，从0开始计数$("li:eq(1)").addClass("GetFocus"); //
})
$(function(){ //增加所有大于给定索引值的元素类别，从0开始计数$("li:gt(1)").addClass("GetFocus"); //
})
$(function(){ //增加所有小于给定索引值的元素类别，从0开始计数$("li:lt(4)").addClass("GetFocus"); //
})
$(function(){ //增加标题类元素类别$("div h1").css("width","238"); // $(":header").addClass("GetFocus"); //
})
$(function(){ //增加动画效果元素类别animateIt();$("#spanMove:animated").addClass("GetFocus"); //
})
function animateIt() {//动画效果$("#spanMove").slideToggle("slow",animateIt);
}
.NotClass{width:60px;height:23px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee
}
.GetFocus{width:58px;border-bottom:solid 1px #666;background-color:#eee
}

内容过滤选择器

选择器 功能 返回值
:contains(text) 获取包含给定文本的元素 元素集合
:empty 获取所有不包含子元素或者文本的空元素 元素集合
:has(selector) 获取含有选择器所匹配的元素的元素 元素集合
:parent 获取获取含有子元素或者文本的元素 元素集合 
$(function(){ //显示包含给定文本的元素$("div:contains('Div')").css("display","block");
})
$(function(){ //显示所有不包含子元素或者文本的空元素  $("div:empty").css("display","block");
})
$(function(){ //显示含有选择器所匹配的元素$("div:has(span)").css("display","block");//显示含有span标记的元素
})
$(function(){ //显示含有子元素或者文本的元素$("div:parent").css("display","block");
})

可见性过滤选择器

选择器 功能 返回值
:hidden 获取所有不可见元素，或者type为hidden的元素 元素集合
:visible 获取所有的可见元素 元素集合 
$(function(){ //增加所有可见元素的类别$("span:hidden").show()$("div:visible").addClass("GetFocus");
})
$(function(){ //增加所有不可见元素类别$("span:hidden").show().addClass("");
})
.GetFocus{border:solid 1px #ccc;background-color:#eee
}
<span style="display:none">Hidden</span>
<div>Visible</div>

属性过滤选择器

选择器 功能 返回值
[attribute] 获取包含给定属性的元素 元素集合
[attribute=value] 获取等于给定的属性是某个特定值得元素 元素集合
[attribute!=value] 获取不等于给定的属性是某个特定值得元素 元素集合
[attribute^=value] 获取给定的属性是以某些值开始的元素 元素集合
[attribute$=value] 获取给定的属性是以某些值结尾的元素 元素集合
[attribute*=value] 获取给定的属性是以包含某些值得元素 元素集合
[selector1][selector2][selectorN] 获取满足多个条件的复合属性的元素 元素集合 
$(function(){ //显示所有包含id属性的元素 $("div[id]").show();
})
$(function(){ //显示所有属性title的值是"A"的元素  $("div[title='A']").show();
})
$(function(){ //显示所有属性title的值不是"A"的元素  $("div[title!='A']").show();
})
$(function(){ //显示所有属性title的值是"A"开始的元素  $("div[title^='A']").show();
})
$(function(){ //显示所有属性title的值是"C"结束的元素  $("div[title$='C']").show();
})
$(function(){ //显示所有属性title的值中含有"B"的元素  6$("div[title*='B']").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"且属性id的值是“divAB”的元素   $("div[id='divAB'][title*='B']").show();
})

子元素过滤选择器

选择器 功能 返回值
:nth-child(eq|even|odd|index) 获取每个元素下的特定元素，索引号从1开始 元素集合
:first-child 获取每个父元素下的第一个子元素 元素集合
:last-child 获取每个父元素下的最后一个子元素 元素集合
:only-child 获取每个父元素下的仅有一个子元素 元素集合 
$(function(){ //增加每个父元素下的第2个子元素类别 $("li:nth-child(2)").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的第1个子元素类别  $("li:first-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的最后一个子元素类别  $("li:last-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下只有一个子元素类别  $("li:only-child").addClass("GetFocus");
})
<ul><li>item 1-0</li><li>item 1-1</li><li>item 1-2</li><li>item 1-3</li></ul><ul><li>item 2-0</li><li>item 2-1</li><li>item 2-2</li><li>item 2-3</li></ul><ul><li>item 3-0</li></ul>

表单对象属性过滤选择器

选择器 功能 返回值
:enabled 获取表单中所有属性为可用的元素 元素集合
:disabled 获取表单中所有属性为不可用的元素 元素集合
:checked 获取表单中所有被选中的元素 元素集合
:selected 获取表单中素有被选中option的元素 元素集合 
$(function(){ //增加表单中所有属性为可用的元素类别$("#divA").show();$("#form1 input:enabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有属性为不可用的元素类别 $("#divA").show();$("#form1 input:disabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有被选中的元素类别 $("#divB").show();$("#form1 input:disabled").addClass("GetFocus");
})
$(function(){ //显示表单中所有option的元素内容 $("#divC").show();$("#Span2").html("选中项是：" + $("select option:selected").text());
})
<form id="form1" style="width:244px"><div id="divA"><input type="text" class="clsIpt" value="可用文本框" /><input type="text" class="clsIpt" value="不可用文本框" disabled="disabled"/></div><div id="divB"><input type="checkbox" checked="checked" value="1" />选中<input type="checkbox" value="0" />未选中</div><div id="divC"><select multiple="multiple"><option value="0">Option 0</option><option value="1" selected="selected">Option 1</option><option value="2">Option 2</option><option value="3" selected="selected">Option 3</option></select><span id="Span2"></span></div></form>

表单选择器

选择器 功能 返回值
:input 获取所有input、textarea、select 元素集合
:text 获取表单中所有单行文本框 元素集合
:password 获取表单中所有密码框 元素集合
:radio 获取表单中所有单选按钮 元素集合
:checkbox 获取表单中所有复选框 元素集合
:submit 获取表单中所有提交按钮 元素集合
:image 获取表单中所有图像域 元素集合
:reset 获取表单中所有重置按钮 元素集合
:button 获取表单中所有按钮 元素集合
:file 获取表单中所有文件域 元素集合 
$(function(){ //显示input类型元素的总数量 1$("#form1 div").html("表单共找出input类型元素" + $("#form1 :input").length);$("#form1 div").addClass("div");
})
$(function(){ //显示所有文本框对象  2$("#form1 :text").show();
})
$(function(){ //显示所有密码框对象  3$("#form1 :password").show();
})
$(function(){ //显示所有单选按钮对象  4$("#form1 :radio").show(); $("#form1 #span1").show();
})
$(function(){ //显示所有复选框对象  5$("#form1 :checkbox").show(); $("#form1 #span2").show();
})
$(function(){ //显示所有提交按钮对象  6$("#form1 :submit").show();
})
$(function(){ //显示所有图片域对象  7$("#form1 :image").show();
})
$(function(){ //显示所有重置按钮对象  8$("#form1 :reset").show();
})
$(function(){ //显示所有按钮对象  9$("#form1 :button").show();
})
$(function(){ //显示所有文件域对象  10$("#form1 :file").show(3000);
})
<form id="form1" style="width:244px"><input type="text" value="text" class="txt" /><input type="password" value="password" class="txt" /><input type="radio" /><span id="span1">radio</span><input type="checkbox" /><textarea class="txt">textarea</textarea><select><option value="0">item 0</option></select><span id="span2">checkbox</span><input type="submit" value="submit" class="btn"/><input type="image" title="image" src="" class="img" /><input type="reset" value="reset" class="btn" /><input type="button" value="button" class="btn" /><input type="file" title="file" class="txt" /><div id="divShow"></div>
</form>

jquery-选择器相关推荐

  1. 【jquery】jquery选择器

    知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器 代码实现: elem ...

  2. JQuery——选择器分类

    JQuery选择器 1    什么是JQuery选择器 快速高效的找到指定节点,支持css语法设置页面 2   JQuery选择器分类 2.1   基本选择器 CSS选择器 层级选择器 表单域选择器 ...

  3. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

  4. jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)

    第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...

  5. jQuery选择器回顾，IE8还需要你发光发热

    2019独角兽企业重金招聘Python工程师标准>>> 今天又把jQuery的选择器看了一下,感觉有好几个一直都没有用过.现在有这么多模板双向绑定之类先进思想的前端框架,也不知道jq ...

  6. [翻译]帮助文档-jQuery 选择器

    jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...

  7. Jquery 选择器大全 【转载】

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  8. JQuery 选择器。

    •                 #id •                 element •                 .class •                 .class.cl ...

  9. 使用HTML5的自定义数据属性的jQuery选择器

    本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...

  10. 认识jQuery及jQuery选择器

    记录自己平时要注意的,如您看到哪里错误,望指正 认识jQuery jQuery对象和DOM对象 var domObj = document.getElementById("id") ...

最新文章

  1. OpenSuse Linux 的单用户模式
  2. 解决读写Excel的第三方类库as3xls无法读取中文和写入中文的问题
  3. Sencha Touch 2.3 自定义主题皮肤,颜色
  4. 警方办案滥用谷歌地理围栏，小伙三次骑车路过案发点被视作嫌犯
  5. 【转】一个优秀的Javascript框架－－Prototype解说
  6. 9.2.1 Renaming Retrieved Columns
  7. 2021-04-23 商业文章版权协议分类
  8. python编程入门必备知识-python基础教程#菜鸟也能看懂的超简单入门必备知识
  9. 做支付行业这些支付方式你需要知道！
  10. python 课程设计扫雷报告_《扫雷课程设计报告.doc
  11. Vue小说阅读器（仿追书神器）
  12. 纳韦斯托克斯方程的推导_什么是纳维-斯托克斯方程？
  13. STM32F4使用硬件SPI驱动ADS8322
  14. 运维工程师具备的基本技能
  15. excel制作折线图
  16. 组建linux虚拟团队,虚拟团队建设与管理
  17. C# 遇到 R6034 Runtime Error的解决办法
  18. 帝国CMS插件自动采集发布文章插件
  19. 你想了解ADSS和OPGW光缆之间的区别吗？
  20. python循环剪刀石头布_Python中的剪刀石头布游戏

热门文章

  1. 微服务架构案例(04)：中间件集成，公共服务封装
  2. /etc/fstab文件出错,无法进入Linux系统
  3. CSS, JavaScript, jQuery实现标签页切换
  4. Spark2.3.1在Idea控制台调整日志等级
  5. 将一个16进制数转化为10进制数
  6. jquery学习系列8(过滤选择器)
  7. 【转】职业生涯30年的规划（经典）
  8. 【君义精讲】高精度计算
  9. 信息学奥赛一本通（1323：【例6.5】活动选择）
  10. 信息学奥赛一本通（1195：判断整除）