标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery.html</title>
<script src="h5/jquery学校板块/jquery/jquery.1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
//jQuery Callback 函数
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is hidden now!");
});
});
});
//jQuery 方法链接
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
//获得内容 - text()、html() 以及 val()
$(document).ready(function(){
$("btn1").click(function(){
alert("Text:" + $("#test").text);
});
$("btn2").click(function(){
alert("HTML:" + $("#test").html);
});
});
//通过 jQuery val() 方法获得输入字段的值
$(document).ready(function(){
$("button").click(function(){
alert("Value:" + $("#test").val());
});
});
//jQuery attr() 方法获取属性值
$(document).ready(function(){
$("button").click(function(){
alert($("#baidu").attr("href"));
});
});
//设置内容 - text()、html() 以及 val()
$(document).ready(function(){
$("#btn3").click(function(){
$("#test2").text("Hello world!");
});
$("#btn4").click(function(){
$("#test3").html("<b>Hello world!</b>");
});
$("#btn5").click(function(){
$("#test4").val("Dolly duck!");
});
});
//text()、html() 以及 val() 的回调函数
$("#bt1").click(function(){
$("#te1").text(function(i,origText){
return "old Text:" + origText + "New Text:Hello World!(index: " + i + ")";
});
});
$("bt2").click(function(){
$("#te2").html(function(i,origText){
return "old html:" + origText +"New Html:hello <b>world!</b>(index " + i +")"
});
});
//设置属性 - attr()
$("button").click(function(){
$("#bai").attr("href","http://baidu.com");
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<!--jQuery Callback 函数-->
<input type="button" value="hide">
<p>Everything will be Ok!</p>
<!--jQuery 方法链接-->
<p id="p1">jquery 乐趣十足</p>
<button type="button">点击这里！</button>
<!--获得内容 - text()、html() 以及 val()-->
<p>这是段落中的<b>粗体</b>文字。</p>
<button type="button" id="btn">Show text!</button>
<button type="button" id = "btn2">Show html!</button>
<!--通过 jQuery val() 方法获得输入字段的值-->
<p>姓名：<input type="text" value="琳琳琳" id = "test"></p>
<button>显示值</button>
<!--jQuery attr() 方法用于获取属性值-->
<p><a href="http://www.baidu.com" id = "baidu"></a></p>
<button>显示href的值</button>
<!--设置内容 - text()、html() 以及 val()-->
<p id = "test2">This is first paragraph!</p>
<p id = "test3">This is anther paragraph1</p>
<p id = "test4">Input field:<input type="text" value="Mickey mouse!"></p>
<button type="button" id = "btn3">设置文本</button>
<button type="button" id = "btn4">设置Html</button>
<button type="button" id = "btn6">设置值</button>
<!--text()、html() 以及 val() 的回调函数-->
<p id = "te1">这是<b>粗体</b>文本。</p>
<p id = "te2">这是另外的<b>粗体</b>文本。</p>
<button id = "bt1">显示新/旧文本</button>
<button id = "bt2">显示新救文本</button>
<!--设置属性 - attr()-->
<p><a href="http://www.baidu.com" id = "bai">baidu.com</a></p>
<button>改变Html的值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/whatcanido/p/5090308.html
