动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stop实验测试</title>
<script src="../js/jquery-1.4.2.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
/*
* jQuery 动画 - animate() 方法
* jQuery animate() 方法用于创建自定义动画。
* 语法：$(selector).animate({params},speed,callback);
* 必需的 params 参数定义形成动画的 CSS 属性。
* 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
* 可选的 callback 参数是动画完成后所执行的函数名称。
*/
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:‘100px‘},5000);
$("div").animate({fontSize:‘3em‘},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
获取:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.4.2.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
/*
* 获得内容 - text()、html() 以及 val()
* 三个简单实用的用于 DOM 操作的 jQuery 方法：
* text() - 设置或返回所选元素的文本内容
* html() - 设置或返回所选元素的内容（包括 HTML 标记）
* val() - 设置或返回表单字段的值
* 下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
*/
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text:"+$("#test").text());
});
$("#btn2").click(function(){
alert("HTML:"+$("#test").html());
});
$("#btn3").click(function(){
alert("Value:"+$("#test1").val());
});
/*
* 获取属性 - attr()
* jQuery attr() 方法用于获取属性值。
* 下面的例子演示如何获得链接中 href 属性的值：
*/
$("#btn4").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<!--val()获取值-->
<p>姓名：<input type="text" id="test1" value="米老鼠"></p>
<button id="btn3">显示值</button>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button id="btn4">显示 href 值</button>
</body>
</html>
添加:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.4.2.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
/*
* 添加新的 HTML 内容
* 我们将学习用于添加新内容的四个 jQuery 方法：
* append() - 在被选元素的结尾插入内容
* prepend() - 在被选元素的开头插入内容
* after() - 在被选元素之后插入内容
* before() - 在被选元素之前插入内容
*/
$(document).ready(function(){
//jQuery append() 方法在被选元素的结尾插入内容。
$("#btn1").click(function(){
$("p").append("<b>Appended text</b>");
});
$("#btn2").click(function(){
$("ol").append("<li>Appened item</li>");
});
//jQuery prepend() 方法在被选元素的开头插入内容。
$("#btn3").click(function(){
$("p").prepend("<b>Prepended text</b>");
});
$("#btn4").click(function(){
$("ol").prepend("<li>Prepened item</li>")
});
/*
* jQuery after() 和 before() 方法
* jQuery after() 方法在被选元素之后插入内容。
* jQuery before() 方法在被选元素之前插入内容。
*/
$("#btn5").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn6").click(function(){
$("img").after("<b>After</b>");
});
});
/*
* 通过 append() 和 prepend() 方法添加若干新元素
* 在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
* 不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。
* 可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
*/
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("#more").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<p id="more">一次性追加多个文档</p>
<img src="../img/z_1_attack_02.png"/><br />
<button id="btn1">追加文本</button><br />
<button id="btn2">追加列表项</button><br />
<button id="btn3">Prepended向前添加文本</button><br />
<button id="btn4">Prepended向前添加li</button><br />
<button onclick="appendText()">追加多个文档</button><br />
<button id="btn5">在图片前面添加文本</button><br />
<button id="btn6">在图片后面添加文本</button><br />
</body>
</html>
原文地址：https://www.cnblogs.com/byczyz/p/11192431.html
时间： 2024-11-05 12:28:14