jQuery

JQuery HTML

捕获

text()，html()，val()，attr()。加参数可修改

<script>
    $(document).ready(function () {
        $("#btn").click(function () {
            alert("p标签: "+$("#pid").text());//获取内容不包括内标签
            alert("p标签: "+$("#pid").html());//获取内容包括内标签
            alert("input_value: "+$("#tid").val());//获取表单value值
            alert("属性值: "+$("#tid").attr("type"));//获取属性值

        });
    });
</script>
<p id="pid"><input id="tid" type="text" value="1414223"/>this is a p content</p>
<button id="btn">按钮</button>

1、attr()有两种属性值设置的方法:

1)、$().attr("","");单个设置

2)、$().attr({"":"","":""});多个设置

2、回调

$("#btn").click(function () {
   $("#pid").text(function (i,old_text) {
       return "old:"+old_text+",new:"+i+"|";
   });
});

元素的添加和删除

元素的添加:

在内容末尾和前面添加:

&("").append("....");

&("").prepend("....");

在标签前面和后面添加

&("").before("....");

&("").after("....");

    <script>
    $(document).ready(function () {
        $("#btn").click(function () {
            /*
            * html、jQuery、DOM
            * */
            var text1 = "<p>html</p>";
            var text2 = $("<p></p>").text("jQuery");
            var text3 = document.createElement("p");
            text3.innerHTML="DOM";
           $("#Div").append(text1,text2,text3);
        });
    });
</script>
<button id="btn">按钮</button>
<div id="Div"></div>

元素的删除:

有两种方法:

1、$().remove() - 整个删除

2、$().empty() - 删除里面的内容

jQuery 效果

隐藏/显示:

hide()、show()、toggle()

淡入/淡出:

fadeIn()、fadeOut()、fadeToggle(1000,0.5)

滑动

slideDown()、slideUp()、slideToggle()

<script>
    $(document).ready(function () {
        for(var i = 0;i<5;i++){
            $("<div class='cdiv'>").appendTo($("#hideDiv"));
        }
        /*隐藏*/
        $(".cdiv").click(function () {
            $(this).hide(2000,function () {
                //$(this).remove();
            });
        });
        /*淡入、淡出*/
        $("#btn1").on("click",function () {
            $(".cdiv").fadeToggle(1000);
        });
        /*透明度*/
        $("#btn2").on("click",function () {
            $(".cdiv").fadeTo(1000,0.5);
        });
        /*滑入、滑出*/
        $("#btn3").on("click",function () {
            $("#hideDiv").slideToggle(2000);
        });
    });
</script>
<style>
    .cdiv{width:30px;height:30px;background-color:yellow;margin:2px;float:left;}
</style>
<button id="btn1">fadeToggle</button>
<button id="btn2">fadeTo</button>
<button id="btn3">slideToggle</button>
<div id="hideDiv">
</div>
<div style="clear:both;"></div>

回调

动画结束后，方法被调用

 $("p").hide(2000,function () {
    alert("隐藏后弹出");
});

同时执行几个函数:

 $("p").css("color","red").slideUp(1000).slideDown(1000);