j2ee23：jquery：使用jquery技术实现奇数行偶数行换色

天津店小二

浏览: 74044 次
性别:
来自: 天津

最近访客更多访客>>

佛挡杀佛萨达

cxykyw-2

zhyly101

roqingyou

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

j2ee

第一：概念

使用jquery技术实现奇数行偶数行换色
ajax：把响应返回给客户端的时候需要dom树的思想写
1.jquery是一个javascript的框架（也就是他完成了功能，只需要导入js文件并调用），对原始的javascript代码的封装
2.jquery的应用：实现对dom树对象的封装，将dom对象（dom树中的每个节点）封装成jquery对象。封装了javascript的代码（例如将document.getElementByid("id")封装成$("id")）,因此jquery可以实现dom的所有功能
3.用处：实现用户ui（ui特效），这里用的是javascript技术。实现ajax效果，这里是用的ajax技术。因此jquery是javascript框架，也是ajax框架。封装了ajax的实现过程。
4.jquery1.8.js里面封装的javascript函数，他对代码进行了格式化（有条理）
jqueryq.8.,min.js跟上面的一样，只是jqueryq.8.,min.js没有格式化，所以文件小。因此这两个二选一
5.<script></script>里为什么能写jquery的代码？因为jquery封装的就是javascript代码
6.jquery的id选择器获得对象：查找某个jquery对象（jquery对象是javascript封装成的）：$("#dv"):其中#表示id选择器的意思
写法1：div=$("#dv")。写法2：jquery("#dv")。其实也就是说明在页面上出现的$都表示jquery这个单词
7.通过标签名称获得对象：var arr=$("div");//注意：这里是个数组。但是jquery内部给我们遍历了。我们直接arr.text就获得了这些元素的值。
8.通过class类样式获得对象：$(".dv")
8.
    ----.html:div.html("数据")：相当于innerHTML这是设置值
    ----div.html():这是获取值
    ----div.text:获得文本内容（不解析标签的）
    ----$("div：eq(x)"):这是等于，还有大于小于
    ----odd是偶数，even奇数行。这两个都是集合，jquery内部进行遍历了，不用我们遍历
    ----.css是改变样式。css利用是封装的json数据格式的对象
    ----val:获得表单元素的第一个值（只有表单里面有val，例如input，select）。可以赋值也可以取值
    ----效果中的隐藏和显示：show()，hide(),show(slow):参数是速度slow是一般的速度。
             fadeIn(),fadeOut():这两个是淡入和淡出（缓慢的变化）。 fadeIn(slow，function匿名函数)：当完成淡入的时候执行匿名函数
   ----$(document).ready()方法：他的参数是个函数，意思是当文档加载完成的时候执行这个函数，相当于onload函数。
   ----如何获得input标签中的type属性？答：$(div).attr("type")。
筛选是值对找到的集合进行过滤，效果是指点击某个按钮触发某个函数，因此效果后面的参数需要一个函数。

下面是jquery实现ajax：
9.$.get表示ajax中的get提交$.get：，第一个参数是路径，第二个参数是请求内容（是个键值对），第三个参数是回调函数，回调函数里的参数data是服务器端响应的内容。最后一个参数是响应时候放在什么地方（例如放在html里，或者javascript）
10 $.getJSON也是get提交，只是没有第四个参数，因为此时第四个参数就是json 了。第一个参数是url，第二个是数据，数据用问号跟在了url后面，第三个是回调函数，回调函数接收的数据直接就是一个json数据，不用使用eval转化了，因此直接使用each遍历。其中data是个普通的javascript对象，$(data)就是一个jquery对象了
$(div).each(两个参数):变量集合，一个是值元素下标，一个是指元素本身，是符合json格式的键值对
11.post提交：$.post，在post里的参数有序列化，目的是自动提交所有请求参数。
12.序列化：把表单提交的内容拼接成一个url路径。就是转化成一个字符串。

第二：代码

1.action层

package com.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import com.entity.Kw;

