JQ选择器

74 阅读1分钟

css方法,第一个是属性,第二个是值,都是字符串 标签选择器 (p).css(background,red)类选择器('p').css('background','red') 类选择器 ('.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') }
    })