DOM(选择器,属性,筛选,文档处理)
选择器(基本,层级,简单,内容,可见性,属性,子元素,表单及表单对象属性)
基本
#id
根据给定的ID匹配一个元素。返回值为Element
id(String)用于搜索的,通过元素的 id 属性中给定的值
示例
查找ID为"myDiv"的元素。
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
代码
:$("#myDiv");
结果
:<div id="myDiv">id="myDiv"</div>
element
根据给定的元素名匹配所有元素。返回值为
Array<Element>
element (String) :
一个用于搜索的元素。指向
DOM
的标签名。
示例
查找一个
DIV
元素。
<div>DIV1</div><div>DIV2</div><span>SPAN</span>
代码
:$("div");
结果:<div>DIV1</div><div>DIV2</div>
.class
根据给定的类匹配元素。返回值Array<Element>
class (String) : 一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。
示例
查找所有类是"myClass"的元素.
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
代码
:$(".myClass");
结果
:<div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span>
*
匹配所有元素
,
多用于结合上下文来搜索。返回值Array<Element>
示例
找到每一个元素
<div>DIV</div><span>SPAN</span><p>P</p>
代码
:$("*")
结果:<div>DIV</div><span>SPAN</span><p>P</p>
selector1,selectorN
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。返回值Array<Element>
参数
selector1 (Selector) : 一个有效的选择器
selector2 (Selector) : 另一个有效的选择器
selectorN (Selector) : (可选) 任意多个有效选择器
示例
找到匹配任意一个类的元素。
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
代码
:$("div,span,p.myClass")
结果
:<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>
层级
ancestor descendant
在给定的祖先元素下匹配
所有的
后代元素。返回值Array<Element>
ancestor(Selector):任何有效选择器
descendant(Selector):用以匹配元素的选择器,并且它是第一个选择器的后代元素
示例
找到表单中所有的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset>
</form>
<input name="none" />
代码
:$("form input")
结果: <input name="name" />, <input name="newsletter" />
parent>child
在给定的父元素下匹配所有的子元素。返回值Array<Element>
parent (Selector) : 任何有效选择器
child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素
示例
匹配表单中所有的子级input元素。
代码:$("form > input")
结果:<input name="name" />
prev+next
匹配所有紧接在prev元素后的next元素
返回值Array<Element>
prev (Selector) : 任何有效选择器
next (Selector) :一个有效选择器并且紧接着第一个选择器
示例
匹配所有跟在 label 后面的 input 元素
代码:$("label + input")
结果:<input name="name" />, <input name="newsletter" />
prev~siblings
匹配prev元素之后的所有siblings元素 返回值Array<Element>
prev (Selector) : 任何有效选择器
siblings (Selector) : 一个选择器,并且它作为第一个选择器的同辈
示例
找到所有与表单同辈的 input 元素
代码:$("form ~ input")
结果:<input name="none" />
简单
<table>
<tr><td>Header
1</td></tr><tr><td>Value
1</td></tr><tr><td>Value 2</td></tr>
</table>
:first
:
匹配找到的第一个元素
代码
:
$("tr:first")
结果
:<tr><td>Header 1</td></tr>
:last
:
匹配找到的最后一个元素
代码
:$("tr:last")
结果
:<tr><td>Value 2</td></tr>
:not(selector)
:
去除所有与给定选择器匹配的元素
<input name="apple" />
<input name="flower" checked="checked" />
代码
:$("input:not(:checked)")
结果
:<input name="apple" />
:even
:
匹配所有索引值为偶数的元素
,
从
0
开始计数
代码
:$("tr:even")
结果
:<tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>
:odd
:
配所有索引值为奇数的元素
,
从
0
开始计数
代码
:$("tr:odd")
结果
:<tr><td>Value 1</td></tr>
:eq(index)
:
匹配一个给定索引值的元素
代码
:$("tr:eq(1)")
结果
:<tr><td>Value 1</td></tr>
:gt(index)
:
匹配所有大于给定索引值的元素
代码
:$("tr:gt(0)")
结果
:<tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr>
:lt(index)
:
匹配所有小于给定索引值的元素
代码
:$("tr:lt(2)")
结果
:<tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr>
:header
:
匹配如
h1, h2, h3
之类的标题元素
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
代码
:$(":header").css("background", "#EEE");
结果
:<h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2>
:animated
:
匹配所有没有在执行动画效果中的元素
<button id="run">Run</button><div></div>
代码
:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+20" }, 1000);
});
内容
:contains(text)
:
匹配包含给定文本的元素
text (String) :
一个用以查找的字符串
示例
查找所有包含
"John"
的
div
元素
<div>John
Resig</div><div>George Martin</div><div>Malcom
John Sinclair</div><div>J. Ohn
代码
:$("div:contains('John')")
结果
:<div>John Resig</div>, <div>Malcom John Sinclair</div>
:empty
:
匹配所有不包含子元素或者文本的空元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
代码
:$("td:empty")
结果
:<td></td>, <td></td>
:has(selector)
:
匹配含有选择器所匹配的元素的元素
selector (Selector) :
一个用于筛选的选择器
示例
给所有包含
p
元素的
div
元素添加一个
text
类
<div><p>Hello</p></div><div>Hello again!</div>
代码
:$("div:has(p)").addClass("test");
结果
: <div class="test"><p>Hello</p></div>
:parent
:
匹配含有子元素或者文本的元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
代码
:$("td:parent")
结果
: <td>Value 1</td>, <td>Value 1</td>
可见性
:hidden
:
匹配所有的不可见元素
,input
元素的
type
属性为
"hidden"
的话也会被匹配到
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
代码
:$("tr:hidden")
结果
:<tr style="display:none"><td>Value 1</td></tr>
:visible
:
匹配所有的可见元素
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
代码
:$("tr:visible")
结果
: <tr><td>Value 2</td></tr>
属性
[attribute]
:
匹配包含给定属性的元素
<div><p>Hello!</p></div>
<div id="test2"></div>
代码
:$("div[id]")
结果
:<div id="test2"></div>
[attribute=value]
:
匹配给定的属性是某个特定值的元素
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
代码
:$("input[name='newsletter']").
attr("checked", true);
结果
:<input
type="checkbox" name="newsletter" value="Hot Fuzz" checked="true"
/>, <input type="checkbox" name="newsletter" value="Cold Fusion"
checked="true" />
[attribute!=value]
:
匹配给定的属性是不包含某个特定值的元素
[attribute^=value]
:
匹配给定的属性是以某些值开始的元素
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
代码
:$("input[name^='news']")
结果
:<input name="newsletter" />, <input name="newsboy" />
[attribute$=value]
:
匹配给定的属性是以某些值结尾的元素
[attribut*=value]
:
匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN]
:
复合属性选择器
,
需要同时满足多个条件时使用
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
代码
:$("input[id][name$='man']")
结果
: <input id="letterman" name="new-letterman" />
分享到:
相关推荐
使用jQuery表单对象属性过滤选择器 使用jQuery表单过滤选择器 第3章 DOM树状文档 获取元素的属性 设置元素的属性 设置元素的属性 获取或设置元素的内容 获取或设置元素的值 直接设置元素样式值 增加CSS类别...
* jQuery 中的选择器有基本选择器、后代选择器、类选择器等。 * 不同的选择器可以在不同的场景下使用,例如基本选择器用于选择某个标签,类选择器用于选择具有某个类名的元素。 jQuery 核心函数 * jQuery...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href...
本文有软件开发网整理,主要给读者们分享了一些主要的jQuery API,其中包括jQuery 核心函数和方法、jQuery属性参考手册、jQuery CSS操作、jQuery选择器、jQuery文档操作、jQuery筛选操作、jQuery事件方法、jQuery...
jquery基础文档参考手册,介绍了jquery的各种方法,如:选择器,DOM操作,遍历-筛选效果,/动画,事件,CSS方法,ajax方法。
(详情可以参见:jQuery.ajax文档) 此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。 2. 延迟对象 延迟对象(Deferred Object,jQuery.Deferred对象)是...
在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents()、 ...同时,本方法还接受一个字符串选择器,用于从返回的节点集中筛选符合选择器的子元素集。 2.parent([se
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法...
1.3 第一个jQuery文档 1.3.1 下载jQuery 1.3.2 设置HTML文档 1.3.3 编写jQuery代码 1.4 小结 第2章 选择符——取得你想要的一切 2.1 DOM 2.2 工厂函数$() 2.3 CSS选择符...
context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。 示例 找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。 HTML 代码: <p>one</p> <div><p>two</p></div> <p>three...
find接受一个参数表达式selector:选择器(字符串)、DOM元素(Element)、jQuery对象。分两种情况处理: 第一种,如果传入的参数是非字符串,则先通过jQuery选择器将selector查找出来,然后过滤出包含于当前jQuery...
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选取文档元素的方法: 1、通过ID选取元素...
2.4 属性选择符 2.5 自定义选择符 2.5.1 每隔一行为表格添加样式 2.5.2 基于表单的选择符 2.6 DOM遍历方法 2.6.1 为特定单元格添加样式 2.6.2 连缀 2.7 访问DOM元素 2.8 小结 第3章 事件 3.1 在页面加载后...
本文实例讲述了jQuery中ajax的load()与post()方法。分享给大家供大家参考,具体如下: ...jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url
参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。 .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。看下例子: ...
04 css的属性选择器 05 css的伪类 06 css的选择器优先级 07 css的背景属性 第39章 01 css的文本属性与边框属性 02 css的列表属性与display属性 03 css的内外边距 04 css的内外边距补充 05 css的float属性 06 css的...
第一章 ExtJs大比拼JQuery:Dom文档操作 3 一、选择器 4 二、属性 8 四、筛选 10 五、文档处理 11 六、CSS 13 七、事件 14 第二章 ExtJs对js基本语法扩展支持 16 一、动态引用加载 16 二、对类的封装 17 三、基本...