JQuery常用功能
<%@ 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>JQuery常用功能练习</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">
<style type="text/css">
.li1{
background:red;
width:20px;
}
ul{ list-style:none; border-bottom:1px solid gray; padding:0; margin:0; width:200px;}
.header{ background:yellow; border:1px solid gray; border-bottom:0; cursor:pointer;}
div { height:30px; width:200px; border:1px solid red; padding:4px; margin:2px;}
p { height:30px; width:200px; border:1px solid green; padding:4px; margin:2px;}
.content{ color:blue; border:1px solid gray; border-bottom:0;}
.lightOff{ background-color:Black;color:White;}
</style>
<!-- 用了base标签，表示引用的路径以应用名作为参考起点 -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<script type="text/javascript">
// 可以多次注册事件
// (Dom元素创建完毕后就被触发)
$(document).ready(function() {
//alert("加载完成1！");
});
$(document).ready(function() {
//alert("加载完成2！");
});
// 只能有效一次
// (所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发)
window.onload = function() {
//alert("onload 1 !");
}
window.onload = function() {
//alert("onload 2 !");
}
$(function() {
$("#selall").click(function() {
$("#playList :checkbox").attr("checked", true);
});
$("#unselall").click(function() {
$("#playList :checkbox").attr("checked", false);
});
$("#reverse").click(function() {
$("#playList :checkbox").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
});
});
$(function() {
$("input[value=显示所选项]").click(function() {
var names = $("input[name=city]:checked");
var arr = new Array();
names.each(function(key, value) { arr[key] = $(value).val(); });
$("#spanMsg").text("共选中" + names.length + "条：" + arr.join(","));
});
});
// 删除节点
$(function() {
$("#removeUl").click(function() {
$("ul li.li1").remove();
// 动态创建dom界面
var link = $("<a href='http://www.insigmaedu.com'>网新仿真实训</a>");
// 必须把动态创建的元素添加到界面上后，才能通过选择元素器取到。
//link.text("网新仿真实训");设置a标签内的文本内容
$("#link1").text("网新仿真实训");
$("#createDom").append(link);
});
});
$(function() {
// 添加所选项
$("#moveToRight").click(function() {
var items = $("#select1 option:selected").remove();
$("#select2").append(items);
});
// 移除所选项
$("#moveToLeft").click(function() {
var items = $("#select2 option:selected").remove();
$("#select1").append(items);
});
// 添加所有项
$("#moveAllToRight").click(function() {
var items = $("#select1 option").remove();
$("#select2").append(items);
});
// 移除所有项
$("#moveAllToLeft").click(function() {
var items = $("#select2 option").remove();
$("#select1").append(items);
});
});
$(function() {
// 偶数
$("#userList li:odd").addClass("content");
// 奇数
$("#userList li:even").addClass("header").click(function() {
$(this).next("li.content").show("fast").siblings("li.content").hide("fast");
});
// 第一次
$("#userList li:odd").hide("fast");
$("#userList li:even").last().click();
});
$(function() {
/* $("div").click(function() {
alert("Div单击事件1---> " + $(this).next().text());
});
$("div").click(function() {
alert("Div单击事件2---> " + $(this).nextAll().text());
});
$("div").click(function() {
alert("Div单击事件3---> " + $(this).nextAll("div").text());
}); */
$("div").click(function() {
//这里的两个this要注意，紧接的下一行的this表示当前被点击的div
//nextAll表示向后寻找兄弟节点
var curObjs = $(this).nextAll("div");
$.each(curObjs, function() {
//紧接的如下两行的this表示curObjs里被循环到的变量
$(this).css("background", "red");
alert($(this).text());
});
});
$("p").click(function() {
alert("P单击事件1---> " + $(this).next("p").text());
});
// 菜单切换
$("li").click(function() {
$(this).css("background", "green");
$(this).siblings("li").css("background", "red");
});
});
$(function() {
$("#toReplace").click(function() {
$("br").replaceWith("<hr/>");
$("p").wrap("<font color='red'></font>");
})
});
$(function() {
$("#turnLight").click(function() {
/* $("body").toggleClass("lightOff"); */
if ($("body").hasClass("lightOff")) {
$("#turnLight").val("关灯");
$("body").removeClass("lightOff");
}
else {
$("#turnLight").val("开灯");
$("body").addClass("lightOff");
}
/* if($(this).val()=="关灯"){
$("body").addClass("lightOff");
$(this).val("开灯")
}else{
$("body").removeClass("lightOff");
$(this).val("关灯")
} */
});
});
</script>
<body>
<div id="playList">
<input type="checkbox" />23秒32年<br/>
<input type="checkbox" />妈妈的太阳<br/>
<input type="checkbox" />婚前试爱<br/>
<input type="checkbox" />最重要的决定<br/>
<input type="checkbox" />我的电话<br/>
<input type="checkbox" />不只有缘<br/>
<input type="checkbox" />丹书铁契<br/>
</div>
<input id="selall" type="button" value="全选" />
<input id="unselall" type="button" value="全不选" />
<input id="reverse" type="button" value="反选" />
<!-- ************************************************************ -->
<br><hr>
<input type="checkbox" name="city" value="beijing" /> 北京<br/>
<input type="checkbox" name="city" value="shanghai" /> 上海<br/>
<input type="checkbox" name="city" value="hangzhou" /> 杭州<br/>
<input type="checkbox" name="city" value="zhenzhou" /> 郑州<br/>
<input type="checkbox" name="city" value="xian" /> 西安<br/>
<input type="button" value="显示所选项" />
<span id="spanMsg"></span>
<!-- ************************************************************ -->
<br><hr>
<div id="createDom"></div>
<ul>
<li>111</li>
<li class="li1">222</li>
<li>333</li>
<li class="li1">444</li>
<li>555</li>
</ul>
<input type="button" value="删除" id="removeUl" />
<!-- ************************************************************ -->
<br><hr>
<select id="select1" style="width:150px;height:150px;float:left;" multiple="multiple">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="width:50px;height:150px;float:left; text-align:center;">
<input id="moveToRight" type="button" value=" > " />
<input id="moveToLeft" type="button" value=" < " />
<input id="moveAllToRight" type="button" value=">>" />
<input id="moveAllToLeft" type="button" value="<<" />
</div>
<select id="select2" style="width:300px;height:150px;float:left;" id="select2" multiple="multiple">
</select>
<!-- ************************************************************ -->
<br><hr width="1033px" align="left">
<ul id="userList">
<li>我的好友</li>
<li>张三<br/>
李四<br/>
</li>
<li>我的同事</li>
<li>拉登<br/>
奥巴马<br/></li>
<li>陌生人</li>
<li>陈凯歌<br/>
周笔畅<br/></li>
</ul>
<!-- ************************************************************ -->
<br><hr>
<div>层1</div>
<div>层2</div>
<div>层3</div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<div>层4</div>
<div>层5</div>
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
</ul>
<!-- ************************************************************ -->
<br><hr>
米勃朗峰位于法国和意大利边境地区。<br/>
海拔4807米区。<br/>
是阿尔卑斯山脉的最高峰区。<br/>
也是欧洲最高峰区。<br/>
享有“欧洲屋脊”之美称区。
<br/>
<br/>
<p>山巅冰雪覆盖，山坡林木葱茏，山麓碧波荡漾。</p>
<input id="toReplace" type="button" value="ReplaceWith"/>
<!-- ************************************************************ -->
<br><hr>
<input id="turnLight" type="button" value="关灯" />
</body>
</html>