jquery的文档处理

来源：互联网发布：akinator网络天才编辑：程序博客网时间：2024/05/01 23:30

<%@ 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 'jquery7.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.6.2.min.js"></script>
<script type="text/javascript">
  //文档处理
  $(function(){
   $("p").attr("title","我爱你");
   //alert($("ul li:eq(1)").text());
  });
  /*$(document).ready(function(){

   document.getElementsByTagName("input")[1].onclick = function(){
   document.getElementById("div").innerHTML = " ";
   var text = document.getElementsByName("number")[0].value;
   for(var i = 0; i < parseInt(text); i++)
   {
    var eStr = document.createElement("input");
    eStr.setAttribute("type","button");
    eStr.setAttribute("value","button"+i);
    var br = document.createElement("br");
    document.getElementById("div").appendChild(eStr);
    document.getElementById("div").appendChild(br);
   }
   }
  });
  //内部插入
  $(document).ready(function(){
   $("input:eq(1)").click(function(){
    //$("ul").append($("ul li:eq(0)").clone(true));//把append后面的对象加到前面
    //$("ul li:eq(0)").clone(true).appendTo($("ul"));//把appendTo前面的对象加到后面
    //$("ul").prepend($("li:eq(0)").clone(true));//把prepend后面的加到ul的最前面
    //alert($("ul :first-child").clone(true).text());
    $("ul :first-child").clone(true).prependTo($("ul"));//把prependTo前面的加到ul的最前面
   });


  });*/
  //外部插入
  $(function(){
   $("input:last").click(function(){

    //$("p").clone(true).insertAfter($("ul li:last"));//把p元素的副本插入到ul的最后一个li的后面
    //$("ul li:last").after($("p").clone(true));
    //$("font").before($("ul li:last").clone(true));
    $("ul li:last").insertBefore($("font"));
   });
  });
</script>
</head>

<body>
  <p title="这是p">这是真的吗？</p><br>
  <font class="red" size="20px">不是真的</font>
  <ul>
   <li title="我爱你">q</li>
   <li>q</li>
   <li>a</li>
   <li>z</li>
   <li>g</li>
  </ul>

  <input name="number"><input type="button" value="click"/>
  <div id="div"></div>
</body>
</html>

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

    <title>我爱工大</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">

   });*/
   $("input[value='再加一个']").click(function(){

    $("#a:last").after($("input[type='file']:last").clone(true)).after($("#a:last").clone(true));
    $("<input type= file >");//这是jquery创建对象的方法。

   });
   $();
   //用javascript做
   document.getElementById("add").onclick = function()
   {
    var c = document.createElement("br");//javascript创建对象
    var a = document.createElement("input");
    a.setAttribute("type","file");
    var b = document.createElement("input");
    b.setAttribute("type","button");
    b.setAttribute("value","remove")
    var d = document.getElementsByTagName("div")[1];
    b.onclick = function(){

     d.removeChild(a);
     d.removeChild(b);
     d.removeChild(c);
    }


    d.appendChild(a);
    d.appendChild(b);
    d.appendChild(c);
   }
   //jquery中的复制
   $("ul li").click(function(){

    设置为true以便复制元素的所有事件处理

    $(this).clone(true).appendTo($("ul li:last"));
   });
   //替换
   $("input[type=button]:first").click(function(){

    //$("ul li:first").replaceWith("<p>asdas</p>");
    //$("<p>asdas</p>").replaceAll($("ul li:first"));
   });

   //包裹
   $("input:first").click(function(){
    //$("ul li:first").wrap($("ul li:eq(1)"));
    //$("ul li:first").wrapInner($("ul li:eq(1)"));
    //$("p:first").wrap($("<a href='#'></a>"));
    //$("p:first").wrapInner($("<a href='#'></a>"));
    alert($("p:first").attr("title"));
   });

  });


</script>
</head>

<body>
<p title="ok">真的吗？</p>

<input type="button" value="点击">
这是列表：
<ul>
   <li title="我爱你">asdasd</li>
   <li>q</li>
   <li>a</li>
   <li>z</li>
   <li>g</li>
</ul>
    <input name="number"><input type="button" value="click"/>
<div id="div"></div><br>
<input type="button" id="add" value="再加一个" ><br>
<input type="file" ><input type="button" value="remove">
<div></div>
</body>
</html>