jQuery Примитивы

Редакция автор: stain

Подключение библиотеки jQuery.

Производится либо внутри тега head, либо в теле документа, для более быстрой страницы контента, указывается чаще всего перед закрывающим тегом body.

Уменьшение кода на рутинных операциях js.

Заполням контейнер с идентификатором start строкой Go.

JS

var el = document.getElementById("start");
el.innerHTML = "Go";

jQuery
$("#start").html("Go");

Вызов кода на jQuery
$(document).ready(function() { // jQuery code goes here });
Короткая запись $(function() { // jQuery code goes here });

Basic syntax is: $("selector").action()
- The $ accesses jQuery.
- The (selector) finds HTML elements.
- The action() is then performed on the element(s).
$("p").hide() // hides all paragraf elements
jquery-selectorsDom

Метод attr() - Управление содержимым атрибута
We can manipulate attributes assigned to HTML elements easily through jQuery.
href, src, id, class, style are all examples of HTML attributes.
$(function() {var val = $("a").attr("href"); alert(val); }); // покажет путь ссылки в виде alert
Подмена контента выбранного атрибута.
$(function() {$("a").attr("href", "http://www.jquery.com"); });
Метод removeAttr() - Удаление выбранного атрибута из разметки страницы
$("table").removeAttr("border"); // В данном случае мы убираем у тега таблицы, атрибут границы.
The html() and text() methods can be used for all HTML elements that can contain content.
Метод html() - обращаясь к контенту выбранного объекта захватит как контент так и внутренние таги разметки.
$("p").html(); //
Метод text() - обращаясь к контенту выбранного объекта захватит только текст.
$("p").text();
Замена контента
$(function() {$("#test").text("hello!"); });
Метод val() обращается к полям форм
$(function() {alert($("#name").val());}); //alerts "Your Name"

Методы добавление контента к уже существующему без его удаления.
jQuery has methods that are used to add new content to a selected element without deleting the existing content:
После и до содержимого элемента.
append() inserts content at the end of the selected elements.
prepend() inserts content at the beginning of the selected elements.
После и до тага с элементом.
after() inserts content after the selected elements.
before() inserts content before the selected elements.

Сначала присваиваем переменной код вторженца, а затем добавляем его в виде переменной следом за тегом содержащим идентификатор demo

$(function() {var txt = $('').text("Hi");  $("#demo").after(txt);  });

Пока что складывается ощущение, что jQuery все что может это коверкать код js, да может так быстрее писать, но подключать стороннюю библиотеку ради этого, проще просто пользоваться нормальным редактором с автовставкой, а затем если есть желание пропускать код через постобработку. В общем скучно.

Манипуляции с CSS
addClass( ) - Позволяет задать класс тегу или несколько классов через пробел.
$("div").addClass("header");
removeClass() - Удаление классов.
toggleClass() - Если классы есть то удаляются, если классов нет то добавляются.

Если метод html() добавляет код html
то метод css() добавляет код css, Элементарно Ватсон.
$(function() {alert($("p").css("background-color")); $("p").css("background-color", "blue"); });
Вариант с использованием JSON синтаксиса. $("p").css({"color": "red", "font-size": "200%"});
Методы width() и height() измеряются в пикселях, которые не нужно упоминать просто указывайте числовое значение.
Сумма размеров див блока и его паддингов - innerWidth() and innerHeight() methods also include the padding.
Сумма размеров див блока, паддингов и границ - outerWidth() and outerHeight() methods include the padding and borders.
Пример ниже отобразит данные о всех размерах, внутри див блоков.

$(function() {
    var txt = "";
    txt += "width: " + $("div").width() + " ";
    txt += "height: " + $("div").height() + "
";
    txt += "innerWidth: " + $("div").innerWidth() + " ";
    txt += "innerHeight: " + $("div").innerHeight() + "
";
    txt += "outerWidth: " + $("div").outerWidth() + " ";
    txt += "outerHeight: " + $("div").outerHeight();
    
    $("div").html(txt);
});

Снова ДОМ.
An ancestor is a parent, grandparent, great-grandparent, and so on. родители, и пра прародители ...
A descendant is a child, grandchild, great-grandchild, and so on. Дети, внукиЮ правнуки ...
Siblings share the same parent. Братья и сестры.
jquery-selectorsDom

Удаление элементов remove()
The jQuery remove() method removes the selected element(s), as well as its child elements.
Ну очень странное описание, у меня не удалились дочерние элементы, только элемент который я убирал.
$("p").children.remove(); Удаление дочернего элемента параграфа.

Удаление контента empty()

События
Реакция на клик мышкой, запись в объект с идентификатором demo даты вместо контента.
JS
var x = document.getElementById("demo"); x.onclick = function () {document.body.innerHTML = Date();}
jQuery
$("#demo").click(function() {$("body").html(Date());});

Common Events
The following are the most commonly used events:
Mouse Events
click occurs when an element is clicked.
dblclick occurs when an element is double-clicked.
mouseenter occurs when the mouse pointer is over (enters) the selected element.
mouseleave occurs when the mouse pointer leaves the selected element.
mouseover occurs when the mouse pointer is over the selected element.

Keyboard Events
keydown occurs when a keyboard key is pressed down.
keyup occurs when a keyboard key is released.

Form Events:
submit occurs when a form is submitted.
change occurs when the value of an element has been changed.
focus occurs when an element gets focus.
blur occurs when an element loses focus.

Document Events:
ready occurs when the DOM has been loaded.
resize occurs when the browser window changes size.
scroll occurs when the user scrolls in the specified element.

on() используется для назначения следствий на события, можно назначать сразу несколько событий(через пробел) имеющих одно следствие.
$(function() {$( "p" ).on( "click mouseleave", function() {alert("clicked"); }); });
В этом примере при нажатии или убирании курсора происходит одно и тоже действие.

off() Позволяет отключать событие например по условию, иначе какой смысл.
$(function() {$("div").on("click", function() {alert('Hi there!'); }); $("div").off("click"); });

Every event handling function can receive an event object, which contains properties and methods related to the event:
pageX, pageY the mouse position (X & Y coordinates) at the time the event occurred, relative to the top left of the page.
type the type of the event (e.g. "click"). Вывод типа события
which the button or key that was pressed. Номер сработавшей кнопки
data any data that was passed in when the event was bound. Отображает данные.
target the DOM element that initiated the event.
preventDefault() prevent the default action of the event (e.g., following a link).
stopPropagation() Stop the event from bubbling up to other elements.
$(function() { $( "a" ).click(function(event) {alert(event.pageX); event.preventDefault(); }); });
При нажатии на ссылку выводится алерт с текущими координатами оси Х.

trigger() - Засекает событие, вне зависимости где конкретно оно происходит.
The trigger() method cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. Only events in the jQuery event system can be handled.

Создаем список дел.
HTML для наглядности

My To-Do List
        

My To-Do List

    Событие

    $(function() {
      $("#add").on("click", function() {
        //event handler
      });
    });
    По событию запускается обработчик событий
    
    Обработчик события добавления нового пункта.
    
    var val = $("input").val();
    if(val !== '') {
      var elem = $("
  1. ").text(val); $(elem).append(""); $("#mylist").append(elem); $("input").val(""); //clear the input }

    Содержимое поля ввода присваивается переменной
    переменная проверяется на имеющиеся там значения
    за элементом поля создается кнопка X
    в пустой список добавляется подготовленный элемент списка
    а в него добавляется содержимое поля.

    Подключаем обработчик для удаления элемента.

    $(".rem").on("click", function() {
      $(this).parent().remove();
    });

    И теперь весь код

    $(function() {
      $("#add").on("click", function() {
        var val = $("input").val();
        if(val !== '') {
         var elem = $("
  2. ").text(val); $(elem).append(""); $("#mylist").append(elem); $("input").val(""); $(".rem").on("click", function() { $(this).parent().remove(); }); } }); });

    Remember, this is the current object.

    The hide() and show() methods are used to hide and show the selected elements.
    The toggle() method is used to toggle between hiding and showing elements.
    The hide/show/toggle methods can take an optional argument, speed, which specifies the animation speed in milliseconds.
    $(function() {$("p").click(function() {$("div").toggle(1000); }); });
    The hide/show/toggle methods can also take a second optional parameter callback, which is a function to be executed after the animation completes.

    Similar to the hide/show methods, jQuery provides the fadeIn/fadeOut methods, which fade an element in and out of visibility.
    the fadeToggle() method fades in and out. fadeToggle() takes two optional parameters: speed and callback.
    Another method used for fading is fadeTo(), which allows fading to a given opacity (value between 0 and 1). For example: $("div").fadeTo(1500, 0.7);

    The slideUp() and slideDown() methods are used to create a sliding effect on elements. The slideToggle() method switches between the sliding effects and can take two optional parameters: speed and callback.

    The .animate() method lets you animate to a set value, or to a value relative to the current value.
    You need to define the CSS properties to be animated as its parameter in JSON format ("key":"value" pairs).
    $("div").click(function() {$("div").animate({width: '250px'}, 1000); });

    Анимация происходит последовательно.
    You can animate any CSS property using the above mentioned syntax, but there is one important thing to remember: all property names must be camel-cased when used with the animate() method (camelCase is the practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter with the first word in lowercase).
    You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
    It is also possible to define relative values (the value is then relative to the element's current value). This is done by putting += or -= in front of the value:
    $("div").animate({width: '+=250px', height: '+=250px'}, 1000);
    To stop an animation before it is finished, jQuery provides the stop() method.

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.