目录
①、为什么使用JQuery的animate方法移动div的时候,要把div设置为相对定位或绝对定位才能生效?
1、animate()
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
①、为什么使用JQuery的animate方法移动div的时候,要把div设置为相对定位或绝对定位才能生效?
答:因为默认情况下,所有 HTML 元素的位置都是静态的,可以改变高度和宽度,但无法移动。所以如需对位置进行操作,需要把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
②、animate实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate的应用</title>
<style type="text/css">
div{
height: 350px;
}
#div01{
margin-top: 20px;
width: 150px;
height: 150px;
border-radius: 100px;
position: absolute;
background-color: aquamarine;
}
#div02{
margin-top: 20px;
width: 150px;
height: 150px;
border-radius: 300px;
text-align: center;
position: absolute;
background-color: aquamarine;
}
#div02 p{
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<h3>在页面中将圆形从左移动到右</h3>
<p>1.animate({样式1,样式2,样式3,……},1000)</p>
<p>2.animate({样式1},1000).animate({样式2},1000).animate({样式3},1000,function(){$("xxx").animate({样式4}),1000);})</p>
<hr/>
<button id ="btn01">移动到右侧</button>
<button id ="btn02">移动到左侧</button>
<button id ="btn03">停止移动</button>
<div id="div01"></div>
</div>
<div>
<h3>在页面中将圆形从左移动到右</h3>
<hr/>
<button id ="btn04">移动到右侧</button>
<button id ="btn05">移动到右侧</button>
<button id ="btn06">停止动画</button>
<div id="div02"><p>hello</p></div>
</div>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script>
$("#btn01").click(function (){
$("#div01").animate({left:"780px"},2000);
});
$("#btn02").click(function (){
$("#div01").animate({left:"10px"},2000);
});
$("#btn03").click(function () {
$("#div01").stop();
});
// 阶段性实现
$("#btn04").click(function (){
$("#div02").animate({left:"300px"},2000).animate({width:"300px"},2000).animate({height:"300px"},2000,function () {
$("#div02 p").animate({"font-size":"38px"},2000);
});
});
// 一次性实现
$("#btn05").click(function () {
$("#div02").animate({left:"300px",width: "300px",height: "300px"},2000);
$("#div02 p").animate({"font-size":"38px"},2000);
});
$("#btn06").click(function () {
$("#div02").stop();
});
</script>
</body>
</html>
运行结果图:
2、text()、html()、val()
- text() 方法方法设置或返回被选元素的文本内容
- html() 方法返回或设置被选元素的内容 (inner HTML) 语法同text()
-
val() 方法返回或设置被选元素的值 元素的值是通过 value 属性设置的。该方法大多用于 input 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text()、html()、val()的应用</title>
<style type="text/css">
#show{
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<p id="p01">
<b style="color: red">hello jquery</b>
</p>
<input id="input1" type="text" value="hello val"/>
<input id="input2" type="text" value=""/>
<hr/>
<p>
<b>text()、html()、val()</b>
<p>
取值:<br/>
 1. text()获取目标元素内部的文本,子标签忽略不计<br/>
 2. html()获取目标元素内的所有内容,包括文本及子标签、样式等<br/>
  3. val() 获取目标元素(一般input或者textarea)的value属性值<br/>
 [例]:var text = $("#p01").text();<br/>
赋值:<br/>
 1. text()将某文本变量插入到某标签内,不含子标签<br/>
   text() = document.getElementById("").innerText;<br/>
 2. html()将某html代码插入到某标签内,含子标签及样式<br/>
    html() = document.getElementById("").innerHTML;<br/>
 3. val() 将某文本赋值给某元素的value属性内<br/>
   val() = document.getElementById("").value;<br/>
 [例]:$("#p02").html($("#p01").html());<br/>
</p>
</p>
<button id ="btn1">text</button>
<button id ="btn2">html</button>
<button id ="btn3">val</button>
<button id ="btn4">copy</button>
<p id="show"></p>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script>
$(function () {
$("#btn1").click(function () {
var txt = $("#p01").text();
$("#show").text(txt);
});
$("#btn2").click(function () {
var htm = $("#p01").html();
$("#show").html(htm);
});
$("#btn3").click(function () {
var v = $("#input1").val();
$("#show").text(v);
});
$("#btn4").click(function () {
var c= $("#input1").val();
$("#input2").val(c);
});
})
</script>
</body>
</html>
运行结果图: