BlogJava-普通人的奇迹-随笔分类-jquery(进去而已)

jquery的ajax相关笔记

leekiang — Tue, 27 May 2008 14:48:00 GMT

leekiang 2008-05-27 22:48 发表评论

jquery插件开发

leekiang — Thu, 08 May 2008 05:19:00 GMT

1，jquery插件开发模式
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
There are a few requirements that I feel this pattern handles nicely:
1、Claim only a single name in the jQuery namespace
2、Accept an options argument to control plugin behavior
3、Provide public access to default plugin settings
4、Provide public access to secondary functions (as applicable)
5、Keep private functions private
6、Support the Metadata Plugin
7,无论何时候，当你的代码出现each时，你应该重写代码来构造一个插件

leekiang 2008-05-08 13:19 发表评论

很有用的jquery插件

leekiang — Wed, 07 May 2008 06:36:00 GMT

1,bgiframe
http://plugins.jquery.com/project/bgiframe
suggested patch for div on top of flash frame problem in IE7
2,dimensions
http://plugins.jquery.com/project/dimensions
http://brandonaaron.net/docs/dimensions/
3,suggest
http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/
4,hotkey
$.hotkeys.add('Ctrl+c', function(){ alert('copy anyone?');});
$.hotkeys.remove('Ctrl+c');
http://code.google.com/p/js-hotkeys/
http://plugins.jquery.com/project/clickOrEnter
5,validate
http://jquery.bassistance.de/validate/demo/
猫冬的表单验证插件
http://www.cnblogs.com/wzmaodong
http://www.yhuan.com/formvalidator/userguide.html
6,png fix插件
解决png在IE5,6下的显示问题
使用:$("#testdiv").pngFix();
http://plugins.jquery.com/project/pngFix
http://jquery.andreaseberhard.de/pngFix/
7,Accordion
应该是使用最多的jquery accordian.回复比较多
http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
http://groups.google.com/group/jquery-ui/topics 作者要求回复到这里
8,hoverIntent
能根据鼠标的移出移入速度和是否停留进行相应的处理
http://cherne.net/brian/resources/jquery.hoverIntent.html
9,slide幻灯效果
http://www.malsup.com/jquery/cycle/
10,tooltip
http://jquery.bassistance.de/tooltip/demo/
11,ajax Queue
好像是支持按照发出请求的顺序来依次执行回调函数(不处理的话快速发出大量请求时响应会乱)。
某人的评论:
The uses of this plugin are pretty obscure to most people. This plugin helps you deal with situations where a javascript function is completing before you intend for it, and allowing other functions to execute, while a crucial function somewhere is still processing. Some know what I’m talking about… this plugin was absolutely crucial for our ajax comments. God bless the authors.
http://plugins.jquery.com/project/ajaxqueue
12,corner
$(this).corner("round");
http://www.methvin.com/jquery/jq-corner-demo.html
13,truncate 截断字符串
http://www.cssrain.cn/demo/truncate-2.2/index.html
14,contextmenu
http://www.trendskitchens.co.nz/jquery/contextmenu/
15,progress bar
http://digitalbush.com/projects/progress-bar-plugin
http://www.jb51.net/article/13993.htm简单
16,multiple-file-upload
http://www.fyneworks.com/jquery/multiple-file-upload/
17，easydrag
http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/
简洁的拖动功能实现。比 interface 插件的简单很多，对拖动有很高要求的可以参考这个插件来定制。http://space.cnblogs.com/RChen/木野狐对此插件稍有修改，在两篇帖子里有介绍（扩展了 jquery 的插件 easy drag , 漂浮窗口拖动杂谈（续））

50多个强大的jQuery插件应用实例

45个新鲜出炉的jQuery插件

37个更加出色的jQuery插件

leekiang 2008-05-07 14:36 发表评论

jquery自动完成

leekiang — Wed, 07 May 2008 06:16:00 GMT

