易栈网-膘叔

原文：http://www.cnblogs.com/gaoweipeng/archive/2009/06/09/1498333.html

Jquery中常用的函数方法总结

Jquery中为我们提供了很多有用的方法和属性，自己总结的一些常用的函数，方法。个人认为在开发中会比较常用的，仅供大家学习和参考。

事件处理 

ready(fn)

代码：
$(document).ready(function(){
  // Your code here...
})；

作用：它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

bind(type,[data],fn)

代码：
$("p").bind("click", function(){
  alert( $(this).text() );
});

作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到事件监听的作用。

toggle(fn,fn)
代码：

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。

(像click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。)

外观效果

addClass(class)和removeClass(class)

代码：
$(".stripe tr").mouseover(function(){ 
               $(this).addClass("over");}).mouseout(function(){
               $(this).removeClass("over");})
});
也可以写成：
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码。

css(name,value)

代码：
$("p").css("color","red");

作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代码：

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

 

作用：Jquery中提供的比较常用的几个动态效果的函数。还可以添加参数：show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

animate(params[,duration[,easing[,callback]]])

作用：制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。

查找筛选

map(callback)
HTML 代码:
<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/%22/>
</form>
jQuery 代码:
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );
结果:
[ <p>John, password, http://ejohn.org/%3C/p> ]

 
作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

<p><span>Hello</span>, how are you?</p>
jQuery 代码:

$("p").find("span")
结果:

[ <span>Hello</span> ]

作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)
HTML 代码:
<img/><img/>
jQuery 代码:
$("img").attr("src","test.jpg");

作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制HTML标记上是必备的工具。

html()/html(val)
HTML 代码:
<div><p>Hello</p></div>
jQuery 代码:
$("div").html();
结果:
Hello

作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html)
HTML 代码:
<p>Test Paragraph.</p>
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
结果:
<div class="wrap"><p>Test Paragraph.</p></div>

 
作用：把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。

empty()
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>

作用：删除匹配的元素集合中所有的子节点。

 

Ajax处理

load(url,[data],[callback])
url (String) : 待装入 HTML 网页网址。
data (Map) : (可选) 发送至服务器的 key/value 数据。
callback (Callback) : (可选) 载入成功时回调函数。

代码：

$("#feeds").load("feeds.aspx", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

作用：载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

serialize()
HTML 代码:
<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2"
checked="checked"/> check2
  <input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>
jQuery 代码:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

作用：序列化表格内容为字符串。用于 Ajax 请求。

 

工具

jQuery.each(obj,callback)

代码：
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );//遍历对象
});

作用：通用例遍方法，可用于例遍对象和数组。

jQuery.makeArray(obj)
HTML 代码:
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
jQuery 代码:
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
结果:
Fourth
Third
Second
First

作用：将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

jQuery.trim(str)

作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。

小结：在实际的开发中我们可能会用到其他的方法和属性，以上只是个人认为新手初学Jquery时，必须掌握的一些方法。仅供大家学习的参考。有什么不对的高手指教。

这是一篇来自cssrain站长的译文。很多时候，我们都不敢在自己的勃客、网站上留下自己的mail，因为 这会带来大量的垃圾邮件。
但如果不留mail，又会让很多用户、过客无法与自己联络，这真是一个两难的问题。在几年前就有那种把email改成用document.write输出的情况。但这种并不实用。

看完这篇文章，或者你应该有相对较好的方法来处理你的邮件，不过我个人推荐的是这种;

改写了一下，终于可以走通了，不会用clone，只能用这种替代方案了。。代码较差：

这种情况，邮件地址可以正常显示，但如果从网页上选择邮件地址再复制的话，就会把span所包含的内容也复制进去了。个人觉得这样处理比较好，对于span里的内容，可以通过程序生成插进去。位置也可以不一样，这样别人就无法直接复制网址了。而且点击后也能够发送邮件。但问题同样明显，如果禁用了javascript，那就会出现一堆无效字符

 

以下是66[cssrain站长]翻译的文章内容：

