JQ选择器

window.onload

必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等） 才能执行

     window.onload = function (){
         document.getElementById('div1').style.background = 'red'
     } 

    

下面的把上面写的覆盖了 同一页面不能同时编写多个

    window.onload = function (){
         document.getElementById('div1').style.fontSize = '30px'
     }

     console.log($());   
     console.log(document);  
     

网页中所有DOM文档结构绘制完毕后即刻执行， 可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 速度比onload要快 同一页面能同时编写多个

    $(document).ready(function () {
        $('#div1').css('background', 'red')
    })
    $(document).ready(function () {
        $('#div1').css('fontSize', '30px')
    })

简写方式

    $(function () {
        $('#div1').css('color', '#fff')
    })

    

执行时机 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 编写个数 同一页面不能同时编写多个 同一页面能同时编写多个 简化写法

             $(function(){
            执行代码
                }) ;

后代选择器

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

子级选择器

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

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

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

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

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

属性选择器可以根据是否包含某属性来选取元素 []表示属性 选取属性是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')
     

标签选择器

         console.log( $('p') )
         

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

         $('p').css('background','red')
         let obj = {
             background:"red",
             fontSize:"30px"
         }
         for(var key in obj){
             console.log(typeof key);
         }
         

类选择器

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

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

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

并集选择器

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

• 等同于下面

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

既要有.p1 又要有.p2

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

全局选择器 属性值 支持数字和字符串

         $('*').css({margin:0,padding:0})
         $('*').css('margin',0)
         $('*').css('padding',0)