Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1372933
  • 博文数量: 205
  • 博客积分: 6732
  • 博客等级: 准将
  • 技术积分: 2835
  • 用 户 组: 普通用户
  • 注册时间: 2008-09-04 17:59
文章分类

全部博文(205)

文章存档

2016年(1)

2015年(10)

2014年(1)

2013年(39)

2012年(23)

2011年(27)

2010年(21)

2009年(55)

2008年(28)

我的朋友

分类: jQuery

2013-11-18 14:49:51

转至 http://ruirui516888.iteye.com/blog/1554985
一、基本选择器

1. id选择器(指定id元素)

将id="one"的元素背景色设置为黑色。(id选择器返单个元素)
$(document).ready(function () {
        $('#one').css('background', '#000');
    });
2. class选择器(遍历css类元素)

将class="cube"的元素背景色设为黑色
$(document).ready(function () {
        $('.cube').css('background', '#000');
    });
3. element选择器(遍历html元素)

将p元素的文字大小设置为12px
$(document).ready(function () {
        $('p').css('font-size', '12px');
    });
4. * 选择器(遍历所有元素)
$(document).ready(function () {
        // 遍历form下的所有元素,将字体颜色设置为红色
        $('form *').css('color', '#FF0000');
    });
5. 并列选择器
$(document).ready(function () {
        // 将p元素和div元素的margin设为0
        $('p, div').css('margin', '0');
    });

--------------------------------------------------------------------------------

二、 层次选择器

1. parent > child(直系子元素)
$(document).ready(function () {
        // 选取div下的第一代span元素,将字体颜色设为红色
        $('div > span').css('color', '#FF0000');
    });
下面的代码,只有第一个span会变色,第二个span不属于div的一代子元素,颜色保持不变。

        123
       


            456
       



2. prev + next(下一个兄弟元素,等同于next()方法)
$(document).ready(function () {
    // 选取class为item的下一个div兄弟元素
    $('.item + div').css('color', '#FF0000');
    // 等价代码
    //$('.item').next('div').css('color', '#FF0000');
});
下面的代码,只有123和789会变色


123

456


789


3. prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)
$(document).ready(function () {
    // 选取class为inside之后的所有div兄弟元素
    $('.inside ~ div').css('color', '#FF0000');
    // 等价代码
    //$('.inside').nextAll('div').css('color', '#FF0000');
});
下面的代码,G2和G4会变色
G1

G2

G3
G4


--------------------------------------------------------------------------------

三、 过滤选择器

1. 基本过滤选择器

——1.1 :first和:last(取第一个元素或最后一个元素)
$(document).ready(function () {
            $('span:first').css('color', '#FF0000');
            $('span:last').css('color', '#FF0000');
        });
下面的代码,G1(first元素)和G3(last元素)会变色
G1
G2
G3

——1.2 :not(取非元素)
$(document).ready(function () {
            $('div:not(.wrap)').css('color', '#FF0000');
        });
下面的代码,G1会变色
G1

G2


但是,请注意下面的代码:

    G1
   
G2



当G1所在div和G2所在div是父子关系时,G1和G2都会变色。

——1.3 :even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)
$(document).ready(function () {
            $('tr:even').css('background', '#EEE'); // 偶数行颜色
            $('tr:odd').css('background', '#DADADA'); // 奇数行颜色
        });
A、C行颜色#EEE(第一行的索引为0),B、D行颜色#DADADA



   
       
       
       
       
   
A
B
C
D


——1.4 :eq(x) (取指定索引的元素)


$(document).ready(function () {
            $('tr:eq(2)').css('background', '#FF0000');
        });
更改第三行的背景色,在上面的代码中C的背景会变色。

——1.5 :gt(x)和:lt(x)(取大于x索引或小于x索引的元素)
$(document).ready(function () {
            $('ul li:gt(2)').css('color', '#FF0000');
            $('ul li:lt(2)').css('color', '#0000FF');
        });
L4和L5会是红色,L1和L2会是蓝色,L3是默认颜色



       
  • L1

  •    
  • L2

  •    
  • L3

  •    
  • L4

  •    
  • L5



——1.6 :header(取H1~H6标题元素)
$(document).ready(function () {
            $(':header').css('background', '#EFEFEF');
        });
下面的代码,H1~H6的背景色都会变


H1


H2


H3


H4


H5

H6


2. 内容过滤选择器

——2.1 :contains(text)(取包含text文本的元素)
$(document).ready(function () {
            // dd元素中包含"jQuery"文本的会变色
            $('dd:contains("jQuery")').css('color', '#FF0000');
        });
下面的代码,第一个dd会变色



   
技术

   
jQuery, .NET, CLR

   
SEO

   
关键字排名

   
其他

   



——2.2 :empty(取不包含子元素或文本为空的元素)
$(document).ready(function () {
            $('dd:empty').html('没有内容');
});


上面第三个dd会显示"没有内容"文本

——2.3 :has(selector)(取选择器匹配的元素)
$(document).ready(function () {
            // 为包含span元素的div添加边框
            $('div:has(span)').css('border', '1px solid #000');
        });
即使span不是div的直系子元素,也会生效



   


        A
        B
   



——2.4 :parent(取包含子元素或文本的元素)
$(document).ready(function () {
            $('ol li:parent').css('border', '1px solid #000');
        });
下面的代码,A和D所在的li会有边框



       

  1.    
  2. A

  3.    

  4.    
  5. D



3. 可见性过滤选择器

——3.1 :hidden(取不可见的元素)

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素,而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或opactity:0的元素占据了空间,会被排除在外。

