指定元素中包含 id 属性的, 如: $("span[id]")

 
<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

指定元素中不包含 id 属性的, 如: $("span:not(span[id])") 或 $("span:not([id])")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

包含 id 属性的, 如: $("body [id]")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

符合元素值的, 如: $("span[name='S2']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

不符合元素值的, 如: $("span[name!='S2']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

元素值开头是?, 如: $("span[name^='S']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

元素值结尾是?, 如: $("html [name$='1']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

元素值包含?, 如: $("body [name*='x']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

多个属性条件, 如(有 id 且 name 开始是 "D"): $("body [id][name^='D']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div> 

查找包含 "AB" 的 span: $("span:contains('AB')")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div> 

从 div 中查找包含 "AB" 的 span: $("div span:contains('AB')")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div> 

查找包含 的 span: $("span:has('b')")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div> 

查找空的 span: $("span:empty")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div> 

查找非空的(也就是作为父元素的) span: $("span:parent")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div> 

:hidden 与 :visible 分别对应隐藏与显示的元素; 下例让已显示的变红, 让隐藏的显示为灰色.

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
</head> 
<body> 
<div>111</div> 
<div>222</div> 
<div style="display:none">333</div> 
<div style="display:none">444</div> 
</body> 
</html> 
<script> 
$("div:visible").css("color", "red"); 
$("div:hidden").css("display", "").css("color", "silver"); 
</script> 

表单匹配: 
:input 匹配: 
<input ... /> 
<select></select> 
<textarea></textarea> 
<button></button>

:text 匹配 <input type="text" /> 
:password 匹配 <input type="password" /> 
:radio 匹配 <input type="radio" /> 
:checkbox 匹配 <input type="checkbox" /> 
:submit 匹配 <input type="submit" /> 
:reset 匹配 <input type="reset" /> 
:image 匹配 <input type="image" /> 
:file 匹配 <input type="" /> 
:button 匹配 <button></button> 
:enabled 匹配 所有可用的 input 元素 
:disabled 匹配 所有不可用的 input 元素 
:checked 匹配 所有选中的被选中复选框、单选框 
:selected 匹配 所有选中的 option 元素

jQuery 基础 : 获取对象 根据属性、内容匹配, 还有表单元素匹配的更多相关文章

  1. jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

    指定元素中包含 id 属性的, 如: $("span[id]") 代码如下: <span id="span1" name="S1"&g ...

  2. jQuery使用之(四)处理页面的表单元素

    表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作. 1.获取表单元素的值. 直接调用val()方法时可以获取选择器的 中的第一个元素的val ...

  3. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  4. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  6. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  7. jquery attr()方法 添加,修改,获取对象的属性值。

    jquery attr()方法 添加,修改,获取对象的属性值. jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到 ...

  8. python基础——获取对象信息

    python基础——获取对象信息 当我们拿到一个对象的引用时,如何知道这个对象是什么类型.有哪些方法呢? 使用type() 首先,我们来判断对象类型,使用type()函数: 基本类型都可以用type( ...

  9. Python帮助函数调试函数 用于获取对象的属性及属性值

    Python帮助函数调试函数 用于获取对象的属性及属性值 刚接触Python,上篇 <Python入门>第一个Python Web程序--简单的Web服务器 中调试非常不方便,不知道对象详 ...

随机推荐

  1. python爬虫框架Pyspider初次接触

    pyspider网站地址:http://docs.pyspider.org/en/latest/.文档比较好,安装起来也非常方便.既然是基于python的框架,那么首先得安装python.微软出的一款 ...

  2. 将非Maven管理的jar打包到Maven本地资源库

    这里有2个案例,需要手动发出Maven命令包括一个 jar 到 Maven 的本地资源库. 要使用的 jar 不存在于 Maven 的中心储存库中. 您创建了一个自定义的 jar ,而另一个 Mave ...

  3. Python函数-delattr()

    delattr(object, name) 作用: 删除object对象名为name的属性. 参数object:对象. 参数name:属性名称字符串. >>> class Perso ...

  4. flask+blueprint路由配置

    1.flask默认的静态文件和html文件在app应用文件夹里的相应文件夹下:app // Flask||--static ||--templates |静态文件默认的url地址为:url_prefi ...

  5. 解决 No module named PyQt5.QtWebKitWidgets

    原因:在 PyQt 5.6(+) 版本中, 新增 QtWebEngineWidgets 代替QtWebKitWidgets. 示例代码:#coding: utf-8 import sysfrom Py ...

  6. ping错误详解

    在网络中Ping 是一个十分好用的TCP/IP工具,它主要的功能是用来检测网络的连通情况和分析网络速度. 输入 ping /? 例出ping的参数 使用Ping检查连通性有五个步骤 1. 使用ipco ...

  7. 如何通过ISO安装win7程序

    从下载u启动工具到安装Ghost Win7系统教程 来源:http://www.uqidong.com时间:2013-08-12 09:17:38 怎样用u启动u盘启动盘安装ghost系统?u启动制作 ...

  8. 侯捷STL学习(二)--序列容器测试

    第六节:容器之分类和各种测试(四) stack不提供iterator操作,破坏了容器的独特性,先进先出. 使用容器multiset(允许元素重复) 内部是红黑树,insert操作就保证了排好了序. 标 ...

  9. 开发环境入门 linux基础 (部分)while for 函数 计划任务

    while循环 while do 动作 done 需要无限循环时我们会选择while : echo -e 格式处理,将\n的意义不变. exit 指退出执行程序 break 指跳出本层循环 conti ...

  10. appium_python 实现手势密码

    直接上代码吧: from appium.webdriver.common.touch_action import TouchAction from driver import AppiumTest # ...