기술 향상을 위한 14가지 jQuery 팁, 알림 및 모범 사례
- 王林원래의
- 2023-08-30 13:05:091282검색
jQuery에 대한 한 가지 나쁜 점이 있다면, 시작하기에는 믿을 수 없을 정도로 낮은 수준이어서 JavaScript에 대해 전혀 모르는 사람들이 관심을 갖는 경향이 있다는 것입니다. 자, 한편으로는 이것은 굉장합니다. 그러나 다른 한편으로는 솔직히 말해서 역겹도록 나쁜 코드가 발생할 수도 있습니다(일부는 제가 직접 작성했습니다!).
그래도 괜찮습니다. 코딩이 너무 형편없어서 할머니가 숨을 헐떡이게 만드는 것은 통과의례입니다. 핵심은 산을 넘어가는 것이고, 이것이 오늘 튜토리얼에서 우리가 이야기할 내용입니다.
1. 메소드는 jQuery 객체를 반환합니다
대부분의 메소드는 jQuery 객체를 반환한다는 점을 기억하는 것이 중요합니다. 이는 매우 유용하며 자주 사용하는 기능을 연결할 수 있습니다.
으아아아jQuery 객체가 항상 반환된다는 것을 알고 있으면 이를 사용하여 중복된 코드를 제거할 수 있습니다. 예를 들어 다음 코드를 고려해 보세요.
으아아아우리가
someDiv요소의 위치를 "캐시"하는 이유는 해당 요소의 DOM을 한 번만 통과해야 하는 횟수를 제한하기 위한 것입니다.
위의 코드는 완벽하지만 동일한 결과를 얻으면서 두 줄을 하나로 쉽게 병합할 수 있습니다.
으아아아
이런 식으로 우리는 여전히 someDiv 元素，但正如我们所知，该方法也返回 jQuery 对象——然后通过 someDiv 요소를 숨기지만, 우리가 알고 있듯이 이 메서드는 jQuery 개체도 반환합니다. 그런 다음 이 개체는
2.
선택기 찾기선택기가 터무니없이 나쁘지 않다면 jQuery는 이를 최대한 최적화하므로 일반적으로 선택기에 대해 너무 걱정할 필요가 없습니다. 그러나 스크립트 성능을 약간 향상시킬 수 있는 몇 가지 개선 사항이 있습니다.
find()
그러한 해결책 중 하나는 가능한 경우
으아아아을 지원하므로 jQuery 없이도 CSS와 유사한 선택기를 전달할 수 있습니다. jQuery 자체도 이 기능을 확인합니다.
QuerySelectorAll최신 최신 브라우저는
그러나 이전 브라우저(예: IE6/IE7)는 지원을 제공하지 않으며 이는 이해할 수 있습니다. 이는 이러한 더 복잡한 선택기가 jQuery의 전체 Sizzle 엔진을 트리거한다는 것을 의미하며, 이는 훌륭하지만 더 많은 오버헤드를 수반합니다.
Sizzle은 내가 결코 이해하지 못할 수도 있는 멋진 코드 모음입니다. 그러나 한 문장에서는 먼저 선택기를 선택기의 각 구성 요소로 구성된 "배열"로 바꿉니다.
으아아아
id그런 다음 오른쪽에서 왼쪽으로 정규식을 사용하여 각 항목을 해독해 보세요. 이는 또한 선택기의 가장 오른쪽 부분이 최대한 구체적이어야 함을 의미합니다(예:
가능한 경우 결론:
- 선택기를 단순하게 유지하세요
-
find() 방법을 활용하세요. 이렇게 하면 Sizzle을 사용하는 대신 브라우저의 기본 기능을 계속 사용할 수 있습니다. - Sizzle을 사용할 때 가능하면 선택기의 가장 오른쪽 부분을 최적화하세요.
맥락?
선택기에 컨텍스트를 추가할 수도 있습니다. 예:
으아아아
someElements 类（它们是 someContainer 的子级）包装所有元素的集合。使用上下文是限制 DOM 遍历的一种有用方法，但在幕后，jQuery 使用 find이 코드는 jQuery가 대신 jQuery에서
으아아아
증명으아아아
3. $(this)남용하지 마세요
다양한 DOM 속성과 기능을 이해하지 못하면 jQuery 객체를 불필요하게 오용하기 쉽습니다. 예:
으아아아
idjQuery 객체에 필요한 유일한 것이 앵커 태그의
으아아아에서 사용해야 합니다.
getAttributejQuery를 통해 항상 액세스해야 하는 세 가지 속성인 "src", "href" 및 "style"이 있습니다. 이러한 속성은 이전 버전의 IE
증명
으아아아
다중 jQuery 객체더 나쁜 것은 DOM을 반복적으로 쿼리하고 여러 jQuery 객체를 생성하는 프로세스입니다.
으아아아
#elem
이 코드가 얼마나 비효율적인지 깨달았기를 바랍니다. 그렇지 않다면 괜찮습니다. 우리는 모두 배우고 있습니다. 대답은 링크를 구현하거나
으아아아
4. ReadyjQuery 약어
method문서가 작업 준비가 되었는지 확인하기 위해 jQuery를 사용하는 것은 매우 간단합니다.
으아아아
그러나 아마도 다르고 더 혼란스러운 래퍼 함수를 접했을 가능성이 높습니다. 🎜
$(function() {
// let's get up in heeya
});
尽管后者的可读性稍差，但上面的两个片段是相同的。不相信我？只需检查 jQuery 源代码即可。
// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
rootjQuery 只是对根 jQuery(document) 的引用。当您将选择器传递给 jQuery 函数时，它将确定您传递的选择器类型：字符串、标记、id、函数等。如果传递了函数，jQuery 将调用其 ready() 方法，并将您的匿名函数作为选择器传递。
5。 保证代码安全
如果开发用于分发的代码，补偿任何可能的名称冲突始终很重要。如果在您的脚本之后导入的某些脚本也具有 $ 函数，会发生什么情况？坏东西！
答案是要么调用 jQuery 的 noConflict()，要么将代码存储在自调用匿名函数中，然后将 jQuery 传递给它。
方法一：无冲突
var j = jQuery.noConflict();
// Now, instead of $, we use j.
j('#someDiv').hide();
// The line below will reference some other library's $ function.
$('someDiv').style.display = 'none';
请小心使用此方法，并在分发代码时尽量不要使用它。这真的会让脚本的用户感到困惑！ :)
方法二：传递jQuery
(function($) {
// Within this function, $ will always refer to jQuery
})(jQuery);
底部的最后一个括号自动调用该函数 - function(){}()。然而，当我们调用该函数时，我们还传递了 jQuery，然后用 $ 表示。
方法3：通过Ready方法传递$
jQuery(document).ready(function($) {
// $ refers to jQuery
});
// $ is either undefined, or refers to some other library's function.
6。 要聪明
请记住 - jQuery 只是 JavaScript。不要假设它有能力弥补你的错误编码。 :)
这意味着，正如我们必须优化 JavaScript for 语句等内容一样，jQuery 的 each 方法也是如此。我们为什么不呢？它只是一个辅助方法，然后在幕后创建 for 语句。
// jQuery's each method source
each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction(object);
if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i++ ], args ) === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
break;
}
}
} else {
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {}
}
}
return object;
}
太糟糕了
someDivs.each(function() {
$('#anotherDiv')[0].innerHTML += $(this).text();
});
- 每次迭代搜索
anotherDiv - 获取innerHTML 属性两次
- 创建一个新的 jQuery 对象，全部用于访问元素的文本。
更好
var someDivs = $('#container').find('.someDivs'),
contents = [];
someDivs.each(function() {
contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );
这样，在 each (for) 方法中，我们执行的唯一任务就是向数组添加一个新键...而不是查询 DOM，两次获取元素的 innerHTML 属性，等等
这篇技巧总体上更多地基于 JavaScript，而不是特定于 jQuery。 重点是要记住 jQuery 并不能弥补糟糕的编码。
文档片段
当我们这样做时，针对此类情况的另一种选择是使用文档片段。
var someUls = $('#container').find('.someUls'),
frag = document.createDocumentFragment(),
li;
someUls.each(function() {
li = document.createElement('li');
li.appendChild( document.createTextNode(this.innerHTML) );
frag.appendChild(li);
});
$('#anotherUl')[0].appendChild( frag );
这里的关键是，有多种方法可以完成这样的简单任务，并且每种方法在浏览器之间都有自己的性能优势。您越坚持使用 jQuery 并学习 JavaScript，您可能还会发现您更频繁地引用 JavaScript 的本机属性和方法。如果是这样，那就太棒了！
jQuery 提供了令人惊叹的抽象级别，您应该利用它，但这并不意味着您被迫使用它的方法。例如，在上面的片段示例中，我们使用 jQuery 的 each 方法。如果您更喜欢使用 for 或 while 语句，那也没关系！
尽管如此，请记住 jQuery 团队已经对该库进行了大量优化。关于 jQuery 的
each()与本机for语句的争论是愚蠢而琐碎的。如果您在项目中使用 jQuery，请使用它们的帮助器方法来节省时间。这就是他们存在的目的！ :)
7。 AJAX 方法
如果您现在才开始深入研究 jQuery，它为我们提供的各种 AJAX 方法可能会让人感到有点畏惧；尽管他们不需要。事实上，它们中的大多数只是简单的辅助方法，直接路由到 $.ajax。
- 获取
- getJSON
- 帖子
- ajax
作为示例，让我们回顾一下 getJSON，它允许我们获取 JSON。
$.getJSON('path/to/json', function(results) {
// callback
// results contains the returned data object
});
在幕后，该方法首先调用 $.get。
getJSON: function( url, data, callback ) {
return jQuery.get(url, data, callback, "json");
}
$.get 然后编译传递的数据，并再次调用“master”（某种意义上的）$.ajax 方法。
get: function( url, data, callback, type ) {
// shift arguments if data argument was omited
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = null;
}
return jQuery.ajax({
type: "GET",
url: url,
data: data,
success: callback,
dataType: type
});
}
最后，$.ajax 执行了大量工作，使我们能够在所有浏览器上成功发出异步请求！
这意味着您也可以直接使用
$.ajax方法来处理您的所有 AJAX 请求。其他方法只是辅助方法，无论如何最终都会执行此操作。所以，如果你愿意的话，就可以去掉中间人。无论如何，这都不是一个重要的问题。
只是花花公子
$.getJSON('path/to/json', function(results) {
// callback
// results contains the returned data object
});
微观上更高效
$.ajax({
type: 'GET',
url : 'path/to/json',
data : yourData,
dataType : 'json',
success : function( results ) {
console.log('success');
})
});
8。 访问本机属性和方法
现在您已经学习了一些 JavaScript，并且已经了解，例如，在锚标记上，您可以直接访问属性值：
var anchor = document.getElementById('someAnchor');
//anchor.id
// anchor.href
// anchor.title
// .etc
唯一的问题是，当您使用 jQuery 引用 DOM 元素时，这似乎不起作用，对吗？当然不是。
不起作用
// Fails
var id = $('#someAnchor').id;
因此，如果您需要访问 href 属性（或任何其他本机属性或方法），您有多种选择。
// 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;
get方法特别有用，因为它可以将 jQuery 集合转换为数组。
9。 使用 PHP 检测 AJAX 请求
当然，对于我们的绝大多数项目，我们不能仅仅依赖 JavaScript 来完成诸如验证或 AJAX 请求之类的事情。当 JavaScript 关闭时会发生什么？正是出于这个原因，一种常见的技术是检测 AJAX 请求是否是使用您选择的服务器端语言发出的。
jQuery 通过在 $.ajax 方法中设置标头，使这变得异常简单。
// Set header so the called script knows that it's an XMLHttpRequest
// Only send the header if it's not a remote XHR
if ( !remote ) {
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}
设置此标头后，我们现在可以使用 PHP（或任何其他语言）检查此标头，并进行相应操作。为此，我们检查 $_SERVER['HTTP_X_REQUESTED_WITH'] 的值。
包装器
function isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}
10。 jQuery 和 $
有没有想过为什么/如何可以互换使用 jQuery 和 $ ？要找到答案，请查看 jQuery 源代码，然后滚动到最底部。在那里，您会看到：
window.jQuery = window.$ = jQuery;
当然，整个 jQuery 脚本都包含在一个自执行函数中，这允许脚本尽可能地限制全局变量的数量。但这也意味着 jQuery 对象在包装匿名函数之外不可用。
为了解决这个问题，jQuery 被暴露给全局 window 对象，并且在此过程中，还会创建一个别名 - $ -。
11。 有条件地加载 jQuery
HTML5 Boilerplate 提供了一个漂亮的单行代码，如果由于某种奇怪的原因您选择的 CDN 出现故障，它将加载 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>
“表述”上面的代码：如果 window.jQuery 未定义，则从 CDN 下载脚本时一定出现问题。在这种情况下，请继续到 && 运算符的右侧，并插入链接到本地版本 jQuery 的脚本。
12。 jQuery 过滤器
高级会员：下载此视频（必须登录）
订阅我们的 YouTube 页面以观看所有视频教程！
<script>
$('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"
</script>
注意：
jQuery.expr[':']只是jQuery.expr.filters的别名。
13。 单一悬停功能
从 jQuery 1.4 开始，我们现在只能将单个函数传递给 hover 方法。以前，in 和 out 方法都是必需的。
之前
$('#someElement').hover(function() {
// mouseover
}, function() {
// mouseout
});
现在
$('#someElement').hover(function() {
// the toggle() method can be used here, if applicable
});
请注意，这不是旧协议与新协议的比较。很多时候，您仍然需要将两个函数传递给 hover，这是完全可以接受的。但是，如果您只需要切换某些元素（或类似的元素），则传递单个匿名函数将节省一些字符左右！
14。 传递属性对象
从 jQuery 1.4 开始，我们现在可以传递一个对象作为 jQuery 函数的第二个参数。当我们需要向 DOM 中插入新元素时，这非常有用。例如：
之前
$('<a />')
.attr({
id : 'someId',
className : 'someClass',
href : 'somePath.html'
});
之后
$('</a>', {
id : 'someId',
className : 'someClass',
href : 'somePath.html'
});
这不仅可以节省一些字符，而且还可以使代码更加简洁。除了元素属性之外，我们甚至可以传递 jQuery 特定的属性和事件，例如 click 或 text。
感谢您的阅读！
위 내용은 기술 향상을 위한 14가지 jQuery 팁, 알림 및 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!