JQuery测试代码集

最新推荐文章于 2023-11-16 11:29:54 发布

iteye_3224

最新推荐文章于 2023-11-16 11:29:54 发布

阅读量98

点赞数

文章标签： jQuery JavaScript HTML CSS QQ ViewUI

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>

iteye_3224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery测试代码集

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan JQuery网上搜到的几个教程,编写的测试代码集合.别忘了去下载jquery.js这个文件...&lt;?xml:namespace prefix = o ns = "...
复制链接

扫一扫