首页 > 代码库 > jQuery-过滤选择器二
jQuery-过滤选择器二
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-过滤选择器二
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。