Автор оригинала: FreeCodeCamp Community Member.
jQuery позволяет легко получить ваш проект и запустить. Хотя в последние годы он выпал из одолжения, он все еще стоит изучить основы, особенно если вы хотите быстрый доступ к своим мощным методам.
Но в то время как jQuery – мощная библиотека, она не может сделать все. Вот где пригодится сплошное понимание ванильного JavaScript.
Скажем, у вас есть проект зрителя Wikipedia, как это:
$("#searchbox").keyup(function(event) {
if(event.keyCode === 13) {
$("#searchbutton").click();
};
});
$("#searchbutton").click(function() {
var searchInput = document.getElementById("searchbox").value;
searchInput = searchInput.toLowerCase();
if(searchInput !== "") {
var myRequest = new XMLHttpRequest();
myRequest.open('GET','https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ searchInput + '&utf8=&format=json&origin=*');
myRequest.onload = function() {
var searchResults = JSON.parse(myRequest.responseText);
$(".resultingarticles").empty();
for(i=0; i<10; i++) {
var articleTitle = searchResults.query.search[i].title;
var articleSnippet = searchResults.query.search[i].snippet;
var articleId = searchResults.query.search[i].pageid;
var articleLink = "https://en.wikipedia.org/?curid=" + articleId;
$(".resultingarticles").append("" + "" + ""+articleTitle+"
" + "" + articleSnippet + "
" + "" + "");
};
};
myRequest.send();
};
});Все работает, как вы ожидаете – вы можете ввести текст в поле поиска, нажмите Enter или кнопку «Поиск», а также посмотреть список статей Wikipedia.
Потому что вы используете Тип = "Поиск" на вашем вход Элемент, браузер Chrome автоматически добавит «X» до конца ввода, если есть текст, а вы наведите курсор на вход. Обратите внимание, что другие браузеры могут обрабатывать Тип = "Поиск" по-другому.
Когда вы нажимаете на «X», текст исчезает.
Но скажем, у вас уже есть список статей, и когда вы очистите текст, вы также хотите очистить населенные статьи:
Оказывается, нажав «X» в поле поиска «поиск» события. jQuery не поддерживает событие «Поиск», поэтому вам придется написать слушатель события в Vanilla JavaScript:
document.getElementById("searchbox").addEventListener("search", function(event) {
$(".resultingarticles").empty();
});Теперь, когда уволено событие поиска, вы можете использовать jQuery для очистки Div элемент со статьями: