jquery选择器用法详细介绍

时间：2012-02-22 编辑：简简单单来源：一聚教程网

1）基本对象获取
$(“*”)
获取所有对象

代码如下	复制代码
//等同于document.getElementById("world").innerHTML="Hello World!"; $("#world").html("Hello World!");

例如下面的代码把id为world的html内容改为“Hello World!”

下面的代码将选择出P的class不为 “intro”的元素

代码如下	复制代码
$("p[class!=intro]").append("Paragraph with class");

下面的代码是一个很好的选择器，匹配链接地址中含有www.111com.net的元素

代码如下

复制代码

$("a[href*='www.111com.net']").addClass("mysite");

$(“div”)

获取html中所有的div元素

代码如下	复制代码
$("div").html("Hello World!");

$(“#a，.b，p”)
获取id为a和class为b以及所有p元素

代码如下	复制代码
$(“#a .b p”)

获取id为a并且class为b元素下的p元素

（2）层级对象获取

代码如下	复制代码
$(“div>input”)

获取div下所有input对象

代码如下	复制代码
$(“div+h”)

获取紧跟在div后的一个h元素

代码如下	复制代码
$(“div~p”)

获取在元素div之后的所有p元素

（3）简单对象获取

$(“element:first”)

获取页面上某个元素的第一个如$(“div:frist”)表示第一个div

$(“element:last”)

实例

1、:first跟 :last

:first 和 :last 是选择DOM元素中第一个或者最后一个元素。例如下面一段html代码，

代码如下	复制代码
Item A Item B Item C Item D

我们可以通过后面的jQuery代码的方法轻松的选择它的第一个跟最后一个元素，并且给它们改变样式:

代码如下	复制代码
$("#t-myul-1 li:first").css("color", "#0033CC"); $("#t-myul-1 li:last").addClass("last"); And this is the CSS class .last: .last{ background:#0033CC; color:#FFF; }

获取页面上某个元素的最后一个如$(“div:frist”)表示最后一个div

代码如下	复制代码
$(“element:not(selector)”)

去除所有与选择器匹配的元素如$(“input:not(:check)”)表示所有未被选中的复选框

代码如下	复制代码
$(“element:even”)

获取element元素的偶数行

代码如下	复制代码
$(“element:odd”)

获取元素的奇数行

代码如下	复制代码
$(“element:eq(index)”)

获取特定索引的元素如$(“div:el(2)”)表示第三个div

代码如下	复制代码
$(“element:gt(index)”)

匹配所有大于给定索引值的元素

代码如下	复制代码
$(“element:lt(index)”)

匹配所有小于给定索引的元素

代码如下	复制代码
$(“:header”)

匹配h标记的元素

代码如下	复制代码
$(“element:animated”)

匹配所有没有执行动画效果的元素

（4）内容对象的获取和对象的可见性

代码如下	复制代码
$(“Element:contains(text)”)

元素中的文本是否包含某个字母或字符串

代码如下	复制代码
$(“Element:empty”)

获得不包含文本或子元素的元素对象

代码如下	复制代码
$(“Element:parent”)

获得对象元素包含文本或子元素

代码如下	复制代码
$(“Element:has(selector)”)

匹配含有某个元素是否包含某个元素如$(“p:has(span)”)表示所有包含span元素的p元素

代码如下	复制代码
$(“Element:hidden”)

匹配所有不可见元素，包括display:none 以及input的属性是hidden的元素

代码如下	复制代码
$(“Element:visible”)

匹配所有课件元素

（5）对象获取进阶

代码如下	复制代码
$(“Element[id]“)

获取所有带有id属性的元素

代码如下	复制代码
$(“Element[attribute=abcd]“)

获取所有某个属性为abcd的元素

代码如下	复制代码
$(“Element[attribute!=abcd]“)

获得所有某个属性不为abcd的元素

代码如下	复制代码
$(“Element[attribute^=ab]“)

获得所有某个属性以ab开头的元素

代码如下	复制代码
$(“Element[attribute$=ab]“)

获得所有某个属性以ab结尾的元素

代码如下	复制代码
$(“Element[attribute*=ab]“)

获得所有含有某个属性包含ab的元素

代码如下	复制代码
$(“Element[selector1][selector2][.....]“)

符合属性选择器如$(“input[id][name][value=abcd]“)表示获得带有ID、Name以及value是abcd的input元素

（6）子元素的获取

代码如下	复制代码
$(“Element:nth-child(index)”)

选择父级下的第N个子元素，索引从1开始

代码如下

复制代码

:nth-child(even)偶数
:nth-child(odd)奇数
:nth-child(3n)表达式
:nth-child(2)索引
:nth-child(3n+1)表达式

$(“Element:first-child”)

父级下的第一个子级元素

代码如下	复制代码
$(“Element:last-child”)

父级下的最后一个子级元素

代码如下	复制代码
$(“Element:only-child”)

父级下的唯一的一个子级元素

（7）表单对象的获取

代码如下

复制代码

$(:input)
只能匹配input元素类型为 input button select textarea

$(:text)
所有当行文本框

$(:password)
所有密码框

$(:radio)
所有单选按钮

$(:checkbox)
所有复选框

$(:submit)
所有提交按钮

$(:image)
所有图片域
$(:reset)
所有充值按钮

$(:button)
所有按钮

$(:file)
所有的文件上传域

$(:hidden)
所有不可见元素或者type为hidden的元素

$(:enabled)
所有可用input元素

$(:disabled)
所有不可用input元素

$(:checked)
所有复选框元素

$(:selected)
所有下拉表
（7）元素属性的设置与移除
$(“Element”).attr(name)
取得第一个匹配元素的属性值如$(“img”).attr(“src”);

$(“Element”).attr({key:value,key:value,……})
为某一个元素一次性设置多个属性

$(“Element”).attr(key,value)
为某个元素设置属性

$(“Element”).attr(key,function)
为所有匹配的元素设置一个计算的属性

$(“Element”).removeAttr(name)

移除某一个属性

有这样一段html代码，我们想把其中内容为www.111com.net的元素背景颜色变成FFC。我们先来看html代码：

代码如下

复制代码

love.www.111com.net

blog.www.111com.net

www.111com.net

work.www.111com.net

背景颜色的css我们使用以下的代码：

.highlight {
background:#FFC;
}

我们使用下面的代码就可以轻松的实现高亮内容为www.111com.net的效果啦

代码如下	复制代码
$("#t-myul-4 li:contains('www.111com.net')").addClass("highlight");

上一个： javascipt中的作用域与变量
下一个： css中Button在IE6、7下的自适应宽度问题

推荐专题

最新下载

热门教程

jquery选择器用法详细介绍

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程