<%@ 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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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>
<%@ 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>我爱工大</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
/*$("input:last").click(function(){
document.getElementById("div").innerHTML = " ";
var $val = parseInt($("input:first").val());
var str = '';
//alert($("input:first").clone(true).get(0).name);
for(var i = 0; i < $val; i++)
{
str += "<input type='text'> <br/>";
}
$("div").html(str);
});
//删除
$("input:last").click(function(){
//var str = $("ul li:eq(0)").remove();//返回的是删除的对象
//$("ul li:last").after(str);
$("li:eq(2)").empty();//清空元素内的内容,删除匹配的元素集合中所有的子节点。
});*/
$("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>