css方法,第一个是属性,第二个是值,都是字符串 标签选择器 ('.p1').css({background:'green',fontSize:'30px'}) id选择器 $('#p1').css('background','red')
并集选择器 $('#p1,.p1').css('background','red')
既有p1又有p2才行,这个是没有逗号的 $('.p1.p2').css('background','red')
全局选择器 属性值支持数字和字符串 $('*').css({margin:'0px',padding:'0px'})
属性选择器 属性选择器可以根据是否包含某属性来选取元素 []表示属性 选取属性是href的a标签 $('a[href]').css('color','red')
/根据属性的值来选取元素
$('a[class=a1]').css('color','red')
/根据属性不等于属性是特定值来选取元素
$('a[class!=a1]').css('color','red')class不等于a1的变红
/可以指定属性值以指定值开头的元素
$('a[href^=www]').css('color','red')第二个变红,^这个符号要加在href后面
可以指定属性值以指定值结尾的元素
$('a[href$=com]').css('color','red')全部变红 $这个符号要加在href后面
/可以指定属性值包含指定值结尾的元素
$('a[href*=baidu]').css('color','red')/* 全部变红,*这个符号要加在href后面
层次选择器
/* 后代选择器 */
//$('ul p').css('background','red')/* 四个都变了,这个是所有的后代都会影响*/
/* 子级选择器 */
// $('ul>p').css('background','red')/* 只有一个,因为是ul下的p子级 */
/* 相邻选择器 紧临着目标元素的下一个元素*/
//$('p+li').css('background','red')
/*同辈选择器 用来选取目标元素之后的所有元素 */
// $('p~li').css('background','red')
单击和隐藏
$('button').click(function () {
//$('ul').css('display','none')
/* css方法还可以获取元素的属性值 */
console.log($('ul').css('display'));
if ($('ul').css('display') == 'block') {
$('ul').css('display', 'none')
} else { $('ul').css('display', 'block') }
})