标签：
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("<", "<").replace("</", "</").replace(">", ">");
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，只执行一次
});
标签：
原文地址：http://www.cnblogs.com/16lily521/p/4887700.html
