2015-10-12 jQuery4

十. 直接获取、编辑内容

    1.获取内容

     alert($("#d1").text());    //获取文本内容

     alert($("#d1").html());   //获取文本和标签的内容

    设置内容：

    $("#d1").text("中国你好")；

    $("#d1").html("<h1>你好</h1>");

   2.移动和复制元素

    $("p").append("<b>说明</b>");             //给所有p标记添加一段说明

    $("#d1").append("<h1>文字</h1>")；   //给id为的d1的div添加一段文字

    $("p:eq(1)").append($("a:eq(1)"));        //给第二个p后面添加第二个a作为它的子元素

    $("img:eq(1)").appendTo("p:eq(0)");     //将第二个img标签添加到第一个p标签上

    var $(可写可不写)dom=$("<p>你好吗？</p>") ;         //对象类型变量

    $dom.appendTo($("#d1"));                                    //appendTo表示对象加到里面,而不是内容加到里面

    $("#d1").after("<h1>你好</h1>");         //在div后面添加h1           

    $("#d1").before("<h1>你好</h1>");      //在div前面添加h1  

 3. 删除元素

    $("#d1").empty();   //清空内容
    $("#d1").remove();  //移除div

  4.绑定事件bind

   $("#d1").bind("click", function () {}).bind("click", function () {}).bind("click", function () {});   //一个对象绑定多个事件，反复执行

 $("#d1").bind("click", function () {
   $("#d1").append("<p>aaaaaa</p>");
}).bind("click", function () {
    $("#d1").append("<p>bbbbbbb</p>");
}).bind("click", function () {
    $("#d1").append("<p>cccccccc</p>");
});

　　$("#d1").one("click", function () {}).bind("click", function () {})    //执行一次

      注：one 方法 绑定事件触发一次后自动删除。

      $("#d1")unbind(“click”);移除绑定

  5. 交替

     hover()          //鼠标移上去移走

     toggle()         //点击交替执行

Jquery(四)

一.显示和隐藏

   1.$("#d1").slideToggle();   //上下显示是隐藏

    拆分：

    $("#d1").slideDown(1000);  //隐藏
    $("#d1").slideUp(1000);      //显示

   2.$("#d1").fadeToggle(1000);   //渐变显示隐藏

    拆分：
    $("#d1").fadeOut(1000);     //显示
    $("#d1").fadeIn(1000);      //隐藏
   
    3.$("#d1").toggle();         //伸缩显示隐藏
      $("#d1").hide(1000);       //隐藏
      $("#d1").show(1000, function () { alert("aaaa"); });   //显示
    注：三种方法都可以设置时间，和回调函数

二.自定义动画 animate

      $("#d1").animate({ "top": "300px", "left": "300px" }, 2000, function () {});       //前面的执行完之后再执行，用回调函数

三.setInterval 方法，定时

   setInterval(function () {}, 4000);    //间隔四秒，反复执行

var fn = setInterval(function () {   
  if (i == 6)    
   {          
         clearInterval(fn);     //清除定时  
   }      
 $("#d1").text(i);     
}, 2000);           //每隔2秒使i+1，当i=6时，清除定时

  setTimeout(function () {     

       i++;    

      $("#d1").text(i);    

}, 4000);    //间隔四秒后，自动执行一个事件，只执行一次