jQueryでinnerHTML

jQueryを使ってweb上の要素を拾得して変更したり、拾得したりする場面が多く存在します。
今回はJavaScriptのinnerHTMLをjQueryで使用する方法です。

IDがboxの要素を書き換える動作は
上記のinnerHTMLとhtml()は同じです。

IDと違い、classで使用する場合、JavaScriptだとfor文で総当たりをしていかなければなりません。

上記では下記替えましたが

拾得する場合には

■IDの場合

■classの場合
$(“.box”).eq(1).html();

document.getElementsByClassName(“box”)[0].innerHTML;

順番は「0」から始まります、[0]だと一番最初の.box要素で[1]が二番目の.box要素を拾得することになります。

jQueryで高さの取得

height() でpaddingの内側を取得が可能です。

$(‘.box’).height();

高さを拾得してpositionの高さの調整をしたり、高さ可変のヘッダーのアンカーリンクを調整したりなど、レスポンシブデザインでもheight()は重宝したりします。

疑似クラス:has()

疑似クラス:has()はSelectors Level 4の仕様書にあり、この疑似クラスが、一般的に使用できるようになると

jsで上記のように書いていたものも、下記のように簡潔に書くことができるようになり、
クラス.itemBoxの要素内に.itemというクラス名を持つ子要素が存在した場合に、display:block;というCSSを適用することができます。

また、上記のようにh1の次にp要素があるh1要素に対してcssを適用など、応用した方法などができます

p要素が来るh1要素のみに一致します。

jsで実行可能ですが、cssだけで簡単に実装できるのは便利ですね

CSSで動画を背景に設定する

最近ではcssだけで、javascriptのような動作などが実現できるようになりました。

サイトの背景などに動画を埋め込むこともCSSだけで実装可能です。
対応していないブラウザもあるので、対応させたい古いブラウザなどがある場合jsなどを利用して実装する必要があります。

ここで、CSSで動画を背景に設定するためには、video要素を使います。

動画ファイルにはMP4とwebmファイルの二つが適しています。
.webm動画はChrome, Firefoxなどがサポートされています。

video要素をサポートしていないブラウザでは、動画を再生できないため、
video要素の入る場所に背景画像を指定し、videoタグをブロック要素に指定します。

検索フォームにフォーカスした時、リンクをクリックできるメニューを表示

検索フォームにフォーカスしたときに、人気キーワードなど表示させるメニューの作り方です。

検索フォームのフォーカスが外れた時の動作はメニュー内のリンク以外などをクリックした場合にメニューを閉じるように設定してあります。

■CSS

■jQuery

parent()・parents()・closest()

子要素の場合.find()やchildren()で要素を取得できますが

親要素の場合

parent() : 1個上の親要素を取得
closest() : セレクタに合致する要素を取得
parents() : 子要素より上の階層の全ての要素を取得

上記のセレクタで拾得できます。

parent() の場合 1個上の階層の要素しか取得できないためid=”parent-3″のみしか拾得できません

メソッドclosestを使用してclosest(‘.parent-2’):とすればid=”parent-2″を拾得できます。

parents()を使用した場合、.container,#parent-1,parent-2,parent-3など上の階層すべての親要素を拾得できます。

thisを使ってID名やClass名を拾得

thisを使用すれば
ラジオボタンにはそれぞれID名が降られており、押したラジオボタンのID名を判別して、
表示させる内容を変更するといったことが可能です。

例えば、複数あるボタンを押したとき、個別に対応したメニューをそれぞ入れ表示させたり、
フォームを条件分岐でユーザーに登録させる内容を変更したいなどです。

下記の例では、3つのラジオボタンに対して表示させるメニュー内容を変更するサンプルです。

上記では、
ユーザが選択したラジオボタンのidを var val = $(this).attr(‘id’); で拾得しています。
このように、attrメソッドの引数にidを指定することでthisのid値を取得することができます。

【jQuery】 $(this)の親要素、子要素、隣接要素を指定

$(this)はjQueryでイベントが発生した要素を指定することができます。

.click(function()などで、ボタンのクラス名を.btn-01や.btn-02と別々に分けなくても、イベントが発生した要素を指定できるので、
jsのコードなどきれいにまとめたりできます。

上記のようにボタンごとにクリックファンクションを指定しなくても

class=”btn”に対して押されたボタンの子要素を判別して、処理を行ってくれるので、ソースもきれいにまとめることができます。

jQueryで、順番に実行出来る .when() .done()

JavascriptやjQueryを記述していると、
最初のアニメーションが完了してから、jsでcssの変更を加えたい場面に遭遇します。
スライドアニメーションが完了するまでdisplay:none;にしたくないなどです。

■.when()には先に終わらせたい処理を記述
.when()に先に完了させたい処理を記述します。
要素がアニメーションで横に移動を完了するまでフェードアウトさせたくない場合、
先にアニメーションを記述します。

■.done()に後に実行したい処理を記述
アニメーションなどが終わった後に動作させたい動作を記述します。
フェードアウトやjsでcssの変更を加えるなど

■.when() と.done()をメソッドチェーンでも繋げて最初と後の処理を決定する
これら2つをメソッドチェーンで繋げて、処理を順番に実行させます。

電話のリンク自動生成を無効化する

IEなどのブラウザやiphoneは、数字の文字列に電話をかける自動でリンクを生成します。
リンクがすべて電話番号なら良いのですが、電話番号でない、連続の数字を電話番号だと認識してリンクを作成したりします。

iphoneやipadなどのスマートフォンは電話番号のリンクに対して、タップするだけで簡単に電話をかけれるようになっているので、

数字などの文字列を電話番号だとブラウザに誤認識されてしまうと、間違い電話や、ユーザーを混乱させる原因となるため、標準でオフにしておいたほうがよさそうです。

そして、この機能を無効化するには、headに以下のようにmeta要素を追加します。

先ほどの記述で、自動で電話のリンクを作成する機能は無効化しましたが、
個別で電話番号にリンクを張りたい場合には以下の記述をすれば大丈夫です。

また、PCなどのブラウザでは電話をかけることができないので、スマートフォンのみで電話をかけるようにjsで設定します。