JQ使用過程中,一些小技巧:

創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，先為昭陽等服務(wù)建站，昭陽等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為昭陽企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1.is()方法

根據(jù)選擇器、元素或 jQuery 對(duì)象來檢測(cè)匹配元素集合，如果這些元素中至少有一個(gè)元素匹配給定的參數(shù)，則返回 true。一些小應(yīng)用如下:

 
list item 1
 
list item 2
 
list item 3

$("ul").click(function(event) {
 var $target = $(event.target);
 if ( $target.is("li") ) {
  $target.css("background-color", "red");
 }
});

如此,便可以限制住,只有列表項(xiàng)li本身點(diǎn)擊之后,才會(huì)觸發(fā)寫入的點(diǎn)擊事件.

其也可以做以下一些判斷:

// 是不是一個(gè)div
elem.is('div') && console.log("it's a div");
// 是不是有包含(也可以有其他類名)bigbox的類名的元素?
elem.is('.bigbox') && console.log("it has the bigbox class!");
// 是不是隱藏的?
elem.is(':not(:visible)') && console.log("it is hidden!");

這里有一點(diǎn)需要注意,&&運(yùn)算符可以用來做一個(gè)判斷,當(dāng)前面的條件滿足時(shí),后面的會(huì)執(zhí)行,但是后面的條件不能是表達(dá)式,只能是console.log()或則++i一類的.

還有以下比較有用的用法:

elem.animate({'width':200},1000);
// 是否正在動(dòng)畫
elem.is(':animated') && console.log("it is animated!");

2.jquery中拓展方法

$.fn是指jquery的命名空間，加上fn上的方法及屬性，會(huì)對(duì)jquery實(shí)例每一個(gè)有效。

如擴(kuò)展$.fn.abc(),即$.fn.abc()是對(duì)jquery擴(kuò)展了一個(gè)abc方法,那么后面你的每一個(gè)jquery實(shí)例都可以引用這個(gè)方法了.

那么你可以這樣子：$("#div").abc();

jQuery.extend(object);為擴(kuò)展jQuery類本身.為類添加新的方法。

jQuery.fn.extend(object);給jQuery對(duì)象添加方法。

jQuery.extend(object);　為jQuery類添加添加類方法，可以理解為添加靜態(tài)方法。如：

elem.animate({'width':200},1000);
// 是否正在動(dòng)畫
elem.is(':animated') && console.log("it is animated!");

便為　jQuery　添加一個(gè)為add　的　“靜態(tài)方法”，之后便可以在引入 jQuery　的地方，使用這個(gè)方法了，

$.add(3,4); //return 7

jQuery.fn.exists = function(){ return this.length > 0; }
console.log($('#elem').exists() ? "exists!" : "doesn't exist!");

3.jQuery方法$()實(shí)際上是擁有兩個(gè)參數(shù)的

$('li','#firstList').each(function(){
  console.log($(this).html());
});

這里,第二個(gè)參數(shù)用來限制第一個(gè)參數(shù)給定的查找結(jié)果

$('
',{
  "class": "bigBlue",
  "css": {
    "background-color":"purple"
  },
  "width" : 20,
  "height": 20,
  "animate" : {  // 可以設(shè)置div的動(dòng)畫效果
    "width": 200,
    "height":50
  }
}).appendTo('#result');

這里,第二個(gè)參數(shù)用來對(duì)創(chuàng)建的元素進(jìn)行設(shè)置.

4.jquery中的end()方法,可以讓鏈?zhǔn)秸Z法寫起來更加高效,快捷.

 
 
 
No
 
No
 
No
 
 
 

breakfast.find('.eggs').text('Yes').end() // back to breakfast
.find('.toast').text('Yes').end().find('.juice').toggleClass('juice coffee').text('Yes');

這里,end()會(huì)返回查找元素的上一級(jí).

5.contextmenu事件  右鍵點(diǎn)擊

也許希望web 應(yīng)用感覺更像原生的，那么可以阻止contextmenu默認(rèn)事件。

$(function(){
  $(document).on("contextmenu",function(e){
    e.preventDefault();
  });
}); 

當(dāng)然,應(yīng)用此事件,也可以自定義,右鍵出來的操作菜單,類似于

6.有時(shí)候不希望網(wǎng)頁的某一部分內(nèi)容被選擇比如復(fù)制粘貼這種事情，我們可以這么做：

$('p.descr').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);

這樣,內(nèi)容就不能再被選擇了.

7.最小的DOM操作

用js操作DOM是非常浪費(fèi)資源的,下面的方法一般是我們通常的做法:

