关于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入门Demo详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的喜爱。对于初学者来说，掌握jQuery的基础知识和常见操作是步入Web开发...
**jQuery Grid 框架详解** jQuery Grid 是一个强大的数据展示和管理工具，它基于 jQuery 库，提供了丰富的功能，包括数据的排序、查询、分页等，使得开发者能够快速构建交互式的表格应用。在本篇文章中，我们将深入...
本教程将通过一系列入门级的代码示例，帮助初学者快速掌握jQuery的基本用法。 1. **选择器（Selectors）**：jQuery的选择器类似于CSS，用于选取页面上的HTML元素。例如，`$("#id")`选取ID为"id"的元素，`$(".class...
《jQuery：从入门到精通——实战Demo解析》 在Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本篇将通过介绍jQuery的基础概念、核心功能以及提供的...
一个很不错的关于jQuery EasyUI入门学习的Demo。涉及界面的布局排版、数据的动态加载、窗口的自适应等方面。特别地，该实例通过对界面模块的合理划分、js脚本的动态引用以及css样式的渲染等操作完成。注：例子中，所...
标题中的 "jquery easyui demo 1.24" 提示我们，这是一个关于 jQuery EasyUI 版本 1.2.4 的演示示例，它可以帮助开发者快速理解和应用这个框架。 EasyUI 的核心理念是简化前端开发，通过预定义的 CSS 样式和 ...
在"phoneGap jqueryMobile demo"这个项目中，SmartHome可能是示例应用的名字，可能包含了一系列使用PhoneGap和jQuery Mobile创建的文件，用于展示如何将两者结合使用来开发一个智能家居控制应用。开发者可能使用HTML...
完成这个入门教程后，可以继续深入学习jQuery高级特性，如事件委托、插件开发等。推荐以下资源： - 官方文档：http://api.jquery.com/ - jQuery学习社区：https://learn.jquery.com/ - Stack Overflow：...
**jQuery入门篇** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个入门篇将帮助初学者快速理解jQuery的核心概念和功能，以便在网页开发中更高效地操作DOM...
**jQuery入门与应用详解** jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。本教程将深入浅出地介绍jQuery的基本概念、核心功能及实际应用，帮助初学者快速上手并...
本篇将深入讲解"jQuery插件集之(分页插件)"，适合初学者入门学习。这个插件不仅提供了分页的基本功能，还具有易于理解和配置的特点，以及三种不同的样式供选择。 首先，我们需要了解jQuery插件的基本结构。一个...
在提供的`jQuery`和`jQuery入门篇`文件中，你可以找到这些概念的实际应用和演示，通过实践加深理解。这个资源对于初学者来说是一份宝贵的教材，帮助你快速掌握jQuery的基础知识，并开启Web开发的新篇章。
**requireJsDemo入门Demo**是基于JavaScript模块化加载器RequireJS的一个示例项目，它旨在帮助初学者理解和应用RequireJS。RequireJS是一个优秀的前端库，主要用于解决JavaScript代码的异步加载和模块化管理问题，...
**jQuery Mobile 简明教程：移动开发入门指南** jQuery Mobile 是一个强大的前端框架，专为构建触屏设备上的响应式、交互式的移动应用程序而设计。这个教程将带你深入理解如何使用 jQuery Mobile 进行移动应用开发...
jQuery.ppt,有部分demo，入门提高的好资料
本篇将深入解析“jQuery第一个Demo”，帮助初学者快速入门jQuery的基本用法。 首先，我们来看标题：“jQuery第一个demo”。这通常指的是一个简单的示例，用于展示如何在网页中引入jQuery库并执行基本操作。在这个...
### jQuery入门教程知识点详解 #### 一、jQuery简介与优势 **jQuery** 是一款轻量级的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。jQuery 的核心理念是“写得少，做得多...
标题 "jquery demo" 提到的是一个使用 jQuery 技术实现的示例，这通常涉及到网页交互和动态...同时，`webos`和`jQuery-Desktop.rar`中的代码和资源可以作为构建类似应用的基础，帮助开发者快速入门并进行自定义开发。