基础选择器
$('#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);