После эпохи jQuery

внешний интерфейс JavaScript React.js jQuery

(Перевод с паблика: вход в 8:30, авторизован)

предисловие

С появлением MV*-фреймворка и фронт-енда, попрощавшегося с slash-and-burn и приступившего к разработке сегодня, прежде чем мы смогли изучить Angular, Facebook пришел с фреймворком React, и вскоре vue.js вышел на первый план, когда эти Фреймворки были горячими, и различные фреймворки захлестнули нас.Похоже, идея оперирования DOM для написания фронтенда сошла со сцены истории. jQuery, как основная библиотека интерфейса того времени, заставила нас воздать должное jQuery за удобство добавления, удаления, изменения и проверки DOM. jQuery родился для упрощения js, но умер из-за упрощения js. Прошло 11 лет с тех пор, как была выпущена первая версия jQuery. Спустя годы и в эпоху после jQuery, что нам нужно делать?

  Первая версия jQuery появилась в 2006 г. В начале jQuery создавался для двух целей: во-первых, он упрощал операции с DOM, а во-вторых, уменьшал кросс-браузерные проблемы во время разработки.

   Его основатель, Джон Резиг, добавил комментарии к этим кодам.Ниже указан адрес первой версии jQuery, вы можете получить исходный код первой версии.Genius.IT/Джон Ре Четыре. Из…

jQuery — это здорово, но при современном развитии технологий нам больше не нужна совместимость с IE6 и IE7, многие проблемы совместимости были решены браузерами, поэтому правильно удалить jQuery из практики вашего веб-сайта. И js теперь более лаконичен, для многих DOM-операций писать на нативном js будет очень лаконично.

Беглый взгляд на jQuery

1. После загрузки документа выполните:

$(document).ready(function(){})
$(function(){})

2. привязка событий jQuery
on,bind,live,delegate

3. JQuery CRUD

Увеличивать:
append()- вставить содержимое в конец выбранного элемента
prepend()- вставить содержимое в начало выбранного элемента
after()- вставить содержимое после выбранного элемента
appendTo()- Добавляет все соответствующие элементы к указанному набору элементов элемента.

удалять:
remove()- удалить выбранный элемент (и его дочерние элементы)

$("p").remove(".italic");

empty()- Удалить дочерние элементы из выбранных элементов

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

Исправлять:
установить содержание-text(),html()так же какval()
text()- Установить или вернуть текстовое содержимое выбранного элемента

$("#test1").text("Hello world!");

html()- Установить или вернуть содержимое выбранного элемента (включая теги HTML)

$("#test2").html("Hello world!");

val()- Установить или вернуть значение поля формы

$("#test3").val("Dolly Duck");

установить свойства -attr()
jQuery attr()Методы также используются для установки/изменения значений свойств.
attr устанавливает несколько значений

$("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
});

Получать:
получить контент -text(),html()так же какval()жирный текст
text()- Установить или вернуть текстовое содержимое выбранного элемента
html()- Установить или вернуть содержимое выбранного элемента (включая теги HTML)
val()- Установить или вернуть значение поля формы

получить атрибут -attr()
Метод jQuery attr() используется для получения значения атрибута

$("#w3s").attr("href")

Находить:
1. Базовый фильтр:
a) :first, выберите первый элемент, не забывайте, что он тоже находится в наборе! Потому что JQuery — это набор объектов DOM. Например, "$("tr:first")" возвращает первый элемент tr из всех элементов tr, который все еще хранится в коллекции.

b) :lastдля выбора последнего элемента. Например: "$("tr:last")" возвращает последний элемент tr из всех элементов tr, который все еще хранится в коллекции.

c):even,:oddфильтр четности

d):notВыбрать все несоответствующие элементы

e):eqвыбирает элемент, индекс которого соответствует

2. Фильтр дочерних элементов
:first-child(:last-child) выбирает первый (последний) дочерний элемент среди всех родительских элементов.
:first-of-type(:last-of-type) выбирает все первые (последние) одноуровневые элементы с одинаковым именем элемента
:nth-child(n)Выберите n-й дочерний элемент всех их родительских элементов.
:nth-last-child(n)Выбирает все n-е дочерние элементы своего родительского элемента. Подсчет начинается с последнего элемента к первому.
:nth-of-type(n)Выбор относится под родительским элементом и дочерним элементом того же тегового имени N-го.
find(selector)Найти всех потомков этого узла
children(selector)Найти все дочерние узлы, но этот метод будет возвращать только прямые дочерние узлы, а не все дочерние узлы

3. Фильтр родительского элемента
parent(selector)Найдите родительский элемент, вы можете передать селектор для фильтрации (то же самое ниже)
parents(selector)Найти все узлы-предки

4. Фильтр родственных элементов
siblings()Найти все одноуровневые узлы этого узла, независимо от передней и задней
prev()Найдите предыдущего брата этого узла
prevAll()Найти все узлы до этого узла
next()Найдите следующего брата этого узла
nextAll()Найти все узлы после этого узла

Удалить DOM-зависимости

Как удалить зависимости jQuery в проекте и как использовать нативные js вместо методов jQuery?
1. Найдите DOM
getElementById(): поиск элементов по идентификатору, самый быстрый способ доступа к модели DOM, поддерживается большинством браузеров.
getElementsByClassName(): найти элементы по классу
Примечание. Вышеуказанные два метода являются быстрыми, но имеют ограниченный эффект из-за ограничения выбора элементов только по имени класса.

//polyfill，实现getElementsByClassName
function getElementsByClassName(className) {
    var all = document.all ? document.all : document.getElementsByTagName('*');
    var elements = new Array();
    for (var e = 0; e < all.length; e++) {
        if (all[e].className == className) {
            elements[elements.length] = all[e];
            break;
        }
    }
    return elements;
}

querySelector()а такжеquerySelectorAll(): Соответствует первому дочернему элементу (всем элементам) указанного элемента селектора CSS.
Примечание:querySelectorAllПолучается массив классов, который можно получить с помощьюArray.prototype.slice.call()Преобразует массив, подобный массиву, в массив.

// jquery选择器部分实现，container参数可选，获取全部符合的元素
function $(selector, container) {
  return (container || document).querySelectorAll(selector);
}
// 获取一个符合的元素
function $one(selector, container) {
  return (container || document).querySelector(selector);
}

getElementsByTagName: поиск элементов по имени тега, безопасный и быстрый метод в разных браузерах и получение массива классов.

2. Найдите обход
Получить родительский элемент -parentNode
Получить элемент подкласса -childNode,firstChild,lastChild
Получить родственный элемент -nextSibling,previousSibling, получить только одно совпадение

//获取全部的同级元素
function getSiblings(el, filter) {
    var siblings = [];
    el = el.parentNode.firstChild;
    do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
    return siblings;
}

Элемент-предок, соответствующий определенному селектору и ближайший к текущему элементу.closest()[Функция в эксперименте, некоторые браузеры не совместимы]

// polyfill，不兼容浏览器的实现方法
this.Element && function(ElementPrototype) {
    ElementPrototype.closest = ElementPrototype.closest ||
        function(selector) {
            var el = this;
            while (el.matches && !el.matches(selector)) el = el.parentNode;
            return el.matches ? el : null;
        }
}(Element.prototype);

matches(): если элемент будет выбран указанной строкой селектора,Element.matches()метод возвращаетtrue; иначе возвратfalse.

//polyfill
if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;           
        };
}

3. Манипуляции с DOM
Создать DOM-createElement
заменить ДОМ-replaceChild
Удалить DOM (удалить родителя элемента из DOM, оставив содержимое элемента как есть)

/*
 *删除element，但是保留element里面的子元素的做法
 */
var element = document.querySelector('.container');
// 获取元素的父元素
var parent = element.parentNode;
// 遍历将所有子元素从这个元素中移出去
while (element.firstChild) parent.insertBefore(element.firstChild, element);
// 删除这个元素
parent.removeChild(element);
清空元素的内容-DOM中删除元素的所有子节点。
var el = document.querySelector('div');
//通过设置innerHTML为空清空所有子节点
el.innerHTML = '';
删除DOM-removeChild方法从DOM中删除一个子节点。返回删除的节点。
//从parent中删除child，函数的返回值也是child的引用
parent.removeChild(child);
插入DOM-insertBefore、appendChild
//insertBefore，在parent节点中将child节点插入到node1之前
parent.insertBefore(child, node1);
//appendChild，将child节点插入到parent的最尾部
parent.appendChild(child)

Получить текстовое содержимое элемента -textContent,innerText(IE8)

let node = document.querySelector('container');
let text = node.textContent || node.innerText;

Получить/установить HTML-содержимое элемента -innerHTMLАтрибуты
Скопируйте текущий узел (или скопируйте текущий узел и все его потомки) -cloneNode()

4. Манипуляции с атрибутами — функции для получения и установки DOM-атрибутов элемента.

