jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

时间：2021-11-10 11:08:37

css操作（设置单个/多个样式、获取样式）

//修改单个属性：括号之中直接是需要修改的样式名，值 css(name,value)


//例：$("#one").css("backgroundColor","gray");


//修改多个属性：括号之中是一个对象css(obj)   
//  例：  $("#one").css({


//           "background":"gray",


//            "width":"400px",


//            "height":"200px"


//           });


//获取样式：   括号之中是需要获取的样式名 css(name)


//       例：$("div").css("background-color");

class操作（添加、移除、判断、切换）

 var $li=$("li:eq(4)");
//判断类样式hasClass(className)


    if($li.hasClass("bigger")){
//移出类样式


        $li.removeClass("bigger");


    }else{
//添加类样式


        $li.addClass("bigger");


    }


 //转换类样式


     $li.toggleClass("bigger");

展示隐藏动画（show/hide/toggle）

//hide([speed], [callback]);  （时间：ms,回调函数）


 $("#btn1").click(function(){


     $("div").hide(1000);


 });


 //show([speed], [callback]);


$("#btn2").click(function(){


    $("div").show(1000);


});
//显示/隐藏切换
//Toggle(speed, callback);


$("div").toggle(1000);

滑入滑出动画（slideDown/slideUp/slideToggle）

 $("#btn1").click(function(){


     $("div").slideDown();


 });


 //slideUp(speed, callback);


$("#btn2").click(function(){


    $("div").slideUp();  //注意:sideUp和sideDown后面单词要大写


});
//滑入滑出切换
//$(selector).slideToggle(speed,callback);


$("div").slideToggle();
 

淡入淡出动画（fadeIn/fadeOut/fadeToggle/fadeTo）

//fadeIn(speed, callback);


 $("#btn1").click(function(){


     $("div").fadeIn();


 });


 //fadeOut(speed, callback);


$("#btn2").click(function(){


    $("div").fadeOut();


});
//fadeToggle(speed, callback);


//隐藏状态就是fadeIn,显示状态的话就是fadeOut


$("div").fadeToggle();
//fadeTo 改变透明度到什么值为止
$("#btn3").click(function(){


    $("div").fadeTo(1000,0.3);


    //fadeTo(speed, value, callback)


    //注意在fadeTo参数中speed参数不能省略,省略的话会将第二个参数当成第一个参数speed
 

自定义动画（animate）

//animate: ( prop, speed, easing, callback )  //speed可以传数字、"fast"是200ms、"normal"是400ms、"slow"是600ms
//easing参数有两个 swing和linear

//swing是两头慢，中间快

//linear是匀速

//这个参数是用来控制动画在不同的动画点中设置动画速度，默认为swing

例：

$(function(){

    $("#btn").click(function(){

        $("div").animate({"width":"1000px","left":"500px"},1000,function(){

            $("div").animate({width:200,top:500},1000,function(){

                $("div").animate({height:1000});

            })

        })

    });

})  ;

动画队列

jQuery中有个动画队列的机制。当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。可是用户的操作往往都比动画快，如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果。

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：超市结账）。

解决办法：用stop();方法

 $(function(){

        $("#btn1").click(function(){

            $("div").slideDown(10000);

            $("div").slideUp(10000);

        });

        $("#btn2").click(function(){

            //stop(clearQueue, gotoEnd)(是否清除所有队列，是否跳转  到当前动画的最终的状态)

//            $("div").stop(false,false);//默认

              $("div").stop(false,true);

//            $("div").stop(true,false);

//            $("div").stop(true,true);

        });

    });

jQuery新建DOM节点

//html(htmlStr);方法创建元素

//htmlStr:html格式的字符串

//替换当前元素的所有内容， 识别html标签的

$("div").html("<p>我是新增的p标签</p>");

//            $("div").html("");

jQuery添加DOM节点

$("div").append("<a href='#' target='_blank'>append方法会将元素添加到当前元素所有子元素的最后</a><br/>");

$("div").prepend("<a href='#' target='_blank'>prepend方法会将元素添加到当前元素所有子元素的前面</a><br />");

$("div").before("<p>添加到当前元素的上面</p>");

$("div").after("<p>添加到当前元素的下面</p>");

var $p=$("#extra");  //如果是已有的元素，会将已有的元素剪切下来添加到需要添加的标签之中

$("div").append($p);

jQuery清空DOM节点

$("#btn").click(function(){

//           $("div").html(""); //此种方法会浪费内存 造成内存泄漏

//           $("div").empty();  //清空元素内部的子元素

            });

jQuery删除DOM节点

$("div").remove(); //会将自己也清除

jQuery克隆DOM节点

$("#btn").click(function(){

//clone(Boolean) 默认参数是false若为true则将克隆元素之中的事件

    var $p=$("p").clone(); //克隆p标签内的元素，这是深克隆

    $("div").append($p);

});
 
 

相关文章