Jquery选择器-基本选择器

Posted Java程序员联盟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery选择器-基本选择器相关的知识,希望对你有一定的参考价值。


jquery作为我们常用前端工具之一,实际项目中常用的的选择器有id选择器(#id)、元素选择器(element)、样式选择器(.class)。

#id

概述:根据给定的ID匹配一个元素。使用任何的元字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)作为名称的文本部分, 它必须被两个反斜杠转义:\\。

参数:id,用于搜索的,通过元素的 id 属性中给定的值。


示例:查找 ID 为"myDiv"的元素。

html 代码:

<div id="notMe"><p>id="notMe"</p></div>

<div id="myDiv">id="myDiv"</div>


jQuery 代码:$("#myDiv");


结果:

[ <div id="myDiv">id="myDiv"</div> ]


示例:查找含有特殊字符的元素。

HTML 代码:

<span id="foo:bar"></span>

<span id="foo[bar]"></span>

<span id="foo.bar"></span>


jQuery 代码:#foo\\[bar\\]


结果:

[ <span id="foo[bar]"></span>]

element

概述:根据给定的元素标签名匹配所有元素。


参数:element,一个用于搜索的元素。指向 DOM 节点的标签名。


示例:查找一个 DIV 元素。

HTML 代码:

<div>DIV1</div>

<div>DIV2</div>

<span>SPAN</span>


jQuery 代码:$("div");


结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

.class

概述:根据给定的css类名匹配元素。


参数:class,一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。


示例:查找所有类是 "myClass" 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>

<div class="myClass">div class="myClass"</div>

<span class="myClass">span class="myClass"</span>


jQuery 代码:$(".myClass");


结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

selector1,selector2,selectorN

概述:将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。


参数

selector1  一个有效的选择器

selector2  另一个有效的选择器

selectorN  任意多个有效选择器


示例:找到匹配任意一个类的元素。

HTML 代码:

<div>div</div>

<p class="myClass">p class="myClass"</p>

<span>span</span>

<p class="notMyClass">p class="notMyClass"</p>


jQuery 代码:$("div,span,p.myClass")


结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

* 选择器

概述匹配所有元素,多用于结合上下文来搜索。


示例:找到每一个元素。


HTML 代码如下:

<div>DIV</div>

<span>SPAN</span>

<p>P</p>


jQuery 代码:$("*")


结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

来源:http://codecloud.net/books/jquery/index.html

Java程序员联盟
微信号: javalm (←长按复制)

倾力打造Java程序员的温馨小窝


以上是关于Jquery选择器-基本选择器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery ---[jQuery选择器,jQuery对象的遍历]

jquery选择器有哪几种

[ jquery 选择器 总览 ] jquery选择器总览

jQuery选择器(转)

jquery选择器

JQuery选择器总结