JQuery基础操作示例-优快云博客

<%@ 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"/>&nbsp;&nbsp;&nbsp;<img src="img/b.jpg"/>
   <br/><br/>
   <input type="button" value="data函数测试" onclick="dataTest();"><br/><br/>
   <div>data函数测试</div>
  </body>
</html>