Установка, получение и удаление свойств элемента DOM
Собственный JavaScript всегда может напрямую обращаться к свойствам элемента, например:href,title,alt,value, чтобы удалить эти свойства, вы можете использоватьdeleteключевые слова

var node = document.querySelector('selector');
//设置属性property
node.property = ''
//使用delete删除property属性
delete node.property;
添加，删除和测试class
//判断node是否有className
function hasClass(node, className) {
    return node.classList ?
        node.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(node.className);
}
//添加class
function addClass(node, className) {
    if (node.classList) {
        node.classList.add(className);
    }
    else if (!hasClass(node, className)) {
        node.className += ' ' + className;
    }
}
//移除class
function removeClass(node, className) {
    if (node.classList) {
        node.classList.remove(className);
    }
    else {
        node.className = node.className.replace(new RegExp('\\b' + className + '\\b', 'g'), '');
    }
}

Получить, установить и удалить свойства -getAttribute,setAttribute,removeAttribute

let node = document.querySelector('selector');
//在node上设置myProp属性值为mydata
node.setAttribute('myProp', 'mydata');
//获取myProp属性
console.log(node.getAttribute('myProp'));
//删除myProp属性
node.removeAttribute('myProp');

5. Получите стиль набора элемента

стиль получить-getComputedStyle(Ниже IE9:currentStyle)

var node = document.querySelector('selector');
// IE上使用currentStyle
var style = window.getComputedStyle ? getComputedStyle(node, null) : node.currentStyle;

настройки стиля-style,cssText

function setCss(node, styles) {
    for (var property in styles){
        node.style[property] = styles[property];
    }
}
//使用cssText能够同时设置多个样式
node.style.cssText += 'color:red;'

Различные локации получаются следующим образом:
Получить и установить положение прокрутки элемента -scrollTop,scrollLeft
Получить позицию смещения элемента относительно его родительского элемента -offsetLeft,offsetTop
Получить положение элемента относительно документа -getBoundingClientRect

function offset(node) {
  let rect = node.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

Получить ширину и высоту элемента - согласно блочной модели элемент содержитmargin,border,padding,content(width+height)
Получатьcontent+padding+border:offsetWidth/offsetHeight
Получатьcontent+padding:clientWidth/clientHeight
Получатьmargin,border,paddingЗначение может быть передано черезgetComputedStyle
Получите ширину окна:window.innerWidth,window.innerHeight
Получите ширину и высоту документа:document.documentElement.clientWidth/Height,

6. Родной аякс
getзапрос иpostпросить

function getRequest(url, success) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
        if (xhr.readyState > 3 && xhr.status == 200) success(xhr.responseText);
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send();
    return xhr;
}
function postRequest(url, data, success) {
    var params = typeof data == 'string' ? data : Object.keys(data).map(
        function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
    ).join('&');
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open('POST', url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(params);
    return xhr;
}

загрузить js асинхронно,asyncилиdeferКлючевые слова также могут быть асинхронными.

//1.通过动态插入script标签异步加载
let scriptNode = document.createElement('script'),
  htmlNode = document.getElementsByTagName('script')[0];
scriptNode.src = url;
scriptNode.parentNode.insertBefore(scriptNode, htmlNode);
//2.通过async和defer属性来异步加载
<script src="" async defer></script>

7. Нативные события
Перестаньте булькать:

window.event? window.event.cancelBubble = true : e.stopPropagation();

Блокировать события по умолчанию:

window.event? window.event.returnValue = false : e.preventDefault();

Получить щелчки клавиатуры:

var key = window.event ? event.keyCode : event.which;
console.log(key);

Получить положение щелчка мыши:

function handler(event) {
    event = event || window.event;
    let pageX = event.pageX;
    let pageY = event.pageY;
    // IE 8
    if (pageX === undefined) {
        pageX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        pageY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    return {
        pageX:pageX,
        pageY:pageY
    }
}

Привязка и отвязка событий:

//添加事件
function addEvent(node, type, handler) {
    if (node.attachEvent) {
        node.attachEvent('on'+type, handler);
    } else {
        node.addEventListener(type, handler);
    }
}
//解除绑定
function removeEvent(node, type, handler) {
    if (node.detachEvent) {
        node.detachEvent('on'+type, handler);
    } else {
        node.removeEventListener(type, handler);
    }
}

Событие загрузки документа:

//对应于$(document).ready()的原生实现
document.addEventListener('DOMContentLoaded', function(){});

(конец)

​
Категории