JQuery小测试二

mimang2007110 · 发表于 2013-2-7 22:14:42

<%@ 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函数测试" /> <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函数测试之图像翻转" ><br/><br/> <img src="img/a.jpg"/>&nbsp;&nbsp;&nbsp;<img src="img/b.jpg"/> <br/><br/> <input type="button" value="data函数测试" ><br/><br/> <div>data函数测试</div> </body></html>

		自动登录	找回密码
密码			立即注册

JQuery小测试二

浏览过的版块