1、常见的选择器

id,类,标签选择器。

$("#a1")

$(".myclass")

$("div")

2、组合选择器

$("#a1,#a3,#a4,p,.myclass")

3、继承选择器

$("#d1 .myclass")

找到的对应的html元素为

<div  id='#d1'><a class="myclass">链接</a></div>

4、按照正则表达式进行选取

$(":checkbox[id^='ssss'][id$='xxxx']").each(function(){
    $(this).attr("checked", checked);
  });
  // 以ssss开头或者以xxxx结束
  $(":checkbox[id^='ssss'],[id$='xxxx']").each(function(){
    $(this).attr("checked", checked);
  });

5、选取表单元素

radio

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

select

$('select#sel option:selected').val();
$('select#sel').find('option:selected').val();

6、table操作

$(renderTo).find('tr:has("th"):last').nextAll().remove();

7、表单对象获取

$(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域,例如<input type="image" />
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素,作用与上相反
--------------------------------------------------------------------------------------------------------------------------------------------------------------------- 下面这两个属于属于二级选择器。跟上面的不是一类,这个属于小类
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表

8、子元素的获取

$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

9、层级元素获取

我们看这一段html代码

 <div id="d1">
<div id="d11">
<div id="d1111"></div>
</div> <div></div>
<div></div> </div> <div id="d2"></div>
<div id="d3"></div>
$("#d1 div div")  '前面父级 后面是子集
$("#d1>div") '获取#d1下面的所有的div元素,只是儿子节点,不包含孙子节点
$("#d1 + div") 'div元素后面的第一个 p元素 d2 同级别的
$("#d1 ~ div") 'div后面的所有的 div元素 d2,d3。同级别的

10、内容对象的获取和对象可见性

$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
("Element:has(selector)")‘是否包含某个元素,如: ("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素

11、jquery 中的非操作

$('#p1').not('p')
$('p[id!='p1']')

12、end的用法。往d1和d2中添加内容 GoodMoring China!!怎么做?这里必须用到end(),用于返回到根元素上,必须用end()才能返回,因为如果不用end,那么返回的只是当前的元素。

<div id="d1">
<div></div>
<div></div>
</div> <div id="d2">
<div></div>
<div></div>
</div> jquery代码如下:

$(document).ready(function () {
$("#d1,#d2").find("div:last").html("GoodMoring China!!")
.end()
.find("div:first").html("GoodMoring China!!1")
});

 

详解Jquery选择器的更多相关文章

  1. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  2. $.ajax()方法详解 jquery

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  3. jQuery Validate验证框架详解(jquery.validate.min.js)

    原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...

  4. 详解jquery插件中(function ( $, window, document, undefined )的作用。

    1.(function(window,undefined){})(window); Q:(function(window,undefined){})(window);中为什么要将window和unde ...

  5. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. jQuery的deferred对象详解 jquery回调函数

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery的 ...

  7. 瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)

    瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介 ...

  8. 【Jquery系列】详解Jquery对象和Dom对象

    问题描述 本篇文章主要讲解Jquery对象和DOM对象,主要围绕如下五个方面来介绍: Jquery对象和dom对象定义 Jquery对象与dom对象区别 Jquery对象及运用举例 dom对象及运用举 ...

  9. 详解jQuery的选择器

    1.基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM对象.在网页中,每个id名称只能使用一次,class允许重复使用. ♠ # ...

随机推荐

  1. Oracle JDK迁移指南

    Oracle JDK迁移指南 https://docs.oracle.com/en/java/javase/11/migrate/index.html#JSMIG-GUID-C25E2B1D-6C24 ...

  2. 04 Zabbix4.0系统配置触发器trigger

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 04 Zabbix4.0系统配置触发器trigger 请点击查看Zabbix3.0.8版本trig ...

  3. 22 Zabbix系统版本升级过程

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 22 Zabbix系统版本升级过程 Zabbix升级与其他相类似系统升级一样,前提一定做好备份,备 ...

  4. 自学Aruba7.4-Aruba安全认证-MAC认证(web页面配置)

    点击返回:自学Aruba之路 自学Aruba7.4-Aruba安全认证-MAC认证(web页面配置) 由于前三节已经讲述了3种如何web页面配置安全认证,MAC认证就不过多讲解重复的步骤. 步骤1  ...

  5. 【转】Context Switches上下文切换性能详解

    http://blog.csdn.net/aiai5251/article/details/50015745 Context Switches 上下文切换,有时也被称为进程切换(process swi ...

  6. centos7配置本地yum源 使用安装镜像安装软件

    1. 在cdrom挂载安装镜像.(物理机则插入光盘,虚拟机则在CD/DVD中选择iso镜像.如果虚拟机mount时提示找不到则在选择iso镜像上方勾选“已连接”和“启动时连接”,或者点击 虚拟机下方状 ...

  7. Java读取“桌面”、“我的文档”路径的方法

    读取“桌面”的方法: javax.swing.filechooser.FileSystemView fsv = javax.swing.filechooser.FileSystemView.getFi ...

  8. Solr7.1---Getting Start

    目前最新版的Solr是7.1.0 有个我还不清楚的地方是,为何5.5.X或者6.6.X版本还在更新,给我的感觉好像每一个大版本都有自己的维护团队.不管了. 首先-系统要求 JDK1.8+ 解压Solr ...

  9. spring校验注解

    @Null   被注释的元素必须为 null @NotNull    被注释的元素必须不为 null @AssertTrue     被注释的元素必须为 true @AssertFalse    被注 ...

  10. vue资源

    Vue中文官网:https://cn.vuejs.org/ Vue源码:https://github.com/vuejs/vue Vue官方工具:https://github.com/vuejs vu ...