jQuery对象转换和显示效果

1>jquery对象和DOM对象的转换

  <script src="jquery-3.3.1.min.js"></script>
  <script type="text/javascript">

// DOM对象转换成jquery对象
var oDiv = document.getElementById('box');
console.log($(oDiv));

$(oDiv).click(function(){
   alert('jquery对象的click方法');
});

      // jquery对象转换成DOM对象
console.log($('button')[0]);
// 或者
console.log($('button').get(0));

      $('button')[0].onclick = function () {
          alert('DOM对象的onclick方法')
      }
  </script>

jQuery对象转换和显示效果

2>jquery的效果显示和隐藏，show() hide()

show()：显示隐藏的匹配元素语法：show(speed,callback)

参数speed：可选 ('slow','normal','fast')或输入时长的毫秒值，注意单位是毫秒。

callback：在动画完成时执行的函数，python叫回调函数，

hide(speed,callback)：跟show使用方法类似，表示隐藏显示的元素。

例子如下，通过按钮控制div的显示和隐藏

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box">
        随便写点
    </div>
    <button>
        隐藏div
    </button>
</body>
    <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        var isShow = true;  //先设定一个全局变量

        $('button').click(function(){   //点击事件，判断变量做相应操作
            if(isShow){
                $('div').hide();    //div隐藏
                $(this).text('显示div');  //按钮文本更换
                isShow = false;  //同时改变变量值，下次点击就走esle代码拉
            }else{
                $('div').show();
                $(this).text('隐藏div');
                isShow = true
            }

        });

效果

jQuery对象转换和显示效果

3>toggle()

toggle 开关如果元素显示则切换为隐藏，隐藏则切换成显示。

$('button').click(function(){
    $('div').toggle()
});

效果

jQuery对象转换和显示效果

如上，简洁的代码实现了div的显示/隐藏，但如果要同步改变相关联标签（比如button的文本），也还是需要

其他方式（如定义一个全局变量，判断操作）来处理，所以，实际当中toggle用得不是很多。

4>高度变化动态的显示和隐藏，slideDown()，slideUp()，slideToggle()

    slideDown：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
    用法和参数跟上面类似

    slideUp：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
    用法和参数跟上面类似

    slideToggle：概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

跟toggle用法类似

实例

var isShow = true;

$('button').click(function(){
    if(isShow){
        $('div').slideUp(2000);    //div在2秒内向上滑动隐藏
        $(this).text('显示div');
        isShow = false;
    }else{
        $('div').slideDown(3000);    //div在3秒内向下滑动展开
        $(this).text('隐藏div');
        isShow = true
    }

});

或者

$('button').click(function(){
    $('#box').slideToggle('normal');
});

效果：点击按钮，div向上滑动缩进或者向下滑动展开。

5>淡入淡出效果，fadeIn()，fadeOut()，fadeTo()，fadeToggle()

fadeIn：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化

fadeOut：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeTo：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeToggle：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
实现淡入淡出的效果就是使用此方法。

实例

var isShow = true;

$('button').click(function(){
    if(isShow){
        $('div').fadeIn(2000);    //fade 淡入淡出效果，div在2秒内淡入展示
        $(this).text('显示div');
        isShow = false;
    }else{
        $('div').fadeOut(3000);    //div在3秒内淡出隐藏
        $(this).text('隐藏div');
        isShow = true
    }
});

$('button').mouseover(function(){
   $('#box').fadeOut(2000);
});

$('button').mouseout(function(){
   $('#box').fadeTo(2000,0.5);
});

$('button').click(function(){
    $('#box').fadeToggle('slow');
});

效果

点击按钮，div淡入淡出的隐藏或者展示。

6>动画效果 animate()，停止动画 stop()，延迟操作 delay()

animate：用于创建自定义动画的函数

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

语法：animate(params,[speed],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

$('button').click(function(){
    $('#box').animate({'height':'200px','width':'200px','margin-left':'50px'},'slow');
});

jQuery对象转换和显示效果

stop：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等

$('#btn1').click(function(){
    $('#box').animate({'left':'200px'},'slow').delay(2000).animate({'top':'300px'},'fast');
});


$('#btn2').click(function(){
    $('#box').stop();  //动画停止，止于当前位置，下次开始，从当前位置继续
});

delay：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作

$('button').click(function(){
    $('#box').delay(3000).animate({'height':'200px','width':'200px'},'slow');
});

效果，3秒之后再执行animate函数

7> 实际案例，右下角的小广告，刷新页面后弹出，点击关闭则关闭效果

$('div').slideUp(1000).slideDown().fadeIn(1000).click(function(){
    $(this).fadeOut(2000)
});

jQuery对象转换和显示效果

相关推荐