<%@ page language="java" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery测试页面2</title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<style type="text/css">
.pp{
color:red;
background-color:orange;
}
.pp2{
color:blue;
background-color:red;
}
img{
width:100px;
height:50px;
}
</style>
<script type="text/javascript">
//DOM加载完成后执行的函数,相当于$(document).ready()的简写
$(function(){
//改变网页title
$("document").context.title = "欢迎来到jquery的测试世界!!";
});
function eachTest()
{
alert("P的个数:" + $("p").size() + ",用size()获取");
alert("P的个数:" + $("p").length + ",用length获取");
alert("P的选择器:" + $("p").selector);
$("p").each(function(i){
$(this).text("这是:" + $(this).text());
if(i%2==0)
{
$(this).addClass("pp");
}
else
{
$(this).addClass("pp2");
}
});
//返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。
//如果没有指定,那么context指向当前的文档(document)。
//输出结果 INPUT
alert($("#myText",document.getElementById("myText")).context.nodeName);
}
function getTest()
{
//$("img").get()获取网页上的img对象的DOM集合
//不是jquery对象集合
//alert结果是http://localhost:8099/Test/img/a.jpg
alert("翻转前第零个:" + $("img").get()[0].src);
//集合内容翻转
var arr = $("img").get().reverse();
//alert结果是http://localhost:8099/Test/img/b.jpg
alert("翻转后第零个:" + arr[0].src);
//获取网页中第一P的文本值
alert($("p").get(0).innerText);
}
function dataTest()
{
alert("添加之前:" + $("div").data("test"));
//给div加一个缓存数据
$("div").data("test","data函数测试");
alert("添加之后:" + $("div").data("test"));
}
</script>
</head>
<body>
<input type="button" value="each函数测试" onclick="eachTest();"/>
<p>一</p>
<p>二</p>
<p>三</p>
<p>四</p>
<p>五</p>
<p>六</p>
<p>七</p>
<p>八</p><br/>
<input type="text" id="myText" name="myText" value="111"/><br/><br/>
<input type="button" value="get函数测试之图像翻转" onclick="getTest();"><br/><br/>
<img src="img/a.jpg"/> <img src="img/b.jpg"/>
<br/><br/>
<input type="button" value="data函数测试" onclick="dataTest();"><br/><br/>
<div>data函数测试</div>
</body>
</html>
分享到:
相关推荐
JQuery功能测试源码_jquerydemo
更详细"超炫jQuery测试答题功能”特效教程,http://www.sucaihuo.com/js/39.html。你也可以在素材火网页特效下载 http://www.sucaihuo.com/js,都是优质素材,最主要是既有教程,也有演示并且可下载哦,技术大咖也来...
jquery1.2.6-1.7.1满足你各种测试所需
JQuery功能测试源码 一个JQuery测试的demo,主要通过颜色变换、界面语言切换来展示JQuery的功能
NULL 博文链接:https://jxdwuao.iteye.com/blog/700150
accp7.0 JQuery测试题及答案,简单实现特效代码!
Jquery跨域访问Web服务的demo源码
jquery 测试题目 以及参考答案 面试使用 自测使用
JQuery功能测试源码.zip
jquery的学习进程试卷,考核你是否拥有合格的jquery技术!
JQuery2.1.0的jar包已经有了,上传不了,就上传了一个测试的静态页面
北大青鸟内部测试笔试题1北大青鸟内部测试笔试题1北大青鸟内部测试笔试题1
外国高手弄的测试页面,我改了一点点 原网址 http://stevewellens.com/jQuerySelectorTester.htm
jQuery腾讯肌肤缺水指数测试
json jquery dwr 个人测试
jQuery 中的简单实用的网页中div弹出效果 超酷!
测试jquery easyui demo
北大青鸟JavaScript&Jquery;内部测试机试题
Jquery测试题.pdf