jQuery选择器

1.标签选择器

console.log( $('p') )

css方法 第一个参数是属性 第二个参数是值 都是字符串类型

$('p').css('background','red')

2.类选择器

$('.p1').css({'background':'green','fontSize':'30px'})

3.id选择器 唯一的 只要有一个id选择器其他同名的就不生效了

$('#p1').css('background','red')

4.并集选择器

 $('#p1,.p1').css('background','red')
 等同于下面 
 $('#p1').css('background','red')
 $('.p1').css('background','red')

既要有.p1 又要有.p2

$('.p1.p2').css('background','red')

5.全局选择器

属性值 支持数字和字符串 $('*').css({margin:0,padding:0})$('').css('margin',0) $('').css('padding',0)

属性选择器

属性选择器可以根据是否包含某属性来选取元素

[]表示属性 选取属性是href的a标签

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

/* 根据属性的值来选取元素 */
  $('a[class=a1]').css('color','red')

  选取不等于属性是某个特定值的元素 */
  $('a[class!=a1]').css('color','red')

  指定属性值以指定值开头的元素 */
  $('a[href^=www]').css('background','red')
  指定属性值以指定值结尾的元素 */
  $('a[href$=com]').css('background','red')

  指定属性值包含指定值的元素 */
  $('a[href*=baidu]').css('background','red')

层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

1.后代选择器

$('ul p').css('background','red')

2.子级选择器

$('ul > p').css('background','red');

$('li > p').css('background','red');

3.相邻选择器 ----用来选取紧邻目标元素的下一个元素

$('p+li').css('background','red');

4.同辈选择器----用来选取目标元素之后的所有同辈元素

$('p ~ li').css('background','red');

单击和隐藏

   $('ul').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')
            }
        })