一直以来我都认为” mailto: “是一个神圣的链接。通过它，我可以在网页中发布我的email地址，并且任何人都可以通过单击这个链接联系我。当然前提是在一个纯洁的Web环境下 ---在垃圾邮件发送者出来之前。举个例子说：今天你在你的网页中使用了” mailto: “，那么30秒后你将收到第一封伟哥信息。垃圾邮件发送者的速度之快另你惊讶。从今以后，你将收到越来越多的垃圾邮件。那么我们有什么办法，在自己的网页 中发布自己邮箱的同时，不引起垃圾邮件发布者的注意呢？

最明显的解决办法是在你的HTML中使用机器不可读的Email。比如：“bob (at) bobsdomain dot com”。虽然这可以使垃圾邮件发送者不再那么容易，但它同时也会为难您的用户。

另一种选择是使用JavaScript生成的电子邮件地址 ，然后对字符串加点编码。如：

<p>contact ：
<script type="text/javascript">
document.write('<a href="mai'+"lto"+"bob"+'@'+'bobsdomain.com">bob@'+"bobsdomain.com</a>");
</script>
</p>

 

这将阻止大多数垃圾邮件发送者，但如果用户禁用JavaScript将不会看到您的地址。
(我不推荐使用 document.write() )

一个更好的解决办法是使用它们两者相结合的技术，以阻止垃圾邮件，同时不会造成用户的困难。

首先在我的网页中使用一个人性化的，同时垃圾邮件发送者不能收集的email地址。我们还将它链

接到一个联络网页，例如：

< p>Contact <a href="contact.html" class="email">bob (at) bobsdomain dot com</a></p> 

请注意，我们为链接添加了一个class，并设置为”email”。

接下来写一个JavaScript函数搜寻网页的伪装的电子邮件，并将它转换成真正的” mailto: “链接。

我们将创建一个' email.js '文件，将它包括在我们的HTML里 ：
< script type="text/javascript" src="email.js"></script>

 

所需要的代码很短，代码如下：
function EmailUnobsfuscate() {
 //查找所有的a
 var link = document.getElementsByTagName && document.getElementsByTagName("a");
 var email, e;
 for (e = 0; link && e < link.length; e++) {
  // 判断当前link的class是否含有"email"
  if ((" "+link[e].className+" ").indexOf(" email ") >= 0) {
   // 获取全小写的email地址
   email = link[e].firstChild.nodeValue.toLowerCase() || "";
   // 转换email地址
   //将dot转为.
   email = email.replace(/dot/ig, ".");
   //将(at)转为@
   email = email.replace(/\(at\)/ig, "@");
   //将空格转为"" 
   email = email.replace(/\s/g, "");
   //判断是否为有效email
   if (/^[^@]+@[a-z0-9]+([_\.\-]{0,1}[a-z0-9]+)*([\.]{1}[a-z0-9]+)+$/.test(email)) {
    // 把真正的email插入到页面中
    link[e].href = "mailto:" + email;
    link[e].firstChild.nodeValue = email;
   }
  }
 }
}

 最后，我们需要确保在网页加载完毕后运行email.js：

window.onload = EmailUnobsfuscate;

使用两者结合的结果是：

1、我们的原始HTML网页中没有”mailto:”链接，同时也不会轻易收到垃圾邮件发送者发来的垃圾邮件。

2、绝大多数的用户（那些启用JavaScript ）将看到一个标准的电子邮件地址和“mailto:”链接。

3、少部分禁用脚本的用户可以看到“bob (at) bobsdomain dot com”的地址。

说了这么多，意图就是展示这些概念，而不是这些代码。尽管例子能正常工作，但我还是建议你：

1、使用您自己的伪装电子邮件格式，例如： “bob {@} bobsdomain – dot - com”。

     因为垃圾邮件发送者可以阅读这篇文章后变换编码的电子邮件，然后轻易的对付你！

2、使用不同的链接标识符--- “email”有点明显！

3、使用JavaScript库，例如jQuery ，使代码更为简短。您还应该确保它应付空格或其他DOM节
点周围的电子邮件地址文字（不处理的代码段）。

4、使用一个更强大的事件处理程序来取代window.onload。

 

 

祝您好运。

例子演示: http://www.cssrain.cn/demo/howtoemail.html

原文地址: http://www.sitepoint.com/blogs/2009/05/05/stop-spam-harvesting-email-obfuscation/

