* Авторизация
* Регистрация
Форум

Форум

Форумы|Поиск по Форуму
romanvht (8 Окт 2018 в 02:47)
 Бродяга   
Wap-Мастер > PHP/MySQL/(x)HTML/JS > Почему стоит отказаться от jQuery в пользу нативного JS?
Еще несколько решений на JS, заменяющих jQuery:



$(document).ready():

document.addEventListener("DOMContentLoaded", function(event) {

// Code

});



Вывод ответа запроса в HTML (ajax load):

function load_get(url, IDel, sync){

var xhr = new XMLHttpRequest();

xhr.open('GET', url, sync);

xhr.onreadystatechange = function() {

if (xhr.readyState != 4) return;

if (xhr.status != 200) {

console.log('Ошибка при отправке запроса: ' + xhr.status + ': ' + xhr.statusText);

} else {

document.getElementById(IDel).innerHTML = xhr.responseText;

}

}

xhr.send(null);

}

//load_get('file.php', 'element' - ID элемента, true(Асинхронно - true или синхронно - false));



Отправка запроса (ajax post):

function send_post(url, data, sync){

var xhr = new XMLHttpRequest();

var result = '';

xhr.open('POST', url, sync);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

for (key in data) { 

result += key+"="+data[key]+"&";

}

xhr.onreadystatechange = function() {

if (xhr.readyState != 4) return;

if (xhr.status != 200){

console.log('Ошибка при отправке запроса: ' + xhr.status + ': ' + xhr.statusText);

}

}

xhr.send(result);

}  

//send_post("post.php", {key: value(формат JSON)}, true(Асинхронно - true или синхронно - false));



