首先介绍几个简单的:

id选择器

$('#p1').html('<font color='red'>nihao</font>);

类选择器:表示页面上所有应用了a样式的标签

$('.a').css('color','green');

层次选择器:div下的所有p标签
$('div p')
组合选择器:选择id为btn以及p1和span标签
$('#btn,#p1,span').css('color','red')
标签+类选择器:表示p标签下应用a样式的标签
$('p.a')
层次选择器:div下的所有p标签
$('div p')

只选取div下的子元素p和后代元素p
$('div p')
只选取div下的直接子元素p
$('div>p')
表示div后的所有p兄弟
$('div~p') 等价$('div').nextAll('p')
表示div后的所有兄弟
$('div~*')
表示div后只找紧挨着的的第一个元素,并且这个元素必须是p

$('div+p') 等价$('div').next('p')
 表示选择div前面的所有兄弟p元素
$('div').preAll('p')
表示div前只找紧挨着的的第一个元素,并且这个元素必须是p
$('div').pre('p')
当前元素的所有兄弟元素
siblings();

写过滤选择器的时候我们要注意jquery中的另一个特性:链式编程
例如:既可以设置p元素的边框,又可以添加其事件
s('p').text('我们都是p!').css('border','1px').click(function(){})

但是,类似于prevAll()、nextAll()、prev()、next()、sibings()等这些函数都会破坏链,所以这种情况下不能直接进行链式编程。

例如:

$(this).prevAll().css('backgroundColor', 'yellow').nextAll().css('backgroundColor', 'blue'); //不能链式编程,链已经被破坏了。
end()回到最近的一个"破坏性"操作之前。

基本选择过滤器
$('p:eq(2)');选择出来的索引是2的标签
$('p:even')偶数个
$('p:odd')奇数个
first 选取第一个元素。$("div:first")选取第一个<div>
:last 选取最后一个元素。$("div:last")选取最后一个<div>
:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>
:even、:odd,选取索引是偶数、奇数的元素:$("input:even")选取索引是奇数的<input>
:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
$(":header")选取所有的h1……h6元素
$("div:animated")选取正在执行动画的<div>元素。

属性选择器
$('input[type=text]').css('clolr',black);
$('input[name^=a]')属性name以a开头的
$('input[name$=a]')属性name以a结尾的
$('input[name*=a]')属性name以包含a的

$('input[name^=a][value] [id]')属性name以a开头的并且包含value和id属性的
$("div[title!=test]")选取title属性不为“test”的<div>
表单对象属性选择器红色竖线是空格
$("#form1.:enabled")选取id为form1的表单所有启用的元素  
$("#form1.:disabled")选取id为form1的表单所有禁用的元素
$(“input:checked”)选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.
$("select.:selected")选取所有选中的选项元素(下拉列表)
$("input[name=names]:checked");获取所有name为names的选中的元素

表单选择器
$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样, $("input")只获得<input>
$(":text")选取所有单行文本框,等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);
$(“:password”)选取所有密码框。
同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
代替了$(‘input[type=***]’);
input[type=radio]→:radio
input[type=checkbox] → :checkbox
input[type=text] → :text

可见性选择器
 