jQuery是目前我用的最多的JS框架，毕竟他简化了我很多JS的操作，而且目前它的插件也非常多。所以看到有更新就放上来。（当然不是我翻译的，以我的水平，翻译出来的文章会比英文原文更难懂）

原文：http://www.5iya.com/blog/post/jquery-1-3-3-new.asp

全部翻译自 Brandon Aaron 的blog。

增强的toggleClass()

1.toggleClass也可以和addClass一样，用空格分隔多个class名称了。

.toggleClass("a b") == .toggleClass("a").toggleClass("b")

2.无参数时，自动删除、恢复全部class，也可以传递一个布尔值，true为恢复class，false为删除class。

3.也可以第一个参数为class名，第二个参数为布尔值，具体用法如下。

// 原始代码
// <div class="a b c"></div>

// 删除、恢复全部class
$('div').toggleClass();        // <div class="" />
$('div').toggleClass();        // <div class="a b c" />
$('div').toggleClass( false ); // <div class="" />
$('div').toggleClass( true );  // <div class="a b c" />

// 删除、恢复多个 class
$('div').toggleClass( "a b" );          // <div class="c" />
$('div').toggleClass( "a c" );          // <div class="a" />
$('div').toggleClass( "a b c", false ); // <div class="" />
$('div').toggleClass( "a b c", true );  // <div class="a b c" />

简化的hover()

1.3.3中，hover绑定事件可仅传递一个函数，将默认用做mouseenter/mouseleave公用的函数。

旧代码：

$('li').hover(function() {
        $(this).addClass('test');
}, function() {
        $(this).removeClass('test');
});

新代码：

$('li').hover(function() {
        $(this).toggleClass('test');
});

live冒泡事件支持预设参数

// 预设参数
var eventConfig = {
    selectedClass: "selected"
};

$("li").live("click", eventConfig, function( event ) {
    // 绑定函数的参数event的data属性即为传递的预设参数
    var selectedClass = event.data.selectedClass;
});

更好的支持其它windows、document对象

通过.contents()获得其它框架的document对象。

var iframeDoc = $('iframe').contents().get(0);

这样就可以获取其height/width/CSS属性或绑定事件。

// 获得框架宽度
$(iframeDoc).width();

// 获得框架高度
$(iframeDoc).height();

// 绑定事件
$(iframeDoc).bind('click', function( event ) {
    // do something
});

// 获得CSS属性值
$('div', iframeDoc).css('backgroundColor');

注意，如果要处理框架内部网页元素，请使用此插件（配合jQuery 1.3.3/+），和以下语法：

$('iframe').win().bind('load', fn);
$('iframe').doc().find('a').click(fn);

增强的index()

两个变化，第一个，支持传递selector作为参数。

旧代码：

$("img").index( $("img.selected") );

新代码

$("img").index( ".selected" );

第二个，无参数传递，直接查找在同级元素中的位置。

旧代码：

var $this = $(".selected");

$this.parent().children().index( $this );

新代码：

$(".selected").parent().index();

自行指定this对象

在1.3.3中，可以在bind/live绑定事件时，自行指定this参数代表的对象。这个用法需求不多，而且可用event.target,event.currentTarget代替。

具体用法请参看原文。

以前，对jsonp没有听说过，看到本文的时候觉得可以参考一下，所以，保存一下做个记录
原文：http://www.cnblogs.com/cocowool/archive/2009/05/21/1486307.html

简介
符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是XMLHttpRequest函数，这个函数允许客户端的Javascript发送到服务器端的HTTP请求并获得返回数据。Ajax同时也是目前众多的Mashup背后的驱动力量，他们都利用Ajax来聚合不同来源的信息。

理解同源策略的限制
同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。

解决这个限制的一个相对简单的办法就是在服务器端发送请求，服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。
另一个办法就是使用框架(frames)，将第三方站点的资源包含进来，但是包含进来的资源同样要受到同源策略的限制。

有一个很巧妙的办法就是在页面中使用动态代码元素，代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候，同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败，幸运的是，我们可以使用JSON(JavaScript Object Notation)来改进这个应用。

JSON和JSONP
与XML相比，JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。
例如一个ticker对象
    var ticker = {symbol:'IBM',price:100}
