タグ

jsに関するclea0000のブックマーク (85)

  • 《JavaScript》jQueryみたいなセレクターでDOMを取得するES6なクラス - Qiita

    jQueryなしのプロジェクトで、document.getElementById() や document.getElementsByClassName() を省略するためのヘルパーはいろいろ知恵がありますが、自分でも使いやすいものを作ってみました。 $(element) のようなものをclass構文で書きます。 DOMの取得をjQueryみたいにシンプルな記述にしたい セレクタにシンボルを付与して、その文字列からメソッドを振り分けるようにしています。 毎回 new を記述するのを避けてシンプルにするため、ラップして隠蔽できるようにしました。 /** * # / . / * を含むセレクタを受け取ってDOMを返す * # : getElementById * . : getElementsByClassName * * : querySelectorAll */ const Selecto

    《JavaScript》jQueryみたいなセレクターでDOMを取得するES6なクラス - Qiita
    clea0000
    clea0000 2023/12/24
  • jQueryとは+脱jQueryの理由+基本書式

    はじめに プログラング初心者がアウトプットのために記述しています🙇 jQueryとは 簡単便利に使えて、プログラミング初心者のファーストステップにおすすめなjQuery。 「JavaScriptを短いコードで簡単に書けるようにしたもの」がjQuery。 jQueryでできること 1.コードをJavasprictで記述するよりも、短く簡単に記述できる。 HTMLのDOM操作をとても楽に実装することができたり、Ajax通信(POST等)を簡単に実装できることなどが特に注目され、活用されてきました。 2.HTMLCSSを操作して… 要素の大きさ・色・透明度などを変更できる 表示・非表示の切り替え フェードイン・フェードアウト・スライド・アニメーションなど動きを加える ユーザーが入力した内容を取得・反映など 外部ファイルを取得・表示 などなど… 脱jQueryと言われる理由 1.動作が遅くなる

    jQueryとは+脱jQueryの理由+基本書式
  • 【脱jQuery】jQuery <=> vanillaJS 書き換え集

    jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy

    【脱jQuery】jQuery <=> vanillaJS 書き換え集
  • とほほのTypeScript入門 - とほほのWWW入門

    Microsoft が開発した言語で、JavaScript に型定義などの機能を追加したものです。 JavaScript 言語の完全なスーパーセットになっています。 型の異なる関数呼び出しや代入をコンパイル時に検出することによりプログラムの品質を高めることができます。 また、ECMAScript の最新機能を早めに取り入れるため、まだ、ブラウザが未対応の機能を早い時期から使用することが可能となります。 プログラムの拡張子には通常 .ts をつけます。 TypeScriptファイル(*.ts) を JavaScript ファイル(*.js)にコンパイル(トランスコンパイル・トランスパイル)します。 ReactAngular などでも TypeScript がよく利用されています。

  • 【爆速化】脱jQueryしたかったらこれを見なさい。【JavaScript】 | BableTechBlog

    jQueryはJavaScriptライブラリの中で最も人気だと言えるでしょう。2021年の時点で世界の8割程度のWebサイトがjQueryを利用しているという調査もあったようで、いかにまだ愛されている技術かが分かります。 しかしながら、jQueryを使いつつ当は「もうjQueryから脱却したい」と感じている人もいるかもしれません。 今回は なぜ脱jQueryする必要があるのか? 具体的な脱jQuery方法(WordPress等) の二つについて語っていきます。 jQueryで何ができる? この記事を見てくださっているということはある程度jQueryのことをご存じかと思うのですが、最初に軽く説明しておきましょう。 jQueryがJavaScriptライブラリの一種であることは恐らくご存じかと思いますが、では一体jQueryで何ができるのか、軽くおさらいしていきましょう。 コードを短くできる

    clea0000
    clea0000 2023/12/24
  • 【jQuery】URLによって条件分岐させる方法

    そして今回は解説はWordPressではなく、静的サイトの場合になります。 ページごとにヘッダーに別々のclassを書けば条件分岐の必要はないかも知れませんが、そうなるとヘッダーが共通になりません。 実案件では『ヘッダーは共通でお願いします』と言われる事があるので、静的サイトでの条件分岐も覚えておきましょう。

    【jQuery】URLによって条件分岐させる方法
  • jQuery Cookieの保存する期間を日時や時間で設定するいろいろ|BLACKFLAG

    jQuery Cookieで保存期間を指定するには、オプションの「expires」を使用しますが、保存日数や保存時間、また保存する時間を使用しているデバイスの日時設定を基準とするかサーバの時間を基準にするか、といった保存方法にはいくつかパターンがあるのでそれぞれ紹介してみます。 「expires」オプションで日数指定 まずは基となるjQuery Cookieのオプション「expires」を使って保存日数を指定する方法です。 ※jQuery Cookieの基的な使用方法は省かせていただきます。 $.cookie('名前', '値', { expires: 1 }); Cookieを保存するための「名前」と「値」を指定した後の{ expires: 1 }の値が保存する日数になります。 ここで「1」を指定すればCookieの保存期間は1日、「2」を指定すれば保存期間は2日になります。 「ex

    jQuery Cookieの保存する期間を日時や時間で設定するいろいろ|BLACKFLAG
  • 【徹底解説】scriptタグにdeferやasyncをつけるとどうなる?

    いろんなサイトを検証モードで調べてみると、たまにscriptタグの中にdeferという記述を見ることがあるんあだけど、deferってなんだ? この記述を入れるとどうなるんだろう? 他社サイトの構造とかをデベロッパーモードで見てみると<script>タグの中にdeferやasyncという文字列が入ってたりしませんか? 「defer属性」と「async属性」を正しく使うことでJavaScript(以下JS)の読み込みタイミングを調整でき、結果としてページの読み込み速度を改善することができます。 では詳しく解説していきます。 deferとasyncは何者? deferとasyncは<script>タグ内に記述することができる属性です。 これらの属性はJSファイルの読み込みと実行のタイミングを調整するために使われます。 適切に使うことでWebページの読み込みスピードの改善につながります。 ページ読

    【徹底解説】scriptタグにdeferやasyncをつけるとどうなる?
  • 【jQuery】ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない)|WEB CREATES

    今回はサイトを最初に訪れた時のみ、ローディングを表示する方法をjQueryで作成する方法を共有しようと思います。 動きが確認できるデモサイトは下記になります。 ローディング デモページ ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない) jQueryを追加(全ページ共通の場所) <div class="loading"></div>用のHTML/CSSがあります。 下記は、クラス「.loading」にクラス「.active」を追加すると、loadingが非表示になるということを前提として作成しています。 $(function () { var webStorage = function () { if (sessionStorage.getItem('access')) { /* 2回目以降アクセス時の処理 */ $(".loading").addClass('is-act

    【jQuery】ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない)|WEB CREATES
  • CSSやJavaScriptでスクロールバーの横幅を取得する方法

    コーディングをしていて、スクロールバー自体の横幅を取得したいときがあったので、取得方法についてまとめておきます。 macOSで常にスクロールバーが表示されるようにするmacOSでは設定によってはスクロールバーが表示されないこともあります。 [システム環境設定]→[一般]の「スクロールバーの表示」で変更できます。 スクロールバーの幅を取得する1. CSSで取得する方法スクロールバーが表示されている場所がページ全体に対しての場合は、下記の記述で取得できます。 calc(100vw - 100%);100vwはビューポートの横幅全体が取れるのでスクロールバーを含む横幅、100%はbodyタグの横幅100%が取得できるのでスクロールバーを含まない横幅が取得できます。 それらの差をcalcで計算して取ることでスクロールバーの取得ができます。 100vwはビューポートの横幅になるので、ページ全体に対し

    CSSやJavaScriptでスクロールバーの横幅を取得する方法
  • 【JSモジュール化】ファイル分割してわかりやすいプログラムを書こう!

    ファイル分割の方法いろいろ 長いプログラムコードって基的に見たくないですよね。 昔の自分が勢いで書いた1000行超えのソースコードを、数ヶ月後に読まなければいけなくなった時、あなたはどうしますか。 「読みたくねえええええ!」と心の中では大声でムンクの雄叫びが響き渡ることでしょう。 一度に読むソースコードの量は少ないに越したことはありません。 となると、ファイルを役割ごとに分割して、1ファイルあたりのコード行数を減らそうと考えるのは自然な発想でしょう。 コードを分割するときにまず思い浮かぶ方法は「長いソースコードを上から区切ってファイル分割する」という方法です。 長いソースコードから、「データを保管している部分」や「関数をまとめている部分」などでファイルを分割して、呼び出し元のhtmlファイルから分割後のファイルを指定して呼び出していきます。 例えばこんな画像のように! この方法はJava

    【JSモジュール化】ファイル分割してわかりやすいプログラムを書こう!
    clea0000
    clea0000 2021/11/12
  • 【jQuery】アコーディオン実装サンプル10選 | 125naroom / デザインするところ(会社)です。

    <div class="accordion_one"> <div class="accordion_header">アコーディオン、シンプル版 <div class="i_box"><i class="one_i"></i></div> </div> <div class="accordion_inner"> <div class="box_one"> <p class="txt_a_ac">アコーディオンの中身です。</p> </div> </div> </div> $(function(){ //.accordion_oneの中の.accordion_headerがクリックされたら $('.s_01 .accordion_one .accordion_header').click(function(){ //クリックされた.accordion_oneの中の.accordion_head

    【jQuery】アコーディオン実装サンプル10選 | 125naroom / デザインするところ(会社)です。
    clea0000
    clea0000 2021/10/24
    横型アコーディオン
  • スマホの時だけjsを無効にしたり有効にしたりしたい。

  • slickのページングにjQueryを使ってイメージを設定する方法 - NxWorld

    引き続きjQueryプラグイン「slick」に関するTipsで、ページングにイメージを設定したいときにjQueryを使ってメインスライドのイメージをそのまま使い回したり、ページング部分のHTMLを記述する手間を省いて少しでも楽して設定する方法です。 slickの基的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 ページングをイメージに変更 #1 上のイメージのように、メインスライドの各イメージをそのままスライドを切り替えるページング部分に使用するもので、メインもページングも同じイメージを使う想定なのであれば、この方法で実装しておくことでスライドが増減する度に両方いじる手間を省くことができます。 まず、HTMLは下記のようにメインスライド部分のみ記述します。 <div id="slick"> <div><img src="img01.jpg" alt=

    slickのページングにjQueryを使ってイメージを設定する方法 - NxWorld
  • サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery|I'll be NET

    Amazonなどのように、メイン画像とサブ画像のある画像表示領域で、サブ画像をクリックするとメイン画像をふわっと変更するjQueryを書いてみました。 fadeIn処理が終わってから画像のsrc属性を書き換え、fadeIn処理をしています。 デモ 動いているサンプルはこちらからご覧できます。 DEMO <div id="mainImg"> <img src="./img-1.jpg"> </div> <ul id="subImg"> <li class="current"><img src="./img-1.jpg"></li> <li><img src="./img-2.jpg"></li> <li><img src="./img-3.jpg"></li> <li><img src="./img-4.jpg"></li> </ul> $(function(){ $('#subImg im

    サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery|I'll be NET
  • iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる

    TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気にわない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから

    iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
  • セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ

    前回に、iOSのセレクトボックスが使いづらい問題についてまとめました。 iOSブラウザのセレクトボックスUIが使い辛すぎ問題 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィールの送信では<select>を多用していたため、どうにかしたいと思っていました。 そのため、デバイス問わず、セレクトボックスをモーダル選択に置き換えるプラグイン「selmodal.js」を作成しました。 iOSデフォルトのセレクトボックスとプラグイン導入後の比較です。 後者のほうがサクサク入力を完遂できることが見て分かると思います。 主にiOSブラウザのユーザービリティ向上のための対策用プラグインなため、iOSユーザーの割合を見て導入を検討してみてください。 <head> <!-- プラグインのCSSを読み込む --> <link href="css/selmodal.css" rel="

    セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ
  • JS webApiを叩く (JSアウトプット) - Qiita

    あいさつ 初めての人は初めまして!知っている人はこんにちは! 中学生バックエンドPGのAtieです! 今回はJSでwebApiを叩く最低限の方法を学んできたのでアウトプットします! では! webApiとは? まずはwebApiとは何かを解説していきます そもそもApiとはApplication Programming Interfaceの略で プログラムをの機能や管理するデータを外部からアクセスできるようにしたものです そしてそのApiの通信方式がhttpなどのwebだったらwebApiと呼ばれます 実際にApiを見てみましょう 今回はjsonplacefolderというサービスを利用します ここにアクセスしてみてください json形式のオブジェクトがありますよね?よく見てみると今回はプログラミングのデータが入っています これがApiです そしてこのApiは通信方式がhttpなのでweb

    JS webApiを叩く (JSアウトプット) - Qiita
  • slick.jsのdots、arrowsのカスタマイズ方法

    以前にslick.jsに関することを2つ書きましたが、今回はもっと絞って「arrows」と「dots」のカスタマイズ方法について紹介します。 以前のslick.jsに関する記事は下記の2つです。 よく使うjQueryプラグイン① 「slick.js」 「slick.js」の使い方応用編 追加で「slick.jsでサムネイル付きスライダーを作成する」も書きました。サムネイルを固定した場合のスライダーのサンプルも紹介しています。 arrowsのカスタマイズ方法 arrowsのカスタマイズ方法はすごく簡単です。これはカスタマイズができるようにもともとオプションが用意されています。 オプションについてはこちらから確認してください。 slick.jsのオプションの箇所に下記のように記述すれば好きな画像をarrowsに設定できます。 $(function(){ $("#slider").slick({

    slick.jsのdots、arrowsのカスタマイズ方法
  • Vue.jsでSPAサイトを作成するチュートリアル【4. CSS編】

    Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。 今回はコーポレートサイトを想定して作成していきます。 ※記事が長くなったのでチュートリアルを分割しました。 目次 表示編 ルーター編 コンポーネント編 CSS編 ←イマココ JS編 ライブラリ編 メタ編 ビルド編 前提 タスクはnpm scriptsで一限管理 コマンドはyarnを使用 vue-cliのwebpack-simpleを使用 CSSはSCSSを使用し用途に合わせてPostCSSを使用 バージョン "vue": "^2.5.11" "webpack": "^3.6.0" "node-sass": "^4.7.2" "postcss": "^6.0.16" "stylelint": "^8.4.0" CSSの環境構築 SassとPostCSSを使用するので以下のコマンド

    Vue.jsでSPAサイトを作成するチュートリアル【4. CSS編】