タグ

jQueryとJavaScriptに関するnao-tのブックマーク (6)

  • 【超便利】YubinBango.jsを使った住所自動入力フォームの作り方解説 - 株式会社PENGIN

    粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 こんな悩みがある方に、便利なJavaScriptライブラリを紹介します! 当記事ではJavaScriptのライブラリYubinBango.jsを利用して郵便番号を入力したら自動で住所を表示するフォームの作り方を解説します。 基的な使い方からカスタマイズ方法を画像やコードを用いて詳しく解説するので、JavaScriptが苦手な方もこの記事を読めば郵便番号を入力したら自動で住所を表示するフォームを作れるようになります!

    【超便利】YubinBango.jsを使った住所自動入力フォームの作り方解説 - 株式会社PENGIN
  • モーダルを閉じたら動画も再生停止にする方法(videoタグ編)|ゆーた 台湾移住🇯🇵🇹🇼

    こんにちは! 大阪でコーダーをしているゆーたです。 今回はモーダルを使用して、中に動画が埋め込まれている場合に、 モーダルを閉じると、再生されている動画も自動的に再生停止にする方法について書いてみたいと思います。 実際に実案件で少し悩んだので、記事にしようかなと思いました! クリックするとモーダル内の動画が開き、モーダルを閉じると動画も再生停止します。 demoはこんな感じです↓ 基的なモーダルの記述 基的なモーダルとしては以下のような感じかと思います。​ jQuery(function () { jQuery('.js-modal-open.js-play01').each(function () { jQuery(this).on('click', function () { let target = jQuery(this).data('target'); let modal =

    モーダルを閉じたら動画も再生停止にする方法(videoタグ編)|ゆーた 台湾移住🇯🇵🇹🇼
  • jQuery で innerHTML の書き換え/取得/追記/削除を行う方法

    <div> タグの内容を編集したい! <span> タグの内容を編集したい! そんな時 JavaScript では innerHTML のプロパティを利用します。指定した要素の中身を取得、書き換え、そして削除が行えます。これを jQuery で実装する場合 .html() を利用します。しかし innerHTML の処理を全て .html() に置き換えるのはおすすめできません。 用途に応じていくつかの関数を使い分けることで、処理内容が分かりやすいプログラムになります。では具体的な処理パターンを例に挙げて、innerHTML を jQuery で実装するサンプルを紹介しましょう。 サンプルプログラムでは、id:hogehoge を持つ div 要素に対して処理する例で説明していきます。それぞれ処理用ボタンのクリックイベントを起点に、プログラムが走るようにコーディングします。 <div id

    jQuery で innerHTML の書き換え/取得/追記/削除を行う方法
  • $(document).ready();について - monjudoh’s diary

    jQuery使用時に以下の書き方をすると、どれを使ってもDOM構築後のタイミングで実行したい処理を実行できる。 $(document).ready(function(){ /*実行したい処理*/ }); $().ready(function(){ /*実行したい処理*/ }); $(function(){ /*実行したい処理*/ }); 以下のように複数回実行した場合は$(function(){/**/});を実行した順に、 中の関数が実行されるので以下の場合は、DOM構築後にconsoleに改行を挟んで1,2,3と順番に出る。 $(function(){ console.info(1); }); $(function(){ console.info(2); }); $(function(){ console.info(3); }); 自信がないので、一応、コードの該当箇所を確認 jQue

    $(document).ready();について - monjudoh’s diary
  • jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他

    jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 (※ページをそのまま訳したわけではないと、思います) jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ: 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A

    nao-t
    nao-t 2013/02/04
    ][Web制作]
  • エフェクト操作:基本|jQuery APIリファレンス|Ajax|PHP & JavaScript Room

    マッチした要素をアニメーションしながら表示します。 オプションの第2引数callbackを指定した場合は、要素のアニメーション完了時に指定したコールバック関数を実行します。 マッチした各要素の高さ・幅・透明度は、指定した速度にしたがって動的に変更されます。 jQuery v1.3からは、paddingとmarginがより滑らかにアニメーションされるようになりました。 第1引数speedには、要素を表示時のアニメーション速度を指定します。 数値(ミリ秒)あるいは文字列を指定可能です。 数値の場合、例えば3秒なら「3000」を指定します。 文字列の場合、あらかじめ定義されている速度(「slow」(ゆっくり)、「normal」(通常)、「fast」(速く))のいずれかを指定します。 オプションの第2引数callbackには、アニメーションが完了した時に実行する関数を指定します。 関数が実行される

    エフェクト操作:基本|jQuery APIリファレンス|Ajax|PHP & JavaScript Room
  • 1