`
rickycm
  • 浏览: 69945 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery简单体验

    博客分类:
  • Ajax
阅读更多
Jquery是继prototype之后又一个优秀的Javascript框架。对prototype我使用不多,简单了解过。但使用上jquery之后,马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery:prototype就像Java,而jquery就像ruby.实际上我比较喜欢java(少接触Ruby罢了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自已唯一的框架类包。使用其间也有一点点心得,其实这些心得,在 jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。
一,找到你了!
还记得$()这个东西吧?prototype还是DWR都使用了这个函数代替document.getElementById()。没错,jquery也跟风了。为达到document.getElementById()的目的,jquery是这样写的:

var someElement = $("#myId");



看起来比其他两个框架的要多了一个#,好,看看下面的用法:


$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)



在prototype里看过这样的写法吗?第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS,Xpath,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
二,Jquery对象?
jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):
var a = $("#cid");(1)
var b = $("<p>hello</p>");(2)
var c = document.createElement("table"); var tb = $(c);



三,代替body标签的onload
这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:

$(document).ready(function(){
  alert("hello");
});(1)

<body onload="alert('hello');">(2)




上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready(fn)可以在一个页面中重复出现,而不会冲突。基本上Jqeury的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。
不管怎么说,这个惯例可以分离javascript与HTML。推荐使用。
四,事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascript代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。
$(document).ready(function(){
  $("#clear").click(function(){
     alert("i am about to clear the table");  
   });
  $("form[0]").submit(validate);
});
function validate(){
  //do some form validation
}


五,同一函数实现set&get
$("#msg").html();
$("#msg").html("hello");



上面两行代码,调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值,第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。
六,ajax
这是一个ajax横行的时代。多少人,了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常
$.get("search.do",{id:1},rend);
function rend(xml){
	alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
	alert(xml);
} (2)

$("#msg").ajaxStart(function(){
   this.html("正在加载。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
   this.html("加载完成!");
});(4)



这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。
3,4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然,jquery的AJAX相关的函数不仅是这些,有兴趣可以去研究再多。
七,渐入淡出
	$("#msg").fadeIn("fast");
	$("#msg").fadeOut("slow");



没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。
八,plugin
这也是一个插件的时代。
jquery插件给我的感觉清一色的清洁,简单。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件。

写得很烂。可能大家看不出jquery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。


加一些Jquery的资源:
http://www.visualjquery.com/index.xml 很好的API查询站点
http://jquery.com/demo/thickbox/ 知道lightBox吧,看看Jquery是怎样实现相同的东西
http://www.codylindley.com/blogstuff/js/jtip/ Jtip,实用的提示工具
http://jquery.com/plugins/ 很多牛的插件。
http://15daysofjquery.com/  jquery 的15天教程
分享到:
评论

相关推荐

    jQuery简单应用实例

    ### jQuery简单应用实例详解 #### 一、理解jQuery与传统JavaScript的区别 在现代网页开发中,jQuery作为一种轻量级的JavaScript库,极大地简化了HTML文档遍历、事件处理、动画等操作,使得开发者能够更加专注于...

    jquery使用手册与技巧

    最后,`jquery简单体验.txt`很可能是包含一些实战示例,比如使用jQuery实现图片轮播、下拉菜单、表单验证等常见交互效果,以帮助读者将理论知识应用到实际项目中。 总的来说,这些资料将帮助读者深入理解jQuery的...

    基于jQuery简单可自定义响应式手机电脑端瀑布流

    【基于jQuery简单可自定义响应式手机电脑端瀑布流】是一种流行的技术实现方式,用于创建在不同设备上都能良好展示的动态布局。这种布局模式,通常称为“瀑布流”或“Masonry布局”,以视觉上的瀑布效果而得名,即...

    Jquery简单的弹出层带遮罩插件

    本插件是关于“Jquery简单的弹出层带遮罩”的实现,它能够为网页提供一种优雅的方式来显示弹出窗口或对话框,并且在弹出窗口周围添加一个半透明的遮罩层,增强用户体验。 1. **jQuery基础** jQuery的核心在于它的...

    一个简单的jquery分页

    本教程将围绕"一个简单的jQuery分页"进行讲解。 **jQuery分页的基本原理** jQuery分页的实现主要是通过AJAX技术,将页面内容按需加载。用户点击分页按钮时,会发送请求到服务器,服务器返回对应页码的数据,然后...

    jQuery简单的网页贪吃蛇小游戏代码

    【jQuery简单的网页贪吃蛇小游戏代码】是一款基于jQuery开发的互动娱乐项目,它利用JavaScript语言和HTML5技术,为用户提供了在网页上玩经典贪吃蛇游戏的体验。这款小游戏展示了jQuery库在处理DOM操作、事件绑定以及...

    简单的JQuery订餐系统

    【标题】"简单的JQuery订餐系统"是一个基于JavaScript库JQuery实现的简易订餐应用程序。这个项目旨在帮助用户理解如何运用JQuery来构建交互性强、用户体验良好的前端应用。通过这个系统,我们可以学习到JQuery在网页...

    简单的jQuery富文本编辑器插件

    这款基于jQuery的简单富文本编辑器插件,结合了CSS3技术,提供了基础但实用的编辑选项,适用于快速构建具有文本编辑功能的网页界面。 首先,jQuery是一个广泛使用的JavaScript库,它的出现极大地简化了JavaScript的...

    简单的jQuery图片相册插件.zip

    "简单的jQuery图片相册插件"就是这样一个工具,特别适合应用于企业网站或商城网站的首页,作为轮播图来呈现产品信息或公司动态。下面将详细探讨jQuery图片相册插件的实现原理、核心功能以及如何在项目中应用。 ### ...

    jquery简单右下角弹出窗

    "jquery简单右下角弹出窗"是一个利用jQuery实现的常见用户交互功能,用于在页面的右下角显示提示信息或通知。这种效果通常用于向用户展示重要的消息、广告或者引导用户进行某些操作。 首先,我们来理解jQuery库的...

    jQuery简单拖拽层

    "jQuery简单拖拽层"是一个功能,允许用户通过鼠标操作将页面上的元素(如div、图像等)拖动到不同的位置,增强用户交互体验。这个功能在创建可自定义布局、设置窗口位置或构建拖放式界面时非常有用。 实现jQuery...

    简单jQuery加载等待转圈页面插件

    在网页开发中,用户体验至关重要,尤其是...总的来说,"简单jQuery加载等待转圈页面插件"是提升网页加载体验的实用工具,它通过jQuery的便利性和强大的DOM操作能力,为开发者提供了快速集成和定制加载提示的解决方案。

    jQuery简单文字瀑布流排版代码.zip

    本篇文章将深入探讨如何使用jQuery库来实现一个简单的文字瀑布流排版效果,基于提供的"jQuery简单文字瀑布流排版代码.zip",我们将分析其核心原理及代码实现。 首先,我们需要了解jQuery的基本用法。jQuery是...

    非常简单的Jquery 树

    本文将深入探讨"非常简单的JQuery树"这一主题,特别关注如何利用JQuery来创建支持关系数据源装载的树形结构。 首先,"JQuery树"是指利用JQuery库来实现的一种可视化组件,它通常以层级结构展示数据,可以用于展现...

    jQuery交互体验社会化分享代码.zip

    这些方法使得动态修改页面内容变得简单,从而提升交互体验。 2. 事件处理:jQuery简化了事件绑定,如`$("button").click(function() {...})`用于监听按钮的点击事件。通过事件处理,可以实现用户交互时的响应式动态...

    jquery实现简单图片的拖动

    "jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能,这是一个常见的交互设计,使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中,实现图片拖动主要涉及到`...

    CSS+jQuery简单实现select下拉框.zip

    本项目"CSS+jQuery简单实现select下拉框"旨在提供一种方法,利用CSS和jQuery来美化并增强select下拉框的功能,同时保持良好的浏览器兼容性。 首先,我们关注CSS部分。CSS(层叠样式表)是网页设计中用于控制布局和...

    jQuery简单动态的响应式垂直时间轴代码

    jQuery作为一个广泛使用的JavaScript库,提供了丰富的功能和便捷的API,使得创建动态、响应式的时间轴变得更为简单。本文将深入探讨如何使用jQuery实现一个简单动态的响应式垂直时间轴。 首先,我们需要理解响应式...

    1. JQuery初体验--helloWorld

    JQuery初体验--helloWorld”主题将引导你入门JQuery,通过一个简单的“Hello World”示例来展示其基本用法。 在JavaScript中,操作DOM(Document Object Model)通常是繁琐的,而JQuery提供了一种简洁的API来处理...

    php和jquery简单登录验证

    本篇文章将详细探讨如何利用PHP和jQuery实现一个简单的登录验证系统。 首先,PHP(Hypertext Preprocessor)是一种服务器端脚本语言,用于开发动态网站和应用程序。在登录验证场景中,PHP主要负责处理用户提交的...

Global site tag (gtag.js) - Google Analytics