- 浏览: 602748 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (448)
- 字符串相关 (16)
- Struts2页面显示 (15)
- Hibernate错误记录 (6)
- linux命令 (2)
- java项目测试 (5)
- 个人作品 (10)
- hibernate应用 (15)
- struts1 (7)
- 数据库(除了hibernate) (42)
- J2ME/WAP (37)
- servlet/jsp (49)
- java桌面应用+java综合 (14)
- 服务器配置,报错解决 (24)
- Myeclipse配置,抛错解决 (8)
- linux (18)
- JavaScript+jquery+ajax (45)
- div css 页面设计 (16)
- 互联网综合运营 (14)
- 编程工具类 (3)
- 论文 报告 文献 (14)
- PHP (26)
- struts2 (9)
- spring (1)
- 我的IT生活 (14)
- Resin (6)
- java项目记录 (14)
- https安全 (11)
- 支付技术 (3)
最新评论
-
yihaijunyxr:
很好呀,我好久没用iteye了,今天找出两个帐号(yihaij ...
c/c++的监听tmlisten启动缓慢解决 -
yihaijun:
好像这不算是技术博客,是工作博客
c/c++的监听tmlisten启动缓慢解决 -
ml365:
后来还优化了webservice的前置框架,不用cxf,用了另 ...
c/c++的监听tmlisten启动缓慢解决 -
Jayliuying:
有点晚哈 但是也支持一下 楼主
java相关论文的参考文献【转】 -
gqsunrise:
...
我是项目经理,我的项目管理日记【20120229】
一,找到你了!
还记得$()这个东西吧?prototype还是DWR都使用了这个函数代替document.getElementById()。没错,jquery也跟风了。为达到document.getElementById()的目的,jquery是这样写的:
看起来比其他两个框架的要多了一个#,好,看看下面的用法:
在prototype里看过这样的写法吗?第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS,Xpath,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
二,Jquery对象?
jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):
三,代替body标签的onload
这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:
上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready(fn)可以在一个页面中重复出现,而不会冲突。基本上Jqeury的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。
不管怎么说,这个惯例可以分离javascript与HTML。推荐使用。
四,事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascript代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。
五,同一函数实现set&get
上面两行代码,调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值,第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。
六,ajax
这是一个ajax横行的时代。多少人,了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常
这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。
3,4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然,jquery的AJAX相关的函数不仅是这些,有兴趣可以去研究再多。
七,渐入淡出
没错,上面两行代码已经分别实现了一个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天教程
还记得$()这个东西吧?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);
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
- }
$(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("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天教程
发表评论
-
解决了json回调函数不执行的问题!
2011-12-11 21:56 1396找了好久 网上的解说千姿百态 不过还是有灵感! 后来发现,是 ... -
解决了myeclipse因为js乱码而使得程序需要这个js的地方运行不了
2011-12-11 16:08 783这是一个城市的三级联机菜单效果,很熟悉了吧 呵呵。项目是我半途 ... -
Ajax使用范例【原创】
2011-02-10 16:30 894以下是一个例子,以后遇到需要Ajax的地方,都可以参考。实现效 ... -
刷新页面时保存radio状态
2010-12-29 16:35 1998嗯。只是留个底,让自己以后需要的话可以用到。 a. 在< ... -
window.location.Reload()和window.location.href=window.location.href【转】
2010-12-12 16:48 1543<a onclick="javascrip ... -
jQuery实例CSS 样式表动态选择【转】
2010-12-12 16:33 1051jQuery实例CSS 样式表动态选择本实例主要说的还是jqu ... -
jQuery框架+cookie选择样式表文件【转】
2010-12-12 16:33 868HTML: DOCTYPE html PUBLIC &q ... -
转】 《15天学会Jqurey》之第七天--样式表切换
2010-12-12 16:32 863转载自 jiangqincong 最终编辑 jiangqi ... -
转】 window.open和window.showModalDialog用法
2010-12-12 16:30 849转载自 liuduohello 最终 ... -
js弹出页面大全[转]
2010-12-12 16:29 923【1、最基本的弹出窗口代码】 其实代码非常简单: &l ... -
点击输入框出现提示语[转]
2010-12-12 16:28 1202这需要和脚本配合,下面是简单示例,当你鼠标点文本框后,出现 ... -
Ajax简单易懂实例教程【原创】
2010-12-12 16:24 994jsp页面如下: <%@ page content ... -
jquery技巧总结【转】
2010-12-12 16:19 658一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的 ... -
js改变iframe的src【原创】
2010-12-12 15:25 1375顺便记下用<a>来调用js方法的写法: &l ... -
setTimeout使用细节【转】
2010-12-12 15:25 1316今天的用的时候,想隔一段时间之后运行一个方法,可是页面会报 ... -
js鼠标滑过新闻标题列表显示对应新闻内容【原创】
2010-12-12 11:00 1073有一个页面,左边是新闻列表标题,鼠标划过相应的标题,在右侧 ... -
js截取select下拉列表框当前选择项的文本【原创】
2010-12-12 10:44 1109var selectObj = document.getEle ... -
jsp删除前弹出js提示【转】
2010-12-12 10:40 1446<script type="text/ja ... -
js实现菜单展开和收缩,兼容多种浏览器【原创】
2010-12-12 10:36 1720菜单从上到下排列,要在上下实现展开和收缩,思路如下: 用 ... -
CSS 中 position:absolute 与 z-index 对层次结构影响[转]
2010-12-12 10:28 1581不使用 position 这种情况下每一层都遵循 HTML 定 ...
相关推荐
JQuery Mobile概述.pdf 学习资料 复习资料 教学资源
使用JQuery实现从JSON对象转换为form提交数据
【Jquery经典特效15】jQuery实现汉字转换成拼音代码
浏览器中实现文本转语音功能,让你得应用瞬间高大上起来
jquery由GET转成POST方法工具类,传入一个URL链接地址,直接把链接地址转换并POST提交。
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jQuery大风车转盘转起来
RIA应用开发:8-jQuery插件概述.ppt
jQuery 3.1 标准课程第一章 jQuery概述jQuery安装
jQuery 3.1 标准课程第一章 jQuery概述jQuery简介
jQuery 3.1 标准课程第一章 jQuery概述jQuery语法
jQuery实现汉字转换成拼音代码是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效。
jQuery概述
jQuery常用知识概述,希望对大家有所帮助
用Jquery写的,仿360旋转的效果 手机应用 三张图片可以旋转替换 转自51cto
jQuery在线语音识别转换是一款专门用于在网页中实现语音识别转换的jQuery插件voicewo。
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
Div滚动条随鼠标滚动Jquery版(转)Div滚动条随鼠标滚动Jquery版(转)
jQuery性能优化(转)jQuery性能优化(转)jQuery性能优化(转)jQuery性能优化(转)jQuery性能优化(转)
jQuery中文转换成拼音代码是一款在输入框输入中文点击确定按钮自动生成拼音,还可以计算出中文汉字对应的唯一编号。