14個(gè)有用的jQuery技巧指的是什么呢

14個(gè)有用的jQuery技巧指的是什么呢，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

收集整理了14個(gè)很有用的jQuery技巧，與大家分享。

1.通過(guò)方法返回Jquery對(duì)象實(shí)例。用 var someDiv = $(‘#someDiv’).hide();  代替 var someDiv = $(‘#someDiv’);  someDiv.hide();

1.通過(guò)方法返回Jquery對(duì)象實(shí)例

用 var someDiv = $(‘#someDiv’).hide();  代替 var someDiv = $(‘#someDiv’);  someDiv.hide();

2.使用find來(lái)查找

用 $(’#someDiv’).find(’p.someClass’).hide();   代替 $(’#someDiv p.someClass’).hide();因?yàn)榭梢圆槐赜|發(fā)Jquery的Sizzle引擎，同時(shí)在寫選擇符的時(shí)候盡量讓您的選擇符簡(jiǎn)單同時(shí)優(yōu)化最右邊的選擇符

3.不要濫用$(this)

用 $(’#someAnchor’).click(function() {  alert( this.id );  }); 代替 $(’#someAnchor’).click(function() {alert($(this).attr(’id’));});

4.ready的簡(jiǎn)寫形式

用 $(function() { }); 代替 $(document).ready(function() {});

5.讓你的代碼安全

方法1（使用noConflict）

var j = jQuery.noConflict(); j(’#someDiv’).hide(); // The line below will reference some other library’s $ function. $(’someDiv’).style.display = ‘none’;

方法2（傳入?yún)?shù)Jquery）

(function($) { // Within this function, $ will always refer to jQuery })(jQuery);

方法3（通過(guò)ready方法）

jQuery(document).ready(function($) { // $ refers to jQuery });

6.簡(jiǎn)化代碼

用each代替for，使用數(shù)組保存臨時(shí)變量，使用document fragment，這其實(shí)和寫原生的Javascript需要注意的一樣。

7.使用Ajax的方法

Jquery提供了get getJSON post ajax這些有用的ajax方法。

8.訪問(wèn)原生的屬性和方法

比如獲取元素id的方法有

// OPTION 1 – Use jQuery var id = $(’#someAnchor’).attr(’id’); // OPTION 2 – Access the DOM element var id = $(’#someAnchor’)[0].id; // OPTION 3 – Use jQuery’s get method var id = $(’#someAnchor’).get(0).id; // OPTION 3b – Don’t pass an index to get anchorsArray = $(’.someAnchors’).get(); var thirdId = anchorsArray[2].id;

9.使用PHP來(lái)檢查Ajax請(qǐng)求

通過(guò)使用xhr.setRequestHeader(”X-Requested-With”, “XMLHttpRequest”);  服務(wù)器端如PHP就可以通過(guò)

function isXhr() {   return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest’; }

來(lái)檢查是不是Ajax請(qǐng)求，在一些禁用Javascript的情況下可能會(huì)用到。

10.Jquery和$的關(guān)系

在Jquery代碼的最下面，可以看到下面的代碼

window.jQuery = window.$ = jQuery;  $其實(shí)就是Jquery的一個(gè)shortcut

11.條件加載Jquery

<!– Grab Google CDN jQuery. fall back to local if necessary –> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> <script>!window.jQuery && document.write(’<script src=”js/jquery-1.4.2.min.js”></script>’) </script>

如果CDN沒(méi)有下載到Jquery，則從本地讀取。

12.Jquery Filters

$(’p:first’).data(’info’, ‘value’); // populates $’s data object to have something to work with $.extend( jQuery.expr[":"], { block: function(elem) { return $(elem).css(”display”) === “block”; }, hasData : function(elem) { return !$.isEmptyObject( $(elem).data() ); } } ); $(”p:hasData”).text(”has data”); // grabs paras that have data attached $(”p:block”).text(”are block level”); // grabs only paragraphs that have a display of “block”

注：$.expr[":"]等價(jià)于$.expr.filters。

13.hover方法

$(’#someElement’).hover(function() { //在這里可以使用toggle方法來(lái)實(shí)現(xiàn)滑過(guò)和滑出的效果 });

14.傳入屬性對(duì)象

當(dāng)創(chuàng)建一個(gè)元素的時(shí)候，Jquery1.4可以傳入一個(gè)屬性對(duì)象

$(’</a>’, {  id : ’someId’,  className : ’someClass’,  href : ’somePath.html’ });

甚至是Jquery指定的屬性或事件如text, click。

關(guān)于14個(gè)有用的jQuery技巧指的是什么呢問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。