Как сделать тоже самое на чистом js без jquery?
$("div[some = 'yeah']").val();
$("button[mybutton = 'submit']").on('click', function(){});
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНадо оговориться: код идентичный при условии, что подразумевается один такой элемент.
document.querySelector("div[some = 'yeah']").value;
document.querySelector("button[mybutton = 'submit']").addEventListener('click', function(){});
Полный эквивалент правил:
document.querySelectorAll("div[some = 'yeah']")[0].value;
document.querySelectorAll("button[mybutton = 'submit']")
.forEach( button => {button.addEventListener('click', function(){}});
function(){}
--- не могу внести правку, потому что она менее 6 символов
4 апр 2020 в 20:44
Написано на коленке. Конечно, не нужно создавать такие велосипеды, когда уже есть готовый, лучше продуманный вариант... но прикольно же!)
console.log( $("div[some='yeah']").val() );
$("div[some='yeah']").val("BUBU!");
console.log( $("div[some='yeah']").val() );
$("button[mybutton ='submit']").show().on('click', function() {
console.log( $(this).val() );
});
/*****/
function $(selector) {
return new PseudoJQeryObj(selector); // См. → "Функция - конструктор"
}
function PseudoJQeryObj(selector) {
var isElem = selector instanceof HTMLElement;
this.elem = isElem ? [selector] : document.querySelectorAll(selector);
/***/
this.val = function(str) {
if (typeof str === "undefined") {
var val = this.elem[0].value;
return !val ? "" : (isNaN(val) ? val : Number(val));
// См. → "Логическое НЕ", "Тернарный оператор"
}
for (var i = 0; i < this.elem.length; i++) {
this.elem[i].value = str;
}
return this;
}
/***/
this.on = function(type, func) {
for (var i = 0; i < this.elem.length; i++) {
this.elem[i].addEventListener(type, function(){
func.call(this);
});
}
return this;
}
/***/
this.show = function() {
for (var i = 0; i < this.elem.length; i++) {
this.elem[i].style.display = "block";
}
return this;
}
}
button {
display: none;
margin: 5px;
}
<div some="yeah">yeah...</div>
<button mybutton="submit" value="1">Клик-Тест-1...</button>
<button mybutton="submit" value="2">Клик-Тест-2...</button>