Вы когда-нибудь столкнетесь с немного JavaScript, как $(".cta").click(function(){}) и подумал: “Что $ (' # x') является то, что” Если это выглядит как бред для вас, то, пожалуйста, читайте дальше.Если вы считаете, что фрагмент кода не мог быть реальным, то, пожалуйста, просмотрите некоторые JQuery examples 1 .Они полны таких конструкций .
Эта статья охватывает ключевые понятия, которые underly такие запугивания фрагменты кода, но мы начнем с более например, на основе простого примера анимации квадрат.Вы, вероятно, не требуется, чтобы делать это каждый день, но это делает для краткой и аккуратный демонстрации:
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:"toggle"}).append("hi");
});
});
Мы пойдем в каждом слове и особенности приведенного выше кода, наряду с детальный взгляд на функции JavaScript, объект JQuery и событийно-ориентированный programming.В конце концов, вы не будете, надеюсь, больше не беспокоиться в лице такого непостижимого код .
Что такое $
На первый взгляд, $ Похоже, какой-то особой, сложной функциональностью JavaScript.Это не.Символ доллара не имеет особого значения в JavaScript.В самом деле, $ всего функция.Это альтернативное название для jQuery function 2 .
И jQuery функция Raison d ‘ê Tre очень популярной JQuery library 3 .JQuery является компактным библиотека JavaScript, что утюги из многих раздражающих различий между производителями браузеров и предоставляет множество полезных функций для управления и анимации части веб-страниц.Вы можете включать jQuery функцию (т.е. $) на странице с помощью ссылки копию библиотеки:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
Кроме того, вы можете загрузить свои от website__2 JQuery в | 4 :
5 Загрузка JQuery очень легко .
jQuery функция, как правило, принимает один аргумент, либо selector или ссылки JavaScript, чтобы что-то на странице, например, document .
Селектора просто кусок CSS, часть перед {…}.Таким образом, $("div") такой же, как jQuery("div") и ведет себя очень грубо как следующий CSS, выбрав все <div> метки на текущей странице:
<style>
div {…}
</style>
В начале нашего примера, $(document) передает переменную JavaScript document в jQueryфункция.document переменная устанавливается автоматически в браузере.Это относится к верхней части документ объекта model 6 (DOM).DOM является собственный анализ браузера очередь из HTML на странице, на котором построен функциональность JQuery.Например, JQuery в $("div") делает примерно то же самое, document.getElementsByTagName("div") .
Key Takeaway
Помните, что $ это просто функция, альтернативных и удобнее название jQuery функция .
Dot
The ., которое приходит после $(document) означает богатство функциональных возможностей.Точка используется с объектами JavaScript.В самом простом объект JavaScript является набор свойств.Например:
var digger = new Object();
digger.species = "gerbil";
digger.name = "Digger";
digger.color = "white";
Вдохновения для этого объекта JavaScript .
В этом примере, переменная digger это объект, и мы назначили ее три subvariables: species, name и color.В объектно-ориентированном жаргоне они известны как variables.Все написанное выше можно написать более сжато, как это:
var digger = {species:"gerbil", name:"Digger", color:"white"};
Вы также можете назначить функции, как свойства объекта.Песчанки, как правило, очень тихие грызуны, но иногда они делают пронзительный meeping-то шум.В JavaScript, что может выглядеть так:
function meepMeep(){
alert("meep meep");
}
В JavaScript, границы между переменных, функций и объектов весьма размыты.Таким образом, функция может быть легко присвоено переменной (члена):
digger.speak = meepMeep;
Теперь вы можете вызвать эту функцию, чтобы сделать песчанки говорят:
digger.speak();
В объектно-ориентированном языке, то теперь это член function или method.Методы могут ссылаться на другие методы и переменных членов в пределах того же объекта.Представьте себе, что Digger научился говорить по-английски, что весьма примечательно для песчанок:
function myNameIs(){
alert("Meep! I am a " + this.species);
}
//assign the function
digger.sayMyName = myNameIs;
//call the function
digger.sayMyName();
В | ~ 74 функции, специальная переменная this относится к содержащей объект, и this.species такой же, как digger.species, и имеет значение gerbil.Если вы пытались дозвониться до myNameIs() сама по себе, без объекта, то this будет ссылаться на JavaScript window объекта и this.species будет window.species, который является неопределенным.Страница предупредит “Meep!Я не определено “
Объекты могут также быть использованы в качестве возвращаемых значений для функций.Это удобная функция, которую я использую все время:
function giveMeTheGerbil(){
return digger;
}
Это вернет ссылку на (глобальном) переменной или объекта digger, которые затем можно лечить точно так же, как оригинал digger:
var digger2 = giveMeTheGerbil();
//alerts "Meep! I am a gerbil"
digger2.sayMyName();
Тем не менее, вы можете пропустить посредника переменную и просто позвоните sayMyName непосредственно на возвращенного значения giveMeTheGerbil:
giveMeTheGerbil().sayMyName();
Лишенный внутреннего кода, это же программной структуре, в первыйлиния нашей оригинальной Например:
$(document).ready(…);
Следующий раздел описывает то, что ready на самом деле .
Key Points
Обозначение сокращение как выглядит объект {name:"Digger", species:"gerbil"} .
Ключевое слово this используется в функции прикрепленной к объекту (метод) и относится к объект, содержащий .
Anonymous Functions
В JavaScript есть несколько способов создания функции.Ниже классический способ ( функция declaration 7 ), которые должны быть знакомы любому, кто сделал некоторые программирования:
function meepMeep(){
alert("meep meep");
}
Мы видели выше, что функции могут быть присвоены переменным.Мы создали meepMeep функцию, и присвоили его в digger.speak.В самом деле, функции могут быть созданы анонимно (так называемый выражение функции), без имени вообще, а затем присваивается переменной:
var meepMeep = function(){
alert("meep meep");
};
В JavaScript функции могут быть присвоены переменным и по рукам, как и любой другой переменной.Считайте, что это, скорее бесполезная функция:
function runMe(f){
f();
}
Он имеет один аргумент, который называется f.runMe лечит этот аргумент как функции и запускает его.Таким образом, вы могли бы назвать так:
runMe(meepMeep);
Это просто запустить meepMeep функцию.Это становится более интересным, когда вы даже не удосужились официально назвать meepMeep вообще.Вы можете просто создать его при необходимости и передать его сразу в runMe:
runMe(function(){
alert("meep meep");
});
На самом деле, в любом месте meepMeep может появиться, так что можно анонимная эквивалентны.Возьмите это:
meepMeep();
Вместо этого, вы могли бы поставить анонимную функцию вместо meepMeep, хотя, окружив его в дополнительный набор скобок необходимо:
(function(){
alert("meep meep");
})();
Это результат всех вышеперечисленных способов вызова meepMeep() .
Этот метод часто используется для обеспечения видимости переменной в JavaScript.Вы можете следовать тому, что этот код будет сделать
var x=3;
(function(){
var x=4; console.log("x is " + x);
})();
console.log ("x is " + x);
var Ключевое слово в функции важно здесь.Это объявляет переменную внутри функции.Анонимная функция здесь определяет свою собственную локальную переменную, x, присваивает ему значение 4, а затем выводит его.Из-за var ключевое слово, функция в x остается полностью отделена от var x=3 на предыдущей строке.Таким образом, этот код будет выводить x is 4, а затем x is 3 .
Потому что наша песчанки больше не делать какие-либо пронзительный писк, выше код использует console.log8, а не alert, для вывода его результат.console.log доступен в современных браузерах (другими словами, не в старом Интернет Explorers) и показывает свою продукцию ненавязчиво в браузера Ошибка, Web или JavaScript console 9 .
Анонимные функции являются Следующий фрагмент головоломки.JQuery в ready10 метод, как с выдержкой времени версии runMe функции выше.ready метод ждет, пока DOM не полностью загружены, а затем запускает условиям функции.Таким образом, при document, наконец, ready, после анонимная функция будет работать:
function(){
$("button").click (…)
}
$(document).ready(…) является распространенным способом для программистов выполнять какие-либо наличие только после всех HTML документа была обработана .
Key Takeaway
Анонимные функции являются функциями без имени, как function(){alert(1);}.Они могут быть назначены переменных, переданы в другие функции или запустить немедленно предоставить обзорный .
Метод Chaining
Прежде чем углубиться дальше в примере кода мы должны рассмотреть еще одно понятие, которое часто встречается в JavaScript. Метод chaining 11 ссылается на запущенный несколько функций в ряд.Это на самом деле просто расширение giveMeTheGerbil() вышеприведенном примере:
giveMeTheGerbil().sayMyName();
Давайте пересмотреть функции песчанки, связанных вернуть ссылку на себя .
digger.speak = function(){
alert("meep meep"); return this;
}
digger.sayMyName = function(){
alert("Meep! I am a " + this.species); return this;
}
Эти две функции теперь сделать что-то до digger, а затем вернуться digger.Не сильно отличается, но добавление позволяет цепи функции вместе:
giveMeTheGerbil().speak().sayMyName().speak();
Эта строка кода будет сначала запустить giveMeTheGerbil возвращает ссылку на digger объекта.Теперь, по существу, становится эквивалентной это:
digger.speak().sayMyName().speak();
Далее speak метод из digger пробегов объектов и оповещения meep meep.Это также возвращает ссылку на digger, а затем код становится следующим образом:
digger.sayMyName().speak();
После этого, sayMyName бежит и снова возвращает ссылку на digger, и т.д. …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров