<!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>
分享到：
相关推荐
js调用百度翻译api实例代码 jquery插件 jquery特效处理
一款输入搜索路径，右键拖拽放大，左键点击测量路径的jQuery高德地图api开发实例代码。
jQueryEasyUI应用实例代码以及api
jQueryEasyUI1.3.6应用实例代码以及api压缩包
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
jQuery API 1.2，代码实例，教程，参考
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组...
jQuery采用高德地图api开发实例是一款输入搜索路径，右键拖拽放大，左键点击测量路径。
jquery-easyui-1.3.4完全的源代码 、API说明、DEMO实例，学习jquery-easyui-1.3.4必备参考资料
几个jQuery的API方法使用的详细例子。 配套博客中讲解的代码。
jQuery MiniUI 实例下载 js web框架,简单易懂 实例 代码 API 等
jQuery帮助文档和它的api资料，例子的代码
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
包括jQuery zTree v2.5的js源码jquery-ztree-2.5.js，API文档zTreeAPI v2.5.chm和zTreeAPI v2.5.pdf 以及示例demo
jquery仿外卖点餐购物车页面代码 jQuery仿微信支付密码输入框（修改版） jQuery分步步骤 jQuery各种验证码 jQuery购物车功能 jQuery基于百度地图API的地址输入插件 jQuery基于百度地图api做成的地区 jQuery简单JS...
jQuery EasyUI Api 教程 代码+实例+讲解+每个API实现步骤
Java圆形按钮实例代码，含注释 两个目标文件，自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟，效果图如下所示，其实代码很简单，希望对你有...
这个pdf中前半部分是中文的教程，后半部分是英文的api。中文的教程不错，实例配合代码来看。
jquery后台管理插件，一款很优秀的插件。有实例和api，还有连接数据库的代码...
代码如下:语法:$(function(){ var callback = function(r){ //r表示后台数据返回的数据. } $.get(“”,callback); //引号里面写方法的路径});这样就可以得到后台方法得到的数据显示在html前端了. 以下是工作中...