六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 336|回复: 0

jQuery 的第一个例子

[复制链接]

升级  42.33%

101

主题

101

主题

101

主题

举人

Rank: 3Rank: 3

积分
327
 楼主| 发表于 2013-2-8 01:02:25 | 显示全部楼层 |阅读模式
 
通过这个例子可以对jQuery的使用有个基本的认识,jQuery的事件句柄、选择器、基本语法结构,你可以复制这些代码运行感受一下。
在做第一个例子之前,你需要先到jQuery 1.3 正式版 下载 jQuery库,他是一个js的文件非常的小巧只有那么几十KB,然后就是把这个文件Copy到你的项目,用Script附加这个文件就可以了。
 
<div class="cnblogs_code">Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->Code

<!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 runat="server">
<title></title>

<script src="jquery.js" type="text/javascript"></script>

<style type="text/css">
        .red
{
            background-color
: Red;
}
        .green
{
            background-color
: Green;
}
        .blue
{
         background-color
: Blue;
}
</style>

<script type="text/javascript">

        $(document).ready(
function() {
            $(
"div").addClass("blue");
//$("#olID>li").addClass("green");

            $(
"#olID>li").hover(
function() {
                $(
this).addClass("red")
            },
function() {
                $(
this).removeClass("red")
            });

            $(
"#olID>li:last").hover(
function() {
                $(
this).addClass("green");

            },
function() {
                $(
this).removeClass("green");

            })
        })

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<ol id="olID">
<li>Terry.Feng.C</li>
<li>冯瑞涛</li>
<li>dddd.com</li>
</ol>
</div>
</form>
</body>
</html>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表