参照:

下面的代码,先弹出"hello"对话框,然后hid-1会显示,hid-2仍然是不可见的。




   
   
   
   


   
display: none

   
visibility: hidden

   


——3.2 :visible(取可见的元素)

下面的代码,最后一个div会有背景色



display: none

visibility: hidden



    jQuery选择器大全

4. 属性过滤选择器

——4.1 [attribute](取拥有attribute属性的元素)

下面的代码,最后一个a标签没有title属性,所以它仍然会带下划线


      
   
——4.2 [attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素)

分别为class="item"和class!=item的a标签指定文字颜色


  
——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value](attribute属性值以value开始,以value结束,或包含value值)

在属性选择器中,^$符号和正则表达式的开始结束符号表示的含义是一致的,*模糊匹配,类似于sql中的like '%str%'。



——4.4 [selector1][selector2](复合型属性过滤器,同时满足多个条件)

将title以"jQuery"开始,并且class="item"的a标签隐藏,那么jQuery事件大全会被隐藏
  
5. 子元素过滤选择器

——5.1 :first-child和:last-child

:first-child表示第一个子元素,:last-child表示最后一个子元素。

需要大家注意的是,:fisrst和:last返回的都是单个元素,而:first-child和:last-child返回的都是集合元素。举个例子:div:first返回的是整个DOM文档中第一个div元素,而div:first-child是返回所有div元素下的第一个元素合并后的集合。

这里有个问题:如果一个元素没有子元素,:first-child和:last-child会返回null吗?请看下面的代码:


   
   
   



   

       

   



也许你觉得这个答案,是不是太简单了?len1 = 2, len2 = 2。但实际确并不是,它们俩都等于3。
把上面的代码稍微修改一下:

   
   
   


123
   
456
       

   





结果却是弹出三个alert,只不过最后一个alert里面是空白的。



——5.2nly-child

当某个元素有且仅有一个子元素时,:only-child才会生效。


   
   
   


123
   
456
       

   




这里:only-child也是三个元素,从最后一个很粗的红色边框(实际是两个元素的边框重叠了)也可以看出来。



——5.3 :nth-child

看到这个就想起英文单词里的,fourth, fifth, sixth……,nth表示第n个,:nth-child就表示第n个child元素。要注意的是,这儿的n不像eq(x)、gt(x)或lt(x)是从0开始的,它是从1开始的,英文里好像也没有zeroth这样的序号词吧。

:nth-child有三种用法:

1) :nth-child(x),获取第x个子元素
2) :nth-child(even)和:nth-child(odd),从1开始,获取第偶数个元素或第奇数个元素
3) :nth-child(xn+y),x>=0,y>=0。例如x = 3, y = 0时就是3n,表示取第3n个元素(n>=0)。实际上xn+y是上面两种的通项式。(当x=0,y>=0时,等同于:hth-child(x);当x=2,y=0时,等同于nth-child(even);当x=2,y=1时,等同于:nth-child(odd))

下面的两个例子是针对2)和3)的,1)的例子我就不列举了。

例2:




   
   
   
   


   
       
       
       
       
       
       
   
1. NBA 2012季后赛
2. NBA 2011季后赛
3. NBA 2010季后赛
4. NBA 2009季后赛
5. NBA 2008季后赛
6. NBA 2007季后赛



例3(html代码和例2是一样的):



6. 表单对象属性过滤选择器

——6.1 :enabled和:disabled(取可用或不可用元素)

:enabled和:diabled的匹配范围包括input, select, textarea。



   

       
   

   

       
   

   

       
   

   

       
   

——6.2 :checked(取选中的单选框或复选框元素)

下面的代码,更改边框或背景色仅在IE下有效果,chrome和firefox不会改变,但是alert都会弹出来。




    必须勾选


你现在工作的企业属于:
    外企
    国企
    民企

——6.3 :selected(取下拉列表被选中的元素)




--------------------------------------------------------------------------------

四、表单选择器

1. :input(取input,textarea,select,button元素)

:input元素这里就不再多说了,前面的一些例子中也已经囊括了。

2. :text(取单行文本框元素)和:password(取密码框元素)

这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。




    账户登录
    

       
   

   

       
   


3. :radio(取单选框元素)

:radio选择器和属性选择器$('input[type=radio]')等同


你现在工作的企业属于:
    外企
    国企
    民企
4. :checkbox(取复选框元素)

:checkbox选择器和属性选择器$('input[type=checkbox]')等同

    您的兴趣爱好:
    游泳
    看书
    打篮球
    电脑游戏
上面的代码,会将所有额checkbox的value输出出来。若你想选择选中项,有三种写法:
$(':checkbox:checked').each(function() {
    alert($(this).val());
});

$('input[type=checkbox][checked]').each(function() {
    alert($(this).val());
});

$(':checked').each(function() {
    alert($(this).val());
});
5. :submit(取提交按钮元素)

:submit选择器和属性选择器$('input[type=submit]')等同

6. :reset(取重置按钮元素)

:reset选择器和属性选择器$('input[type=reset]')等同

7. :button(取按钮元素)

:button选择器和属性选择器$('input[type=button]')等同

8. :file(取上传域元素)

:file选择器和属性选择器$('input[type=file]')等同

9. :hidden(取不可见元素)

:hidden选择器和属性选择器$('input[type=hidden]')等同

表单选择器的6~10例子我就不再列举了,和1~5的很类似,大家可以自己尝试一下。


Always keep dream, keep thinking, keep moving, even if the road obstacles , the one more important thing is that always be a pig for you, that's keep fool.
阅读(2638) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~