Jquery(进阶)

最新推荐文章于 2021-08-23 11:07:31 发布

xiabe

最新推荐文章于 2021-08-23 11:07:31 发布

阅读量269

点赞数 1

分类专栏： javascript 文章标签： JQuery 前端 javascript

本文链接：https://blog.csdn.net/xiabenshu/article/details/89057138

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JQuery 核心

$ vs $()

到目前为止，我们一直在处理jQuery对象上调用的方法。例如:

$( "h1" ).remove();

大多数jQuery方法都是在jQuery对象上调用的，如上所示;这些方法据说是$.fn命名空间的一部分，或“jQuery原型”，最好被认为是jQuery对象方法。

然而，有几种方法对选择不起作用;这些方法被认为是jQuery名称空间的一部分，最好被认为是核心jQuery方法。

对于新jQuery用户来说，这种区别可能会让他们感到非常困惑。以下是你需要记住的:

对jQuery选择调用的方法位于$.fn中。this 并自动接收和返回所选内容。
$名称空间中的方法通常是实用程序类型的方法，不处理选择;它们不会自动传递任何参数，并且它们的返回值会有所不同。

在一些情况下，对象方法和核心方法具有相同的名称，例如**$.each()**和.each()。在这些情况下，在阅读您正在研究的正确方法的文档时要非常小心。

在本指南中，如果可以在jQuery选择中调用方法，我们将仅通过它的名称来引用它:.each()。如果它是一个实用程序方法——也就是说，一个在选择时不被调用的方法——我们将显式地将它引用为jQuery名称空间中的一个方法**?.each()**。

$( document ).ready()

$(document).ready()中包含的代码只在页面文档对象模型(DOM)准备好执行JavaScript代码时才会运行。包含在 $( window ).on( “load”, function() { … })将在整个页面(图像或iframe)(而不仅仅是DOM)就绪后运行。

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

经验丰富的开发人员有时会将 $(文档) . r e a d y () 简写为$ ()。如果您编写的代码没有jQuery经验的人可能会看到，那么最好使用长表单。

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});

您还可以将一个命名函数传递给$(document).ready()，而不是传递一个匿名函数。

// Passing a named function instead of an anonymous function.
 
function readyFn( jQuery ) {
    // Code to run when the document is ready.
}
 
$( document ).ready( readyFn );
// or:
$( window ).on( "load", readyFn );

下面的示例显示了 $(d o c u m e n t) . r e a d y () 和$ (window)。on(“load”)正在运行。代码试图加载一个网址在>和检查两个事件:

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        console.log( "document loaded" );
    });
 
    $( window ).on( "load", function() {
        console.log( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://techcrunch.com"></iframe>
</body>
</html>

避免跟其他库的冲突

jQuery库及其所有插件都包含在jQuery名称空间中。一般来说，全局对象也存储在jQuery名称空间中，因此您不应该在jQuery和任何其他库(比如prototypejs、MooTools或YUI)之间发生冲突.

尽管如此，有一个警告:默认情况下，jQuery使用 $作为 j Q u e r y 的快捷方式。因此，如果您正在使用另一个使用$ 变量的JavaScript库，则可能会与jQuery发生冲突。为了避免这些冲突，您需要在将jQuery加载到页面之后，以及在尝试在页面中使用jQuery之前，立即将其置于无冲突模式。

使jQuery进入无冲突模式

当您将jQuery置于无冲突模式时，您可以选择分配一个新的变量名来替换$ alias。

<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
 
$j(document).ready(function() {
    $j( "div" ).hide();
});
 
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
    var mainDiv = $( "main" );
}
 
</script>

在上面的代码中， $将恢复到它在原始库中的含义。您仍然可以在应用程序的其余部分中使用完整的函数名 j Q u e r y 以及新的别名$ j。新的别名可以命名为任何您想要的名称:jq、$J、awesomeQuery等。

最后,如果你不想定义另一个替代完整的jQuery函数名(你真的喜欢用美元和不关心美元使用其他库的方法),那么还有另一种方法你可以试一试:只需将美元作为参数传递给您的jQuery文档()时()函数。当您仍然希望获得真正简洁的jQuery代码的好处，但又不想与其他库发生冲突时，这是最常用的方法。

<!-- Another way to put jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
jQuery.noConflict();
 
jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    $( "div" ).hide();
});
 
// The $ variable in the global scope has the prototype.js meaning.
window.onload = function(){
    var mainDiv = $( "main" );
}
 
</script>

这可能是大多数代码的理想解决方案，因为为了实现完全的兼容性，需要更改的代码将更少。

在其他库之前包括jQuery

上面的代码片段依赖于在加载prototype.js之后加载jQuery。如果在其他库之前包含jQuery，那么在使用jQuery时可以使用jQuery，但是 $的含义将在其他库中定义。没有必要通过调用 j Q u e r y . n o C o n f l i c t () 来放弃$ alias。

<!-- Loading jQuery before other libraries. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
 
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
    jQuery( "div" ).hide();
});
 
// Use the $ variable as defined in prototype.js
window.onload = function() {
    var mainDiv = $( "main" );
};
 
</script>

引用jQuery函数的方法摘要

这里是一个方法的概述，你可以参考jQuery函数时，存在另一个库创建冲突的使用$变量:
创建一个新的别名
noconflict()方法返回对jQuery函数的引用，因此可以在任何变量中捕获它:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
// Give $ back to prototype.js; create new alias to jQuery.
var $jq = jQuery.noConflict();
 
</script>

