jQuery（二）

jQuery效果

---

隐藏与显示

1. 隐藏效果，1000ms后隐藏

$(document).ready(function () {
    $("#btn").click(function () {
        $("p").hide(1000);
    });
});

2. 显示效果show()，1000ms后显示

$("#btn1").click(function () {
    $("p").show(1000);
});

3. toggle() 用一个按钮同时实现 隐藏/显示

$(document).ready(function () {
  
    $("#btn").click(function () {
        $("p").toggle(1000);
    });
});

---

淡入淡出

1. 淡出效果fadeOut()

$(document).ready(function () {
    $("#btn2").on("click",function () {
        $("#div1").fadeOut(1000);
        $("#div2").fadeOut(1000);
        $("#div3").fadeOut(1000);
    });
});

2. 淡入效果fadeIn()

$(document).ready(function () {
    $("#btn1").on("click",function () {
        $("#div1").fadeIn(1000);
        $("#div2").fadeIn(1000);
        $("#div3").fadeIn(1000);
    });
});

3. 同时实现淡入淡出fadeToggle()

$("#btn3").on("click",function () {
    $("#div1").fadeToggle(1000);
    $("#div2").fadeToggle(1000);
    $("#div3").fadeToggle(1000);
});

4.淡化效果fadeTo()

$("#btn4").on("click",function () {
    $("#div1").fadeTo(1000,0.5);
    $("#div2").fadeTo(1000,0.7);
    $("#div3").fadeTo(1000,0.3);
});

---

滑动效果

1. slideDown()滑出，使某个区域1秒后滑出

$(document).ready(function () {
    $("#div1").click(function () {
        $("#div2").slideDown(1000);
    });
});

2. slideUp()滑入隐藏

$("#div3").click(function () {
    $("#div2").slideUp(1000);
});

3. slideToggle同时实现滑出和隐藏效果

$("#div4").click(function () {
    $("#div2").slideToggle(1000);
});

---

添加元素

1. append 被选中元素结尾插入内容

$(document).ready(function () {
    $("#btn").click( function () {
        $("#pid").append("add")
    });
});

2. prepend 被选择元素的开头插入内容

$(document).ready(function () {
    $("#btn").click( function () {
    $("#pid").prepend("add")
    });
});

3. before被选择元素之前插入内容，换一行添加

$(document).ready(function () {
    $("#btn").click( function () {
    $("#pid").before("add")
    });
});

4. after被选择元素之后插入内容，换一行添加

$(document).ready(function () {
    $("#btn").click( function () {
     $("#pid").after("add")
    });
});

5. 用三种不同的方法添加元素，分别是HTML jQuery DOM

function appendText() {
    var  text1="
add1
";
    var text2=$("
").text("add2");
    var  text3=document.createElement("p");
    text3.innerHTML="add3";
    $("body").append(text1,text2,text3);
}

---

删除元素

1. remove，删除p标签，删除所有，包括本标签

$(document).ready(function () {
    $("#btn").click(function () {
        $("p").remove();
    });
});

2. empty，删除本标签里的子元素

$(document).ready(function () {
    $("#btn").click(function () {
                $("p").empty();

    });
});

---

其他

1. Callback回调,当动画完成后，即调用 Callback 函数,滑出的同时字体变成红色，动画效果完成后再执行隐藏效果

$(document).ready(function () {
    $("button").click(function () {
      $("p").css("color","red").slideUp(1000).slideDown(1000);
    })
});

2. jQuery扩展，在不同js文件中可以调用自己定义过的方法

$.myjq=function () {
    alert("myjq");
};

$(document).ready(function () {
    $.myjq();
});

3. 引入其他框架时为了避免冲突，用noConflict() 方法避免 都用jQuery代替,或者在开头声明一个var来代替jQuery，使书写便捷

$(document).ready(function () {
    $("#btn").on("click",function () {
        $("div").text("new");
    })
});

$.noConflict();
jQuery(document).ready(function () {
    jQuery("#btn").on("click",function () {
        jQuery("div").text("new");
    })
});

---