jquery简单应用

来源：互联网发布：网络彩票开售解禁通知编辑：程序博客网时间：2024/04/30 23:48

<%@ 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 '1.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">

<style type="text/css">
.div2{background-color:red}
</style>
</head>

<body>
<h2>菜单</h2>
<p>子菜单</p>
<p >子菜单</p>
<p>子菜单</p>
<div id="div1">
<ul>
<li>海贼王</li>
<li>火影</li>

</ul>

</div>
<ul id="ul1">
<li>
<a href="#">商品1</a>
<input type="button" value="删除"/>
</li>
<li>
<a href="#">商品2</a>
<input type="button" value="删除"/>
</li>
<li>
<a href="#" id="c">商品3</a>
<input type="button" value="删除"/>
</li>
</ul>

<input type="text" id="inl" value="空调" name="kongtiao"/>
</body>
<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
<script type="text/javascript">

$(function(){
alert($("[id='c']"));


$("h2").click(function(){
$("p").toggle();

})

});
$(function(){
$("div").css({"border":"1px solid black","width":"300px","height":"300px"});
//var temp={"name":"123","age":"20"};
//alert(temp.name);
//var temp={"name":"123","age":[{"name1":"12"},{"age1":100}]};
//alert(temp.age[1].name1);

$("div").mouseover(function(){
$(this).addClass("div2");

});

$("div").mouseout(function(){
$(this).removeClass("div2");

})

});
$(function(){

$("[name='kongtiao']").focus(function(){
if($(this).val()=="空调"){
$(this).val("");
}

}).blur(function(){
if($(this).val()==""){
$(this).val("空调");
}

});
});
$(function(){
var node1=$("<li>黑猫警长</li>");
$("ul").append(node1);

var node2=$("<li id='q'>葫芦哦哇</li>");
$("ul").prepend(node2);

var node3=$("<li>葫芦</li>");
$("#q").before(node3);
var node4=$("<li>葫</li>");
$("#q").after(node4);

});
//$(function(){
//$("ul").after($("ul").clone());

//});
$(function(){


$(":button").click(function(){
var $rem=$(this).parent().remove();
$("ul1").append($rem);
})



});
</script>

</html>

0 0