而JSON串就是    {symbol:'IBM',price:100}
这样我们就可以在函数的参数中传递JSON数据。我们很容易掌握在函数中使用动态的JSON参数数据，但是我们的目的并不是这个。
通过使我们的函数能够加载动态的JSON数据，我们就能够处理动态的数据，这项技术叫做 Dynamic Javascript Insertion。
我们看下面的例子
index.html中
    <script type="text/javascript">
        function showPrice(data){
            alert("Symbol:" + data.symbol + ", Price:" + data.price);
        }
        
        var url = "ticker.js";        //Outer JS URL
        var script = document.createElement('script');
        script.setAttribute('src', url);
        
        //load javascript
        document.getElementsByTagName('head')[0].appendChild(script);
    </script>
ticker.js中
    var data = {symbol:'IBM', price:100};
    showPrice(data);

上面的代码通过动态加入Javascript代码，来执行函数加载数据。
正如之前提到过的，同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码，来执行在他们代码中的JSON数据。
这就是JSONP(JSON with Padding)。注意，使用这种方法时，你必须在页面中定义回调函数，就像上例中的showPrice一样。

我们通常所说的JSONP服务(远程JSON服务)，实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。然后执行这个函数，处理JSON数据，并显示在客户页面上。

JQuery的JSONP支持

从JQery 1.2以后，就开始支持JSONP的调用。在另外的一个域名中指定好回调函数名称，你就可以用下面的形式来就加载JSON数据。
    url?callback=?

示例：
    jQuery.getJSON(url + "&callbak=?", function(data){
        alert("Symbol:" + data.symbol + ", Price:" + data.price);
    });
jquery会在window对象中加载一个全局的函数，当代码插入时函数执行，执行完毕后就会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的Ajax请求一样工作。

上例中我们在动态插入到页面的代码中使用了静态的json数据，虽然完成了依次JSONP返回，但仍不是JSONP服务，因为不支持在URL中定义回调函数名称。下面是一个将其变成JSONP服务的一个方法服务器端使用PHP。

首先我们来定义接口的规范，就像这样：http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPrice
symbol是请求条件，callback是回调函数名称。

在页面文件中，我们使用JQuery的支持：
        //JQuery JSONP Support
        var url = "http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";
        jQuery.getJSON(url, function(data){
            alert("Symbol:" + data.symbol + ", Price:" + data.price);
        });

在suggest.php中
     $jsondata = "{symbol:'IBM', price:120}";
     echo $_GET['callback'].'('.$jsondata.')';
    
现在，如果我们想制作一些mashup，或者将第三方的资源整合到一个页面中，我们就很容易想到JSONP的解决方法了。

现有的JSONP服务
    既然我们已经知道如何使用JSONP，那么我们也就可以使用一些现有的JSONP服务了，下面是一些例子：
    Digg API:http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
    Geonames API:http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
    Flickr API:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
                   
注意：
    JSONP是一个非常强大的构建mashp的方法，可是不是一个解决跨域访问问题的万能药。它也有一些缺点
    第一也是最重要的：JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。你无法获得一个404的错误，也不能取消这个请求
    另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。    
    

[参考资料]
1、Cross-domain communication with jsonp        http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

在开发中，有一个FORM，大概是这样的：

xxx.php里面是header跳转。然后问题就发生了。这个FORM是提交了，但，就是不能跳转。这是为什么呢，为什么呢？

如果把<a>标签和img标签去掉，换成<input type="button" onclick="formSubmit()">，那就提交成功也跳转成功。为什么用<a>标签就不行呢？

怀疑是<a>标签的href="javascript:;">的返回而导致了跳转提交的失败，于是把<a>标签去掉，在img标签中加上onclick，果然成功。

当初采用<a>标签是因为鼠标样式的关系，既然知道这个原因，那么就尝试把href="javascript:;"改成传统的"#"，跳转成功（用#的缺点在于，#是锚点，如果啥也不加，那么点击后，页面会自动滚动到顶部，不利于用户体验）

或者，不使用<a>标签，直接就在<img>标签上加上样式style="cursor:pointer"，也可以让鼠标移动到图片就是显示一个小手了。

至此，问题解决。其实以前也遇到过这个问题，当初也是在一个FORM里，当初的链接是<a href="javascript:functions();void(0)">xx</a>结果也是失败的。

一年后，又是这个问题。。。记下来提醒一下自己，下次遇到时，先看看是否还是这个原因。