jQuery 基本实现功能模板
下面是列出了基本功能的实现
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
<!--选择器-->
$("p").click(function(){
$(this).hide();
});
<!--事件-->
$("#button1").click(function(){
window.alert("单击事件");
})
$("#button2").dblclick(function(){
window.alert("双击事件");
})
$("#button3").mouseenter(function(){
window.alert("鼠标移动事件");
})
<!--隐藏和显示-->
$("#hide").click(function(){
$(".showtext").hide();
});
$("#show").click(function(){
$(".showtext").show();
});
$("#toggle").click(function(){
$(".showtext").toggle();
});
<!--动画-->
$("#animate").click(function(){
$(".animate").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
<!--操作DOM对象-->
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn3").click(function(){
alert("Value: " + $("#testvalue").val());
});
$("#btn4").click(function(){
alert("id->"+ $("#w3s").attr("id") + "href->" + $("#w3s").attr("href"));
});
$("#btn5").click(function(){
alert($("#btn5text").text("<B>你好啊</B>"));
});
<!--添加元素-->
$("#btnadd1").click(function(){
$(".btnadd1").append("<p>添加的一个元素</p>");
});
<!--操作 CSS-->
$("#btnaddcss").click(function(){
$(".btncss").addClass("important");
});
$("#btndelcss").click(function(){
$(".btncss").removeClass("important");
});
$("#btntoggleClass").click(function(){
$(".btncss").toggleClass("important");
});
$("#btntsetClass").click(function(){
$(".btncss").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
<title>Jquery用法速用表</title>
</head>
<body>
<div style="background:#abcdef">
选择器
</div><hr>
<p>如果你点我，我就会消失</p>
<p>如果你点我，我就会消失</p>
<p>如果你点我，我就会消失</p>
<div style="background:#abcdef">
事件
</div><hr>
<input type="button" id="button1" value="单击事件"/>
<input type="button" id="button2" value="双击事件"/>
<input type="button" id="button3" value="鼠标移动事件"/>
<div style="background:#abcdef">
隐藏和显示
</div><hr>
<p class="showtext">如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">显示或者隐藏</button>
<div style="background:#abcdef">
动画
</div><hr>
<div class="animate"style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
<button id="animate">开始动画</button><br>
<br><br><br><br><br><br><br><br><br>
<div style="background:#abcdef">
操作DOM对象
</div><hr>
显示文本：<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示HTML</button><br><hr>
显示value：<p>Name: <input type="text" id="testvalue" value="my name is sun"></p>
<button id="btn3">显示value</button><br>
获得任意属性的值：<p><a href="http://www.yinghy.com" id="w3s">樱花雨</a></p>
<button id="btn4">获得任意属性的值</button><br><hr>
设置文本的属性：<p id="btn5text">This is a paragraph.</p>
<button id="btn5">设置文本属性</button><br><hr>
<div style="background:#abcdef">
添加元素
</div><hr>
<p class="btnadd1">This is a paragraph.</p>
<button id="btnadd1">添加文本</button>
<div style="background:#abcdef">
操作 CSS
</div><hr>
<p class="btncss">This is a paragraph.</p>
<button id="btnaddcss">添加 CSS样式</button>
<button id="btndelcss">删除 CSS样式</button>
<button id="btntoggleClass">自动添加和删除 CSS样式</button>
<button id="btntsetClass">具体设置单个 CSS样式</button>
</body>
</html>
