<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel=‘stylesheet‘ type="text/css" href=‘b/css/bootstrap.css‘>
</head>
<body style="margin:150px;">
<div id="div001">
<span id="spn001">1</span>
<span id="spn002">2</span>
<span id="spn003">3</span>
</div>
<div>
<button id="btn001">click me</button>
<button id="btn002">click me to create dom</button>
<button id="btn003">click me to move dom</button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index025.js"></script>
</body>
</html>
$(function() {
$(‘#btn001‘).click(btn001Click);
$(‘#btn002‘).click(btn002Click);
$(‘#btn003‘).click(btn003Click);
initSpnClick();
});
function btn001Click() {
var $div001 = $(‘#div001‘);
$div001.append(createP(‘p n‘));// L.append(in);其中L-list,in-item n
createP(‘p n+1‘).appendTo($div001);// in.appendTo(L);
$div001.prepend(createP(‘p 02‘));// L.prepend(i1);其中i1-item 1
createP(‘p 01‘).prependTo($div001);// i1.prependTo(L);
$div001.after(createP(‘p b02‘)); // a.after(b);
createP(‘p b01‘).insertAfter($div001);// b.insertAfter(a);
$div001.before(createP(‘p a01‘)); // b.before(a);
createP(‘p a02‘).insertBefore($div001);// a.insertBefore(b);
}
function createP(txt) {
return $(‘<p>‘ + txt + ‘</p>‘);
}
function btn002Click() {
var $p = $(‘<p><span>‘);// 这样得到的竟然是<p><span></span></p>
// $p.html(‘this is in p and in span‘);// 这样又把span给替换了；
$(‘span‘, $p).html(‘this is in span‘);// 用到了逗号操作符；
$(‘#div001‘).append($p);
}
function btn003Click() {
var $spn001 = $(‘#spn001‘);
var $div001 = $(‘#div001‘);
$div001.append($spn001);// 这样移动对象，其上面的事件还是保留的；
}
function initSpnClick() {
$(‘span‘).click(function() {
// 获取点击事件的对象；
console.log(‘%c‘ + arguments[0].target.id + ‘ click‘, ‘font-size:16px;color:red‘);
});
}
时间： 2024-08-04 13:00:37