jQuery.on("click"...:



document.querySelector('.element').addEventListener("click", function() {

// Code

});



Выбрать все эллементы с классом block и произвести над ними действие:



var blocks = document.querySelectorAll('.block');

for (var i = 0; i < blocks.length; i++) {

blocks[i].innerHTML = "Блок: "+i;

}



Один из вариантов, как можно реализовать анимацию на JS+CSS:



//JS

window.onload = function () {

var preloader = document.getElementById('p_prldr');

preloader.classList.add('fadeout');

setTimeout(function(){

preloader.parentNode.removeChild(preloader);

}, 200);

};



//CSS

@keyframes fadeOut {

0% { opacity: 1; }

50% { opacity: .5;} 

100% { opacity: 0;} 

}

.fadeout {

-webkit-animation: fadeOut 200ms ease;

animation: fadeOut 200ms ease;

-webkit-animation-fill-mode: both;

animation-fill-mode: both; 

}
romanvht (8 Окт 2018 в 02:14)
 Бродяга   
Wap-Мастер > PHP/MySQL/(x)HTML/JS > Почему стоит отказаться от jQuery в пользу нативного JS?
jQuery вошёл в число "нужных библиотек" в конце 2007 года. В те времена не было единого способа управлять эллементами DOM с помощью CSS-селектора, не было стандартного способа управлять анимацией, а интерфейс XHR, как и многие другие интерфейсы, работал далеко не в каждом браузере.

Отдако, с развитием нативного JS, с развитием браузеров, стал актуален вопрос: "А нужны ли теперь костыли?"
В этом мы сейчас и разберемся.

Если сравнивать возможности jQuery и JS, то:
1. $(selector) можно заменить на querySelectorAll(), document.querySelector();
2. Переключение CSS-классов теперь можно осуществить с помощью element.classList;
3. CSS теперь поддерживает анимацию, а не в JavaScript - скрипач не нужен;
4. ajax можно заменить интерфейсом XHR (XMLHttpRequest);
5. Костыли jQuery уже морально устаревают, и чем дальше эволюционирует JS, тем сильнее устаревает jQuery.

А какие же аналоги есть JS, к методам jQuery?
Ответ - ко всем методам есть аналог, либо теперь JS позволяет их написать.
Несколько примеров нативных аналогов:




- Поиск по селектору



// jQuery

var els = $('.el');



// Native

var els = document.querySelectorAll('.el');



- Создание элемента



// jQuery

var newEl = $('<div>');



// Native

var newEl = document.createElement('div');



- on



// jQuery

$('.el').on('event', function() {



});



// Native

[].forEach.call(document.querySelectorAll('.el'), function (el) {

el.addEventListener('event', function() {



}, false);

});



- html



//jQuery

$('.el’).html();



// Native

document.querySelector('.el’).innerHTML;



- attr



// jQuery

$('.el').filter(':first').attr('key', 'value');

$('.el').filter(':first').attr('key');



// Native

document.querySelector('.el').setAttribute('key', 'value');

document.querySelector('.el').getAttribute('key');



- offset



// jQuery

$(‘.el’).offset();



// Native

document.querySelector('.el').getBoundingClientRect();



- addClass/removeClass/toggleClass



// jQuery

$('.el').addClass('class');

$('.el').removeClass('class');

$('.el').toggleClass('class');



// Native

document.querySelector('.el').classList.add('class');

document.querySelector('.el').classList.remove('class');

document.querySelector('.el').classList.toggle('class');



- append



// jQuery

$('.el').append($('<div/>'));



// Native

document.querySelector('.el').appendChild(document.createElement('div'));



- clone



// jQuery

var clonedEl = $('.el').clone();



// Native

var clonedEl = document.querySelector('.el').cloneNode(true);



- remove



// jQuery

$('.el').remove();



// Native

remove('.el');



function remove(el) {

var toRemove = document.querySelector(el);

toRemove.parentNode.removeChild(toRemove);

}



- empty



// jQuery

$("#container").empty();



// Native

document.getElementById("container").innerHTML = null;

// или

var c = document.getElementById("container");

while (c.lastChild) c.removeChild(c.lastChild);



- parent



// jQuery

$('.el').parent();



// Native

document.querySelector('.el').parentNode;



- prev/next



// jQuery

$('.el').prev();

$('.el').next();



// Native

document.querySelector('.el').previousElementSibling;

document.querySelector('.el').nextElementSibling;



- post/get



// jQuery

$.get('url', function (data) {



});

$.post('url', {data: data}, function (data) {



});



// Native



// get

var xhr = new XMLHttpRequest();



xhr.open('GET', url);

xhr.onreadystatechange = function (data) {



}

xhr.send();



// post

var xhr = new XMLHttpRequest()



xhr.open('POST', url);

xhr.onreadystatechange = function (data) {



}

xhr.send({data: data});
՞-՞ ❤✡☣тęмңőé⚠ (20 Авг. 2018 в 14:54)
 Бродяга   
Wap-Мастер > Графика/Дизайн > Дешевое Супер лого!
Делаю, красивые логотипы, на заказ, от 2 до 10руб, оплата на киви/яндекс.деньги! Могу от jpg, jpeg, png, gif до css, html, js. Писать в тему, или лс. Ожидаю заказов.
Rostik_qq (20 Авг. 2018 в 13:40)
 Бродяга   
Конструктор > Создание и Редактирование сайтов > Не меняется стиль сайта
Салют!
Вот такая проблемка, не меняется стиль сайта. Я меня файл styles.css на новый, и ничего не меняется
nefakt (15 Авг. 2018 в 18:25)
 Бродяга   
Wap-Мастер > Обучение/Вопросы новичков > Помогу новичкам!
Хаотик, Та это раньше стояло auto смотрел как с пк будет
css не мгновенно же встаёт
С этим хер с ним.
Вот жопа... Не могу понять как застолбить по центру другие страницы.
Если ставлю по центру, то идёт разнобой.

Так же счас начал собирать локацию "пещеры". Но она ведь 100% так же с краю встанет
Хаотик (15 Авг. 2018 в 17:37)
    
Wap-Мастер > Обучение/Вопросы новичков > Помогу новичкам!
nefakt, Та пропиши прост в css body это max-width: 450px; и все будет норм
SLenK (10 Авг. 2018 в 21:06)
 Бродяга   
Wap-Мастер > Обучение/Вопросы новичков > Помогу новичкам!
Хаотик, html, css, и немного php, js
Romanko (31 Июля 2018 в 10:53)
 Бродяга   
1WM.SU > Предложения > Делаю копии css
mayk, я только делаю подобные css
Romanko (30 Июля 2018 в 23:15)
 Бродяга   
1WM.SU > Предложения > Делаю копии css
Кидайте ссылки сайтов 1WM.SU и я кинув вам CSS этого сайта
-=КАИНСК=- (19 Июля 2018 в 08:11)
 Злой админ   
Общение > Общение/Флуд/Оффтоп > Слив почти всех курсов Geekbrains
1.Профессия Веб-разработчик
- Скачать: https://cloud.mail.ru/public/5Vv4/HTzot3v2h
2. HTML5 и CSS3 Современные средства Web-разработки
- Скачать: https://cloud.mail.ru/public/5Ct7/12mAncGct
пароль: ghj$z#x8dujmf
3. Профессия Верстальщик
- Скачать: https://cloud.mail.ru/public/4VnFu6YQMQKv/geek1.rar
пароль: v9utq9c78=qv4q3t
4. WordPress для профессионалов.
- Скачать: https://cloud.mail.ru/public/6Ukd/ZERReahyn/
5. Разработка ПО по-взрослому.
- Скачать: https://cloud.mail.ru/public/0a298a94d1e3/[Geekbrains..
6. YII2 framework Профессиональная разработка на веб
- Скачать: https://cloud.mail.ru/public/FXB5/KDLRye9oC
7. Программист Android
- Скачать: https://cloud.mail.ru/public/M2F8/nGRCCoETn
8. Безопасность в сети. Методы взлома и защиты
- Скачать: https://mega.nz/#!94l2kbLS!B-PiBnPOyI9xypx8p-..
9. Программист-карьерист
- Скачать: https://cloud.mail.ru/public/k9n8/DqLnew349
10. SEO. Оптимизация и продвижение сайтов
- Скачать: https://yadi.sk/d/UK56kCcV33VR6v
11. Java. Практическое применение
- Скачать: https://cloud.mail.ru/public/8oYS/VRYCLLr56
12. 1С-Битрикс: Управление сайтом
- Скачать: https://cloud.mail.ru/public/GiSb/HSK7r8Toq
13. FrontEnd программист
- Скачать: https://cloud.mail.ru/public/5opN/VtFWEHKgj
14. Работа программиста. Чему не учат в университете
- Скачать: https://goo.gl/ze4ByD
Введите текст, который Вы хотите найти

Поиск в:
Названиях тем Сообщениях

Последние запросы:
it
css
it
спец теги
боты
Форум
Язык: Русский / English / Все языки
[Gzip: 74.4%|0.2022 сек.]
© 1WM.SU 2015 г by -=ШАХТЕР=-
Портал дизайнеров
Социальная сеть
Место свободно