0

Как сделать тоже самое на чистом js без jquery?

$("div[some = 'yeah']").val();
$("button[mybutton = 'submit']").on('click', function(){});

2 ответа 2

2

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

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(){}});
2
  • function(){} --- не могу внести правку, потому что она менее 6 символов 4 апр 2020 в 20:44
  • Спасибо, большое
    – Leonid
    4 апр 2020 в 20:44
1

Написано на коленке. Конечно, не нужно создавать такие велосипеды, когда уже есть готовый, лучше продуманный вариант... но прикольно же!)

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>

3
  • Интересно, как он раньше работал, когда ещё byClassName не было, не то что querySelector...
    – Leonid
    4 апр 2020 в 23:46
  • @Leonid, byClassName всегда было
    – Grundy
    4 апр 2020 в 23:55
  • getElementByClassName реализован с IE9+, FF3+, Safari3.1... То есть 2008-2011
    – Leonid
    5 апр 2020 в 0:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.