以下写得很零碎，纯粹是备忘
1,
(1)如果用keydown,用中文输入法时在输入框里输汉语拼音的字母就会有感知,故只能用keyup
(2)后退问题.
       如何区分是在中文输入法的输入框里的后退，还是自动完成录入框里的后退，二者的处理是不一样的。
(3)确认键
       光标在form里时，按确认键浏览器会自动提交。而我想要的是一按确认键，自动录入选中的那一项。
如何在按确认键时不让form截获这个事件。要做成通用的，而不是在每一个form里写死。
   (4)调试时慎用alert
      alert然后确定时会自动执行blur,会影响的原来程序的执行次序


2,插件
(1)http://code.google.com/p/jqac/ 不错
(2)http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete 很好很强大
(3)http://www.dyve.net/jquery/?autocomplete 有遮盖select box功能
(4)http://docs.jquery.com/Plugins/AutoComplete
(5)http://mabp.kiev.ua/content/2008/04/08/autocomplete_by_your_own_hands
(6)http://www.pengoworks.com/workshop/jquery/autocomplete.htm
(7)http://huacn.blogbus.com/logs/19643985.html

leekiang 2008-05-07 14:16 发表评论

jquery笔记

leekiang — Mon, 28 Apr 2008 07:58:00 GMT

1,js的事件函数. click(); click(fn);
分两种，一种是绑定事件，带参，形如eventName(fn);
一种是触发事件,不带参,形如eventName(),客户触发或者程序模拟触发。
触发时包括了浏览器的默认行为。
但可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
在eventName(fn)的函数体内，this 指代的是DOM对象而非jQuery对象.可用$(this)得到jquery对象

2,each(fn);
返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

3,attr("checked", true)和attr("checked", '')是同样的效果,但attr("checked", 'true')不行

5,属性选择器
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute!=value] 匹配给定的属性是不包含某个特定值的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。
例如$("input[id][name$='man']")

6,$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

7,$('input').one("click", function(){
            alert($(this).val());
        });
此事件执行一次即被删除

8,$("form input") 匹配所有的后代元素(子子孙孙)
$("form > input")匹配所有的子元素(只有儿子)
$("div,span,p.myClass")将每一个选择器匹配到的元素合并后一起返回

9,disabled的用法
以下两种写法没有区别,都表示不可用:
$("#btn").attr('disabled','false')和$("#btn").attr('disabled','true')
可用的话要用:
$("#btn").removeAttr('disabled');或$("#btn").attr('disabled', false);//注意无引号

10,mouseout的处理
http://tangb4c.yo2.cn/archives/632854
http://www.zhangjingwei.com/show-93-1.html
http://bbs.51js.com/thread-70665-1-1.html

11，jquery处理表格
http://blog.blueshop.com.tw/jeff377/archive/2008/02/01/54237.aspx
http://15daysofjquery.com/examples/zebra/

12,jquery的布局管理器layoutManager

jquery相关插件或项目
(1)图表flot (http://code.google.com/p/flot/)
       jqchart  http://www.reach1to1.com/sandbox/jquery/jqchart/
     画图drawing     http://www.openstudio.fr/Library-for-simple-drawing-with.html

leekiang 2008-04-28 15:58 发表评论

jquery模态窗口

leekiang — Fri, 28 Mar 2008 08:02:00 GMT

http://www.malsup.com/jquery/block/#displaybox
http://dev.iceburg.net/jquery/jqModal/

http://bbs.blueidea.com/viewthread.php?tid=2844333&extra=&page=1

扩展了 jquery 的插件 easy drag

用 jQuery 的 AJAX 功能发现的一个错误/注意点：HTTP Error 411

漂浮窗口拖动杂谈（续）

http://trentrichardson.com/Impromptu/index.php

http://www.aspstat.com/jbox/demo.htm
http://www.cnblogs.com/huacn/archive/2007/09/03/jquery_jwindow_js.html 李华顺

百度空间的popup效果分析

leekiang 2008-03-28 16:02 发表评论

jQuery与Ajax(转)

leekiang — Thu, 06 Mar 2008 18:31:00 GMT

在我所知道的主流JavaScript库中，jQuery拥有最棒的Ajax API。最简单的Ajax调用如：

				jQuery('div#intro').load('/some/fragment.html');

代码以GET请求方式，从/some/fragment.html文件中获取HTML片段，并把片段装载到id="intro"的div中。

当我第一次看到这行代码时，几乎对它没什么印象。这看起来非常简洁，但如果你想用jQuery做些更复杂的事情，比如显示Ajax装载进度，该如何做呢？ jQuery为你准备了一些可自定义的事件（ajaxStart，ajaxComplete，ajaxError等等），来实现你想要的代码。同时 jQuery也提供了广泛的底层API，来实现更复杂的Ajax交互：

				jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) {
    alert('The server said: ' + data);
}); // 以GET方式通过/some/script.php?name=Simon获取数据

jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) {
    alert('The server said: ' + data);
}); // 以POST方式向/some/script.php发送请求

jQuery.getJSON('/some.json', function(json) {
    alert('JSON rocks: ' + json.foo + ' ' + json.bar);
}); // 从/some.json接收并解析数据，把数据转换成JSON格式

jQuery.getScript('/script.js'); // 以GET方式获取/script.js脚本并用eval()执行

http://www.nixsky.com/program/java/2008-02/393.html

选取元素:

jQuery('div.panel'): 选取了所有class="panel"的div
jQuery('p#intro'): 选取了所有id="intro"的段落
jQuery('div#content a:visible'): 选取了id="content"的div中所有可见的链接
jQuery('input[@name=email]'): 选取了所有name="email"的输入域
jQuery('table.orders tr:odd'): 选取了类名为“orders”的表中所有的奇数行
jQuery('a[@href^="http://"]'): 选取了所有（以http://开头的）外部链接
jQuery('p[a]'): 选取了所有包含一个或多个链接的段落

上述例子中，:visible和:odd是jQuery实现的扩展,很具特色。而属性的选取使用@作为标记，

其方式和XPath一样，要优于CSS2。

jQuery的这套选取语法包罗万象，有些类似正则表达式，想完全消化是需要花上一段时间的。

$(window.frames["innerIframe"].document).find("a[rel='external']").addClass("external")
.click(function(){window.open(this.href);return false;});});

在父窗口中操作选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

在IFRAME中操作选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

取消全选
$("input[@type=checkbox][@checked]").each(function(){
$(this).attr("checked", '');
});

如果选中的只有一个，取得选中的值
$("input[@type=checkbox][@checked]").eq(0).val()

leekiang 2008-03-07 02:31 发表评论

jquery函数

leekiang — Fri, 15 Feb 2008 23:11:00 GMT

1,after(html) after(elem) after(elems)
将指定的元素插入到某元素后。
before(html) before(elem) before(elems)与之相反

2,append(html) append(elem) append(elems)
将指定的元素插入到某元素内部的末尾位置
appendTo与之相反,但似乎只能使用appendTo(elem)

3,prepend (html) prepend (elem) prepend (elems)
将指定的元素插入到某元素内部的开始位置，注意与append的区别

4,wrap(htm)
将匹配对象包含在给出的html代码内

5,next

点这里测试1？: 1111111111111111
点这里测试2?: 2222222222222222

http://tzangms.com/blog/programming/984

http://www.blogjava.net/wangxinsh55/archive/2007/06/25/126166.html

6,深度，递归式的 .extend()
新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。
    // 以前的 .extend()
   jQuery.extend(
     { name: “John”, location: { city: “Boston” } },
     { last: “Resig”, location: { state: “MA” } }
   );
    // 结果:
    // => { name: “John”, last: “Resig”, location: { state: “MA” } }
// 新的更深入的 .extend()
   jQuery.extend( true,
   { name: “John”, location: { city: “Boston” } },
     { last: “Resig”, location: { state: “MA” } }
);
// 结果
   // => { name: “John”, last: “Resig”,
