`
txf2004
  • 浏览: 7039526 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery测试代码集

jQueryJavaScriptHTMLCSSQQ 
阅读更多
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan

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

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

<!----------------------menu.html------------------------->

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

<!------------------------test1_1.html----------------------->

<!-- 未使用ajax的切换 -->

<script language="javascript">

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>

<meta http-equiv="Content-Language" content="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>title</title>

</head>

<body onload="javascript:test();">

<div id="external_links">

<a href="test1_1.html#1">a</a>

<a href="test1_1.html#2">b</a>

<a href="test1_1.html#3">c</a>

<a href="test1_1.html#4">d</a>

</div>

</body>

</html>

<!------------------------ test1_2.html ----------------------->

<!-- 使用ajax的切换 -->

<script type="text/javascript" src=""></script>

<script type="text/javascript" src="jquery-<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" /><chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>

<script type="text/javascript">

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Language" content="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="" rel="stylesheet" type="text/css" />

<title></title>

</head>

<body onload="javascript:test();">

<div id="external_links">

<a href="test1_2.html#1">e</a>

<a href="test1_2.html#2">f</a>

<a href="test1_2.html#3">g</a>

<a href="test1_2.html#4">h</a>

</div>

</body>

</html>

<!----------------------test2.html------------------------->

<!-- 简单插入 -->

<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>

<script type="text/javascript">

function test() {

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

.html('Hey World!')

.css('background', 'yellow')

.appendTo("body");

}

</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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Language" content="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="" rel="stylesheet" type="text/css" />

<title></title>

</head>

<body onload="javascript:test();">

</body>

</html>

<!----------------------test3.html------------------------->

<!-- 加载 -->

<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>

<script type="text/javascript">

$(document).ready(function(){

alert("Congratluations!");

});

</script>

<script type="text/javascript" src=""></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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Language" content="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="" rel="stylesheet" type="text/css" />

<title></title>

</head>

<body>

</body>

</html>

<!-----------------------test4.html------------------------>

<!-- 交替颜色和鼠标overout变颜色 -->

<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Language" content="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="马永占(MyZ)" />

<meta name="Copyright" content="马永占(MyZ)" />

<meta name="descrīption" content="" />

<meta name="keywords"content="" />

<link rel="icon" href="" type="image/x-icon" />

<link rel="shortcut icon" href="" type="image/x-icon" />

<link href="" rel="stylesheet" type="text/css" />

<title></title>

<script type="text/javascript">

$(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>

<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">

<!--用class="stripe"来标识需要使用该效果的表格-->

<thead>

<tr>

<th>姓名</th>

<th>年龄</th>

<th>QQ</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>MyZ</td>

<td>20</td>

<td>10000</td>

<td>10000@qq.com</td>

</tr>

<tr>

<td>MyZ</td>

<td>20</td>

<td>10000</td>

<td>10000@qq.com</td>

</tr>

<tr>

<td>MyZ</td>

<td>20</td>

<td>10000</td>

<td>10000@qq.com</td>

</tr>

<tr>

<td>MyZ</td>

<td>20</td>

<td>10000</td>

<td>10000@qq.com</td>

</tr>

<tr>

<td>MyZ</td>

<td>20</td>

<td>10000</td>

<td>10000@qq.com</td>

</tr>

</tbody>

</table>

</body>

</html>

<!----------------------test5.html------------------------->

<!-- window.status -->

<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

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

});

</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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Language" content="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="马永占(MyZ)" />

<meta name="Copyright" content="马永占(MyZ)" />

<meta name="descrīption" content="" />

<meta name="keywords"content="" />

<link rel="icon" href="" type="image/x-icon" />

<link rel="shortcut icon" href="" type="image/x-icon" />

<link href="" rel="stylesheet" type="text/css" />

<title></title>

<style type="text/css">

<!--

-->

</style>

</head>

<body>

<a href="test5.html#a" class="affLink">aaa</a>

<a href="test5.html#b" class="affLink">bbb</a>

<a href="test5.html#c" class="affLink">ccc</a>

</body>

</html>

<!-----------------------test6.html------------------------>

<!-- 图片叠加 -->

<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>

<script language="JavaScript" type="text/javascript">

$(document).ready(function(){

$("img.dropshadow")

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

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

});

</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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Language" content="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="马永占(MyZ)" />

<meta name="Copyright" content="马永占(MyZ)" />

<meta name="descrīption" content="" />

<meta name="keywords"content="" />

<link rel="icon" href="" type="image/x-icon" />

<link rel="shortcut icon" href="" type="image/x-icon" />

<link href="" rel="stylesheet" type="text/css" />

<title></title>

<style type="text/css">

.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>

<div class="wrap0">

<div class="wrap1">

<div class="wrap2">

<div class="wrap3">

<img

src="ball.jpg"

alt="The object casting a shadow"

/>

</div>

</div>

</div>

分享到：
| 网络环保请从规划URL开始
评论
发表评论

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

相关推荐

    jQuery初学代码集

    **jQuery初学代码集** jQuery是一款广泛应用于网页开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者而言，掌握jQuery能够极大地提高开发效率，让复杂的JavaScript代码变...

    Firebug控制台动态加载jquery脚本并执行jquery代码

    在JavaScript的世界里，jQuery是一个非常流行...通过动态加载和执行代码，开发者可以快速测试和调试网页功能，提升开发效率。在学习和实践中，不断地尝试和理解这些工具的用法，将有助于你成为一名更优秀的前端开发者。

    jQuery表单校验插件validate实例代码集

    jQuery表单校验插件validate实例代码集 有多个表同的表单，来共同展现表单验证插件的各种用法，包括判断字符、输入为空、类型判断、适时Ajax方式提示等，通过这些实例可快速掌握验证的方法和要点，此前，源码爱好者...

    50个jquery代码片段

    此片段展示了如何通过链式调用`filter()`方法来精炼jQuery选择器的结果集。具体来说，`.filter(":not(:has(.selected))")`这段代码将移除所有不包含特定类（如“selected”）子元素的元素。这在处理复杂的DOM结构时...

    JQuery教程全集

    - **提高可测试性**：当 JavaScript 代码独立时，更容易对其进行单元测试。 ##### 1.3 JQuery 基础 本节详细介绍了 JQuery 的核心概念和技术。 - **The jQuery Wrapper**：当使用 JQuery 选择器选择 DOM 元素时，...

    jquery实用代码片段集合

    ### jQuery实用代码片段集合知识点 #### jQuery简介与使用 jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery极大地简化了JavaScript编程，让开发者能够以...

    jquery常用代码段

    根据提供的文件信息，我们可以总结出一系列与jQuery相关的实用代码片段及其应用场景。以下是对这些知识点的详细解释： ### 1. 更改默认字符集 在进行AJAX请求时，可以通过设置`contentType`来指定字符集。例如，从...

    jQuery针对IE浏览器低版本测试代码

    本测试代码集就是针对这一需求而准备的。 jQuery的核心特性包括： 1. **选择器**：jQuery提供了丰富的CSS选择器，如`$("#id")`、`$(".class")`、`$("tag")`等，使得选取DOM元素变得简单易行。 2. **DOM操作**：...

    jQuery密码强度检测高级版代码.zip

    《jQuery密码强度检测高级版代码详解》 在Web开发中，用户账户安全是至关重要的，而密码强度检测是其中的关键一环。"jQuery密码强度检测高级版代码"提供了一种有效的解决方案，它不仅具备基本的密码强度判断，还...

    50个jquery经典代码

    针对不同的浏览器，尤其是IE，可以使用`$.browser.msie`来检测并应用特定的功能或样式调整，如`if($.browser.msie) { /* Internet Explorer specific code */ }`。 ### 8. 替换DOM元素 使用`replaceWith()`可以...

    jQuery插件集之(按钮特效)+Demo

    "jQuery插件集之(按钮特效)+Demo"提供了一个实践性的资源，包括插件、演示示例以及源代码，帮助开发者实现各种各样的按钮效果，如鼠标移入移除的交互和自定义按钮样式。 首先，我们来理解jQuery插件的基本结构。一...

    黑白变彩色的jQuery图片集代码.rar

    黑白变彩色的jQuery图片集代码，类似于图库特效，本相集还可对图片进行分类管理，鼠标放上后相册缩略图由黑白变彩色，很炫酷的效果吧。测试时请使用Chrome浏览器，需要等待jquery等等的插件载入成功后，相册才可以...

    自学JQuery的代码总结

    ### 自学JQuery的代码总结 #### 1. 设置AJAX请求编码格式 在进行AJAX请求时，可能需要处理不同的字符集问题。例如，在某些情况下，需要将默认的UTF-8编码改为GB2312编码。这可以通过设置全局的`ajaxSetup`来实现：...

    jQuery图片展示打包合集

    这个合集的特点是它经过了各种浏览器兼容性的测试，确保在不同的环境下都能正常运行，且集成方式简单，只需引入JavaScript文件即可快速应用。 1. **s3SliderFull.rar**：这是一个名为s3Slider的jQuery插件，它提供...

    jQuery验证码输入框代码.zip

    在实际使用这个jQuery验证码输入框代码时，开发者需要根据自己的项目需求进行适当的定制，比如调整验证码的长度、字符集、样式等。同时，确保与服务器端的接口协同工作，以便在整个验证流程中保持数据安全。通过学习...

    jQuery输入密码强度验证代码

    `jQuery`是一个流行的JavaScript库，它简化了DOM操作，事件处理，动画效果以及Ajax交互。在这个场景中，我们利用`jQuery`来实现一个密码强度验证功能，帮助用户创建更安全的密码。 标题中的“jQuery输入密码强度...

    jQuery 3D叠加切换轮播代码.zip

    jQuery 3D叠加切换轮播代码是一个利用JavaScript库jQuery实现的动态展示图片的交互效果，其特色在于通过3D变换为用户带来更为立体和生动的视觉体验。在HTML页面中，这种轮播通常用于展示一组图片，如产品展示、摄影...

    【Jquery经典特效15】jQuery实现汉字转换成拼音代码

    这些库通常基于Unicode字符集和汉语拼音规则，将汉字映射到对应的拼音。 以下是一个基本的实现步骤： 1. 引入jQuery库和汉字转拼音库：在HTML文件中，通过`&lt;script&gt;`标签引入jQuery库和汉字转拼音库。例如，如果你...

    jquery word格式排版整理代码.zip

    本资源"jquery word格式排版整理代码.zip"提供了一种利用jQuery来处理Word文档格式排版的方法，特别是针对去除无用空格和首行缩进的问题。在开发过程中，有时候我们需要将数据导出为Word文档，或者从Word文档中导入...

    【Jquery经典特效8】新闻网站jQuery图集相册代码

    10. **兼容性测试**：最后，要确保代码在主流浏览器（如Chrome、Firefox、Safari、Edge等）上都能正常工作，因为不同的浏览器可能对JavaScript和CSS的解析有差异。 总的来说，实现新闻网站的jQuery图集相册代码需要...

Magicbox
Global site tag (gtag.js) - Google Analytics