您的位置:首页 > Web前端 > JQuery

Jquery 基本操作

2011-10-26 10:25 549 查看
Launching Code onDocument Ready

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery Tutorials</title>
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//alert("test");
$("a").click(function (event) {
alert("Thank you for visiting");
// can prevent to redirect to google.com
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>


Adding and Removing an HTML class

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery Tutorials</title>
<style type="text/css">
a.test{font-weight:bold;}
</style>
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
// add the class
$("a").addClass("test");
// remove the class
//$("a").removeClass("test");
});
</script>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>


SpecialEffects

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery Tutorials</title>
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//alert("test");
$("a").click(function (event) {
event.preventDefault();
// slowly disappear
$(this).hide("slow");
});
});
</script>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>


Callbackand Functions

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery Tutorials</title>
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
// fetch the requested HTML snippet
$.get('SpecialEffects.htm', function (data) {
//$('.result').html(data);
alert(data);
});

});
</script>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: