jQuery示例集锦(2)

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

其中,id为主键自动索引，tname为行业名称，tradeType为一个标识，为0时，表示这条数据是大类；不为0，而是某个数字的时候，则这个数字表示其父级的id。
（1）主页面
<script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
<select name="bTrade" id="bTrade">
    <option value="-1">——所属行业大类——</option>
    <?
    $res1=result("select * from csj_trade where tradeType=0");
    while($rs1=mysql_fetch_array($res1)){
    ?>
    <option value="<?=$rs1["id"]?>">——<?=$rs1["tname"]?>——</option>
    <?}?>
</select>
<span id="quote">
    <select name="sTrade">
        <option value="-2">——行业小类——</option>
    </select>
</span>
<script language="javascript">...
$("#bTrade").change(function()...{
$("#quote").load("../include/getstrade.php?id="+$("#bTrade").val());
});
</script>
（2）getstrade.php
<?
require_once("function.php");
header("Cache-Control: no-cache");
$id=verify_id($_GET["id"]);
$res=result("select * from csj_trade where tradeType=".$id);
$rt=<select name="sTrade" id="s_trade">;
while($rs=mysql_fetch_array($res)){
$rt.=<option value=".$rs["id"].">.$rs["tname"].</option>;
}
$rt.=</select>;
echo $rt;
?>
5、CSS 样式表动态选择
主页面
<!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="utf-8">
<HTML>
<HEAD>
<TITLE>css 选择</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
<link href="1.css" rel="stylesheet" title="style1" type="text/css" />
<link href="2.css" rel="stylesheet" title="style2" type="text/css" />
<link href="3.css" rel="stylesheet" title="style3" type="text/css" />
</HEAD>
<BODY>
<h1>jQuery 是一个新型的JavaScript库. </h1>
<p>jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。
jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。
jQuery支持CSS1-CSS3,以及基本的xPath
jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
</p>
<ul>
    <li rel="style1" class="styleswitch">styles1</li>
    <li rel="style2" class="styleswitch">styles2</li>
    <li rel="style3" class="styleswitch">styles3</li>
</ul>
<SCRIPT LANGUAGE="JavaScript">...

</SCRIPT>
</BODY>
</HTML>
三个css样式表
1.css
body{background:#000;color:#fff}
h1{font-size:14px;color:#fff;font-weight:bold;}
p{font-size:12px;color:#fff;}
2.css
body{background:#f00;color:#fff}
h1{font-size:15px;color:#fff;font-weight:bold;}
p{font-size:13px;color:#fff;}
3.css
body{background:#fee;color:#000}
h1{font-size:16px;color:#000;font-weight:bold;}
p{font-size:14px;color:#000;}
6、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 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>
</head>
<body>
<a>1、aaa</a>
<br />
<h1 class="a">2、aaa</h1>
<br />
3、<span name="aa">aaa</span>
<br /><br />
4、<ul>
<li class="u1">111</li>
<li name="u2">222</li>
<li id="u3">333</li>
<li><span>444</span></li>
</ul>
<br />
5、<span suibian="a">5555555</span>
<br /><br />
6、<form mingzi="form1">
<input value="我们在一个form里">
<input value="我们在一个form里">
<input type="button" value="点我">
<input type="button" value="全消失">
</form>
<br />
<br />
7、<h1>这个有点变态</h1><br />
<h1>换个写法</h1>
<br />
<br />
<br />
8、试试这个 <br />
<span x="1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<br />
<br />
9、再来，你受的了吗？
<br />
<ul y="1">
<li>aaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaaaaaaaa</li>
</ul>
10、最后一个
<ul>
<li><font>aaaaaaaaaaaaaaaaaaaaaaaaa</font></li>
<li><kkk>aaaaaaaaaaaaaaaaaaaaaaaaa</kkk></li>
<li>我是最后一个li</li>
</ul>
<script language="javascript">...
//1
$("a").click(
    function()...{
        alert("1");
    }
);
//2
$(".a").click(
    function()...{
        alert("2");
    }
);
//3
$("span[@name=aa]").click(
    function()...{
        alert("3");
    }
);
//4
$("li").css("cursor","pointer");
$("ul li.u1").click(
    function()...{
        alert("点了第一个111");
    }
);
$("ul li[@name=u2]").click(
    function()...{
        alert("点了第二个222");
    }
);
$("ul #u3").click(
    function()...{
        alert("点了第三个333");
    }
);
$("ul li span").click(
    function()...{
        alert("点了第四个444");
    }
);
//5
$("span[@suibian=a]").click(
    function()...{
        alert("随便设置个属性也行");
    }
);
//6
$("input[@value=点我]").click(
    function()...{
        alert("中文也行啊？");
    }
);
$("input[@value=全消失]").click(
    function()...{
        $("form[@mingzi=form1]").children().hide();
    }
);
//7
$("h1").contains("这个有点变态").click(
    function()...{
        alert("太变态了");
    }
);
$("h1:contains(换个写法)").click(
    function()...{
        alert("这么写也行");
    }
);
//8
$("span[@x]").css("background","red");
//9
$("ul[@y=1] li:odd").css("background","red");
$("ul[@y=1] li:even").css("background","#ff0");
//10
$("ul:last li[font]").click(
    function()...{
        alert("我有font");
    }
);
$("ul:last li[kkk]").click(
    function()...{
        alert("我有kkk? 靠,kkk也算。。。");
    }
);
$("li:last").click(
    function()...{
        alert("是的，本页最后一个li，就是我！");
    }
);
</script>
</body>
</html>

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

【相关文章】