public class UserAction extends HttpServlet
{

@Override
protected void service(HttpServletRequest req,
   HttpServletResponse resp)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  /*String uname=req.getParameter("uname");
  System.out.println("----------uname");
  PrintWriter out = resp.getWriter();

  if(uname.equals("admin"))
  {
   out.print("true");
  }
  else
  {
   out.print("false");
  }*/

  String uname=req.getParameter("uname");
  System.out.println("----------"+uname);
  PrintWriter out = resp.getWriter();
  List<Kw> kwList=new ArrayList<Kw>();

  Kw kw= new Kw();
  kw.setId(1);
  kw.setTitle("java");

  Kw kw2= new Kw();
  kw2.setId(2);
  kw2.setTitle("javasss");


  Kw kw3= new Kw();
  kw3.setId(3);
  kw3.setTitle("javaaaa");

  Kw kw4= new Kw();
  kw4.setId(4);
  kw4.setTitle("javasss");

  kwList.add(kw);
  kwList.add(kw2);
  kwList.add(kw3);
  kwList.add(kw4);

  JSONArray json=JSONArray.fromObject(kwList);
  System.out.println(json.toString());
  out.print(json.toString());

}

}

2.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
</head>

   <script type="text/javascript">
     /**
     function unameExists()
     {
         var uname=$("#uname").val();
   $.get("userAction",{uname:uname},function(data){
     if(data=="true")
     {
      $("#msg").html("<font color='red'>用户名不可用</font>");
     }
     else
     {
      $("#msg").html("<font color='blue'>用户名可用</font>");
     }
    },"text");
       }

     function unameExists()
     {

      var uname=$("#uname").val();
   $.post("userAction",$("#tb").serialize(),function(data){
    if(data=="true")
    {
     $("#msg").html("<font color='red'>用户名不可用</font>");
    }
    else
    {
     $("#msg").html("<font color='blue'>用户名可用</font>");
    }
   },"text");


   //var res=$("#tb").serialize();
   //alert($("#results").append( "<tt>" + $("form").serialize() + "</tt>" ));

        }
     **/
     function unameExists()
     {
   $.getJSON("userAction",$("#tb").serialize(),function(data)
     {
    //alert(data);
      $(data).each(function(i,d)
      {
       alert(i+"   "+d.title);
      });
    });
       }
   </script>

<body>

<form id="tb">
用户名:<input type="text" name="uname" value="" id="uname" onblur="unameExists()"/><span id="msg"></span>
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="checkbox" name="checkx" value="check2ddddd" checked="checked"/> check2
</form>

</body>

</html>

第三：老张的

<html>
<head>
<title>数组的遍历</title>
<meta http-equiv="Content-Type"
       content="text/html; charset=utf-8" />
<script type="text/javascript"
       src="../js/jquery-1.4.3.js"></script>
    <script type="text/javascript">
  $(function(){
   $("#b1").click(function(){
    //获得以列表元素为内容的jquery对象，他是
    //数组对象
    var $obj=$("#u1 li");
    alert($obj.length);

    //循环遍历jquery数组对象,采用的是each方法
    $obj.each(function(index){
     if(index==0){
      //代表当前元素所对应的jQuery对象
      $(this).css("color","red");
     }else{
      $(this).css("color","blue");
     }
    });

    //获得的是jquery对象
    var $o1=$obj.eq(1);//eq(index);
    var index=$obj.index($o1);
    alert("index="+index);

    //获得的是dom对象
    var obj=$obj.get(0);//get(index);
    var obj=$obj.get()[0];//get(index);
    alert(obj.innerHTML);
   });
  });
    </script>
</head>
<body>
<ul id="u1">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<input type="button" value="点击" id="b1"/>
</body>
</html>

jquery_02.zip (95.2 KB)
下载次数: 0

jquery.zip (1.2 MB)
下载次数: 0

分享到：

struts02:占位符、通配符 | 表空间、权限、导入导出，连起来就是一套。 ...

2016-02-03 13:52
浏览 815
评论(0)
分类:开源软件
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论