原文: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输出的情况。但这种并不实用。
看完这篇文章,或者你应该有相对较好的方法来处理你的邮件,不过我个人推荐的是这种;
XML/HTML代码
-
- <a href="#" onclick="sendmail()" id='sendmail'>gou<span class="bgcolor">0982134</span>ki@<span class="bgcolor">0912ujf</span>neatdns.com</a>
- <script>
- function sendmail(){
- $('#sendmail span').remove();
- //然后反$('#sendmail').text() 拷贝到剪贴板,给用户提示一下
- }
- </script>
改写了一下,终于可以走通了,不会用clone,只能用这种替代方案了。。代码较差:
XML/HTML代码
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- <style>
- #sendmail span{display:none}
- #hiddenmail {display:none}
- </style>
- <a href="#" id='sendmail'>gou<span>0982134</span>ki@<span>0912ujf</span>neat<span>091r</span>dns.com</a><span id="hiddenmail"</span>
- <script>
- $(document).ready(function(){
- $('#hiddenmail').html( $("#sendmail").html());
- $("#hiddenmail span").remove();
- $('#sendmail').attr("href" ,"mailto:"+$("#hiddenmail").text());
- });
- </script>
这种情况,邮件地址可以正常显示,但如果从网页上选择邮件地址再复制的话,就会把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/