jQuery 常见方法

1.jQuery获取标签
导入 jQuery

	<div></div>
  <script src="./js/jquery-1.12.3.min.js"></script>
    <script>
        //$()获取标签  html()获取去元素 css() 添加样式
        $('div').html('hello').css({
            color:'red',
            fontSize:50
        })
    </script>

2.通过$获取div

        var div = $('div');
        div.html('hello')
        console.log(div);

3.jq对象是一个类数组 转成js对象用索引值

        div[0].innerHTML = 'abc'
        console.log(div[0]);   

4.获取标签

        console.log($('div'));        
        console.log($('#app'));        
        console.log($('.demo'));   

5.组合形式

        console.log($('h2.demo'));
        console.log($('[color-red]'));
        console.log($('p:first'));
        console.log($('p:last'));

6.二次筛选

//第二个div
 console.log($('div').eq(1));

7.设置样式

  //获取元素
        //将jq获取 的 元素 存储在变量中
        var divs =$('div');
        //获取div长度
        // console.log(divs.length);
        // console.log(divs.size());
        
        //设置样式
        divs.css('font-size','50px')
        divs.css('borderBottom','1px solid red')
        //设置多个属性
        divs.css({
            backgroundColor:'pink',
            width:400
        })

8.绑定事件

     divs.on('click',function(){
            //this指向当前元素
            console.log(this);
            // this是 js 中的dom 对象 使用的 时候用原生方法
            this.style.backgroundColor ="skyblue"

            //jq 方法
            $(this).css('backgroundColor','gold')

})

9.显隐元素

        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <hr />
        <div class="box"></div>
        <script src="./js/jquery-1.12.3.min.js"></script>

        //获取元素
            var btns = $('button');
            //获取box
            var box = $('.box')
            //通过索引值获取，通过eq方法获取
            //索引值 获取的是 原生
            // console.log(btns[0],btns.eq(0));

            //eq方法返回jquery对象，因此可以连续打点调用
            btns.eq(0).click(function(){
                //显示
                // 参数表示 变化的时间
                //变化是毫秒
                // box.show(1000)

                //淡入
                box.fadeIn(1000)
            })
            btns.eq(1).click(function(){
                //隐藏
                // box.hide(1000)

                //淡出
                box.fadeOut(1000)
            })
            btns.eq(2).click(function(){
                //显示
                // box.toggle(1000)

                //切换
                box.fadeToggle(1000)
            })