JQUERY选择器

ready和onload `

  /* 下面的把上面写的覆盖了 */
  /* 同一页面不能同时编写多个 */
  // 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')
  })

jp选择器 `

   // 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)
 })

`

属性选择器 `

层次选择器 `

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

`