# Selectors <div id="lead">lorem ipsum</div> <ul> <li class="blue">First merchandise</li> <li class="pink">Second merchandise</li> <li class="blue">Third merchandise</li> <li class="pink">Final merchandise</li> </ul> <p class="blue standing">An excellent standing</p> // JQuery var lead = $('#lead'); var firstRedItem = $('.pink').eq(0); var blueListItems = $('li.blue') // ES6 const lead = doc.getElementById('lead') const firstRedItem = doc.querySelector('.pink') const blueListItems = doc.querySelectorAll('li.blue')
# Customized Selector Perform operate $(selector, context) { var context = context || doc var selectorType="querySelectorAll" var is_single_element = selector.indexOf('#') === 0 if (is_single_element) { selectorType="getElementById" selector = selector.substr(1, selector.size) } var outcomes = context[selectorType](selector) if (is_single_element) { return outcomes } else { return [].slice.name(outcomes) } } $('#lead') $('enter[type=text]') $('textarea')
# Inserting into the DOM <div id="feedback"> <p class="remark">First!</p> <p class="remark">Sufficient with that!</p> </div> <type> <textarea id="commentContent"></textarea> <button>Put up remark</button> </type> // JQuery var commentContent = $('#commentContent').val() $('#feedback').append('<p class="remark">' + commentContent + '</p>') // ES6 const commentContent = doc.getElementById('commentContent').worth const feedback = doc.getElementById('feedback') feedback.insertAdjacentHTML('beforeend', `<p class="remark">${commentContent}</p>`)
# Modifying Courses // JQuery $(selector).addClass('daring'); $(selector).removeClass('daring'); $(selector).toggleClass('daring'); // ES6 // chosen by getElementById or querySelector ingredient.classList.add('daring') ingredient.classList.take away('daring') ingredient.classList.toggle('daring') // chosen by querySelectorAll parts.forEach((ingredient) => { ingredient.classList.add('daring') })
# Occasion Listeners <button id="btn">Click on me!</button> // With jQuery, we might use the .on() technique (or one in all its shortcuts): $('#btn').on('click on', operate(occasion) { alert('Thanks for clicking!'); }); // The fashionable DOM offers you addEventListener to play with: const button = doc.getElementById('btn'); button.addEventListener('click on', (occasion) => { alert('Thanks for clicking!'); });