jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
jQueryで要素内のテキストを設定する：text()
指定したクラス、ID、タグなどの要素内のテキストを取得します。 子要素がある場合 指定したタグが子要素を含む場合、 HTMLタグを除いた子要素のテキストも含めて取得されます。ただし、pタグの場合は、親要素のテキストとインラインの子要素のテキストのみ取得されるようなので注意してください。 例えば、以下のようなサンプルの場合、テキスト「親要素」「子要素１」だけが表示されます。
checkbox の preventDefault
◆ change イベントはすでに変わったというイベントなのでキャンセルしてもチェック状態は変更されます ◆ click イベントをキャンセルするとチェック状態の変更を防げます ◆ 変更されないので change イベントが発生しなくなります ◆ click のリスナの中ではチェック状態が変更されていて キャンセルするとリスナの関数の終了時に元に戻ります ◆ indeterminate でも一緒 var c1 = document.querySelector("#c1") var c2 = document.querySelector("#c2") var c3 = document.querySelector("#c3") c1.onclick = function(){ console.log("c1-click", this.checked) setTimeout(_ => cons
【jQuery入門】click()イベント処理の使い方！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
こんにちは、ライターのマサトです！ 今回は、マウスのクリック操作を検出してイベント処理を実行することができるclick()メソッドについて学習をしていきましょう！この記事では、 「click()」とは？ それでは、まず最初にclick()について基本的な知識から学んでいきましょう！「click()」は、マウスによるクリック操作を検出して任意のイベント処理を実行させることができるメソッドになります。 一般的には、画面に配置された「ボタン」をクリックする時に使われることが多いです。例えば次のようなHTMLを見てください！ <!— 単純なボタン要素 --> <div> <button>ボタン</button> </div> <!— フォーム内のボタン要素 --> <form> <input type="button" value="ボタン"> </form> 単純なbutton要素であったり、フ
【JS】選択済みのチェックボックスの個数をカウントするスクリプトをjQueryで組んでみた - Wataame Frog
スクリプトコード HTML まずはHTML。単にチェックボックスを並べているだけです。 Pタグでチェックボックスを囲い、カウントする範囲を決めることが出来るようにしています。 今回は <div class="tohokuret"></div> に、結果を表示します。 <p>訪れたことがある都道府県を選択してください</p> <form> <p id="tohoku"> <input type="checkbox" name="pref" value="1" id="1" checked="checked"> <label for="1">北海道</label><br> <input type="checkbox" name="pref" value="2" id="2"> <label for="2">青森</label><br> <input type="checkbox" name="
JavaScriptでPHPのexplodeやimplodeみたいなことをする | NeGiMeMo.net
bell賞味期限切れコンテンツ この記事は公開または最終更新から1062日くらい経過しています。 このメッセージが表示されている記事（特にプログラミング系）は情報が古くなっている可能性があるので注意して下さい。 たまにjQueryをがっつり書く時とかで、配列操作をしたい場合に explode とか implode とかやるほうほうは無いのかな？と思い調べてみたところ、ありました。 PHPでいう implode() をやりたい場合は、 join() 関数でできます。 var makers = ['Toyota','Nissan','Honda']; var maker = makers.join(); console.log('maker'); ↓↓↓ Toyota,Nissan,Honda
Javascriptでin_array的なことをするならsomeメソッドが便利 - Qiita
var tmp = ['test', 'hoge', 'Hello', 'world']; tmp.some(function(v){ return v === 'Hello' }) //-> true tmp.some(function(v){ return v === 'hello' }) //-> false tmp.some(function(v, i, a){ console.log(v) }) ->test ->hoge ->Hello ->world tmp.some(function(v, i, a){ console.log(i) }) ->0 ->1 ->2 ->3 tmp.some(function(v, i, a){ console.log(a) }) ->["test", "hoge", "Hello", "world"] ->["test", "hoge", "
「kintone」でCSVファイルの自動入出力をやってみる
こんにちは、まことーんです。今回は「kintone」の開発プロダクトマネージャーのかどやさんが、何やら便利なものを作ってくれたみたいです......早速聞いてみましょう。 何を作ったの？ はじめまして、かどやです。「kintone」の開発PMをやっています。かつては「kintone」の前身である「サイボウズ デヂエ」の開発責任者をやっておりました。 「サイボウズ デヂエ」には、CSVファイルの自動入出力機能が搭載されていました。これは他システムとの連携を行うために、スケジューリングサービスを使って「デヂエ」のデータを入出力できる、という機能です。この機能を使うと、Accessなどのデータベースとの同期を簡単に行うことができる、とミノル氏からも絶賛されています。 「kintone」には、REST APIが用意されていますので、プログラミングができる方ならある程度柔軟に「kintone」と他シ
内部データをファイルとしてダウンロードできるようにする | Try Lifelog
HTML5のFile APIを使ってファイルを作成する方法をベースに、内部データをファイルとしてダウンロードできるようにする。GUIの一貫性を考慮し、ボタンクリックでダウンロードを開始する。 データをJSON形式にし、さらにBlobオブジェクト化する 元のデータをgGpsDataとすると、JSON.stringify()でJSON形式に変換できる。さらにBlob()コンストラクタを使って、ファイル化する。 function writeGpsData(){ // ファイルにしたい内容をJSON形式でシリアライズ var jsonString = JSON.stringify(gGpsData); //var jsonString = JSON.stringify(gGpsData,null,2); // 空白を2つ入れる場合 // タイプを指定してBlobオブジェクトを生成。対象を [ ]
createObjectURLについて | 主にjQueryのメモ
$( '#download-button' ).click( function () { var content = "ファイルの中身"; var link = document.createElement( 'a' ); link.href = window.URL.createObjectURL( new Blob( [content] ) ); link.download = "filename.txt"; link.click(); } ); a要素を動的に生成し、そのclickメソッドでダウンロードを開始している。Blobオブジェクト生成時のパラメータにファイル内容を指定し、a要素のdownload属性にダウンロード時のファイル名を指定する。
JavaScript/HTML5で，SJISの日本語CSVファイルをWebページ上で動的に生成してダウンロードするサンプルコードと解説 （動作デモ付き。Excelで開いても文字化けしない） - モバイル通信とIT技術をコツコツ勉強するブログ
HTML5のJavaScriptで，Webページ内でCSVファイルを動的に生成してダウンロードする。 CSVファイルの中身は日本語で，文字コードはSJIS（Shift-JIS）とする。 サーバ側の処理は一切不要で，JavaScriptだけで実装する。 下記URLに，実際に動く動作デモがあります。 html5のFile APIで２バイト文字のCSVを出力するサンプル http://computer-technology.study-tips... ※HTML5に対応したブラウザで開いて下さい。 以下はソースコード。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>html5のFile APIで２バイト文字のCSVを出力するサンプル</title> <script src="./encoding.js"></script>
集計したデータをCSVでダウンロードするには？
kintoneにはデータをCSV形式でダウンロードする機能があります。 通常の場合これで十分なのですが、場合によってはアプリをまたがるデータを集計したり、kintone.proxy()を使って他のサービスから取得したデータをダウンロードしたいことがあります。 ここは、kintoneカスタマイズを使って、CSVファイルをダウンロードするテクニックを紹介します。 このサンプルでは単純に、column1、column2というフィールドをもったレコードをCSVに出力していますが、このテクニックを応用することで、kintoneで扱えるどんなデータでもファイルに出力できます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
レコード一覧画面にボタンを配置してみよう
/* * add-buttoons sample program * Copyright (c) 2024 Cybozu * * Licensed under the MIT License * https://opensource.org/license/mit/ */ (() => { 'use strict'; // レコード一覧の表示後イベント kintone.events.on('app.record.index.show', (event) => { // 増殖バグを防ぐ if (document.getElementById('menu_button') !== null) { return false; } // ボタンを作成 const menuButton = document.createElement('button'); menuButton.id = 'menu
kintone用の生年月日(日付フィールド)から、年齢を計算する
calc_age // 20140813 kintone用javascript作成 // 生年月日(日付フィールド)から、年齢を計算する // 以下のサンプルコードだと、うるう年を考えていないので自作した // https://cybozudev.zendesk.com/hc/ja/articles/202640900-%E7%B5%8C%E9%81%8E%E5%B9%B4%E6%95%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B (function() { // 生年月日が入っているフィールドコード名 const BIRTHDAY_FIELD_NAME = '生年月日'; "use strict"; // 現在の年齢計算する関数 function getYearMonth(arg_yyyy_mm_dd) { //本日の日付を取得 var
kintone JavaScript API を使ってみよう
kintone JavaScript APIは、ブラウザーの画面上の情報を取得・操作できるAPIです。 kintoneには独自のメソッドが複数用意されており、さまざまな情報が取得できます。
Mandrillを使ってJavaScriptだけでメールを送る
English ver.: Send a mail by JavaScript with Mandrill B! 59 0 0 0 このブログを置いているGitHub Pagesでは PHPとか動かすことが出来ないわけですが、 そんな状況でメールをブログ側から送りたいと思った時、 JavaScriptだけでメールを送る方法があったのでそれについて。 Mandrill Mandrill Transactional Email from MailChimp - Mandrill Mandrillというサービスがあって、このサービスのAPIを使うと JavaScriptだけでメールを送ることが出来ます。 無料だと、月に12000通まで送ることが出来て、 それ以上使いたい場合には100万通までは1000通毎$0.20、 それ以上で500万通までは$0.15/1000通、 それ以上では$0.10/1
JavaScriptだけでブログがコピーされた時にその内容をメールで送る
English ver.: Notice a copy event on your blog by email only by JavaScript B! 38 0 0 0 だいぶ前に WordPress：誰かが記事をコピーしたら教えてくれるプラグインCCC(Check Copy Contents)を作ってみた。 着ぐるみ追い剥ぎペンギン というのを見て、これ面白そうだな、と思ってたんですが、 このブログはOctopress+GitHub Pagesで出来ていて 結果をメールで送ったりするの無理かな？と思ってました。 が、 MandrillをつかてJavaScriptだけでメールを送る で書いたように、 Mandrill というサービスを使うとそれが簡単に解決できたので GitHub Pagesにある様な静的なサイトでもJavaScriptだけで コピペを知らせられるようにしてみました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
