`
狂奔的蜗牛zyx
  • 浏览: 19597 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery选择器$获取dom对象

阅读更多
$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div")           选择所有的div标签元素,返回div元素数组
$(".myClass")      选择使用myClass类的css的所有元素
$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
 
层叠选择器:
$("form input")         选择所有的form元素中的input元素
$("#main > *")          选择id值为main的所有的子元素
$("label + input")     选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")       同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
 
基本过滤选择器:
$("tr:first")               选择所有tr元素的第一个
$("tr:last")                选择所有tr元素的最后一个
$("input:not(:checked) + span")  
 
过滤掉:checked的选择器的所有的input元素
 
$("tr:even")               选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
 
$("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素
$("td:gt(4)")             选择td元素中序号大于4的所有td元素
$("td:ll(4)")              选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器:
 
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)")        选择所有含有p标签的div元素
$("td:parent")          选择所有的以td为父节点的元素数组
可视化过滤选择器:
 
$("div:hidden")        选择所有的被hidden的div元素
$("div:visible")        选择所有的可视化的div元素
属性过滤选择器:
 
$("div[id]")              选择所有含有id属性的div元素
$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素
 
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
 
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素
$("input[name*='man']")          选择所有的name属性包含'news'的input元素
 
$("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
 
子元素过滤选择器:
 
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
 
$("div span:first-child")          返回所有的div元素的第一个子节点的数组
$("div span:last-child")           返回所有的div元素的最后一个节点的数组
$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组
 
表单元素选择器:
 
$(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button
 
$(":text")                     选择所有的text input元素
$(":password")           选择所有的password input元素
$(":radio")                   选择所有的radio input元素
$(":checkbox")            选择所有的checkbox input元素
$(":submit")               选择所有的submit input元素
$(":image")                 选择所有的image input元素
$(":reset")                   选择所有的reset input元素
$(":button")                选择所有的button input元素
$(":file")                     选择所有的file input元素
$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域
 
表单元素过滤选择器:
 
$(":enabled")             选择所有的可操作的表单元素
$(":disabled")            选择所有的不可操作的表单元素
$(":checked")            选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
 
  
 
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
 
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
 
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
 
  
 
  
 
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
 
1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点
 
例子:找到表单中所有的 input 元素
 
HTML 代码:
 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
 
$("form input")
结果:
 
[ <input name="name" />, <input name="newsletter" /> ]
 
2. $("A>B") 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
 
HTML 代码:
 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
 
$("form > input")
结果:
 
[ <input name="name" /> ]
 
3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素
 
HTML 代码:
 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
 
$("label + input")
结果:
 
[ <input name="name" />, <input name="newsletter" /> ]
 
 
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素
 
HTML 代码:
 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
 
$("form ~ input")
结果:
 
[ <input name="none" /> ]
分享到:
评论

相关推荐

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、...了解和熟练掌握jQuery选择器,对于提高Web开发效率至关重要。同时,理解jQuery对象和DOM对象的区别及其相互转换,是有效利用jQuery功能的关键。

    jquery对象和dom对象

    通过jQuery选择器,我们可以轻松地选取DOM元素,并将其转换为jQuery对象。jQuery对象拥有丰富的API,提供了更加简便的方式来操作DOM,如`$(selector)`用于选择元素,`.html()`、`.css()`、`.on()`等用于操作元素的...

    jQuery第1天:JQ基本介绍、使用步骤、jQuery对象与DOM对象(重点)、jQuery选择器

    jQuery选择器类似于CSS选择器,用于选取DOM元素。它们包括: 1. 基本选择器:`$("#id")`(ID选择器)、`$(".class")`(类选择器)、`$("tag")`(标签选择器)和`$("*")`(通配符选择器)。 2. 属性选择器:`$("[attr...

    jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别

    DOM对象是原生JavaScript操作,如通过`document.getElementById("id")`获取,而jQuery对象则是通过`$("#id")`获得。两者之间可以互相转换:将DOM对象转换为jQuery对象,可以使用`$(domElement)`;反之,使用`.get...

    jQuery选择器全解.

    通过jQuery选择器,开发者能够轻松地定位和操作DOM(Document Object Model)元素,极大地提高了网页开发的效率与灵活性。本文将深入解析jQuery选择器的功能与使用方法,帮助读者掌握这一重要的前端技术。 #### 二...

    jQuery 选择器 操作DOM 事件处理 动画基础

    jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础

    Jquery选择器 $实现原理

    总结而言,JQuery选择器$的实现原理是通过IIFE立即执行函数,初始化全局对象jQuery和$,并通过原型链继承的方式,使通过$()创建的实例能够访问JQuery库中定义的方法。JQuery的扩展和维护,通过在原型链上添加方法和...

    jquery对象和dom对象.doc

    比如,我们常用的选择器`$("#msg")`返回的就是一个jQuery对象,它可能包含一个或多个DOM元素,但这个对象并不能直接使用DOM对象的方法,如`innerHTML`。 转换的关键在于,jQuery对象可以调用jQuery库提供的方法,如...

    jQuery 选择器、DOM操作、事件、动画

    在本篇中,我们将详细讨论jQuery选择器、DOM操作、事件处理和动画相关的知识点。 1. jQuery选择器 jQuery选择器用于选择HTML元素,并且能够在这些元素上执行各种操作。基本选择器和过滤选择器是jQuery选择器中最...

    javascript 原生Dom对象和jQuery对象的联系和区别

    当你使用jQuery选择元素时,它会创建一个包含匹配元素的数组,每个元素都是对应的DOM对象。因此,可以将jQuery对象转换为DOM对象,使用`.get()`或`[index]`方法,如`var domElement = $('div').get(0)`。反之,也...

    关于dom和jquery对象理解

    1. **jQuery选择器**:jQuery的选择器语法非常灵活,支持CSS选择器,并且可以通过一些额外的过滤方法来进一步细化结果。例如,获取ID为`foo`的元素的HTML内容,可以使用`$("#foo").html()`。 2. **属性操作**:...

    RIA应用开发:2-jquery选择器.ppt

    RIA 应用开发之 jQuery 选择器 jQuery 选择器是 RIA 应用开发中一个非常重要的概念, jQuery 选择器是 jQuery 库中的一部分,主要用来选择和操作 HTML 文档中的元素。下面是 jQuery 选择器的详细知识点: 1. ...

    jQuery学习资料之万能的选择器

    jQuery选择器是其强大之处,它们基于CSS选择器,但扩展了更多功能,允许更复杂的选取方式。以下是一些常见选择器: - **基本选择器**:`#id`(ID选择器)、`.class`(类选择器)、`tag`(标签选择器)和`*`(通用...

    jQuery对象与DOM对象转换方法详解

    有时尤其是在初学jQuery,无法记住jQuery的所有函数时,会有很长一段时间使用jQuery选择器配合原始的dom函数进行开发。所以两种对象的转化是很有必要的。 jQuery对象的索引保存的是dom对象,所以可以通过索引将经...

    jquery选择器入门详解小案例

    总之,jQuery选择器是开发者在JavaScript编程中的得力助手,它们使得DOM操作变得更加简单和高效。在深入学习jQuery选择器的同时,别忘了结合实际项目进行练习,这样才能更好地将理论知识转化为实际技能。现在,你...

    jquery对象和javascript对象即DOM对象相互转换

    首先,jQuery对象是通过调用jQuery函数($)并传入一个选择器或DOM元素来创建的。这种包装使得我们可以利用jQuery提供的丰富API,如选择、遍历、事件处理和动画等。例如,`$("#img").attr("src","test.jpg")`就是一...

    PPT和案例\jQuery选择器

    jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...

    jQuery对象与DOM对象之间的转换方法

    而jQuery对象是通过jQuery提供的选择器和jQuery的包装函数`$()`来创建的。它是一个封装了DOM对象的数组类对象,能够使用jQuery的所有方法。使用jQuery对象可以让我们更加方便地进行元素遍历、事件绑定、动画效果等...

    jQuery对象换为DOM对象,js常用API

    在JavaScript编程中,jQuery库极大地简化了DOM操作和事件处理,但有时我们可能需要将jQuery对象转换为原生DOM对象,以便使用某些不被jQuery支持的API或提高性能。这篇博文将探讨如何进行这种转换,并介绍JavaScript...

    dom对象与jquery对象转换[参考].pdf

    jQuery对象是一个集合,包含了所有匹配选择器的元素,因此不能直接调用DOM对象的方法。例如,如果你尝试使用`innerHTML`属性来获取或设置元素内容,这在jQuery对象上是无效的,因为这是DOM对象的方法。 要将DOM对象...

Global site tag (gtag.js) - Google Analytics