jQuery示例集锦(3)

作者：小李来源：blog 整理日期：2008-4-24

7、让连接打开新窗口,一个简单的小效果
相关连接:http://bbs.blueidea.com/thread-2780298-1-1.html
<script type="text/javascript" src="http://www.China-Staff-job.com/include/jquery/jquery-1.1.3.1.pack.js"></script>
<img src="1.jpg"> <br><br><br>
<img src="2.jpg"> <br><br><br>
<img src="3.jpg"> <br><br><br>
<img src="4.jpg"> <br><br><br>
<img src="5.jpg"> <br><br><br>
<a href="1.jpg">1.jpg</a> <br><br><br>
<a href="2.jpg">2.jpg</a> <br><br><br>
<a href="3.jpg">3.jpg</a> <br><br><br>
<a href="4.jpg">4.jpg</a> <br><br><br>
<a href="5.jpg">5.jpg</a> <br><br><br>
<script language="javascript">...
$("img").click(function()...{
    window.open(this.src);
});
$("a").css("cursor","pointer");
$("a").click(function()...{
    window.open(this.href);return false;
});
</script>
8、键盘控制----选择表格并编辑
相关连接:http://bbs.blueidea.com/thread-2780258-1-1.html
<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.China-Staff-job.com/include/jquery/jquery-1.1.3.1.pack.js"></script>
<style>...
#tb1 td{...}{background:#ccc;padding:3px;border:1px solid #999;}
</style>
</head>
<body>
<table id="tb1" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td width="200">a1</td>
    <td width="200">a2</td>
    <td width="200">a3</td>
</tr>
<tr>
    <td>b1</td>
    <td>b2</td>
    <td>b3</td>
</tr>
<tr>
    <td>c1</td>
    <td>c2</td>
    <td>c3</td>
</tr>
<tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
</tr>
<tr>
    <td>e1</td>
    <td>e2</td>
    <td>e3</td>
</tr>
<tr>
    <td>f1</td>
    <td>f2</td>
    <td>f3</td>
</tr>
</table>
<span id="t1">编辑内容：</span><input id="tmptext" type="text" value=""><input id="saveit" type="button" value="保存">
<script language="javascript">...
$(document).children().not("#tmptext").keydown(keyCtrl);
var obj=$("#tb1").children().children();
var h=0,l=0;
var maxh=obj.size()-1
var maxl=obj.children().size()/(maxh+1)-1;
select();
function select()...{
    $("#tmptext").val(obj.eq(h).children().eq(l).text());
    obj.eq(h).children().eq(l).css("background","#0ff");
}
function recover()...{
    obj.eq(h).children().eq(l).css("background","#ccc");
}
function keyCtrl(e)...{
    var e=window.event?window.event:e;
    if (e.keyCode ==37) left();
    if (e.keyCode ==39) right();
    if (e.keyCode ==38) up();
    if (e.keyCode ==40) down();
    if (e.keyCode ==13) edit();
}
function left()...{
    if(l>0)...{
        recover();
        l-=1;
        select();
    }
}
function right()...{
    if(l<maxl)...{
        recover();
        l+=1;
        select();
    }
}
function up()...{
    if(h>0)...{
    recover();
    h-=1;
    select();
    }
}
function down()...{
    if(h<maxh)...{
        recover();
        h+=1;
        select();
    }
}
function save(e)...{
var e=window.event?window.event:e;
if (e.keyCode ==13)...{
    obj.eq(h).children().eq(l).text($("#tmptext").val());
}
}
function edit()...{
    $("#tmptext").val(obj.eq(h).children().eq(l).text());
    $("#tmptext").select();
}
$("#tmptext").keydown(save);
$("#saveit").click(function()...{
    obj.eq(h).children().eq(l).text($("#tmptext").val());
})
</script>
</body>
</html>
9、选择器小试牛刀----下拉框的值同时给文本框和文本域
相关连接：http://bbs.blueidea.com/thread-2780650-1-1.html
<script type="text/javascript" src="http://www.China-Staff-job.com/include/jquery/jquery-1.1.3.1.pack.js"></script>
<input type="text" id="t2">
<textarea id="t3"></textarea>
        <select id="select1">
          <option value="">请选择</option>
          <option value="我是aaa">aaa</option>
          <option value="我是bbb">bbb</option>
        </select>
<SCRIPT LANGUAGE="JavaScript">...

</SCRIPT>
下面是lzyy同学的写法，更简单了。。。。选择器真是灵活啊，看来我要用到家，还有段路要走：）
$("textarea").html($("#select1 option:selected").text());

一个菜单伸缩效果，js代码加一起，包括$(document).ready一共6句话。
<!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" xml:lang="en-us">
<head>
    <title>DL Demo</title>
    <script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
    <script>...
    $(document).ready(function()...{
        $("dd:not(:first)").hide();
        $("dt a").click(function()...{
            $("dd:visible").slideUp("slow");
            $(this).parent().next().slideDown("slow");
            return false;
        });
    });
    </script>
    <style>...
    body {...}{ font-family: Arial; font-size: 16px; }
    dl {...}{ width: 300px; }
    dl,dd {...}{ margin: 0; }
    dt {...}{ background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
    dt a {...}{ color: #FFF; }
    dd a {...}{ color: #000; }
    ul {...}{ list-style: none; padding: 5px; }
    </style>
</head>
<body>

[1] [2] [3] [4]

【相关文章】