jquery小技巧

这段时间做公司项目时，有许多业务逻辑要用到jQuery，感觉比较爽，但是实际上，jQuery还有许多技巧可以用来继续把效率提升一个台阶。

下面来谈谈我经常用到的，印象比较深刻的。

$.each(obj, fn); —处理json数据

　　对obj进行遍历，obj为要遍历的数组或对象；fn为处理函数，可选的参数为索引和内容，例如var fn = function(index, content){}；如果需要结束遍历，请返回false，其它的返回值将会被忽略。

each（）方法———通过js里的call（我理解为：把其他obj的方法暂时借过来用一用）方法来实现的。

举一些恰当的例子：

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1   4   7

var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1   2  3  4

讲到call，我得搬来知乎上某位大侠–杨志他的原话如下，印象很深刻：

所以，可以看出call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

用的比较多的，通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以：

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

这样domNodes就可以应用Array下的所有方法了。

作者：杨志

链接：http://www.zhihu.com/question/20289071/answer/14644278

prop（）方法一般用在checked或者selected等‘不稳定’的属性上面，我用的更多的是attr（）方法

closest（）

方法–师傅讲过，该方法从代码维护角度比两三个

parent（）

和其他寻找祖先，同胞方法的组合使用要好得多。

利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。

// Back to top
$('a.top').click(function () {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

其实我觉得它还可以用来替代简单粗暴的页面内锚定位–（a标签href-#-name属性值），放在m站也是不错的一个交互：

$(document).ready(function() {
$('a[href*=#]').click(function() {
if(location.pathname.replace(/^\//,'')
==this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop:                                  targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to
<a name=top></a>
// the link
<a href="#top">go to top</a>
});

鼠标悬浮–toggleClass

-

$('.btn').hover(function () {

$(this).toggleClass('hover');

});

还可以这么写：

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

还可以用css，但实际上三者不可替代。恩，你可以稍微想想为什么。

另外我觉得其他事件如click用上toggle的概率稍微小一些

谈谈js原生

this, $this，$(this)

使用jQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。所以如果用了jq就最好不用this了，否则容易出错。

原生的this其实是指向一个dom元素，函数，或者window，global。

jq函数中的this一般指向dom target element —选中的selector

this只是个变量名，加this 只是个变量名，加是为说明其是个jquery变量。

而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。

获取鼠标位置

$(document).ready(function() {

$().mousemove(function(e){

//display the x and y axis values inside the div with the id XY

$('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);

});

// how to use

<div id=XY></div>

});

使元素在屏幕 居中

$(document).ready(function() {
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$("#id").center();
});

统计页面中的dom个数

如果页面中包含大量元素或内容，则浏览器渲染所需的时间也更多。你可以在控制台中执行以下语句，来统计页面中的DOM元素数：

console.log($('*').length);

如果所得数值较小，则页面渲染较快。如果数值较大，你可以通过删除多余的标记和不必要的元素来进行优化。

使用.clone()方法克隆JavaScript中的DOM对象：

var cloned = $('#yourdivID').clone();

.clone()方法无法克隆JavaScript对象。如果要克隆JavaScript对象，你可以使用下面的代码：

// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

测试隐藏元素

通过.hide()和.show()方法可以改变元素的可见性。使用下面的代码可以检测元素是否可见：

if($(element).is(":visible") == "true") {
//The element is Visible
}

jq处理数组的方法

$.inArray(obj, array);

　　判断数组array中是否包含obj对象，如果存在，返回对应的下标，如果不存在，返回-1；

$.map(array, fn);

　　将一个数组中的元素转换到另一个数组中。array为需要转换的数组，fn为处理函数；这个方法的返回值是一个经过处理后的新数组。

$.merge(array1, array2);

　　合并两个数组；将数组array2中的内容复制到array1中，并将结果返回。merge方法不会去除重复，需要使用 $.unique()去除重复。

$.unique(array);

　　去除数组array中的重复项。

$.grep(array, fn, [invert]);

　　过滤数组中的元素；该方法对数组array中的每一个对象都调用fn方法；

　　invert 可选参数；如果 “invert” 为 false 或未设置，则函数返回数组中由过滤函数返回 true 的元素，当”invert” 为 true，则返回过滤函数中返回 false 的元素集。

　　

eg删除数组中的某一个指定项：

var array = ['a', 'b', 'c'];
$.grap(array, function(value, index){return value=='b';}, true);

Tip4：扩展需要的功能

jQuery提供了extend方法让我们来扩展自己需要的功能。例如：

$.extend({
　　sum: function(num1, num2){return num1+num2; },
}); //为jquery扩展了sum方法

使用扩展的方法（通过“.方法名”调用）：alert(.方法名”调用）：
alert(.sum(10, 20));

获取jQuery对象集合中的一项

　　对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
元素的内容。有如下两种方法：

　　(“div”).eq(2).html();　　　　//调用jquery对象的方法(“div”).eq(2).html(); 　　　　 //调用jquery对象的方法
　　(“div”).get(2).innerHTML; 　　//调用dom的方法属性

这个问题我之前都走了弯路。。现在知道了

最后一点很重要：元素的选择与过滤很重要，就像是我之前提到的closest（）和parent（）方法一样，对代码量和效率有影响

下面我列举一些技巧，我就偷个懒只写代码了，反正大家应该都看得懂，特别要注意的地方我会提出来:

首先是元素过滤

$("p").eq(1);

$("p").filter(".selected");

filter(fn):

筛选出与指定函数返回值匹配的元素集合

这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。

保留子元素中不含有ol的元素:

$("div").filter(function(index) {

return $("ol", this).size() == 0;

});

名称 说明 举例

eq( index ) 获取第N个元素 获取匹配的第二个元素:

$(“p”).eq(1)

filter( expr )

筛选出与指定表达式匹配的元素集合。

保留带有select类的元素:

$(“p”).filter(“.selected”)

filter( fn )

筛选出与指定函数返回值匹配的元素集合

这个函数内部将对每个对象计算一次 (正如 ‘$.each’). 如果调用的函数返回false则这个元素被删除，否则就会保留。

保留子元素中不含有ol的元素:

(“div”).filter(function(index) {
return(“div”).filter(function(index) {
return (“ol”, this).size() == 0;

});

is( expr )

注意: 这个函数返回的不是jQuery包装集而是Boolean值

用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

$("input[type='checkbox']").parent().is("form")

从p元素中删除带有 select 的ID的元素:
$("p").not( $("#selected")[0] )

选择第一个p元素:
$("p").slice(0, 1);

其次是元素查找

查找所有文本节点并加粗:
$("p").contents().not("[nodeType=1]").wrap("<b/>");

从所有的段落开始，进一步搜索下面的span元素。与$(“p span”)相同:

$("p").find("span")

find是查找后代，而children是查找子元素。

andSelf()

加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

选取所有div以及内部的p，并加上border类:

$("div").find("p").andSelf().addClass("border");

end()方法

eg

选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素:

$(“p”).find(“span”).end()

end()离不开链式写法，链式调用有许多好处，不过得考虑好代码可读性，无法避免较长的话也得注意按逻辑以end（）在每一行结尾处换行。

好了，欧了。