版权声明：转载声明！！！ https://blog.csdn.net/weixin_43000780/article/details/89433527
1.引用
2.操作页面元素
<div id="elem"> </div>
<script>
var htmlContent = $("#elem");
htmlContent.html("<p>hello world</p>") //获取、设置内容
htmlContent.append("<p>how are you</p>") //添加内容
console.log(htmlContent.attr("id")) //返回特定属性
</script>
3.显示和隐藏元素
<div id="elem">
<p>hello world</p>
</div>
<script>
var i = 0;
var htmlContent = $("#elem");
$("div").show("fast",function(){ //显示页面元素，并在显示元素后完成function操作
$("div").hide("slow",function(){ //隐藏页面元素，并在隐藏元素后完成function操作
while(i++<=10){
$("div").toggle(1000,function(){ //改变一个元素的当前显示状态
;
});
}
});
})
4.元素动画
1.淡出淡入
fadeOut( speed, function() ) //speed 它可以取以下值：“slow”、“fast” 或毫秒
fadeIn( speed, function() )
fadeTo( speed, opacity , function() )
2.滑动
slideDown(speed, function() )
slideUp(speed, function() )
slideToggle(speed, function() )
3.动画
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px', //使用相对值
width:'+=150px'
});
});
//默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
//如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
/********** 简单综合应用 **********/
<head>
<style>
#elem {
position: relative;
width: 100px;
height: 400px;
top: 100px;
left: 100px;
border:2px solid black;
background-color: red;
padding: 20px;
}
</style>
</head>
<body>
<div id="elem"></div>
<script>
var htmlContent = $("#elem");
htmlContent.text("changing shape...").animate( //处理同一对象，命令链
{
width:"400px",
height:"100px"
},5000,function(){
$(this).text("fading away...").fadeOut(2000)
}
)
<script>
</body>