jQueryで子要素を取得する方法：children(), find()
今回は、jQueryで子要素を取得する方法を３つに分けて説明します。 直下の子要素を取得する.children() 要素内の全ての子要素を取得します。children('セレクタ')のように、セレクタを引数に渡すことで子要素を絞り込むこともできます。 （例１）#parentの子要素の中から、imgタグのみ取得する HTML <div id="parent"> <p>テキスト1</p> <p>テキスト2</p> <p>テキスト3</p> <img src="sample.png" /></div>
ECMAScript 6 compatibility table
V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other ⬤ Minor difference (1 point) ⬤ Small feature (2 points) ⬤ Medium feature (4 points) ⬤ Large feature (8 points) Compilers/polyfills Desktop browsers Servers/runtimes Mobile Feature name Current browser ES6 Trans- piler Traceur Babel 6 + core-js 2 Babel 7 + core-js 2 Babel 7 + core-js 3 Closure 2020.06 Closure 2020.09 Closure 2021.08 Closure 20
CSSの擬似要素のプロパティをjQueryで動的に変えてみた - Qiita
たまに使うCSSの::beforeや::after等の擬似要素。 擬似要素のプロパティを動的に変更したい場合、 「jQueryのセレクタに指定して変えればいいじゃーん」 と安易に考えていましたが、この擬似要素、セレクタに直接指定できないようです。。 (擬似要素は非DOMのため。) それならば、と調べていくと、いくつか方法はあるようでしたが、 個人的にはjQueryでclassを書き換えるやり方が一番しっくりきました。 そこで今回は、そのやり方で、上の動画のように動く 擬似要素::afterを使った入力フォームを実装してみました！ ちなみに擬似要素は左の吹き出しのような△になっている部分です。 ソースは下記の通り。 ■ HTML <form action="#" method="post" id="regist"></form> <table class="member"> <tbody>
JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する | ITハット
JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する jQueryにはCSSのプロパティを取得できる css() という関数がありますが、残念ながら疑似要素には対応していません。 サンプル要素 .pseudo::before { content: '疑似要素取得'; } 今回はこの要素の content の値を取得・変更していきます。 取得する var property = window.getComputedStyle($('.pseudo')[0], '::before').getPropertyValue('content'); console.log(property); // 疑似要素取得 JSの関数を使って疑似要素のプロパティを取得することができます。 getComputedStyle() 関数の第二引数に ::before または :
jQueryでCSSの擬似要素:beforeや:afterのプロパティを変更する方法３種類 | ITハット
jQueryでCSSの擬似要素:beforeや:afterのプロパティを変更する方法３種類 jQueryで擬似要素を変更したいと思っても、:before や :after は非DOMなので普通にアクセスすることはできません。そこでどんな方法で変更できるのかまとめました。 デモ .button:before { content: 'ボタン'; } .change:before { content: 'クリック'; } HTMLとCSSはこんな感じ。クリックしたら content プロパティを書き換えるために、新たに .change クラスを作ります。 $('.button').on('click', function() { $(this).addClass('change'); }); あとは、addClass() すれば書き換えることができます。 2. スタイルを上書き .button:
jquery-end-image-fade
jQueryのend()で画像の自動フェードイン・フェードアウト切替を実装! 2017/2/5 2019/9/5 JavaScript, プログラミング jQuery、やっぱり便利で使うことがよくあります。きっとそういう方も多いはず。 そんなjQueryの中で、end()というメソッド（命令の種類）があるのですが、恥ずかしながら、最近自分がend()をあまりきちんと理解していないことに気がつきました。。。 ちゃんと学び直したところ、end()が非常に便利であることがわかったので、画像の自動フェードイン・フェードアウト切替を実装するという例を用いて、ちゃんと理解したつもりの自分が、end()の便利さを語ってみようと思います！笑 作成する画像の自動フェードイン・フェードアウトのサンプル 今回作成するサンプルの完成形は以下の通りです！ See the Pen mRLgqQ by Tatsuya
content―スタイルシートリファレンス
contentプロパティは、要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。 contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。 擬似要素（pseudo-element）とは、直訳すれば｢偽りの要素｣となります。 要素の一部にスタイルを適用するために、擬似的に設定される｢要素のようなもの｣のことです。 :before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ（内容）を挿入するために擬似的に設定されます。 ■値 文字列 挿入する文字列を「"」または「'」で括って指定します。 URI（URL）でファイルを指定 URI（URL）で画像や音声等のファイルを指定します。 カウンタ ここでいうカウンタとは要素内容に自動連番をつけるということです。counter()関
【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 ｜ Tips Note by TAM
2016.05.30 【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入できます。 要素名::before{ content: 値; } 要素名::after{ content: 値; } このcontentプロパティの値を動的に変更したい時、jQueryを使用するのであれば、セレクタで、疑似要素::beforeまたは::afterを指定してアクセスすればいいのでは…？と思ってしまいますが、疑似要素はセレクタで直接指定することができません。そもそも擬似要素は非DOMであるため、JavaScriptから操作すること
jQueryのtext()によるテキスト操作まとめ！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、jQueryから特定のHTML要素内にあるテキスト情報を取得・変更できる「text()」について学んでいきましょう！ この記事では、 「text()」とは？ テキストの取得 テキストの追加・変更 複数のテキストを取得 「text()」のエスケープについて 「text()」と「html()」の違い input要素にtext()は使えない？ selectタグの値を取得する 「text()」とは？ それでは、まず最初にtext()メソッドについて基本的な知識から身につけていきましょう！ 「text()」は、HTML要素内にあるテキスト情報を取得・追加・変更することが可能なメソッドになります。例えば、次のHTMLを見てください！ <div> <h1>タイトル</h1> <p>こんにちは</p> </div> h1タグには「タイトル」というテキスト情報があ
新JavaScript例文辞典
説明 小数点以下2桁までにするにはtoFixed()を使います。パラメータには小数点以下の桁数を指定します。2とすれば小数点以下2桁までになりますが、この時小数点以下3桁目は切り捨てではなく四捨五入される点には注意が必要です。 サンプルプログラム var n = 123.45678; n = n.toFixed(2); // 小数点以下2桁にする document.write(n);
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
たまにJavaScriptやjQueryなどの改修が入ったりすると忘れてしまうので、自分用のメモとして残しておきます。 JavaScriptコーディングベストプラクティス（高速かつ堅牢なコードを効率よく書くために）を参照しながらのメモになります。 随時、この記事に追記予定です。 高速化メモ JavaScript編 スタイルシートは上に、JavaScriptは下に指定する JavaScriptファイルは読み込んだ後、通常はスクリプトを解析している間、他のファイルの読み込みをブロックする JavaScriptはページの上部に指定すると、このブロックによりロード時間が増加する場合がある スタイルシートはなるべく上に、JavaScriptファイルは下部にしていることで、ロード時間が短縮できる 画面描画に関係ないJavaScriptは、</body>の直前に書く $(document).readyを
jQuery UI API Documentation
jQuery UI 1.14 API Documentation jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. If you're new to jQuery UI, you might want to check out our main site for more information and full demos. If you're new to jQuery, you might also be interested in the jQuery Learning Center tutorials. This site provides API documen
samba 3.5 をインストールした その2
インストールについては、その1を見てください。 今回の実際のフォルダ構成と、設定ファイルを忘備録的に載せておきます。 sambaで構築して共有フォルダにアクセスするのは、Windows XP、Vista、7 32bit、7 64bit、Mac OSXの各バージョンのPC。 アカウントについては、IDが、user1～で、グループは全部publicと同じにしておく。 フォルダ構成は、下記のとおり。 /home/public2 # 共有フォルダのルート。 ｜ ＋– public # みんなで、読み書きするフォルダ。 ｜ ＋– user1 # user1用のフォルダ、user1のみ、読み書きできて、他のユーザーは、読むだけできる。 ｜ ＋– user2 # user2用のフォルダ、user2のみ、読み書きできて、他のユーザーは、読むだけできる。 ｜ /home/public2 は、パーミッション7
【３分でわかる】Linuxのシャットダウンと再起動
シャットダウンとはシステムを終了させ、電源オフの状態にすることだ。これはご存知の通り、Linuxに限らない。 現代のコンピュータシステムは複雑になっており、正しい手順で終了しなければならない。もし急に電源をオフ(電源ボタンを5秒間押すなど)するとシステムファイルの破損や、ハードウェアの故障が起きる場合がある。 そこで、「シャットダウン」をする。 具体的には作業中のファイルを終了させ メモリの内容をディスクに同期 ネットワークおよび周辺機器の切断 などのもろもろの処理をしてから、電源をオフにする。 もし停電などで突然電源が落ちるなど、異常終了した場合起動時にファイルシステムのチェックなどがかかる。 これもシステムに関係なく普遍的な概念だ。 システムの異常で突如再起動する場合も含まれるが、基本的にはシャットダウンの手順を踏んだあとに、自動的に起動するようにすることを再起動という。 昔は新しいソ
SELinux を使おう．使ってくれ． - Qiita
この記事の目的 SELinux って邪魔者ですか？ 「トラブルシュートの時に邪魔だから」「トラブルの元だから」とか言う理由で /etc/selinux/config で SELINUX=disable したり setenforce 0 したりしていませんか？ SELinux は理解さえすればとても簡単です． 本番環境でファイアウォールと WAF の設定をして満足していないで SELinux を使いましょう． 対象 SELinux を初めて触る人向けです． 玄人の方は他へ．．． 本稿の範囲 本稿では SELinux を導入しておしまいです．あくまで「みんな，簡単だからね，使おうね！」と言いたいのです． 本当は SELinux の効果を示すために Exploit を仕込んだアプリケーションから root を取って不正にファイルに触るところまでやりたいのですが，これまた別の記事にします． 僕の願
【ざっくりと理解する】SELinuxとは？
SELinuxとはセキュリティ関連のLinuxカーネル制御機能だ。Linuxディストリビューションではなく、強制アクセス制御機能を加えるモジュールの名前だ。 このページではSELinuxについて簡単にご説明していこう。 ディストリビューションではない SELinuxと聞くとディストリビューションの一つだと思うかもしれないが、そうではなく、カーネルの制御機能のひとつだ。 Security-Enhanced-Linuxの略称になる。 アクセス制御に使う SELinuxを利用すると細かいアクセス制御が可能になる。例えば、サービス毎に最小限の権限を与え管理することなどが可能になる。 root権限ですら制限をかけることも可能となっており、redhat系のディストリビューションであるCentOSやFedoraの場合はデフォルトで導入されているシステムだ。 使わないケースも多い SELinuxを意図的に
CentOS7.3でSSH接続(公開鍵認証)する方法 - Qiita
はじめに こちらの記事ではパスワード認証を用いてSSH接続する方法を紹介しました。しかし、パスワード認証はセキュリティ上望ましくないため、第三者がアクセスする可能性があるサーバーでは、公開鍵認証を用いてSSH接続するのが一般的です。 環境 サーバーOS：CentOS 7.3-1611 64bit Minimal クライアントOS：Windows 8.1 Pro 64bit 前提条件 sudo できる一般ユーザーでログインしている 対象の一般ユーザーが存在しない場合、こちらを参照して作成してください。 セットアップ(クライアント) まずはクライアント側の作業です。 鍵ペアの作成 公開鍵認証に必要な秘密鍵(id_rsa)と公開鍵(id_rsa.pub)のペアを作成します。 鍵ペアはクライアント側で作成し、サーバーへ公開鍵を送信するのが望ましいです。サーバー側や他の端末でも作成できますが、秘密鍵
CentOS 7 インストール後のホスト名設定、ネットワーク設定
CentOS 7 をインストールした後、ホスト名と静的IPの設定を行いました。 CentOS 6 で使えていたコマンドが使えなくて、手間取ったので、メモ。 ホスト名を変更する CentOS7はCentOS6と編集するファイルが異なります。 一時的に変更する場合 # hostname hogehoge.example.com hostname コマンドで変更した場合再起動すると元に戻ります。 恒久的にを変更する場合 # vim /etc/hostname --- ## 設定したいホスト名を書く hogehoge.example.com --- ## サーバーを再起動し、設定を反映する。 # reboot /etc/hostname のファイル内の値がそのまま hostname に反映されます。 CentOS 6 とは編集するファイルが違うので紛らわしいですね。 IPアドレスを確認する # i
Macでウィンドウを半透明化して作業を効率化する方法が便利！ | FatherLog
WindowsユーザーがMacに乗り換えて初期段階で遭遇するMacの壁。 それはソフトやアプリの「アンインストール」だと思います。 Windowsであれば、「プログラムと機能」の一覧から対象のソフトウェアを選んでアンインストールをクリックすれば出来ますが、Macにはそのような機能がありませんよね。 今回は、macOSでアプリやソフトをアンインストール（削除）する３つの方法を紹介します！ アンインストール方法1. 「Launchpad」から削除 Macのアプリケーションフォルダの内容が全て表示される「Launchpad」を利用したアプリの削除方法です。 今回の例では、以前Mac OS XでLZH圧縮ファイルを解凍する方法で紹介したThe Unarchiverをアンインストールしてみます。 まずは、Dockから「Launchpad」を開きます。グレーのロケットアイコンが目印です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ES2015 (ES6) 以降の JavaScript について - RAMBO
[jQuery]でcssプロパティを動的に追加、変更、削除する - Qiita![[jQuery]でcssプロパティを動的に追加、変更、削除する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e28908ac9b9959fef7026fb9250b7af90da5995/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCalF1ZXJ5JTVEJUUzJTgxJUE3Y3NzJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgzJTkxJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgyJTkyJUU1JThCJTk1JUU3JTlBJTg0JUUzJTgxJUFCJUU4JUJGJUJEJUU1JThBJUEwJUUzJTgwJTgxJUU1JUE0JTg5JUU2JTlCJUI0JUUzJTgwJTgxJUU1JTg5JThBJUU5JTk5JUE0JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03MmMyZDAzNmU3ZGQ4NjEzYjg2YzZjMDBiZDdkMTY0OQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXpUZXJhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01YjUzOTM5ZTFlZGJiOThjNjI0OTliNGI1NDY2N2Y0ZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0fa2209207d0cd39648d80aa68a9cc91)
jQueryUI Icons List / Cheatsheet