20151012jq4

1、获取/设置元素的文本内容/html内容

<input type="button"  value="我是一个按钮" id="btn"/>
<div id="d1"><p>你好</p></div>

  $("#btn").click(function () {
        $("#d1").text("你好");
        $("#d1").html("<p>你好</p>”);

    });

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

        var t = $("#d1").text();
        var s = $("#d1").html().toString();
        var str = "";
        //转义 用替换字符串的形式体现
        str = s.replace("<", "&lt;").replace("</", "&lt;/").replace(">", "&gt;");
        document.write(t+"<br />"+str);
    });

  $("#btn").click(function () {
        var s = $("#d1").html();//单击按钮时显示div的html内容;
        $(this).val(s);
    });

2、增加内容 或元素

 $("#d1").append("<h1>我爱北京天安门</h1>");

<div id="d2"><p>中国</p></div>
<div id="d1"><p>你好</p></div>

  $("#d2").appendTo($("#d1"));//把d2中的所有元素添加到d1中

 var $dom =$("<p>你好吗？</p>");//加入的属性是jquery对象,用$标识

$dom.appendTo($("#d1"));

3、after before 在元素后或元素前增加同级

    $("#d2").before("<div id=‘d4‘><p>前</p></div>");
    $("#d2").after("<div id=‘d3‘><p>后</p></div>");

前 中国  后

4、

empty()清空元素里的内容

remove()删除元素

5、val() val(text)获取文本框或设置按钮的内容

6、事件监听

绑定事件，单击按钮时一次执行三个代码 bind单击会反复执行 one只执行一次

 $("#btn").bind("click", function () {
        $("#d1").append("<h1>hhhhhh</h1>");
    }).bind("click", function () {
        $("#d1").append("<p>pppp</p>");
    }).bind("click", function () {
        $("#d1").append("<font>fontfont</font>");
    });

  $("#btn").one("click", function () {
        $("#d1").append("<h1>hhhhhh</h1>");
    }).one("click", function () {
        $("#d1").append("<p>pppp</p>");
    }).one("click", function () {
        $("#d1").append("<font>fontfont</font>");
    });

删除绑定事件

  var foo = function () {
        $("#d1").append("<h1>hhhhhh</h1>");

    }
    var one = function () {
        $("#d1").append("<p>pppp</p>");
        $("#d1").append("<font>fontfont</font>");
    }

        $("#btn").bind("click", foo).bind("click", one);

        $("#btn").unbind("click", foo);
     

7、交替执行 toggle()

8、鼠标事件移上去移走hover()

9、动画事件

  $("#btn").click(function () {
        $("#d1").toggle(1000, function () {
            alert("aaa");
        }); //toggle伸缩隐藏执行了伸 缩两个动作。
    });

可以拆分成：

 $("#btn").click(function () {
        $("#d1").show(1000, function () {
            alert("aaa");
        }); //执行了显示动作，加回调函数，执行完毕之后再执行的动作。
    });

 $("#btn").click(function () {
        $("#d1").hide(1000, function () {
            alert("aaa");
        }); //执行了显示动作，加回调函数，执行完毕之后再执行的动作。
    });

上下显示隐藏

  $("#btn").click(function () {
        $("#d1").slideToggle(1000, function () {
            alert("aaa");
        }); //slideTogg上下显示隐藏，执行了往上合起来，往下显示的两个动作。
    });

可以拆分成：

   $("#btn").click(function () {
        $("#d1").slideUp(1000, function () {
            alert("aaa");//上隐藏，执行了往上合起来动作。     }); 

  $("#btn").click(function () {
        $("#d1").slideDown(1000, function () {
            alert("aaa");
        }); //下显示，执行了往下显示动作。
    });

渐变的显示隐藏

    $("#btn").click(function () {
        $("#d1").fadeToggle(1000, function () {
            alert("aaa");
        }); //渐变的显示隐藏，深到浅
    });

拆分成

    $("#btn").click(function () {
        $("#d1").fadeIn(1000, function () {
            alert("aaa");
        }); //渐变的显示
    });

   $("#btn").click(function () {
        $("#d1").fadeOut(1000, function () {
            alert("aaa");
        }); //渐变的显示
    });

10自定义动画

当点击div时，div的位置会两次移位

知识点：首先要脱离文档流 position:absolute;

<input type="button" value="按钮" id="btn" />
<div id="d1">你好</div>

#d1{ width:100px; height:100px; border:1px solid red; position:absolute;  }

 $("#btn").click(function () {
        //2秒钟内d1从原点移动到顶：300px 距离左边300px;
        $("#d1").animate({ "top": "300px", "left": "300px" }, 2000, function () {
            //执行完上面的函数后执行
            //2秒钟内d1从300px 300px移动到0px 600px
            $("#d1").animate({ "top": "0px", "left": "600px" }, 2000);
        });
    });

12定时器  自动执行 间隔多长时间自动执行一次

  $("#btn").click(function () {
        var i = 0;
     var fn=  setInterval(function () {
            if (i == 5) {//判断i=5 让i=0
                i = 0;
            }
            i++;
            $("#d1").text(i);
        }, 2000); //间隔2秒钟，让d1的内容加1
    });

 $("#btn").click(function () {
        var i = 0;
     var fn=  setInterval(function () {
         if (i == 6) {
             clearInterval(fn);//清除定时器
         }
            i++;
            $("#d1").text(i);
        }, 2000); //间隔2秒钟，让d1的内容加1
    });

13、只执行一次

setTimeOut();

 $("#btn").click(function () {
        var i = 0;
        setTimeout(function () {
            i++;
            $("#d1").text(i);
        }, 4000);//4秒钟把d1的内容改为1，只执行一次
    });