jQueryのdata()で属性を取得・設定・変更する方法まとめ！ | 侍エンジニアブログ
という基本的な内容から「data()」と「attr()」の違いについてや「$.data()」と「data()」の違いなど、応用的な使い方に関しても解説していきます。この記事で、data()メソッドをしっかり学習して自分のスキルアップを目指しましょう！ data()とは？ それでは、まず最初にdata()メソッドについて基本的な知識を身につけていきましょう！「data()」を使うとHTML要素内に付与されたdata属性に対して、取得・設定・変更などが簡単に行えるようになります。 ここで、data属性について簡単におさらいしておきましょう！HTML要素には「id属性」「class属性」などの属性を付与できますが、独自の属性を作成して付与できるのがdata属性の特徴です。 例えば次のように「data-」から始まる属性は、すべて独自に作った「data属性」になります。 <p data-name="
jQueryでDropイベントを受け取る方法 - Qiita
きっかけ ブラウザからサーバーにファイルをアップロードする際、アップロードするファイルをPCのファイラーからブラウザへドラッグ・アンド・ドロップすることで行えるようにしようとしたら、何故かそのイベントハンドラの引数がDragEventになっていなかった。その原因と、対策について 状況 コードは下記 https://jsfiddle.net/kkotaro0111/8dsv37xu/5/ //with jQuery 2.x $(function(){ var $f = $("#fileinput"); var $d = $("#dragarea"); var $c = $("#clickarea"); $f.on("change", function(){ handleFiles(this.files); }); $c.on("click", function(e){ if( $f.leng
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです JavaScript Advent Calendar 2017 - Qiitaの2日目の記事です. 何故この記事を書こうと思ったか JavaScriptの定番ライブラリであるjQueryは, 最近以前と比べて必要とされなくなってきました. その理由はよく, Reactなどの他のフレームワークが登場したせいだと勘違いされています. しかし, jQueryが必要とされなくなってきた理由は標準DOM APIの進歩によるものです. この記事ではそれを書いていきます. なお, この記事ではReact Nativeについて触れる必要がないため, React DOMのことも一緒くたにReactと記述します. また, 私がweb開発を開始したのは3年前ぐらいから
jQuery Terminal Emulator Plugin
__ _____ ________ __ / // _ /__ __ _____ ___ __ _/__ ___/__ ___ ______ __ __ __ ___ / / __ / // // // // // _ // _// // / / // _ // _// // // \/ // _ \/ / / / // // // // // ___// / / // / / // ___// / / / / // // /\ // // / /__ \___//____ \\___//____//_/ _\_ / /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/ \/ /____/ 2.39.0 __ ____ ________ __ / // _ /__ ___/__ ___ ______ __ __ __ ___ / / __ / // // /
ColorboxでjQueryのモーダルウィンドウを実装する方法｜Gimmick log
TOPjQuery ColorboxでjQueryのモーダルウィンドウを実装する方法 ColorboxでjQueryのモーダルウィンドウを実装する方法 公開日：2015.11.20 更新日：2023.03.19 jQuery, モーダルウィンドウ Colorboxというレスポンシブにも対応したモーダルウィンドウプラグインの使い方をまとめました。 IE Testerで確認したところ、IE7でもいけました！素晴らしいです！ デモページ Colorbox配布先 ライセンス-MIT 以前ご紹介したMagnific Popupというプラグインでも似た結果が得られますが、iframeで表示した際、ウィンドウが一定の幅以下になると別ページに遷移するという点が案件に合わなかったので（これがいい場合もあるのですが）こちらを使ってみました。 用意されたCSSや画像を組み込むだけできれいに表示されますが、今回は
jQuery の jqPlot プラグインのオプション一覧
jQuery の jqPlot プラグインには、とても多くのオプションが存在する。 オプションを使いこなすと、タイトル、系列、軸、凡例、グラフの種類など、自由自在だ。 オプションの指定方法 seriesColors 系列の色を配列で順番に指定。 title グラフにタイトルを描き加える。 下記のタイトル用プロパティでカスタマイズすることもできる。 text タイトルのテキスト。 show タイトルを表示するか。 fontFamily タイトルのフォントの種類。 fontSize タイトルのフォントサイズ。 textAlign タイトルのテキストの水平方向の配置位置。 left： 左寄せ center： 中央 left： 右寄せ textColor タイトルのフォントの色。 axes 軸に関するオプション。 xaxis X軸に関するオプション。 min X軸上の最小値を指定。 max X軸上
jqPlot - Pure Javascript Plotting
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features: Numerous chart style options. Date axes with customizable formatting. Up to 9 Y axes. Rotated axis text. Automatic trend line computation. Tooltips and data point highlighting. Sensible defaults for ease of use.
jQuery で select タグに option タグを追加する - Qiita
例えば <select class="my-select" multiple> という select タグに jQuery を使って option タグを追加してみます。 var characters = { yuno: 'ゆの', miyako: '宮子', sae: '沙英', hiro: 'ヒロ', nori: '乃莉', nazuna: 'なずな' }, $select = $('.my-select'), $option, isSelected; $.each(characters, function (value, name) { isSelected = (value === 'miyako' || value === 'nori'); $option = $('<option>') .val(value) .text(name) .prop('selected', isSe
jquery.balloon.js Demo page
jquery.balloon.js Demos A jQuery plugin to add balloon tips to elements User-friendly, fine-tunable and without css and images Getting started (1) Download and load this plugin javascript file after jQuery. <script src="/js/jquery.balloon.js"></script> (2) Call $().balloon(options) in document ready event of jQuery. $(function() { $('selectors').balloon(options); }); Distinct features Without css
jQuery: ポップアップを実装できる「PopBox」 | Think deeply, Do less, More effective
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト <link href="css/popbox.css" type="text/css" rel="stylesheet"> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/popbox.js" type="text/javascript"></script> HTML <div class='popbox'> <a class='open' href='#'>Click Here!</a> <div class='collapse'> <!-- ポップアップ全体 --> <div class='box'> <!-- ポップアップ --> <div class='arrow'></div
RateYo!, A jQuery Star Rating Plugin
RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required. just create a <div/>, throw some styles, initialize and thats it!. Hover to change the rating and Click to set. <-- HTML --> <head> <-- Basic styles of the plugin --> <link rel="stylesheet" href="jquery.rateyo.css"/> </head> <body> <div id="rateYo"></div> <script src="jquery.js"></script>
Toastr by CodeSeven
toastr toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. Demo Demo can be found at http://codeseven.github.io/toastr/demo.html CDNjs Toastr is hosted at CDN JS Debug //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js //cdnjs.cloudflare.com/ajax/libs/toast
alert()のダイアログのスタイルを変更するスクリプト・SweetAlert
alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。 alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。 確かに普通にアラート出すよりいいかもしれません。 <script src="jquery.js"></script> <script src="sweet-alert.min.js"></script>コアとSweetAlertを読み込みます。 $('.foo').click(function(){ swal({ title: "アラートです！", text: "メッセージがココに入ります", imageUrl: 'http://placehold.it/500x500', confirmButtonText: '了解！', confirmButtonColo
jQuery.uploadを使った、画像のサムネイルを表示するフォームのデモを作りました。 - Toro_Unit
以前、jQuery.uploadでアップロード画像のサムネイルの作成というエントリーを書いたので、それの実装を作ってみました。アップロードする画像を選択すると、アップロードされ、それのサムネイルが表示されます。 また、ページを離れるときに画像をJavascriptで削除していますが、実際に使うときは使わない場面も多いと思いますので、その部分は適当に削除するなり、なんなりして下さい。 デモ：http://demo.torounit.com/jquery.upload/ script.js(ajaxでのアップロード等々) [js] jQuery(function($){ //送信ボタンの非表示 $(‘#submit’).hide(); //フォームの内容が変更されたとき $(‘#img’).change(function() { var preview = $(‘#preview’); //現
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
Download jQuery UI Bootstrap
A Bootstrap-themed kickstart for jQuery UI widgets (v1.0 alpha). Welcome! This is a live preview of jQuery UI Bootstrap - a project we started to bring the beauty of Twitter Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.
JavaScript · Bootstrap
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one. Overview Individual or compiled Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js). Plugin dependencies Some plugins and CSS components depend on other plugins. If you include plugins
— Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework
Bootbox provides three functions, alert(), confirm(), and prompt(), whose aim is to mimic their native JavaScript equivalents. Here's the simplest possible example: bootbox.alert('Hello world!'); Run example <!-- set up the modal to start hidden and fade in and out --> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <!-- dialog body --> <div class="moda
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
jQuery Custom Select Box Plugin - jQuery.customSelect()
jQuery .customSelect()The ridiculously lightweight, semi-native select box styling plugin What it be This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. This conc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
