精心收藏的14个开发人员方便的jQuery代码片段
jQuery可以被定义为一个跨浏览器的JavaScript库。它基本上是旨在简化客户端脚本的HTML，在实际的web开发当中，我们经常要处理元素的属性，表单的值，键盘事件等等，如果没有好的习惯，遇到这些问题的时候往往有时候不知所措，
你是否也在寻找
向web开发人员推荐15个非常优秀的jquery工具提示插件
创建可视化优秀网站的40个精美jquery插件推荐
提高页面响应的20款杰出的jquery插件推荐
开发人员应该知道的15个吸引力的jquery lightbox插件推荐
提高前端开发水平的30个新鲜实用的jquery插件推荐
今天就分享14个有用的jQuery代码片段，您可以保存并复制。您可以编辑改变自己的脚本变量和参数匹配。即使是经验丰富的开发人员可能会发现这些片段是非常熟悉和屡试不爽的
1. 控制鼠标悬停
$("a").hover(
function () {
// code on hover over
},
function () {
// code on away from hover
}
);
2. 载入的时候防止锚链接
$("a").on("click", function(e){
e.preventDefault();
});
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）这通常是用于触发某些类型的动态效果，如一个隐藏的菜单或Ajax调用。通过使用事件对象，我们可以操作数据发回给浏览器的URL。在这种情况下，停止HREF加载任何东西！
3. 滚动到顶部
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
你可能已经看到这个功能的在新的社交网站越来越受欢迎
4. Ajax Template
$.ajax({ type: 'POST', url: 'backend.php', data: "q="+myform.serialize(), success: function(data){ // on success use return data here }, error: function(xhr, type, exception) { // if ajax fails display error alert alert("ajax error response type "+type); } });
通过Ajax表单数据传递，是jQuery的最常见的用途之一。作为Web开发人员我们肯定记不住已经用过这个方法多少次了，语法非常简单，每次用到的时候都需要这段代码复制过去
5. 动画动作
1 $('p').animate({ 2 left: '+=90px', 3 top: '+=150px', 4 opacity: 0.25 5 }, 900, 'linear', function() { 6 // function code on animation complete 7 });
正如我们所看到的动画的方法，这是非常强大的，用于创建您的网页上的动画运动。
6. 切换CSS类
1 $('nav a').toggleClass('selected');
添加或删除css类在html元素当中是一种相当普遍的动作. 这种技术经常运用在菜单切换，或者想用不用的颜色显示出某一行，或者页面的输入元素进行变化。 他经常结合addClass()和removeClass()方法来使用 你可以把所有的代码放到一个函数调用
7. 切换可见性
$("a.register").on("click", function(e){
$("#signup").fadeToggle(750, "linear");
});
经常我们打开网址的时候。有的页面会弹出框或通知，需要几秒钟显示，然后隐藏。使用fadeToggle功能，您可以快速隐藏和显示任何DOM对象。
8. 载入外部内容
$("#content").load("somefile.html", function(response, status, xhr) {
// error handling
if(status == "error") {
$("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
}
});
不需要使用ajax技术，就能够解析一个外部的html文件中的任何内容，这个新的内容可以加载到DOM在页面中的任何地方。非常的实用
9. 键盘事件
1 $('input').keydown(function(e) { 2 // variable e contains keystroke data 3 // only accessible with .keydown() 4 if(e.which == 11) { 5 e.preventDefault(); 6 } 7 }); 8 9 $('input').keyup(function(event) { 10 // run other event codes here 11 });
处理用户输入是我们开发当中所遇到的比较头疼的难题。幸运的是jQuery的 keydown和keyup事件侦听是解决用户输入比较完美的解决方案。无论实用哪一张方法，你都要先确认用户将要产生的行为，再决定实用那个方法；
10.等高等宽
1 var maxheight = 0; 2 $("div.col").each(function(){ 3 if($(this).height() > maxheight) { maxheight = $(this).height(); } 4 }); 5 6 $("div.col").height(maxheight);
11. 追加新的html
var sometext = "here is more HTML"; $("p#text1").append(sometext); // added after $("p#text1").prepend(sometext); // added before
使用的append（）方法，我们可以快速地将任何HTML代码直接到DOM中。这跟前面提到的load（）方法是类似的，
12. 设置和获取属性
1 var alink = $("a#user").attr("href"); // 获取链接的属性值 2 $("a#user").attr("href", "http://www.google.com/"); // 重新赋值 3 $("a#user").attr({ 4 alt: "the classiest search engine", 5 href: "http://www.google.com/" 6 }); // set more than one attribute to new values
此属性是相对简单的，但是如果处理不好经常会返回stackoverflow，attr（）方法在任何HTML元素和属性的字符串值传递。结果是返回该属性值，所有的HTML属性可通过访问语法，所以是web开发当中必须要记住的
13. 检索内容值
1 $("p").click(function () { 2 var htmlstring = $(this).html(); // 获取html字符串 3 $(this).text(htmlstring); // 覆盖掉原来的html字符串 4 }); 5 6 var value1 = $('input#username').val(); // 获取input的值 7 var value2 = $('input:checkbox:checked').val(); // 获取checkbox的值 8 var value3 = $('input:radio[name=bar]:checked').val(); // 获取button的值
VAL（）属性是用来获取输入字段和表单元素的值
14. 遍历DOM
1 $("div#home").prev("div"); // find the div previous in relation to the current div 2 $("div#home").next("ul"); // find the next ul element after the current div 3 $("div#home").parent(); // returns the parent container element of the current div 4 $("div#home").children("p"); // returns only the paragraphs found inside the current div
