//第二种 var pancakes = $('#pancakes li'); pancakes.eq(0).remove(); pancakes.eq(1).remove(); pancakes.eq(2).remove(); //第三种 pancakes.eq(0).remove().end().eq(1).remove().end().eq(2).remove().end();
10.on()方法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one 方法。
$(selector).on(event,childSelector,data,function,map)
11.模拟触发事件
我们可以通过trigger模拟触发一个click事件
var press = $('#press'); press.on('click',function(e, how){ how = how || ''; alert('The buton was clicked ' + how + '!'); }); press.trigger('click'); press.trigger('click',['fast']);
同时,我们亦可以,使用on()方法创建自己喜欢的事件名称，然后通过trigger来触发。举例如下：
<button>Jump</button> <button>Punch</button> <button>Click</button> <button>Clear</button> <div></div>
var button1 = $('#button1'), button2 = $('#button2'), button3 = $('#button3'), clear = $('#clear'), div = $('#eventDiv'); div.on({ jump : function(){ alert('Jumped!'); }, punch : function(e,data){ alert('Punched '+data+'!'); }, click : function(){ alert('Simulated click!'); } }); button1.click(function(){ div.trigger('jump'); }); button2.click(function(){ // Pass data along with the event div.trigger('punch',['hard']); }); button3.click(function(){ div.trigger('click'); }); clear.click(function(){ //some clear code });
12.触摸事件
// Define some variables var ball = $('<div></div>').appendTo('body'), startPosition = {}, elementPosition = {}; // Listen for mouse and touch events ball.on('mousedown touchstart',function(e){ e.preventDefault(); // Normalizing the touch event object e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e; // Recording current positions startPosition = {x: e.pageX, y: e.pageY}; elementPosition = {x: ball.offset().left, y: ball.offset().top}; // These event listeners will be removed later ball.on('mousemove.rem touchmove.rem',function(e){ e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e; ball.css({ top:elementPosition.y + (e.pageY - startPosition.y), left: elementPosition.x + (e.pageX - startPosition.x), }); }); }); ball.on('mouseup touchend',function(){ // Removing the heavy *move listeners ball.off('.rem'); });
13.更快的阻止默认事件
通常,我们用event.preventDefalut()来阻止默认事件,但是jquery为此提供了更简便的方法:
<a href="https://google.com/">Go To Google</a>
$('#goToGoogle').click(false);
14.使用event.result链接多个事件处理程序。
对一个元素绑定多个事件处理程序并不常见，而使用event.result更可以将多个事件处理程序联系起来。看下面的例子。
var press = $('#press'); press.on('click',function(){ return 'Hip'; }); press.on('click',function(e){ console.log(e.result + ' Hop!'); }) //控制台输出: HipHop!
15.平行的运行多个Ajax请求
当我们需要发送多个Ajax请求是，相反于等待一个发送结束再发送下一个，我们可以平行地发送来加速Ajax请求发送。
$.when($.get('assets/misc/1.json'), $.get('assets/misc/2.json')).then(function(r1, r2){ console.log(r1[0].message + " " + r2[0].message); })
16.通过jQuery获得ip
我们不仅可以在电脑上ping到一个网站的ip，也可以通过jQuery得到
$.get('https://jsonip.com/', function(res){ console.log(res.ip); });
17.使用最简单的ajax请求
jQuery（使用ajax）提供了一个速记的方法来快速下载内容并添加在一个元素中。
<p></p> <p></p>
var contentDivs = $('.content'); contentDivs.eq(0).load('1.txt'); contentDivs.eq(1).load('1.html #header');
18.通过IP地址获得地理位置
有很多在线服务可以告诉我们IP地址所在的城市和国家，下面我们先ping到百度的IP地址，然后获取其地理位置：