jquery选择器 笔记

基础选择器

$('#box').css('color','red');//id选择器

$('.pro').css('color','blue');//class选择器

$('div').css('font-size','30px');//元素选择器

$('p *').css('font-weight','bold');//通配选择器

$('p,div').css('border','1px solid #ccc');//并列选择器

层次选择器

$('#container>ul').css('color', 'red'); //直系子元素

$('#third+li').html('秋末冬初').css('color','green');//下一个兄弟元素 等同于next()

//$('#third').next('li').html('秋末冬初');

$('#third~li').css('background','palegoldenrod');//所有弟元素 等同于 nextAll()

//$('#third').nextAll('li').css('background','palegoldenrod')

过滤选择器

--1基本过滤选择器

//first last

$('li:first').html('非自然死亡').css('color','red');

$('li:last').html('死亡笔记');

//:not() 取非元素

$('li:not(#love)').css('font-style','italic');

//even odd 取奇偶元素

$('li:even').css('text-decoration','line-through');

$('li:odd').css('text-decoration','underline');

//eq() 取指定索引的元素

$('li:eq(2)').css('color','plum');

//gt lt 取大于x索引 或小于x索引的元素

$('li:lt(3)').css('font-size','22px');

//:header 取h1-h6的标题元素

$(':header').css('color','pink');

--2 内容过滤选择器

//取contains(text) 取包含text的文本元素

$('li:contains("魔道")').css('color','red');

//empty 取不包含子元素或文本为空的元素

$('li:empty').html('大大新作');

//has(selector)取选择器匹配的元素

$('li:has("span")').css('color','red');

//parent 取包含子元素或文本的元素

$('div:parent').css('color','greenyellow');

--3 可见性过滤选择器

//:hidden 取不可见的元素

$('p:hidden').css({'display':'block','color':'blue'});

//:visible 取可见的元素

$('p:visible:last').hide()

--4 属性过滤选择器;

//[attribute] 取拥有attribute属性的元素

$('a[target]').css('color','red');

//[attribute=value] [att ribute!=value]

$('a[target="_self"]').css('color','yellow');

//[attribute ^=value] 选择器选取每个带有指定属性且以指定字符串开头的元素

,[attribute $=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素

[attribute *=value] 选择器选取每个带有指定属性且值包含指定字符串的元素。

$('a[href^="ftp"]').css('font-size','22px');

$('a[target$="_self"]').css('font-size','30px');

$('a[target*="b"]').css('background','pink');

 

//复合型属性过滤器 同时满足多个条件

$('a[href][title]').css('font-size','10px');

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

//:first-child :last-child

$('p:first-child,p:last-child').css('color','red');

//:only-child 选择器选取属于其父元素的唯一子元素的每个元素

$('span:only-child').css('font-size','22px');

//:nth-child(x),

$('p:nth-child(4)').css('color','yellow');

//nth-child(even) :nth-child(odd)

$('p:nth-child(even)').css('background','pink');

//:nth-child(xn+y)表达式

$('p:nth-child(2n+1)').css('font-style','italic');

--6 表单过滤选择器;

//enabled :disabled 去可用或不可用元素

$('input:disabled').css('border','1px solid red');

//$('input:enabled').css('background','red');

//$('input:not(disabled)').css('background','red');

//:chcked

$('input:checked').val('123').each(function(){

$('span').html('123');

alert($(this).val());

})

//:selected

$('select').change(function(){

alert($(':selected').val());

})

 

表单选择器

//:input 获取input元素

$(':input').each(function(){

alert($(this).val());

})

//:text 选择单行文本框

$(':text,:password').css({'200px',height:'25px',border:'1px solid #ccc'})

.focus(function(){$(this).val('')})

.blur(function(){$(this).val('守护最好的坤坤')})

//:radio 单选按钮

$(':radio').each(function(){

$(this).click(function(){alert(this.value)})

})

// :checkbox 复选框

$('#btn').click(function(){

var $fav='';

$(':checkbox:checked').each(function(){

$fav+=$(this).val()+ ",";

})

alert($fav.slice(0,-1));

})

//:file 取上传域元素

//prop() 可以设置（返回）对象的属性，该方法可以同时设置与取消

//attr 返回的是具体的属性值 如checked

$(':checkbox').prop('checked',this.checked);