javascript
破綻したhtmlタグとは
１．こんにちは</div> ← 開始のdivタグがない
２．<span>こんばんは ← 終わりの span タグがない
文字列操作をしていると上記のような状況が出てきたので、htmlタグに破たんがないように修正したかった。
方法
/////////////////////////////////////////////////
var string = 破綻した html
//破綻している html を作業スペースに置く
$('#tmp_place').html(string);
//再度取り出す
string= $('#tmp_place').html();
/////////////////////////////////////////////////
//作業スペースはあらかじめ用意しておく
/////////////////////////////////////////////////
htmlファイル
<div id="tmp_place" style="display:none"></div>
/////////////////////////////////////////////////
jQuery の .html でエレメント内に挿入して、ふたたぎ取り出すと破綻した html は修正される。確認は chrome のみ。ほかのブラウザは不明。
カテゴリー：javascript, JQUERY
メモ。
宣言してない変数へ値を代入するとグローバル変数が作成されるのは javascript の仕様。
非strictモードの場合のみ。
詳細：“use strict”（厳格モード）を使うべきか？
カテゴリー：javascript
【jQuery】アラートを一回だけ出す
これで↓「青年」をクリックすると「青年」「ある青年の主張」とアラートが二度出てしまう。
-------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "span", function() {
var get_txt = $(this).text();
alert(get_txt);
});
});
</script>
</head>
<body>
<span>ある<span>青年</span>の主張</span>
</body>
</html>
-------------------------------------------------
「青年」をクリックすると「青年」だけ、その他の文字列をクリックすると「ある青年の主張」というアラートをそれぞれ一度だけアラートするには。
方法１
バブリングを止める
-------------------------------------------------
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "span", function(e) {
var get_txt = $(this).text();
alert(get_txt);
e.stopPropagation(e);
});
});
</script>
-------------------------------------------------
stopPropagation で親要素へのイベントの伝播を止めている
方法２
event.target を使う
-------------------------------------------------
<script type="text/javascript">
jQuery(document).on('click', function (event) {
var target = event.target;
if (target.tagName === 'SPAN') {
alert(target.textContent);
}
});
</script>
-------------------------------------------------
event.targetは、イベントバブルのイベントを開始したDOM要素を返すプロパティ。
カテゴリー：javascript, JQUERY
Chrome のコンソールを見ると javascript のエラーが出ていた。
-------------------------------------------------
Uncaught TypeError: Cannot read property 'replace' of undefined
-------------------------------------------------
replace が未定義で読み込めないらしい。
原因 → 文字列でないものに replace を使っていた。
カテゴリー：javascript
動的に生成した要素に対してマウスオーバー（アウト）のイベントを起こすjQueryの記述
-------------------------------------------------------
$(document).on({
"mouseenter": function(){
$(this).removeClass("notouchstyle").addClass("touchstyle");
},
"mouseleave": function(){
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
}, ".touch-res");
-------------------------------------------------------
参考サイト
カテゴリー：javascript, JQUERY
ぐるぐる回るローディング画像の具体的な表示の仕方についてはこちらを参考
ajaxありの場合
-----------------------------------------------
JavaScriptdispLoading("処理中..."); //ローディング画像を表示するユーザー定義関数
//ajax処理
removeLoading(); //ローディング画像を消すユーザー定義関数
-----------------------------------------------
ajaxなしの場合
-----------------------------------------------
JavaScriptdispLoading("処理中...");
//javascript で描写が画面に反映されるタイミングは、関数の実行が終わってから。
//そのため、ローディング画面を表示させるために一旦ここで関数を終わらせる。
setTimeout(function() {
//時間がかかるjavascriptの処理（ajaxでない）。
removeLoading();
}, 0);
-----------------------------------------------
javascriptは、関数の実行中にページの書き換えは起こらない。関数の実行キューが空になって時点ではじめてページの書き換えが起こることに注意。
参考サイト
カテゴリー：javascript
ページ内リンクの要領で、特定の要素をウインドウの中央に表示する方法
<script type="text/javascript">
//ページの読み込みが完了したら
window.onload = function(){
var positionX = window.pageXOffset;
var positionY = window.pageYOffset;
alert(positionX);
alert(positionY);
//window.scrollTo( 0, 200) ;
// 要素の位置を取得する
var element = document.getElementById("jump");
var rect = element.getBoundingClientRect() ;
// 座標を計算する
var positionY = rect.top + window.pageYOffset ; // Y座標のスクロール量
// alert(positionY);
positionY = Math.floor(positionY) ; //小数点以下切り捨て
// alert(positionY);
var winHeight = window.innerHeight; //現在のウインドウの高さ
alert("ウインドウの高さ" + winHeight);
//0.5秒遅れてスクロールさせる。速いとうまくいかない※
setTimeout(function() { window.scrollTo( 0, positionY - winHeight/2) ; }, 500);
}
※ 詳細はこちら
こちらも参考
カテゴリー：javascript
JQUERYのPOST(ajax)で戻り値を複数返すには、PHPからjavascriptへのデータの受け渡しの際に配列をJSON形式に変換する
//PHP側
-------------------------------------
$data_arr = array($data1, $data2);
//連想配列でも可
//$data_arr = array('apple'=>'りんご', 'peach'=>'もも', 'pear'=>'なし');
//javascriptに受け渡すため配列をJSON形式に変換
$datas = json_encode($data_arr);
echo $datas; //JQUERYに渡す
-------------------------------------
JQUERY側
-------------------------------------
data_arr = JSON.parse(data); //戻り値をJSONとして解析
alert(data_arr[0]);
alert(data_arr[1]);
-------------------------------------
カテゴリー：javascript, JQUERY, PHP
javascriptのgetElementByIdで値を取得したようにgetElementsByClassNameで値を取得しようとすると取得できなかった。getElementsByClassNameはたんにgetElementByIdのClass版ではなかった。
getElementByIdとgetElementsByClassNameでは戻り値が違う。
getElementByIdの戻り値
-----------------------------------------------------
存在する場合は要素（オブジェクト）を返し、存在しない場合はnullを返す。
-----------------------------------------------------
getElementsByClassNameの戻り値
-----------------------------------------------------
存在する場合は1個以上のHTMLCollectionを返し、
存在しない場合は0個のHTMLCollectionを返す。
-----------------------------------------------------
getElementByIdがオブジェクトを返すのに対して、getElementsByClassNameは配列っぽいものを返す。複数返すからgetElementsByClassNameなのね。
//idにクリックイベントを設置
-----------------------------------------------------
document.getElementById('content').click = function (e){
alert("クリックされた");
}
-----------------------------------------------------
//classにクリックイベントを設置
-----------------------------------------------------
document.getElementsByClassName('box1')[0].onmouseup = function (e){
alert("クリックされた");
}
-----------------------------------------------------
カテゴリー：javascript
ルビだけコピーしたくない
上のページを参考にルビつきの文章を選択してボタンを押すとアラートでルビなしの選択テキストが表示されるスクリプトを書いたのでメモ。
-------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a</title>
</head>
<body>
<section>
<h2>おはなし</h2>
<p>
<ruby><rb>親譲</rb><rp>（</rp><rt>おやゆず</rt><rp>）</rp></ruby>りの<ruby><rb>無鉄砲</rb><rp>（</rp><rt>むてっぽう</rt><rp>）</rp></ruby>で小供の時から損ばかりしている。
</p>
</section>
<div id="foot_bt">
ルビなし文章をアラート
</div>
</body>
</html>
-------------------------------------------
//採用したのはこちら
-------------------------------------------
//いったん削除する
var rtList = document.getElementsByTagName("rt");
var contentList = [];
Array.prototype.forEach.call(rtList, function(rt) {
contentList.push(rt.textContent); //配列に入れる
rt.textContent = ""; //空にする
});
//選択した文章を代入
selection_text = document.getSelection().toString();
//削除したやつを戻す
setTimeout(function() {
Array.prototype.forEach.call(rtList, function(rt) {
rt.textContent = contentList.shift();
});
}, 0);
-------------------------------------------
最初の参考ページにdisplay:none;でルビを消す方法も載っているが、選択したテキストを取得する場合、IE11ではルビが残ってしまい無理だった。
参考：選択中文字列の取得 ブラウザによる違い
このページも役に立った
http://mamewaza.com/support/blog/howto-use-range-selection.html
カテゴリー：javascript, JQUERY
