<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery整理</title>
<script type="text/javascript" src="jar/jquery-1.11.0.js"></script>
<script type="text/javascript" src="jar/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/*is测试实例
$(document).ready(function(){
//测试该form下面是否存在该表单
if($("input[type='text']").parent().is("form")){
$("#text1span").text("该input在form里面");
}
//这是一个点击事件,更改css样式
$("#spanbutton").click(function(){
$("#span2").css({"font-size":"12px","color":"red"});
});
});
*/
//删除与指定表达式匹配的元素
/*
$(document).ready(function(){
$("#nottestbutton").click(function(){
$("#notspan").text($("p").not($("#nottext2")[0]));
var spanttt = $("p").not("#nottext2");
alert(spanttt.length)
});
});
*/
/*
//模仿一个悬停事件
$(document).ready(function(){
//表单悬停颜色改变
$("td").hover(function(){
$("td").css({"color":"red","font-size":"12px"});
});
//div显示测试
$("p").hover(function(){
$("#hoverDiv").show();
$("#hoverDiv").css({"width":"100px","height":"100px","background-color":"red"});
});
});
*/
//当元素失去焦点时触发事件
/*
$(document).ready(function(){
$("#blurtext").blur(function(){
var blurtextvalue = $("#blurtext").val();
if(blurtextvalue.length !="" && blurtextvalue.length >9){
$("body").append("<div style='width:200px;height:200px;background-color:green'><p>恭喜你注册成功</p></div>");
}else{
$("#blurspan2").text("sorry,你输入参数不能为空并且长度大于9");
$("#blurspan2").css({"font-size":"12px","color":"red"});
}
});
});
*/
//当元素的值发生改变时,会发生change事件
/*
$(document).ready(function(){
$("span").css({"font-size":"12px","color":"red"});
$("#usernamechange").change(function(){
$("#userspan").text("参数不能为空且长度大于7");
});
$("#userpasswordchange").change(function(){
$("#passwordspan").text("密码不能为空且长度大于10!");
});
});
*/
//当双击元素时,会发生dbclick事件
/*
$(document).ready(function(){
$("#clicktest").bind({
dblclick:function(){$("#clickspan").text("双击事件测试");},
click:function(){$("#clickspan").text("单击事件测试")}
});
});
*/
//当元素获得焦点时,触发focus事件
/*
$(document).ready(function(){
$("#focustext").focus(function(){
$("#focusspan").text("获取到focus事件").css({"color":"red","font-size":"12px"});
});
});
*/
//无法输入文本框
/*
$(document).ready(function(){
$("#focustext").focus(function(){
this.blur();
});
});
*/
//当键盘或按钮被按下时,发生keydown事件
/*
$(window).keydown(function(event){
switch(event.keyCode){
case 65:
$("#keydowndiv").html("<h1>你点击了A键盘</h1>");
break;
case 66:
$("#keydowndiv").html("<h1>你点击了B键盘</h1>");
break;
case 67:
$("#keydowndiv").html("<h1>你点击了C键盘</h1>");
break;
case 68:
$("#keydowndiv").html("<h1>你点击了D键盘</h1>");
break;
case 69:
$("#keydowndiv").html("<h1>你点击了E键盘</h1>");
break;
case 70:
$("#keydowndiv").html("<h1>你点击了F键盘</h1>");
break;
case 71:
$("#keydowndiv").html("<h1>你点击了G键盘</h1>");
break;
case 72:
$("#keydowndiv").html("<h1>你点击了H键盘</h1>");
break;
case 73:
$("#keydowndiv").html("<h1>你点击了I键盘</h1>");
break;
case 74:
$("#keydowndiv").html("<h1>你点击了J键盘</h1>");
break;
case 75:
$("#keydowndiv").html("<h1>你点击了K键盘</h1>");
break;
case 76:
$("#keydowndiv").html("<h1>你点击了N键盘</h1>");
break;
case 77:
$("#keydowndiv").html("<h1>你点击了M键盘</h1>");
break;
}
});
*/
//当按钮被松开时,发生keyup事件,只有一次加载
/*
$(document).ready(function(){
$("#keyuptext").one(
"keyup",function(){
$("body").append("<span>keyup按钮事件</span>");
}
);
});
*/
//当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件
/*
$(document).ready(function(){
var mousedowntestvalue = $("#mousedowntest").text();
$("#mousedowntest").mousedown(function(){
$("#mousespan").text("你得到的文本值为:"+mousedowntestvalue);
});
});
*/
//当鼠标指针穿过元素时,会产生mouseenter事件
/*
$(document).ready(function(){
$("#mouseenter").mouseenter(function(){
$("#mouseenter").css({"font-size":"12px","color":"red"});
});
});
*/
//鼠标离开和穿过元素产生的mouseleave 和 mouseenter 事件
/*
$(document).ready(function(){
$("#mouse").bind({
mouseenter:function(){$("#mouse").css({"font-size":"12px","color":"red"})},
mouseleave:function(){$("#mouse").css({"font-size":"16px","color":"blue"})}
});
});
*/
//当鼠标指针离开元素时,会发生mouseleave事件。
/*
$(document).ready(function(){
$("#mouse").mouseleave(function(){
$("#mouse").css({"font-size":"12px","color":"blue"});
});
$("#mouse").mouseenter(function(){
$("#mouse").css({"font-size":"16px","color":"red"});
})
});
*/
//当鼠标指针在指定的元素中移动时,会发生mousemove事件
/*
$("document").ready(function(){
$("#mousemovetest").mousemove(function(){
$("body").append("<span>mousemove事件测试成功</span>")
});
});
*/
//调整页面窗口大小,触发事件
/*
$(window).resize(function(){
alert("stop it");
})
*/
//当用户滚动指定的元素时,会发生srcoll事件
/*
$(document).ready(function(){
$("#divscroll").scroll(function(){
alert("这是一个滚动项目");
});
});
*/
//显示隐藏的匹配元素
/*
$(document).ready(function(){
$("#showdiv").show(4000,function(){
$("#showdiv").css({"width":"200px","height":"200px","background-color":"orange"});
});
});
*/
//以滑动方式显示隐藏的<p>元素
/*
$(document).ready(function(){
$("#buttonslideup").click(function(){
$("p").slideUp();
});
$("#buttonslidedown").click(function(){
$("p").slideDown();
});
});
*/
//点击事件上下滑动
/*
$(document).ready(function(){
$("#buttonslide").click(function(){
$("p").slideToggle();
});
});
*/
</script>
</head>
<body>
<!--
//is测试实例,body标签
<form action="#" method="post">
<input type="text" id="text1"/>
<span id="text1span"></span>
</form>
<span id="span2">这是一个测试span</span>
<button id="spanbutton">点击事件</button>
-->
<!--删除信息测试-->
<!--
<p id="nottext1">删除测试1</p>
<p id="nottext2">删除测试2</p>
<p id="nottext3">删除测试3</p>
<span id="notspan"></span>
<button id="nottestbutton">not测试</button>
-->
<!--悬停事件表格显示-->
<!--
<table>
<tr>
<td>悬停事件:</td>
<td>
<input type="text" id="hovertext"></input>
</td>
</tr>
<tr>
<td>悬停事件2:</td>
<td>
<input type="text" id="hovertext2"></input>
</td>
</tr>
</table>
-->
<!--这是一个显示悬停div-->
<!--
<p id="hoverP">hover弹出DIV</p>
<div id="hoverDiv" style="display:none">
<p>这是一个hover测试数据div</p>
</div>
<button id="hoverbutton">悬停事件测试按钮</button>
-->
<!--当元素失去焦点时触发事件-->
<!--
<span id="blurspan">
<input type="text" id="blurtext" name="username" />焦点事件
</span>
<span id="blurspan2"></span>
-->
<!--元素的值发生改变,触发change事件---->
<!--
<table border="2">
<tr>
<td>用户姓名:</td>
<td>
<input type="text" id="usernamechange"/>
<span id="userspan"></span>
</td>
</tr>
<tr>
<td>用户密码:</td>
<td>
<input type="password" id="userpasswordchange" />
<span id="passwordspan"></span>
</td>
</tr>
</table>
-->
<!--当双击元素时,会发生dbclick事件-->
<!--
<p>
<span id="clicktest">点击事件触发</span>
</p>
<p>
<span id="clickspan"></span>
</p>
-->
<!--当元素获得焦点时,触发focus事件-->
<!--
<p>
<input type="text" id="focustext">获得焦点事件
<span id="focusspan"></span>
</p>
-->
<!--当键盘或按钮被按下时,发生keydown事件-->
<!--
<div id="keydowndiv">
-->
<!--当按钮被松开时,发生keyup事件,只有一次加载-->
<!--
<p>
按钮松开:<input type="text" id="keyuptext"/>
</p>
-->
<!--当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件-->
<!--
<p id="mousedowntest">鼠标按下事件</p>
<span id="mousespan"></span>
-->
<!--当鼠标指针穿过元素时,会产生mouseenter事件-->
<!--
<p id="mouseenter">mouseenter值得改变</p>
-->
<!--鼠标离开和穿过元素产生的mouseleave 和 mouseenter 事件-->
<!--
<p id="mouse">这是一个鼠标测试实例</p>
-->
<!--当鼠标指针在指定的元素中移动时,会发生mousemove事件-->
<!--
<span id="mousemovetest">这这是一个鼠标移动事件</span>
-->
<!--这是一个滚动测试内容-->
<!--
<div id="divscroll" style="width:200px;height:200px;background-color:gray;overflow:scroll">
<p>这是一个滚动内容</p>
<p>这是一个滚动内容</p>
<p>这是一个滚动内容</p>
<p>这是一个滚动内容</p>
<p>这是一个滚动内容</p>
<p>这是一个滚动内容</p>
<p>这是一个滚动内容</p>
<p>这是一个滚动内容</p>
<p>这是一个滚动内容</p>
</div>
-->
<!--显示隐藏的匹配元素-->
<!--
<div id="showdiv" style="display:none">显示隐藏的匹配元素</div>
-->
<!--以滑动方式显示隐藏的<p>元素-->
<p>滑动测试1</p>
<p>滑动测试2</p>
<p>滑动测试3</p>
<p>滑动测试4</p>
<!--
<button id="buttonslideup">隐藏</button>
<button id="buttonslidedown">显示</button>
-->
<!--上下滑落测试-->
<!--
<button id="buttonslide">上下滑落</button>
-->
</body>
</html>