jQuery学习体验(一)
1、ready函数
格式:
$(document).ready(function()
{
//当文档载入后从此处开始执行代码
});
说明:
$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
$(document).ready表示:获取文档对象就绪的时候。
注:DOM:是Document Object Model文档对象模型的缩写
2、鼠标点击事件
格式:$("div/#id/.class").click(function()
{
//事件效果代码,每个事件结束后用分号结束语句。
})
$(div/#id/.class)表示事件发生在当前页面的所有层/同名id/同名类都绑定了**事件,若用this表示返回当前对象
例子:点击文字那一层,出现提示信息:这是我的第一个jQuery例子!!!
<html>
<head>
<title>第一个jQuery例子</title>
</head>
<script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<script language="javascript">
<!--
$(document).ready(function()
{
$("div").click(function()
{
alert("这是我的第一个jQuery例子!!!");
})
})
-->
</script>
<body>
<div>
点击这些文字看会出现什么效果……
</div>
</body>
</html>
不明地方: <script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
这句语句做何解释,为什么没有这句时,点击文字不会出现提示信息?
3、对CSS 的操作方法:addclass & removeclass
addclass:添加指定层的样式类名
removeclass:移除指定层的样式类名
格式: $("div/#id/.class").addClass("样式类名");
$("div/#id/.class/this").removeClass("样式类名");
例子:
<script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<style>
.a { background-color:#00FF66}
</style>
<script language="javascript">
<!--
$(document).ready(function()
{
$("div").addClass("a");//加载网页时添加样式
$("div").click(function()
{
$(this).removeClass("a");//鼠标点击时触发绑定的click事件
})
})
-->
</script>
<body>
<div>
点击我看看,是不是有变化呢?
</div>
</body>
注:addClass & removeClass 中的Class中的C一定要大写,否则看不出效果!!!