1.jQuery DOM
append(content|fn):向每个匹配的元素内部追加内容。
appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend(content):向每个匹配的元素内部前置内容。
after(content|fn):在每个匹配的元素之后插入内容。
before(content|fn):在每个匹配的元素之前插入内容。
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
empty():删除匹配的元素集合中所有的子节点
remove([expr]):从DOM中删除所有匹配的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cssClass{
background: greenyellow;
}
</style>
</head>
<body>
<button id="btn">click</button>
<div id="div" style="border:1px solid blue ;width: 300px;height: 50px;">i am div</div>
<img src="" id="img"/>
<script src="lib/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
// $("#img").attr("src","img/ball.png");
console.log($("#div").html("hello"));//innerHTML
console.log($("#div").val("hello"));//input内value值
console.log($("#div").text("<span>hello</span>"));//innerText
console.log($("#div").html("<span>hello</span>"));
console.log($("#div").append("<span>hahaha</span>"));//插入
console.log($("<ul><li>hello</li></ul>").appendTo("#div"));
console.log($("#div").prepend("<ul><li>hello</li></ul>"));//向前插入
// console.log($("#div").empty());//清空
// console.log($("#div").remove());//移除
// console.log($("#div").clone());
console.log($("#div").addClass("cssClass"));
console.log($("#div").css({"background":"#8B0000","color":"green"}));//添加css样式
console.log($("#div").css("background",function(_index,_value){
return _value = "blue";
}));
console.log($("#div").innerHeight())//内高度
console.log($("#div").outerHeight())//外高度
console.log($("#div").innerWidth())
console.log($("#div").outerWidth())
$("#div").css({"position":"absolute","top":"100px","left":"100px"})//定位
})
})
</script>
</body>
</html>
效果展示
2.jQuery 动画
show([speed,[easing],[fn]]):显示隐藏的匹配元素。
hide([speed,[easing],[fn]]):隐藏显示的元素
toggle([speed],[easing],[fn]):用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
slideDown([speed],[easing],[fn]):通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp([speed,[easing],[fn]]):通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
fadeIn([speed],[easing],[fn]):淡入
fadeOut([speed],[easing],[fn]):淡出
fadeToggle([speed,[easing],[fn]]):淡入淡出
ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<button id="btn">click</button>
<div id="div">sdsfddsfdsf</div>
<script src="lib/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
// $("#btn").click(function(){
// $("#div").hide();//显示隐藏
// $("#div").slideUp();
// $("#div").slideToggle();//滑动
// $("#div").slideDown(2000);
// $("#div").fadeToggle(2000);//淡入淡出
$(function(){
$("#btn").click(function(){
$.ajax({
type:"get",
url:"txt.txt",
dataType:"text",
data:"",
success:function(msg){
console.log("pass"+msg);
$("#div").html(msg)
},
error:function(error){
console.log("fail")
}
});
})
})
// })
})
</script>
</body>
</html>