Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応 8月にリリースされたChrome 105で実装されたCSSの疑似クラス「:has()」が、jQueryに以前から備わっている「:has()」に悪影響を及ぼし、一定の条件下ではjQueryを使ったWebサイトが壊れるなどの問題を引き起こすことがあることを、9月の下記の記事で紹介しました。 参考：Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 その後、Chrome側ではこの問題に対応する回避策が実装され、一方のjQuery側でも先日リリースされたjQuery 3.6.2で対応が行われたことが明らかになりました。 Chrome、jQueryそしてCSS
[jQuery] セレクトボックスの変更イベントを取得する – コピペで使える JavaScript逆引きリファレンス
セレクトボックスの変更イベントを取得するには、.change()を使用します。 サンプルソース 例）選択したセレクトボックスの値をalert表示する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("#sel").change(function(){ var str = $(this).val(); alert(str); }); }); </script> </head> <body> <select id="sel"> <option value="01">
jQueryでリスト表示を絞り込む処理を実装する ｜ Tips Note by TAM
リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。 ■目次 選択した項目で絞り込み検索をする 複数の項目で絞り込み検索をする 配列を使ってリスト側に複数の値を設定できるようにする 1. 選択した項目で絞り込み検索をする 以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。 デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。 See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen. 設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。 例えばグループAを選択した場合、dat
外部のJSONデータをjQueryを使ってHTMLへ出力する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
jQueryで外部のJSON形式のデータをHTMLの中に出力する方法です。JSONはデータ内容の構成がわかりやすいのでデータを扱う際に便利です。方法としては、getJSON()関数で外部のJSONデータを受け取り、for…in文を使ってH…
【初心者用】jQueryを使ってjsonデータをhtmlに生成する | PLUSTRiCK
更新の頻度と手間を踏まえてサイト構築を考えていると、制作チームが毎回htmlを書き換えるより、jsonのテキストデータならhtmlがわからない人でもファイルの書き換えができるという利点から、jsonを使用してみようという話になったので、その時の学習メモ。 jsonの知識はあったが、自分で作ったことは無かったので、まったくの初心者がjsonデータを作っていきます。 (立ち位置的にはデザイナーなんだけどな…) 今回は簡単なjsonデータを作成して、htmlに出力するまでをメモしています。 1.jsonデータをページ内に直接書く場合 script内にjsonデータを記述していきます。 (jsonデータは外部から読み込むのが基本なので、script内に記述しているデータがjsonとは言わないですが、練習用なのでそこはスルーしてください。) javascript $(function() { var
jQueryでjsonデータを扱ってみる【入門編】 | webOpixel
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 jQuery2013年7月31日 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 js中に記述されたJSONデータからHTMLに表示 外部ファイルのJSONデータからHTMLに表示 JSONPで外部ファイルのJSONデータからHTMLに表示 1.js中に記述されたJSONデータからHTMLに表示 まずJSON+jsの全体図をつかめるよう、活用する場面はあまりありませんが、jsの中にJSONデータを記述した例を紹介します。 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%
jQueryで実装するフォームバリデーション｜KojimaKohei
HTML5では、type属性を指定すれば自動でバリデーションがかかったり、requiredを指定するだけで入力チェックをかけることが可能です。 HTML5の入力検証機能はとっても簡単に導入できるのですが、下記のようなデメリットのため、使わないことの方が多いです。 ・ブラウザによってエラーの表示内容が異なる ・JSで組んだ方がカスタマイズしやすい date,search,number,range,colorなどはいまだにIEやsafariが対応してなかったりするみたいなので、その他のtype属性は合わせておいた方が無難かなーと思っています。 今回、jQueryを使ってバリデーション チェックを作る機会があったので、忘備録的に書いておきたいと思います。 少しでも参考になれば幸いです。 まずは、HTML5だけで実装してみた HTML5だけで実装するとこんな感じ。 未入力チェックに関してはrequ
セレクトボックスを変更すると読み込むCSSを変更し、選択結果をクッキーに保存するjQuery｜I'll be NET
セレクトボックスを変更した時、読み込むCSSを変更してみます。 サイトのデザインを変更したり、フォントサイズを変更する場合などにも利用できます。 下記のサンプル画像では、セレクトボックスの選択結果に応じて背景色などを変更しています。 画面左上のセレクトボックスをDefaultに設定すると背景灰色で表示します。 画面左上のセレクトボックスをBlackに設定すると背景黒色で表示します。 今回は、選択結果をクッキーに保存してみます。 クッキーに保存することで、次回アクセス時にも選択結果を引き継ぐことができます。 選択結果をクッキーに保存する際に、js.cookie.jsを利用します。 I'll be NET｜jQueryでクッキーを操作するjs.cookie.js（jquery.cookie.js）の使い方まとめ HTMLを準備する headタグ内の記述 headタグ内でデフォルト用のCSSを読
jQuery の load() | Web Design Leaves
基本的な使い方 Ajax 利用時の制限 文字コードは、原則として「UTF-8 」を使用。（他の文字コードを使うと文字化けする） Ajax ではセキュリティ上の理由から、HTML と同一ドメイン上にあるファイルしか取得できない。 ページにテキスト（ファイル）を挿入する load() は引数に読み込むファイルを指定すると、セレクタで指定した要素内のテキストを書き換える。 書式 $(セレクタ).load(テキストファイル名) ボタンをクリックすると p 要素の内容を「foo.txt 」の内容で書き換える例 外部の HTML を表示する load() に単純に HTML ファイルを指定すると HTML ファイルの冒頭から末尾（DOCTYPE から </html>）を取り込んでしまう。 HTML の場合、 ファイル名の後ろに セレクタを追加することで、読み込む場所を絞り込める。 //foo.html
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方 – bl6.jp
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読
【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。 - ONZE
無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法［Infi
ページの下までスクロールしたときに何らかの処理を実行する例 at softelメモ
ページの下までスクロールしたときに何らかの処理を実行する例 $(window).bind("scroll", function() { scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { //スクロールの位置が下部5%の範囲に来た場合 } else { //それ以外のスクロールの位置の場合 } }); demo ページをある程度下までスクロールしたときに何らかの処理を実行する – デモ 「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。 条件
【jQuery】これで簡単！フェード処理で切り替わるタブコンテンツの作成方法 ｜ KLUTCHE
シンプルなタブコンテンツを実装したい時、jQueryを使うことにより、短くてシンプルなソースで設置することができます。 JavascriptもHTMLもすっきりと収まるのですがすがしいです。 デモ デモページ Javascript jQuery依存のスクリプトなので、まずjQueryを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> その後に以下のJavascriptを記載します。 <script type="text/javascript"> $(document).ready(function() { //初期表示 $(".tab_content").hide();//全ての.tab_contentを
jQuery を使って要素の高さを揃える | Web Design Leaves
高さの異なる要素をフロートさせて並べる時に、jQuery を使ってそれぞれの高さを揃えて並べる方法に関するメモ。 横に並んだ要素の高さを揃える 以下のサンプルは div 要素（class=”foo”）をフロートで並べて表示する例。それぞれの高さが異なるので、同じ高さを指定しなければきれいに横には並ばない。 サンプル１ サンプルの「高さを揃える」をクリックすると、同じ行（横の列）の要素の最大の高さを検出して横に並べる。 HTML <div id="content"> <div class="foo"> <h2>Index : 0 </h2> <ul class="bar"> <li>bar 1</li> <li>bar 1</li> <li>bar 1</li> </ul> ・・・省略・・・ <div class="foo"> <h2>Index : 8 </h2> <ul class="b
【javascript/jQuery】強制的にページをスクロールさせる方法 - めめんと
強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っていました。ページのスクロールというのはこのページに(恐らく)出ているような赤い部分にマウスをのせると勝手に下にスクロールするみたいなやつです。 似たようなワードで調べるとjQueryのアニメーションとかを用いてトップに自動でスクロールする系のものが多く、単純にスクリプトでスクロールするにはどうしたらいいか結構迷いました。 結論から書くと単純にスクロールさせるにはjQueryなんか必要なくて window.scrollBy(0,50); などとするだけでできます。 window.scrollByメソッドは第一引数がX軸(横)の移動量、第二引数がY軸(縦)の移動量となっています。引数の値が正の場合それぞれ右と下に移動するようになっており、上の例ですと一回呼ばれる度に下に50だけスクロールします
jQueryで自動スクロールするプラグインを作ってみた - もやもやエンジニア
ブログのアクセスログを眺めていたら「jquery 自動スクロール」とか「jquery スクロール 自動」とかでアクセスする人がそれなりにいるので、簡単なプラグインを作ってみました。 コード https://github.com/rei-m/autoScroller ※ソースコードはgithubから落としてください。 使い方 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>auto scroll sample</title> <style> .content { font-size:11px; width:300px; } .content:nth-child(odd){ background-color:#FFEFD5; } .content:nth-child(even){ background-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
posabsolute/jQuery-Validation-Engine CDN by jsDelivr - A CDN for npm and GitHub
ナビゲーションを上部に隠すjQueryを実装してみました ｜ スターフィールド株式会社
clickイベントが遅い＋片隅に置いておいた方が良いこと | HTTP://FUGAFUGA.XYZ