JQuery测试代码集 - 军军小站|张军博客

JQuery 网上搜到的几个教程 , 编写的测试代码集合 . 别忘了去下载 jquery.js 这个文件 ...

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

test1_1.html 未使用 ajax 的切换

test1_2.html 使用 ajax 的切换

test2.html 简单插入

test3.html 加载

test4.html 交替颜色和鼠标 overout 变颜色

test5.html window.status

test6.html 图片叠加 || ball.jpg,corner_bl.gif,shadow.gif,shadow180.gif

test7.html DOM 外包一层

test8.html 结合 php, 做按钮点后随即产生 || script.php

function test() {

var external_links = document.getElementById('external_links');

var links = external_links.getElementsByTagName('a');

for (var i=0;i < links.length;i++) {

var link = links.item(i);

link.onclick = function() {

return confirm('You are going to visit: ' + this.href);

};

}

</script>

<html>

<head>

<title>title</title>

</head>

</div>

</body>

</html>

function test() {

$('#external_links a').click(function() {

return confirm('You are going to visit: ' + this.href);

});

}

</script>

<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

</div>

</body>

</html>

function test() {

$('<p></p>')

.html('Hey World!')

.css('background', 'yellow')

.appendTo("body");

}

</script>

<head>

</head>

</body>

</html>

$(document).ready(function(){

alert("Congratluations!");

});

</script>

<head>

</head>

<body>

</body>

</html>

<head>

$(document).ready(function(){ // 这个就是传说的 ready

$(".stripe tr").mouseover(function(){

// 如果鼠标移到 class 为 stripe 的表格的 tr 上时，执行函数

$(this).addClass("over");}).mouseout(function(){

// 给这行添加 class 值为 over ，并且当鼠标一出该行时执行函数

$(this).removeClass("over");}) // 移除该行的 class

$(".stripe tr:even").addClass("alt");

// 给 class 为 stripe 的表格的偶数行添加 class 值为 alt

});

</script>

<style>

th {

background:#0066FF;

color:#FFFFFF;

line-height:20px;

height:30px;

}

td {

padding:6px 11px;

border-bottom:1px solid #95bce2;

vertical-align:top;

text-align:center;

}

td * {

padding:6px 11px;

}

tr.alt td {

background:#ecf6fc; /* 这行将给所有的 tr 加上背景色 */

}

tr.over td {

background:#bcd4ec; /* 这个将是鼠标高亮行的背景色 */

}

</style>

</head>

<body>

<thead>

<tr>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

$(document).ready(function(){

$('a.affLink').mouseover(function(){window.status=" 特别的 status";return true;})

.mouseout(function(){window.status='Done';return true;});

});

</script>

<head>

<!--

-->

</style>

</head>

<body>

</body>

</html>

$(document).ready(function(){

$("img.dropshadow")

.wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" +

"<div class='wrap3'></div></div></div></div>");

});

</script>

<head>

.wrap0, .wrap1, .wrap2, .wrap3 {

display:inline-table;

/* \*/display:block;/**/

}

.wrap0 {

float:left;

background:url(shadow.gif) right bottom no-repeat;

}

.wrap1 {

background:url(shadow180.gif) no-repeat;

}

.wrap2 {

background:url(corner_bl.gif) -18px 100% no-repeat;

}

.wrap3 {

padding:10px 14px 14px 10px;

background:url(corner_tr.gif) 100% -18px no-repeat;

}

body { background: #fff;}

</style>

</head>

<body>

<p>First, the old-school, multiple divs hard coded into the html</p>

<img

src="ball.jpg"

alt="The object casting a shadow"

</div>

分享到：

如何通过GEEK破解的方式得到任意发布商的身 ... | 网络环保请从规划URL开始

2007-10-12 12:26
浏览 112
评论(0)
相关推荐

发表评论

您还没有登录,请您登录后再发表评论

JQuery测试代码集

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义