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);    //间隔四秒后，自动执行一个事件，只执行一次