:hidden
选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)
1.表单元素type=“hidden”
2.设置css的display:none
3.高度和宽度明确设置为0的元素。
4.父元素时隐藏的,所以子元素也是隐藏的
visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本jQuery不太一样,1.3.2之前)
:visible
选取所有可见元素
注意:$(‘.cls :hidden’);与$(‘.cls:hidden’);是不一样的。
内容过滤器:
:contains(text),过滤出包含给定文本的元素。(innerText中包含。)
:empty,过滤出所有不包含子元素或者文本的空元素。
:has(selector),过滤出元素中包含(即子元素中)selector选择器能选择到的元素。
:parent,过滤出可以当做父元素的元素(即该元素有子元素或者元素中包含文本。

内容过滤选择器
:contains(text),过滤出包含给定文本的元素。(innerText中包含。)
:empty,过滤出所有不包含子元素或者文本的空元素。
:has(selector),过滤出元素中包含(即子元素中)selector选择器能选择到的元素。
:parent,过滤出可以当做父元素的元素(即该元素有子元素或者元素中包含文本。
子元素过滤器:
取出所有ul下li的第一个li
:first-child,与:fisrt的区别,:first只能选取第一个,而:first-child,则能选取每个子元素的第一个元素。

$(‘ul li:first-child’);  //为每个父元素(ul)都返回一个li。
$(‘ul li:first’);只返回一个li元素。
后续还会补充,有不足希望大家及时纠正,谢谢!

转载于:https://www.cnblogs.com/guohuiru/p/3156938.html

jQuery各种选择器总结相关推荐

  1. jQuery的选择器(一)

    2019独角兽企业重金招聘Python工程师标准>>> jQuery选择器完全继承CSS风格,jQuery 选择器允许对 HTML 元素组或单个元素进行操作. jQuery的选择器包 ...

  2. jQuery css()选择器使用说明

    css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...

  3. jQuery 基础选择器/层级选择器/隐式迭代

    jQuery 选择器 jQuery 层级选择器 隐式迭代(重要) <!DOCTYPE html> <html lang="en"><head>& ...

  4. java与jquery的选择器区别_JQuery选择器

    原标题:JQuery选择器 声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. JQuery 介绍: 用于搜索H ...

  5. JQuery简介选择器

    JQuery简介&选择器 文章目录 JQuery简介&选择器 一.jquery介绍 二.jquery加载 三.jquery选择器 1.id选择器 2.类选择器 3.元素选择器 4.全选 ...

  6. 第70天:jQuery基本选择器(一)

    一.jQuery基本选择器 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascri ...

  7. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  8. [jQuery] 说说看jQuery的选择器有哪些?

    [jQuery] 说说看jQuery的选择器有哪些? 1.基本选择器: #id .element ..class .* .selector1... 2.层次选择器: ancestor descenda ...

  9. jQuery学习--选择器的使用

    jQuery基本选择器 1. jQuery的ready事件 -> js的onload 2. 选择器的使用 1. jQuery的ready事件 -> js的onload 大多是第一种,匿名函 ...

  10. 浅谈jQuery的选择器

    jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("A B") 查找A元素下面的所有子节点,包括非直接子节点 $("A>B") ...

最新文章

  1. 张亚勤院士谈“智能计算新趋势”
  2. 1129 Recommendation System (25 分)【难度: 一般 / 知识点: 滑动窗口】
  3. 常用的函数式接口_Predicate接口练习_集合信息筛选
  4. 「PKUSC2018」神仙的游戏 - 题解
  5. PHP关键字可以作变量名吗,在PHP中定义了很多关键字,这些关键字不能当做变量名。...
  6. 上海纽约大学计算机专业怎样,聚焦|对话上纽大计算机科学教授郭斯瑶
  7. 和quicklook相似的软件_细数软件推荐上万热度出现比例较高的10款软件,看看谁出现最多...
  8. 谈软件测试人员定位---三年软件测试总结
  9. linux重启网卡命令_如何在 Linux 中更改 MAC 地址 | Linux 中国
  10. c语言爱心代码(c语言画爱心的代码)
  11. Java程序开发工具 JCreator
  12. 天正电气图例_天正电气CAD教程之符号篇 - CAD自学网
  13. 辉群 mysql支持,群辉下的nas各项共享设置——白羊座适用
  14. Python的h5py模块
  15. 分门别类刷leetcode——二叉树和图(C++实现)
  16. 调整autocad字体输入框大小
  17. 【G4基础08】GPS-2-Macro Commands宏命令
  18. 最近看到一个故事,你让我妻守空房,我让你妻哭断肠
  19. 框架:提供一定能力的小段程序
  20. Android最新手机号正则判断(含最新166/198/199开头的手机号)

热门文章

  1. Oracle 11.2.0.2 Patch 说明
  2. TCP/IP协议栈的封装
  3. day48 Pyhton 数据库Mysql 05
  4. 初始化对于类与接口的异同点深入解析
  5. 具体解说Android的图片下载框架UniversialImageLoader之磁盘缓存(一)
  6. centos7安装eclipse
  7. 【codecombat】 试玩全攻略 第十六关 近战
  8. DBMS_ERRLOG记录DML错误日志(一)
  9. vs2005开发Silverlight平台搭建
  10. 深入理解JVM(6)——JVM性能调优实战