关于jQuery的介绍各位请google。一直在看大家写的博客,想自己写点原创,第一次写写得不好还请指教。最后会写个小游戏吧。:)
1.ready简写:
Js代码
$(document).ready(function(){});
相当于
Js代码
function load(){}
Html代码
<body onload="load()">
当然。我们也可以这样写:
Js代码
$(function(){});
2.关于$
这个只是简化document.getElementById()的工作。
比如我们要取到页面的DOM对象。就可以这样
Js代码
$('#test');
而html的代码为<div id='test'></div>
3.一个简单的demo。
单击左移右移可以使方块左右移动。
Js代码
<style>
body{margin:0 auto;text-align:center;}
/*position必须是absolute--绝对定位*/
.block{background:red;width:80px;height:80px;position:absolute;top:200px;left:600px;}
</style>
<script type="text/javascript" src="js/jquery142min.js"></script>
<script type="text/javascript">
$(function(){
var lbtn = $('#leftBtn');
var rbtn = $('#rightBtn');
var block = $('#block');
lbtn.click(function(){
/*offset()是获取该元素在网页的真实位置有top和left俩个属性*/
var left = block.offset().left-20;
/*这一句是设置css属性*/
block.css('left',left+'px');
});
rbtn.click(function(){
var left = block.offset().left+20;
block.css('left',left+'px');
});
});
</script>
</head>
<body>
<input type='button' id='leftBtn' value='左移'>
<input type='button' id='rightBtn' value='右移'>
<div id='block' class='block'></div>
</body>
4.通过上述的例子,我们可以很简单的控制到页面元素的css属性。下面是通过键盘控制block移动
Js代码
<html>
<head>
<title>jqueryDemo</title>
<style>
body{margin:0 auto;text-align:center;}
/**position必须是absolute--绝对定位*/
.block{background:red;width:80px;height:80px;position:absolute;top:200px;left:600px;}
</style>
<script type="text/javascript" src="js/jquery142min.js"></script>
<script type="text/javascript">
$(function(){
var block = $('#block');
$(this).keydown(function(event){
switch(event.keyCode){
/*如果是A键则往左,D键往右,S是往下移动,W是往上移动*/
case 65:block.action("left").leftRun();break;
case 68:block.action("right").leftRun();break;
case 87:block.action("up").slideRun();break;
case 83:block.action("down").slideRun();break;
}
});
});
$.fn.action = function(flag){
var dom = this;
var left = dom.offset().left;
var top = dom.offset().top;
if(typeof flag === 'string'){
left = flag == 'right'? left += 20flag == 'left'? left -= 20:left);
top = flag == 'up'? top -= 20 : (flag == 'down' ? top += 20 : left);
}
return {
leftRun :function(){dom.css('left',left+'px');}
/*这不要忘了有个,号*/
,slideRun:function(){dom.css('top',top+'px');}
};
}
</script>
</head>
<body>
<div id='block' class='block'></div>
</body>
</html>
这样就简单的实现了通过键盘操作方块。下一步我们可以加一些更加复杂的操作。
分享到:
相关推荐
适合jquery 初学者想学好又不懂的人们
简单的jquery Grid 表格,对数据的排序,查询的操作
jQuery一些入门代码demo
jquery 教程 实例 demo 全部demo 从入门到精通 完整示例下载
最近项目要用Jquery ,研究了下JQUERY,做了个JQUERY AJAX 结合JSON的DEMO ,对入门的朋友有帮助
一个很不错的关于jQuery EasyUI入门学习的Demo。涉及界面的布局排版、数据的动态加载、窗口的自适应等方面。特别地,该实例通过对界面模块的合理划分、js脚本的动态引用以及css样式的渲染等操作完成。注:例子中,所...
Ajax 入门demo JavaScript 原生Ajax demo Jquery ajax demo
对公司的新员工进行jQuery培训制作的ppt课件,其中包含示例demo。 入门的教程,大家也可以参考http://www.k99k.com/jQuery_getting_started.html
JQuery基础PPT(含demo) demo包括ppt中的大部分例子 不可多得的入门教学
jquery mobile 简明 教程 demo 移动 开发 精通 入门 jquery mobile 开发 移动 开发 安卓 手机 开发
jQuery.ppt,有部分demo,入门提高的好资料
主要介绍了jQuery简单入门示例之用户校验demo示例,分析了基于jQuery的简单用户校验功能相关实现技巧,需要的朋友可以参考下
直接能运行的代码文件
用jquery做的纵横菜单的小例子,方便刚入门的同学学习。
requireJs入门实例,可以直接运行,运用到了css.min.js、text.js、jquery.tmpl.min.js
由于最近研究jquerymobile框架,深感这块的Demo寥寥可数,自己把学习的笔记记录下来 分享给大家,希望能帮到各位it爱好者!开源精神吾辈当仁不让!
本代码结构清析明了,能让初学者很快就掌握如何在Asp.net用EasyUI组件及ashx来实现系统的增,删,改,查
资源简介:SSM Java 项目集合 一、概述 在这个平台上,我们为大家带来了一系列的 JavaSSM(Spring + SpringMVC + MyBatis)项目。这些项目旨在展示SSM框架在实际应用中的魅力,同时也为开发者提供了一个快速学习和...