常用的jQuery选择器实例介绍

时间：2013-11-28 编辑：简简单单来源：一聚教程网

基本的选择器

代码如下

复制代码

$(“#one”).css(“background”,”#bbffaa”);改变id为one的元素的背景色
$(“.mini”).css(“background”,”#bbffaa”);改变class为mini的所有元素的背景色
$(“div”).css(“background”,”#bbffaa”);改变元素名是《div》的所有元素的背景色
$(“*”).css(“background”,”#bbffaa”);改变所有元素的背景色

$(“span,#two”).css(“background”,”#bbffaa”);改变所有的span元素和id为two的元素的背景色

层次选择器

代码如下

复制代码

$(“body div”).css(“background”,”#bbffaa”); 改变body内所有《div》的背景色
$(“body > div”).css(“background”,”#bbffaa”);改变《body》内子《div》元素的背景色
$(“.one + div”).css(“background”,”#bbffaa”);改变class为one的下一个《div》元素背景色
$(“#two”).nextAll(“div”).css(“background”,”#bbffaa”);改变id为two元素后面的所有《div》兄弟元素的背景色

过滤选择器-基本过滤选择器

代码如下

复制代码

$(“div:first”).css(“background”,”#bbffaa”);改变第一个div元素的背景色
$(“div:last”).css(“background”,”#bbffaa”);改变最后一个div元素的背景色
$(“div:not(.one)”).css(“background”,”#bbffaa”);改变class不为one的div的背景色
$(“div:even”).css(“background”,”#bbffaa”);改变索引值为偶数的《div》元素的背景色
$(“div:odd”).css(“background”,”#bbffaa”);改变索引值为奇数的《div》元素的背景色
$(“div:eq(3)”).css(“background”,”#bbffaa”);改变索引值为3的《div》元素的背景色
$(“div:gt(3)”).css(“background”,”#bbffaa”);改变索引值为大于3的《div》元素的背景色
$(“div:lt(3)”).css(“background”,”#bbffaa”);改变索引值小于3的《div》元素的背景色
$(“:header”).css(“background”,”#bbffaa”);改变所有标题元素的背景色
$(“:animated”).css(“background”,”#bbffaa”);改变当前正在执行动画元素的背景色

过滤选择器-内容过滤选择器

代码如下

复制代码

$(“div:contains(di)”).css(“background”,”#bbffaa”);改变包含文本“di”的《div》元素的背景色
$(“div:empty”).css(“background”,”#bbffaa”);改变不包含子元素（包含文本）的《div》元素的背景色
$(“div:has(.mini)”).css(“background”,”#bbffaa”);改变含有class为mini元素《div》元素的背景色
$(“div:parent”).css(“background”,”#bbffaa”);改变包含子元素（包含文本）的《div》元素的背景色

过滤选择器-可见性过滤选择器

代码如下	复制代码
$(“div:visible”).css(“background”,”#FF6500″);改变所有可见的《div》元素的背景色 $(“div:hidden”).show(3000);显示所有隐藏《div》元素的背景色

过滤选择器-属性过滤选择器

代码如下

复制代码

$(“div[title]“).css(“background”,”#FF6500″);改变含有属性title的《div》元素的背景色
$(“div[title=test]“).css(“background”,”#FF6500″);改变属性title值等于test的《div》元素的背景色
$(“div[title!=test]“).css(“background”,”#FF6500″);改变属性title值不等于test的《div》元素的背景色
$(“div[title^=te]“).css(“background”,”#FF6500″);改变属性title值以“te”开始的《div》元素的背景色
$(“div[title*=es]“).css(“background”,”#FF6500″);改变属性title值含有es的《div》元素的背景色
$(“div[id][title*=es]“).css(“background”,”#FF6500″);改变含有属性id,并且属性title值含有es的《div》元素的背景色

过滤选择器-子元素过滤选择器

代码如下

复制代码

$(“div.one :nth-child(2)”).css(“background”,”#FF6500″);改变class为one的《div》父元素下的第2个子元素的背景色
$(“div.one :first-child”).css(“background”,”#FF6500″);改变class为one的《div》父元素下的第1个子元素的背景色
$(“div.one :last-child”).css(“background”,”#FF6500″);改变class为one的《div》父元素下的最后1个子元素的背景色
$(“div.one nly-child”).css(“background”,”#FF6500″);改变class为one的《div》父元素下的只有一个子元素的背景色

上一个：同一页面可多次使用的倒计时js代码
下一个： Drupal 7安装ckeditor编辑器几种方法

推荐专题

最新下载

热门教程

常用的jQuery选择器实例介绍

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程