1： 基本选择器

类选择器 id选择器 标签选择器 并集选择器 全局选择器

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

马上要过年了，好激动，不想上学

马上要过年了，好激动，不想上学

马上要过年了，好激动，不想上学

2：属性选择器 []

    <a href="http://www.baidu.com">我要去加入百度</a><br>
    <a href="www.baidu.cn">我要去百度搜索</a><br>
   <a href="baidu.com">我不要去百度</a><br>

   <script src="./jquery-1.12.4.js"></script>
   <script>
    /* 属性选择器可以根据是否包含某属性来选取元素 */
    /* []表示属性 选取属性是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')

3:层次选择器：

后代选择器 子代选择器 相邻选择器 同辈选择器

      <ul>
    <p>pppppp</p>
    <li>
        <p>li p1</p>
    </li>
    <li>
        <p>li p2</p>
    </li>
    <li>
        <p>li p3</p>
    </li>
</ul>
<!-- 层次选择器通过DOM 元素之间的层次关系来获取元素 -->
<script src="./jquery-1.12.4.js"></script>
<script>
    /* 后代选择器 */
    // $('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');

4：单击显示和隐藏

  <button>点我</button>
<ul>
    <li>我爱js1</li>
    <li>我爱js2</li>
    <li>我爱js3</li>
</ul>
<script src="./jquery-1.12.4.js"></script>
<script>
    $('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')
        }
    })
    

5: addClass添加css样式

当css样式比较多，在style中写样式 在js中引用

     /* addClass给元素添加class样式 */
    /* addClass('item1 item2') 添加多个样式 */
    

6：将js对象转为jq对象

     //    获取dom元素 返回js对象
   let a = document.querySelector('#a');
   a.style.color='red';
   // 获取dom对象 返回jq对象
   let  a1 = $('#a');
   a1.css('background','black')
 // 将js对象转为jq对象 通过$()工厂函数
 let a3=$(a1)
 console.log(a3);
 //  jq对象 返回的是一个集合 通过集合的下标 返回的就是js对象
  let a4 = $('#a')[0]
  console.log(a4);
  // 使用get（）方法 也可以通过集合的下标 返回一个指定的js对象
 let a5 = $('#a').get(0)
 console.log(a5)