アフィリエイト広告を利用しています

広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog

2018年09月21日

HTML、javascript、jQuery、css高速化あれこれ

速度改善を指示された時に調べたまとめ
速度改善じゃなくて最初の実装時に意識したいですね。。。
ページの調査

1.Google PageSpeed Insights
ページURLを入力することで、高速化するためのサイト改善のヒントが得られる。
すべての項目に対応する必要はないが、対応できる部分は対応することでサイトの高速化がはかれる。

javascript、jQuery編

1.scriptタグはbody要素の最後に
javascriptファイルの読み込み、解析時は他のファイルの読み込みや、ブラウザの描画が止まってしまうようなので、処理上問題がなければbody要素の最後(の直上に)配置するようにする。

2.javascriptファイルは出来る限り外部ファイルで作成する
HTMLファイルは毎回ダウンロードされるため、javascriptファイルは出来るだけ外部ファイルで作成し、キャッシュされるようすることで、HTMLのダウンロードサイズを減らすことができます。
ただし、javascriptファイルの更新時にキャッシュが残ってしまうため、パラメータを付与するなどjavascriptファイル更新時の対策を検討する必要があります。



2018年09月19日

jQueryの要素存在チェック

jQueryによる要素の存在チェック方法です。
他にもやり方はあると思いますが、自分が良く使うものをメモ

1.$(selector)[0]
if($(selector)[0]){
  alert("OK");
} else {
  alert("NG");
}

2.$(selector).length
if($(selector).length){
  alert("OK");
} else {
  alert("NG");
}

3.$(selector)size()
if($(selector)size()){
  alert("OK");
} else {
  alert("NG");
}






まとめ
sizeやgetを使う方法もありますが、個人的には上の2つをよく使ってる気がします。
また、処理速度を気にするならjQueryを使用しない↓が良いかと。。。
document.getElementById("id") != null





タグ:jQuery JavaScript
posted by yuriblo02 at 16:09| Comment(0) | TrackBack(0) | jQuery

2018年09月18日

jQueryセレクタのまとめ

たまにド忘れするので、jQueryのセレクタまとめました。
基本的なセレクタ

1.要素で指定する
$("要素名")

2.idで指定する
$("#id名")
※セレクタでidを指定する場合は「#」を使用する

3.classで指定する
$(".class名")
※セレクタでclassを指定する場合は「.」を使用する






複数条件での指定

1.AND条件での指定
要素、id、class等をつなげて記載する
例:「test」というidを持つdiv要素
$("div#test")
例:「test」と「dummy」の2つのclassを持つ要素
$(".test.dummy")

2.OR条件での指定
要素、id、classなどを「,」でつなげて記載する
例:「test」classまたは「dummy」classを持つ要素
$(".test,.dummy")
例:a要素または「test」というidを持つ要素
$("a,#test")




階層での指定

1.先祖要素を指定する
先祖要素+スペース+対象要素となるように記載する
例:「test」idを持つ要素内にある「dummy」classを持つ要素
$("#test .dummy")

2.親要素を指定する
「>」で「親 > 子」となるように記載する
例:「test」idを持つ要素を親に持つ「dummy」classを持つ要素
$("#test > .dummy")

兄弟要素の指定

1.前後関係を指定して要素を指定する1
「+」でつなげて記載する
例:「test」idを持つ要素の次の「dummy」classを持つ要素(兄弟要素)
$("#test + .dummy")

2.前後関係を指定して要素を指定する2
「~」でつなげて記載する
例:「test」idを持つ要素以降に出てくる「dummy」classを持つ全ての要素(兄弟要素)を指定
$("#test ~ .dummy")
タグ:JavaScript jQuery
posted by yuriblo02 at 11:51| Comment(0) | TrackBack(0) | jQuery
ファン
検索
<< 2018年09月 >>
            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            
最新記事
写真ギャラリー
最新コメント
タグクラウド
カテゴリーアーカイブ
月別アーカイブ
プロフィール
日別アーカイブ
×

この広告は30日以上新しい記事の更新がないブログに表示されております。