码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-过滤选择器二

时间:2017-05-16 16:43:13      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:class   复选框   开头   orm   logs   test   ble   log   ext   

1、属性过滤选择器

$(function(){
            $(‘div[title]‘).css(‘background‘,‘red‘);  //有title属性的所有div元素
            $(‘div[title = test]‘).css(‘background‘,‘yellow‘);  //title属性值为test的所有div元素
            $(‘div[title != test]‘).css(‘background‘,‘black‘);  //title属性值不为test的所有div元素(包含没有title的div元素)
            $(‘div[title ^=te]‘).css(‘background‘,‘pink‘);  //title属性以te开头的所有div元素
            $(‘div[title $=est]‘).css(‘background‘,‘red‘);  //title属性以est结束的所有div元素
            $(‘div[title *=es]‘).css(‘background‘,‘blue‘);  //title属性包含es字符的所有div元素
            $(‘div[id][title *=es]‘).css(‘background‘,‘green‘);  //有id属性且title属性包含es字符的所有div元素
});

2、子元素过滤选择器

:nth-child(index/even/odd/equation) 选取每个父元素下的第index子元素或者奇偶元素(index从1算起)

:first-child 选取每个父元素下的第一个子元素

:last-chlid 选取每个父元素下的最后一个子元素

:only-chlid 如果某个元素是父元素的唯一子元素,则匹配;如果含有其他子元素,则不匹配

$(function(){
            $(‘div.one :nth-child(2)‘).css(‘background‘,‘red‘);  //class为one的div的第二个子元素
            $(‘div.one :last-child‘).css(‘background‘,‘blue‘);  //class为one的div的最后一个子元素
            $(‘div.one :first-child‘).css(‘background‘,‘green‘);  //class为one的div的第一个子元素
            $(‘div.one :only-child‘).css(‘background‘,‘yellow‘);
});

3、表单属性过滤选择器

$(function(){
            $(‘#form1 input:enabled‘).val(‘这里变化了‘);  //:enabled-选取id为#form1下的input所有可用元素
            $(‘#form1 input:disabled‘).val(‘这里变化了‘);  //:disabled-选取id为#form1下的input所有不可用元素
            $(‘input:checked‘).length(); //:checked-选取所有被选中的元素(单选框和复选框)
            $(‘select:selected‘).text();  //:selected-选取所有被选中的选择元素(下拉列表)
});

 

jQuery-过滤选择器二

标签:class   复选框   开头   orm   logs   test   ble   log   ext   

原文地址:http://www.cnblogs.com/halai/p/6862064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!