sty*_*erg 4 javascript syntax jquery
我已经阅读了很多关于jQuery及其语法的文章.但是我还没有完全理解它的语法,我真的希望对它有更好更深入的理解.
许多文章未能指出简单的语法规则(以及它们所必需的).
截至目前,我遇到了语法理解问题:
我的HTML:
<body>
<a href="http://www.jquery.com" title="anchor1">jQuery.com</a>
<a href="http://www.jquery.com" title="anchor2">jQuery.com</a>
<a href="http://www.jquery.com" title="anchor3">jQuery.com</a>
<!-- JQUERY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function ($) {
// EXAMPLE 1
$("a").each(function () {
console.log(this.title);
});
})(jQuery); // ... everything works fine.
(function ($) {
// EXAMPLE 2
$("a").each(function () {
console.log(this.title);
});
}); // ... missing (jQuery). Why isn't this working?
$(function () { // ... notice the $ at the beginning.
// EXAMPLE 3
$("a").each(function () {
console.log(this.title);
});
}); // ... missing (jQuery). Why IS this working?
// EXAMPLE 4
$("a").each(function () {
console.log(this.title);
}); // ... everything works fine.
</script>
</body>
我将澄清我如何理解代码,如果你以非常基本的方式回答我,我将非常感激.请指出我所有的误解!
到目前为止我的理解和问题:
示例1:我创建了一个匿名的JavaScript函数.此功能在浏览器读取它的那一刻正确执行.我传递了jQuery-Object(带($)但我不知道为什么这在那一点很重要).从现在开始我的函数'讲'jQuery(它理解它的语法 - 我假设).在我的JavaScript函数的最后,我再次传递jQuery对象(但为什么这是必要的？).请赐教.
示例2:我在最后没有(jQuery)的情况下尝试了相同的功能.现在它不起作用.我明白缺少什么.但为什么(jQuery)最终如此重要？
示例3:现在我用$启动了我的Javascript函数,我假设从现在起我的整个函数都是在jQuery对象中的WRAPPED.在这个jQuery-object中,我的函数理解jQuery语法.最后,需要NO(jQuery).
例4:这里我没有构建JavaScript函数.我只是使用jQuery来选择并返回("a").此代码在浏览器读取的第二个代码中执行.无需等待文件准备就绪.
我的问题基本上是:
在例1中,为什么($)在开始时和(jQuery)在最后是必要的？什么目的？
我真的很感激更长的答案,我可以更深入地理解"正确阅读jQuery语法",并谈论jQuery语法及其需要.谢谢.
我创建了一个匿名的JavaScript函数.此功能在浏览器读取它的那一刻正确执行.
不完全的.您创建一个函数表达式.
function () { }
然后你跟着它,()稍后调用它.
你可以这样做:
var myfunction = function ($) { ... };
myfunction(jQuery);
我传递了jQuery-Object(带($)但我不知道为什么这在那一点很重要).
不,您正在定义一个功能.它接受一个参数,其值被赋值给一个名为的局部变量$.
从现在开始我的函数'讲'jQuery(它理解它的语法 - 我假设).
语法属于JavaScript,而不是jQuery.
在我的JavaScript函数的最后,我再次传递jQuery对象(但为什么这是必要的？).请赐教.
您是第一次传递jQuery对象.当你调用它时,它是你传递给函数的参数.jQuery(jQuery对象)的值被赋给局部$变量.
这用于两个目的:
$变量,而不必担心它被Prototype JS,Mootools或其他任何认为使用泛型$变量名称作为一个好主意的库所覆盖.我在最后没有使用(jQuery)尝试相同的功能.现在它不起作用.我明白缺少什么.但为什么(jQuery)最终如此重要？
这()很重要,因为没有它们你就不会调用这个函数.
这jQuery很重要,因为否则$会undefined在函数内.
现在我用$启动了我的Javascript函数
在这里$(),您使用函数表达式作为参数调用函数.
$ 是一个可怕的重载函数,它根据您传递的参数类型执行许多不同的操作.
如果您传递一个函数,那么它将该函数指定为文档ready事件处理程序.
当DOM完成加载时,将触发该事件并调用该函数.
在这里,我没有构建JavaScript函数.我只是使用jQuery来选择并返回("a").此代码在浏览器读取的第二个代码中执行.无需等待文件准备就绪.
是
首先,没有"jQuery语法".jQuery是一个用JavaScript编写的库,因此语法是JavaScript.
示例1:我创建了一个匿名JavaScript函数.此功能在浏览器读取它的那一刻正确执行.我传递了jQuery-Object(带($)但我不知道为什么这在那一点很重要).从现在开始我的函数'讲'jQuery(它理解它的语法 - 我假设).在我的JavaScript函数的最后,我再次传递jQuery对象(但为什么这是必要的？).请赐教.
你似乎知道函数和参数是如何工作的.所以看看你的代码:
(function ($) {
// EXAMPLE 1
$("a").each(function () {
console.log(this.title);
});
})(jQuery);
您定义了一个带有一个参数的匿名函数:一个名为的变量$,您在语句中使用该变量$("a").然后你调用你的匿名函数并将它传递给jQuery对象,所以在函数内部,$ === jQuery.
示例2:我在最后没有(jQuery)的情况下尝试了相同的功能.现在它不起作用.我明白缺少什么.但为什么(jQuery)最终如此重要？
()最后,你甚至没有调用你的功能.您只需定义它然后丢失它,因为您没有将它分配给变量.(),它将无法工作,因为函数参数$将是未定义的并覆盖global $(window.$).但是,如果您将该函数声明为function(),我认为它会起作用,因为它会$引用window.$.
示例3:现在我用$启动了我的Javascript函数,我假设从现在起我的整个函数都是在jQuery对象中的WRAPPED.在这个jQuery-object中,我的函数理解jQuery语法.最后,需要NO(jQuery).
现在你$用一个参数调用函数:你的匿名函数.
例4:这里我没有构建JavaScript函数.我只是使用jQuery来选择并返回("a").此代码在浏览器读取的第二个代码中执行.无需等待文件准备就绪.
是的,你构建一个函数,并将它作为参数传递给返回each()的对象的函数$("a").
我的问题基本上是:
在例1中,为什么($)在开始时和(jQuery)在最后是必要的？什么目的？
函数参数的目的是什么？
但你似乎并不理解:$只是一个变量(或者你想要的函数,但JS函数是变量).
你的问题的解决方案归结为理解JavaScript中的闭包......而不是jQuery - jQuery只是使用闭包.
使用闭包,您可以对内部的内容进行范围调整,并将参数传递给该闭包,以便在其中使用.
对于您的示例2,如果您将jQuery传递给闭包,它将正常工作.喜欢:
(function ($)
{
$("a").each(function () {
console.log(this.title);
});
})(jQuery); // arguments passed in here
因为你最后没有传入jQuery,所以参数$是未定义的,所以在这种情况下无法调用$('a').以我改变的方式编写时,jQuery被赋值给$参数,该参数可用于闭包内的代码.
类似地,对于您的示例3,您没有传入jQuery,并且您$的闭包中也没有变量,所以它不起作用.请注意,您可以将其更改为(仅用于说明目的):
(function (thisIsJquery)
{
thisIsJquery("a").each(function () {
console.log(this.title);
});
})(jQuery);
现在jQuery被赋值给参数thisIsJquery,它在闭包中可用.
至于你的例子4,$被定义在它所定义的闭包内(而不是其中的另一个闭包),所以它很容易使用.
闭包是隐藏实现并提供private在JavaScript中创建内容的一种很好的方法.
进一步阅读:
http://www.w3schools.com/js/js_function_closures.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
| 归档时间： |
|
| 查看次数： |
6661 次 |
| 最近记录： |