Вы когда-нибудь столкнетесь с немного JavaScript, как $(".cta").click(function(){}) и подумал: “Что $ (' # x') является то, что” Если это выглядит как бред для вас, то, пожалуйста, читайте дальше.Если вы думаете, что фрагмент кода не мог быть реальным, то, пожалуйста, просмотреть некоторые JQuery examples 1 .Они полны таких конструкций .
Эта статья охватывает ключевые понятия, которые лежат в основе таких пугающих фрагменты кода, но мы начнем с более например, на основе простого примера анимации квадрат.Вы, вероятно, не требуется, чтобы делать это каждый день, но это делает для краткой и аккуратный демонстрации:
$(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 в | | __35 4 :
5 Загрузка JQuery очень легко .
jQuery функция, как правило, принимает один аргумент, либо selector или ссылки JavaScript на что-то на странице, например, document .
Селектор просто кусок CSS, часть перед {…}.Так, $("div") такой же, как jQuery("div") и ведет себя очень грубо, как в следующем CSS, выбрав все <div> метки на текущей странице:
<style>
div {…}
</style>
В начале нашего примера, $(document) передает переменную JavaScript document в jQueryфункция.document переменная устанавливается автоматически в браузере.Это относится к верхней части документ объекта model 6 (DOM).ДОМ является собственный анализ браузера всего в HTML на странице, на котором построен функциональность JQuery.Например, JQuery в $("div") делает примерно то же самое, document.getElementsByTagName("div") .
Ключевые 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 68 ~ и |.В объектно-ориентированных жаргоне они известны как variables.Все выше, могут быть написаны более кратко, как это:
var digger = {species:"gerbil", name:"Digger", color:"white"};
Вы также можете назначить функции, как свойства объекта.Песчанки, как правило, очень тихие грызунов, но иногда они делают пронзительный meeping то шум.В JavaScript, которые могут выглядеть следующим образом:
function meepMeep(){
alert("meep meep");
}
В JavaScript, границы между переменных, функций и объектов довольно размыты.Так, функция может легко быть присвоен переменной (члена):
digger.speak = meepMeep;
Теперь вы можете вызвать эту функцию, чтобы сделать песчанки говорят:
digger.speak();
В объектно-ориентированных языком, сейчас это член function или method.Методы могут ссылаться на другие методы и переменных членов в пределах того же объекта.Представьте себе, что Диггер научился говорить по-английски, что весьма примечательно для песчанки:
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 на самом деле .
Ключевые Points
Обозначения сокращение объект выглядит как {name:"Digger", species:"gerbil"} .
Ключевое слово this используется в функции прикрепленной к объекту (метод) и относится к содержащей объект .
Анонимные 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) и показывает свой вывод ненавязчиво вбраузера ошибке, веб-или JavaScript console 9 .
Анонимные функции являются следующая часть головоломки.JQuery в ready10 метод, как с выдержкой времени версии runMe функции выше.ready Метод ждет, пока DOM не полностью загружены, а затем запускает предоставленную функцию.Таким образом, при document, наконец, ready, следующие анонимная функция будет работать:
function(){
$("button").click (…)
}
$(document).ready(…) является распространенным способом для программистов, чтобы выполнить некоторые технологию только после всех HTML документа была обработана .
Ключевые 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();...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров