Add JS query shorthands
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@ -102,3 +102,4 @@ dist
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
.DS_Store
|
||||
|
||||
BIN
blog_images/pineapple-at-work.jpg
Normal file
BIN
blog_images/pineapple-at-work.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
20
blog_posts/javascript-query-selector-shorthand.md
Normal file
20
blog_posts/javascript-query-selector-shorthand.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "Tip: Create your own query selector shorthand"
|
||||
type: tip
|
||||
tags: javascript,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/pineapple-at-work.jpg
|
||||
excerpt: Ever wanted to create your own jquery-like query selector shorthand? Here's how!
|
||||
---
|
||||
|
||||
Most of us are familiar with jquery and probably quite a few of us are familiar with the Chrome console's `$` and `$$` shorthands for query selectors. I recently figured out a way to replicate these shorthands in my code, using `Document.querySelector()`, `Document.querySelectorAll()` and `Function.prototype.bind()`. Here's how to do it, just make sure you don't mix them up with jquery if you are still using it:
|
||||
|
||||
```js
|
||||
const $ = document.querySelector.bind(document);
|
||||
const $$ = document.querySelectorAll.bind(document);
|
||||
|
||||
const mainContent = $('.main-content');
|
||||
const externalLinks = $('a[target="_blank"]');
|
||||
```
|
||||
|
||||
**Image credit:** [engin akyurt](https://unsplash.com/@enginakyurt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||||
Reference in New Issue
Block a user