使用立即调用的函数表达式
您可以继续使用标准的 $，方法是将代码封装到立即调用的函数表达式中; 这也是 j Q u e r y 插件创作的一种标准模式，在这种模式下，作者无法知道另一个库是否会接管$ 。有关编写插件的更多信息，请参阅插件一节。

<!-- Using the $ inside an immediately-invoked function expression. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
jQuery.noConflict();
 
(function( $ ) {
    // Your jQuery code here, using the $
})( jQuery );
 
</script>

**注意，**如果使用这种技术，就不能在立即调用的函数中使用prototype.js方法。$将引用jQuery，而不是prototype.js。

使用传递jQuery(document).ready()函数的参数

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
 
jQuery(document).ready(function( $ ) {
    // Your jQuery code here, using $ to refer to jQuery.
});
 
</script>

或者对DOM ready函数使用更简洁的语法:

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
 
jQuery(function($){
    // Your jQuery code here, using the $
});
 
</script>

属性

**attr()**方法同时充当getter和setter。作为setter， .attr()可以接受键和值，也可以接受包含一个或多个键/值对的对象。
.attr()作为setter:

$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
 
$( "a" ).attr({
    title: "all titles are the same too!",
    href: "somethingNew.html"
});

.attr() as a getter:

$( "a" ).attr( "href" ); // Returns the href for the first a element in the document

元素选择

按照元素id选择
$ (" # myId ");//注意，每个页面的id必须是惟一的。

按类名链接选择元素.
$ (".myClass”);

按属性选择元素的链接.
$("input[name = ’ first_name '] ");

链接选择元素的复合CSS选择器.
$("#contents ul.people li" );

用逗号分隔的选择器列表链接选择元素
$ (“div.myClass, ul.people”);

链接伪选择器

$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

注意: 当使用:visible 和 :hidden 伪选择器.
jQuery测试元素的实际可见性，而不是它的CSS可见性或显示属性。
jQuery查看元素在页面上的物理高度和宽度是否都大于零。

但是，这个测试不适用于<tr>元素。对于<tr> jQuery确实检查CSS display属性，如果将display属性设置为none，则考虑隐藏的元素。

没有添加到DOM中的元素将始终被认为是隐藏的，即使影响它们的CSS将使它们可见。请参阅操作元素部分，了解如何创建和向DOM添加元素。

挑选选择器

选择好的选择器是提高JavaScript性能的一种方法。过于具体可能是一件坏事。一个选择器，如##myTable thead tr th.special。如果选择器#myTable th.special是多余的,删除了也会完成这项工作。

我的选择是否包含任何元素?

一旦你做出了选择，你通常会想知道你是否有什么工作要做。一个常见的错误是使用:

// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}

这是行不通的。当使用$()进行选择时，总是返回一个对象，并且对象的值总是为true。即使选择不包含任何元素，if语句中的代码仍然会运行。
确定是否有任何元素的最佳方法是测试选择的.length属性，该属性告诉您选择了多少元素。如果答案是0，.length属性在用作布尔值时将计算为false:

// Testing whether a selection contains elements.
if ( $( "div.foo" ).length ) {
    ...
}

保存选择

jQuery不会为您缓存元素。如果您已经进行了可能需要再次进行的选择，则应该将选择保存到变量中，而不是重复进行选择。

var divs = $( "div" );

一旦选择存储在变量中，就可以像在原始选择中调用jQuery方法一样，对该变量调用jQuery方法。

**选择只获取选择时页面上的元素。**如果稍后将元素添加到页面，则必须重复选择，否则将它们添加到存储在变量中的选择中。当DOM更改时，存储的选择不会神奇地更新。

链接细化和过滤选择

有时候选择的内容比你想要的更多。jQuery提供了几种精炼和过滤选择的方法。

// Refining selections.
$( "div.foo" ).has( "p" );         // div.foo elements that contain <p> tags
$( "h1" ).not( ".bar" );           // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first();              // just the first unordered list item
$( "ul li" ).eq( 5 );              // the sixth

选择表单元素
jQuery提供了几个伪选择器来帮助查找表单中的元素。这些特别有用，因为使用标准CSS选择器很难根据表单元素的状态或类型来区分它们。
:checked
不要与:checkbox，:checked targets复选框混淆，选中复选框，但是请记住，这个选择器也适用于选中的单选按钮和 elements(仅适用于<select>元素，使用:selected选择器):

$( “form :checked” );

:checked伪选择器与复选框、单选按钮和select一起使用时有效。

link :disabled
使用:disabled伪选择器的目标是任何元素与disabled属性:

$( "form :disabled" );

为了使用:disabled获得最佳性能，首先使用标准jQuery选择器选择元素，然后使用.filter(":disabled")，或者在伪选择器前面加上标签名或其他选择器。

link :enabled/input/selected

$( "form :enabled" );
$( "form :input" );
$( "form :selected" );

根据类型选择
jQuery提供伪选择器，根据表单的类型选择特定的元素:
:password
:reset
:radio
:text
:submit
:checkbox
:button
:image
:file

xiabe

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery(进阶)

JQuery 核心$ vs $()到目前为止，我们一直在处理jQuery对象上调用的方法。例如:$( "h1" ).remove();大多数jQuery方法都是在jQuery对象上调用的，如上所示;这些方法据说是$.fn命名空间的一部分，或“jQuery原型”，最好被认为是jQuery对象方法。然而，有几种方法对选择不起作用;这些方法被认为是jQuery名称空间的一部分，最好被认为是核...
复制链接

扫一扫