//      location: { city: “Boston”, state: “MA” } }

7,1.2.3版本和1.2.1版本的remove方法的区别
1.2.1版本

remove: function(a){

if ( !a || jQuery.filter( a, [this] ).r.length ) {

jQuery.removeData( this );

this.parentNode.removeChild( this );

}

1.2.3版本
remove: function( selector ) {
  if ( !selector || jQuery.filter( selector, [ this ] ).r.length ) {
   // Prevent memory leaks
   jQuery( "*", this ).add(this).each(function(){
    jQuery.event.remove(this);
    jQuery.removeData(this);
   });
   if (this.parentNode)
    this.parentNode.removeChild( this );
  }
}
见http://www.blog.edu.cn/user2/50271/archives/2007/1963499.shtml
http://pyrolupus.com/demo/jqremovebug.php
http://dev.jquery.com/changeset/3790

8, extend()使用详解(不考虑深度的extend)

$.extend(target, prop1, propN)
用一个或多个其他对象来扩展一个对象(即第一个参数)，返回这个最初的、并且被修改过的对象。这是简单的实现继承的一大方法.

target (Object): 要扩展的对象
prop1 (Object): 要与第一个对象合并的对象
propN (Object): (可选) 更多要与第一个对象合并的对象

合并defaults和options, 但不修改defaults，返回合并后的对象
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend({}, defaults, options);
结果 :settings == { validate: true, limit: 5, name: "bar" },defaults没有被修改

leekiang 2008-02-16 07:11 发表评论

jquery笔记

leekiang — Fri, 15 Feb 2008 21:33:00 GMT

1,JQuery对象和DOM对象如何转换
JQuery对象才能使用JQuery定义的方法；DOM对象才能使用DOM对象的方法；二者不可以混淆。
DOM对象通过$操作则可以转成JQuery对象。例如:
$(document.getElementById("msg"))
JQuery对象转成DOM对象则较复杂一些。由于JQuery对象本身也是集合，所以必须通过索引的方式来转成DOM对象。例如：
$("#msg")[0]
$("div").eq(1)[0]
$("div").get(0)
$("td")[5]

2,JQuery的get方法和eq方法的区别
eq返回的是jquery对象；
get(n)和索引返回的是dom元素对象。
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom方法

3,在事件处理程序中如何得到事件的发出者
在事件处理程序中可以申明一个event对象的方式来抓取事件的发出者。

$(document).ready(function(){
       $("a.week").click(function(event){
          var uri = "cWtc.do?";
          var params = "action=blankWtc&wd=" + $(event.target).text();
          window.location.href=uri + params;
       });
});

4，JavaScript只拥有单一的、全局的名称空间（即window对象），而很多程序员（以及一些库）恣意地为之添加各种东西。
要知道全局变量是魔鬼！聪明的开发人员，会使用类似组件模式的技术，来尽力减少全局对象的数量。
jQuery仅向全局名称空间引入一个标记：jQuery函数/对象。其余的要么是jQuery的直接属性，要么就是调用jQuery函数所返回的对象的方法。
5,两个select ，都是多选的，要求一个按钮，点击时将list1中所有选中的项复制到list2中，而且在list2中已经存在的项就不再添加
http://www.javaeye.com/topic/191788

function copy_onclick(){
$("#list1 option:selected").each(function () {
  $(document.createElement("option"))
.attr("value",$(this).val())
.text($(this).val())
.appendTo('#list2:not(:has(option[value=\''+$(this).val()+'\']))');
  });   }

6，
http://space.flash8.net/space/?18713/action_viewspace_itemid_328089.html
http://hi.baidu.com/yandavid/blog/item/9f64c033dc623b40ac4b5fda.html
http://www.cssrain.cn/article.asp?id=235
http://www.shineblog.com/user6/mprogram/archives/2008/937200.shtml 框处理

John Resig 的主页http://ejohn.org/
Mike Hostetler的http://amountaintop.com/blog/mike

leekiang 2008-02-16 05:33 发表评论