jQuery学习:prop方法/基本动画/自定义动画/动态创建、添加、清空、删除节点

prop

对于布尔类型的属性，不要用attr方法，应该用prop方法，跟attr方法一样

Demo

demo.png






$(function () {
        $("input").eq(0).click(function () {
            $("#ck").prop("checked", true);
        });
        $("input").eq(1).click(function () {
            $("#ck").prop("checked", false);
        })
    })

案例：表格全选

表格全选.png

	菜名	饭店
	红烧肉	田老师
	西红柿鸡蛋	田老师
	红烧狮子头	田老师
	日式肥牛	田老师

基本动画

$("div").show([speed],[callback])
这两个参数都是可选参数
speed：动画的持续时间，可以是毫秒值，还可以是固定字符串（fast,normal,slow）
//fast:200ms
//normal:400ms
//slow:600ms
callback:动画执行完毕的回调
$("div").hide([speed],[callback])

            $("div").hide(function () {
                console.log("动画执行完毕了");
            })

案例：滑入滑出动画

滑入滑出动画.png




    
    Title

案例：淡入淡出动画




    
    Title

自定义动画

$("#box2").animate(param1,param2,param3,param4,)
参数1：对象，需要动画的样式
参数2：speed 动画执行的时间
参数3：动画执行效果（线性动画，加速）
参数4：回调函数

动画队列

    $(function () {
        $("#btn").click(function () {
            $("div").animate({left: 800})
                .animate({top: 400})
                .animate({width: 300, height: 300})
                .animate({top: 0})
                .animate({left: 0})
                .animate({width: 100, height: 100});
        });
    });

停止动画

.stop([clearQueue],[jumpToEnd])
clearQueue:是否清除动画队列 true false
jumpToEnd：是否跳转到当前动画的最终效果

    $(function () {
        $("input").eq(0).click(function () {
            $("div").slideDown(1000).slideUp(1000);
        });
        $("input").eq(1).click(function () {
            //停止当前正在执行的动画
            //clearQueue:是否清除动画队列 true false
            //jumpToEnd：是否跳转到当前动画的最终效果
            $("div").stop(true,false);
        })
    });

动态创建节点
js方式创建

/*    var box = document.getElementById("box");
    var a = document.createElement("a");
    box.append(a);
    a.setAttribute("href", "http://www.baidu.com");
    a.setAttribute("target", "_blank");
    a.innerHTML = "打开百度";*/

jquery方式创建

    $(function () {
        $("#box").append('打开百度')
    });

创建与添加节点

创建节点
$("创建的哈 ")
添加到子元素的最后面
$("div").append($("p"));
$("p").appendTo($("div"));
添加到子元素的最上面
$("div").prepend($("p"));
$("p").prependTo($("div"));
作为兄弟元素

//添加到自己的后面
$("div").after($("p"));
//添加到自己的前面
$("div").before($("p"));

案例：城市选择

城市选择.png




    
    Title
    



城市选择：

清空节点与删除节点

$("div").empty();//清空一个元素的内容
$("div").remove(); 移除这个节点
$(".des").clone(false)克隆，
clone(参数) false:不传参数也是深度复制，不会复制事件

案例：微博发布

微博发布.png




    
    Title
    




    微博发布

案例：弹幕效果

弹幕效果.png

案例：京东轮播图

京东轮播图.png

案例：手风琴效果

手风琴效果.png




    
    Title

案例：音乐导航

音乐导航.png

jQuery学习:prop方法/基本动画/自定义动画/动态创建、添加、清空、删除节点

prop

基本动画

自定义动画

动画队列

停止动画

创建与添加节点

城市选择：

清空节点与删除节点

你可能感兴趣的:(jQuery学习:prop方法/基本动画/自定义动画/动态创建、添加、清空、删除节点)