var elem = $('#elem');
for(var i = 0; i < 100; i++){
  elem.append('
element '+i+'
');
}

這樣做,重復(fù)的向元素中添加,無疑是一種極大的資源浪費(fèi),而通過下面的方法,則可以減少大量的DOM操作

var elem = $('#elem'),
arr = [];
for(var i = 0; i < 100; i++){
  arr.push('
element '+i+'
');
}
elem.append(arr.join(''));

8.更方便的分解URL

我們一般可以使用正則表達(dá)式來分解URL,但是這并不是一個(gè)好方法,我們可以借助a標(biāo)簽來完成URL的分解

var url = 'http://tutorialzine.com/books/jquery-trickshots?trick=12&&abc=123#comments';
  var a = $('',{ href: url });
  console.log(url); 
  console.log('Host name: ' + a.prop('hostname')); //Host name: tutorialzine.com
  console.log('Path: ' + a.prop('pathname')); //Path: /books/jquery-trickshots
  console.log('Query: ' + a.prop('search')); //Query: ?trick=12&&abc=123
  console.log('Protocol: ' + a.prop('protocol')); //Protocol: http:
  console.log('Hash: ' + a.prop('hash')); //Hash: #comments

這樣我們就可以很快速的完成URL的分解

9.有時(shí)候,緩存selector,反而可以優(yōu)化你的js

下面有三種情況,第一種情況是一部分人的通常做法,這種寫法費(fèi)力而且不討好,后面兩種方案則是對(duì)第一種的優(yōu)化,可以二選一.

第一種:

$('#pancakes li').eq(0).remove();
$('#pancakes li').eq(1).remove();
$('#pancakes li').eq(2).remove();

第二種和第三種,可以二選一:

//第二種
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() 方法在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，推薦使用該方法，它簡(jiǎn)化了 jQuery 代碼庫(kù)。

注意：使用 on() 方法添加的事件處理程序適用于當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素）。

提示：如需移除事件處理程序，請(qǐng)使用 off() 方法。

提示：如需添加只運(yùn)行一次的事件然后移除，請(qǐng)使用 one 方法。

$(selector).on(event,childSelector,data,function,map)

11.模擬觸發(fā)事件

我們可以通過trigger模擬觸發(fā)一個(gè)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']);

同時(shí),我們亦可以,使用on()方法創(chuàng)建自己喜歡的事件名稱，然后通過trigger來觸發(fā)。舉例如下：

Jump Punch Click Clear 

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 = $('
').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.更快的阻止默認(rèn)事件

通常,我們用event.preventDefalut()來阻止默認(rèn)事件,但是jquery為此提供了更簡(jiǎn)便的方法:

Go To Google

$('#goToGoogle').click(false);

14.使用event.result鏈接多個(gè)事件處理程序。

對(duì)一個(gè)元素綁定多個(gè)事件處理程序并不常見，而使用event.result更可以將多個(gè)事件處理程序聯(lián)系起來。看下面的例子。

var press = $('#press');
press.on('click',function(){
  return 'Hip';
});
press.on('click',function(e){
  console.log(e.result + ' Hop!');
})
//控制臺(tái)輸出: HipHop!

15.平行的運(yùn)行多個(gè)Ajax請(qǐng)求

當(dāng)我們需要發(fā)送多個(gè)Ajax請(qǐng)求是，相反于等待一個(gè)發(fā)送結(jié)束再發(fā)送下一個(gè)，我們可以平行地發(fā)送來加速Ajax請(qǐng)求發(fā)送。

$.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到一個(gè)網(wǎng)站的ip，也可以通過jQuery得到

$.get('https://jsonip.com/', function(res){ console.log(res.ip); });

17.使用最簡(jiǎn)單的ajax請(qǐng)求

jQuery（使用ajax）提供了一個(gè)速記的方法來快速下載內(nèi)容并添加在一個(gè)元素中。

var contentDivs = $('.content');
contentDivs.eq(0).load('1.txt');
contentDivs.eq(1).load('1.html #header');

18.通過IP地址獲得地理位置

有很多在線服務(wù)可以告訴我們IP地址所在的城市和國(guó)家，下面我們先ping到百度的IP地址，然后獲取其地理位置：

var ip = '119.75.218.70',
  api = 'http://freegeoip.net/json/' + ip + '?callback=?';
$.getJSON(api, function(r){
  console.log('How is the weather in ' + r.city + ', ' + r.country_name + '?');
});

19.使用匿名函數(shù)來產(chǎn)生一個(gè)獨(dú)立的代碼塊

定義全局變量和函數(shù)是一種代碼很粗糙的行為，更好的方式是通過使用匿名函數(shù)使你的代碼獨(dú)立于塊之中。看下面的例子：

(function($){
  var c = 1;
  $.fn.count = function(){
    log(c++);
    return this;
  }; 
})(jQuery);
$(document).count();
$('body').count().count();

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！