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

【jQuery 学习笔记】初识jQuery

2014-07-25 15:04 471 查看

官方网站 <a target=_blank href="http://jquery.com/">http://jquery.com/</a>

下载页面 http://docs.jquery.com/Downloading_jQuery

基本使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>

</script>
</body>
</html>

上述html代码简单的调用了jquery的js库没有做任何操作，主要src的路径要选择正确。

编写第一段jquery代码

<!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>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src=jquery.js>

</script>
<script>
$(document).ready(function () {
$("a").click(function (event) {
alert("Thanks for visiting!");
});
});
</script>
</body>
</html>

在这段中调用了ready这个事件，这个事件是在整个页面加载完毕包括一些logo之后才进行的。在jQuery中有很多event（http://api.jquery.com/category/events/#ready.28_fn_.29）

$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});

preventDefault操作可以把之前的默认的行为阻止掉

关于类

<!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>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test { font-weight: bold; }
</style>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src=jquery.js></script>
<script>
$("a").addClass("test");
</script>
</body>
</html>

在这段代码中用js为a加入了一个test的样式，移除用

$("a").removeClass("test");

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航