jQuery（三）--jQuery对象常用方法 ：css()、show()、hide()、sildUp()、sildDown()、fadeIn()、addClass()、removeClass()..

目录

1.css()方法

2.show()和hide()方法

 3.sildUp()和sildDown()方法

4.fadeIn()和addClass()方法

5.addClass()/removeClass()

6.attr()和html()方法

---

公共部分：

    <div class="div1"></div>
    <br/>
    <div class="div2"></div>

    <script src="js/jquery-1.12.3.min.js"></script>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid
        }
        
        .div2 {
            width: 100px;
            height: 100px;
            border: 1px solid
        }
    </style>

1.css()方法

描述：本方法是jq对象读写css样式的方法，相当于js中的style属性

语法：jq对象.css("key","value");

注意：

        (1)第一个参数是必要的，第二个参数是可选的

        (2)如果只有一个参数则代表读取属性的值，而写两个参数代表设置属性的值。

<script>
        $('.div1').click(function() {
            $(this).css('background-color', 'red');
        });

        $('.div2').click(function() {
            console.log($('.div1').css('background-color'));
        });
</script>

当鼠标单击div1区域和单击div2区域时：

(3)如果css()方法需要一次修改多个样式，则参数可以写成JSON格式

<script>
        $('.div1').click(function() {
            //$(this).css('border', '5px solid pink');
            //$(this).css('width', '200px');
            //$(this).css('height', '200px');
            //等价于：
    
            $(this).css({
                "background-color": "red",
                "border": "5px solid pink",
                "width": "200px",
                "height": "200px"
            });
        })
</script>

当鼠标单击div1区域时：

注意：

1.书写css属性名字可以用驼峰也可以用短横：

$("div").css("backgroundColor","red");

等价于

$("div").css("background-color","red");

2.当我们的css的值是px为单位的时候，那么此时可以不加px

$("div").css("width","500px");

等价于

$("div").css("width","500");

<script>
        $('.div1').click(function() {
            //读取，拿到div1原始的宽度并将其字符串格式转为整数类型
            var oldWidth = parseInt($(this).css('width'));
            oldWidth += 50;
            //方式1
            // $(this).css('width', oldWidth + 'px');

            // 方式2
            $(this).css('width', '+=50px');
        })
</script>

当鼠标不停地单击div1区域时：

---

2.show()和hide()方法

描述：show()表示jq对象显示,hide()表示jq对象隐藏

语法：jq对象.show(动画时间)

注意：

        a.方法内部的参数是可选的，表示动画执行的时间，单位毫秒，如果不写默认执行时间为0

        b.方法的动画实际是宽高的渐变，透明的的渐变

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background-color: red
        }
    </style>

  <div class="div1"></div>
    <button>show()</button>
    <button>hide()</button>
    <button>show(2000)</button>
    <button>hide(2000)</button>

<script>
        //获得元素
        var $div1 = $('.div1');

        $('button:eq(0)').click(function() {
            $div1.show();
        });

        $('button:eq(1)').click(function() {
            $div1.hide();
        });

        $('button:eq(2)').click(function() {
            $div1.show(2000);
        });

        $('button:eq(3)').click(function() {
            $div1.hide(2000);
        });
</script>

当鼠标单击hide()按钮时：

当鼠标单击show(2000)时，其最终结果为：

当鼠标单击hide(2000)时，其最终结果为：

当鼠标单击show()时：

---

 3.sildUp()和sildDown()方法

描述：slideUp()表示jq对象上滑隐藏，slideDown()表示jq对象下拉显示。

注意：

• 这两个方法即使不写参数，也是默认有一定的动画时间，只不过时间短而已
• 同样的，这两个方法里面可以写数字，表示动画的时间
• 一个元素如果原本是显示的，才能够调用slideUp()方法；如果这个元素是display: none;的才能调用slideDown()方法

slideDown()的机理：

1. 如果一个元素是display: none;的，先把高度height设置为0
2. 然后瞬间变为display: block;
3. 再进行定时器的动画，慢慢变为用户设置的那个height值

例子1：

<script src="js/jquery-1.12.3.min.js"></script>
<style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background-color: orange
        }
</style>

    <div class="div1"></div>
    <button>slideUp()</button>
    <button>slideDown()</button>
    <button>slideUp(5000)</button>
    <button>slideDown(5000)</button>

 <script>
        var $div1 = $('.div1');

        $('button:eq(0)').click(function() {
            $div1.slideUp();
        });

        $('button:eq(1)').click(function() {
            $div1.slideDown();
        });

        $('button:eq(2)').click(function() {
            $div1.slideUp(5000);
        });

        $('button:eq(3)').click(function() {
            $div1.slideDown(5000);
        });
</script>

强调：

    1.对于两个方法存在一个隐藏的属性，称为”边界“，默认是上边界。

      边界时可以手动设置的，通过定位来设置jq对象的属性(边界)。

例子2：

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        .container {
            width: 150px;
            height: 300px;
            border: 1px solid;
            margin: 100px auto;
            position: relative
        }
        
        .show {
            width: 100%;
            height: 150px;
            background-color: skyblue;
            position: absolute;
            /*以下边界作为边界*/
            bottom: 0;
            display: none;
        }
    </style>

    <div class="container">
        这是div
        <div class="show"></div>
    </div>

 <script>
        var $show = $('.show');
        $('.container').mouseenter(function() {
            //鼠标进入，下拉出现
            $show.stop(true).slideDown();
        }).mouseleave(function() {
            //鼠标离开，上滑隐藏
            $show.stop(true).slideUp();
        });
 </script>

当鼠标进入到div区域时：

---

4.fadeIn()和addClass()方法

描述：fadeIn()表示淡入/fadeOut()表示淡出。

注意：

• 淡入和淡出的起始点和终止点分别为display：none和display：block而不是opacity 0---1
• 也就是说一个元素如果想淡入，一定要给这个元素加上display：none;属性，而不要给它加上opacity: 0;属性
• 同样的fadeIn()和fadeOut()的函数括号里面可以加数字，表示动画的时间

公共部分：

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
        
        .bgRed {
            background-color: red
        }
</style>

fadeIn()/fadeOut()：

    <div class="div1"></div>
    <button>fadeIn()</button>
    <button>fadeOut()</button>
    <button>fadeIn(5000)</button>
    <button>fadeOut(5000)</button>

<script>
        var $div1 = $('.div1');

        $('button:eq(0)').click(function() {
            $div1.fadeIn();
        });
        $('button:eq(1)').click(function() {
            $div1.fadeOut();
        });
        $('button:eq(2)').click(function() {
            $div1.fadeIn(5000);
        });
        $('button:eq(3)').click(function() {
            $div1.fadeOut(5000);
        });
</script>

---

5.addClass()/removeClass()

 描述：

• addClass()追加类，在原来的基础上添加一个类的属性值
• removeClass()移除类，在原来的基础上移除一个类的属性值

语法：

    jq对象.addcLass('类名')/jq对象.removeClass('类名')

注意：这两个方法的参数是类名，不是选择器。

     <div class="div1"></div>    
    <button>addClass()</button>
    <button>removeClass()</button>

<script>
        var $div1 = $('.div1');
        $('button:eq(0)').click(function() {
            $div1.addClass('bgRed');
        });
        $('button:eq(1)').click(function() {
            $div1.removeClass('bgRed');
        });
</script>

---

6.attr()和html()方法

1.attr()方法

描述：用来修改jq对象的属性，这个方法会覆盖原来的属性值。

语法：jq对象.attr('属性名','属性值');

注意：

    第二个参数时可选的。

    如果不写第二个参数则代表读取这个属性的属性值。

   如果有两个参数，则表示设置jq对象的属性。

 <img src="img/longlong.jpg" alt="" />

 <script>
        $('img').mouseenter(function() {
            $(this).attr('src', 'img/shishi.jpg');
        }).mouseleave(function() {
            $(this).attr('src', 'img/longlong.jpg');
        })
        console.log($('img').attr('src'));
 </script>

2.html()方法

描述：用来读取和更改元素内部的内容，作用和原生的innerHTML属性是一样的。

语法：jq对象.html(文本内容);

注意：如果本方法没有参数，代表读取内容。如果写了参数，代表设置内容。

 <div style="width: 100px;height: 100px;border: 1px solid">北京</div>

  <script>
        var num = 0;
        var timer = null;
        timer = setInterval(function() {
            $('div').html(++num);
        }, 10);

        console.log($('div').html());
   </script>