jquery source
$('#xxx').css({
'color':'red',
'font-size':'1.1em',
'width':'100%',
'height':'100%',
});
除去する場合は「''」をセットする
$('#xxx').css({
'color':'',
'font-size':'',
'width':'',
'height':'',
});
一つだけ指定する場合
$('#xxx').css('color':'blue');
width,height
CSSのwidth,heightと同じ値を取得する
var w = $('#xxx').width();
var h = $('#xxx').height();
outerWidth,outerHeight
width,heightのそれぞれにpaddingとborderを加算した幅を取得する。
var w = $('#xxx').outerWidth();
var h = $('#xxx').outerHeight();
サンプル
//絶対位置を取得（HTMLドキュメントの右端からの位置）
var offset=$('#test1').offset();
var o_top=offset.top;
var o_left=offset.left;
//親要素からの相対位置を取得。（親要素にrelative等が指定されていない場合は絶対位置）
var pos=$('#test1').position();
var p_top=pos.top;
var p_left=pos.left;
サンプル
位置をセットする場合
var left = 150;
var top = 250;
$('#test1').offset({'top':top,'left':left });
// position:relative(もしくはabsolute,fixed)である場合、CSSへもセットすると良い。
$('#test1').css({
'left':left + 'px',
'top':top + 'px'
});
$(セレクタ).hover(オーバーイベント,アウトイベント);マウスオーバーイベントはオーバーイベントとアウトイベントの２つから構成される。
html source
<div id="test1" style="width:50px;height:50px;background-color:#dff0cb"></div> <div id="res1"></div>
javascript source
$('#test1').hover(
function(){
console.log('over');
$('#res1').html('over');
},
function(){
console.log('out');
$('#res1').html('out');
}
);
サンプル
keypressについて
shift+「Caps Lock」で小文字入力、大文字入力を切り替えたとき、キーコードの値も変化する。| イベント | 説明 |
|---|---|
| keydown | キーを押しこんだ時のイベント |
| keyup | キーを話した時のイベント |
| keypress |
キー押下イベント。 keydownとkeyupを併せ持つ。 shiftキーの概念が存在する。 小文字入力モードのときキーコードはkeydown、keyupと異なるが、 大文字入力モードやshiftキー同時押しで同じキーコードになる。 |
ソースコード
～略～
<script src="jquery.js"></script>
<script>
$(function(){
// キーを離したときのイベント
$('#test1').keyup(function(e){
var str = 'keyup:' + e.keyCode + '<br>';
$('#res').append(str);
});
// キーを押しこんだときのイベント
$('#test1').keydown(function(e){
var str = 'keydown:' + e.keyCode + '<br>';
$('#res').append(str);
});
// キーを押下イベント（keydownとkeyupを組み合わせたイベント）
$('#test1').keypress(function(e){
var str = 'keypress:' + e.keyCode + '<br>';
$('#res').append(str);
});
});
</script>
～略～
<textarea id="test1"></textarea>
<div id="res" >
～略～
出力（小文字入力モードで「A」キーを押した時）
$(window).keypress(function(e){
console.log(e.keyCode);
});
html
<input id="test1" type="text" value="ネコがネズミを食べる" />
javascript/jquery
$(function(){
$("#test1").focus(function() {
$(this).select();
});
});
サンプル
<div id="animal"> <div id="cat"> <span id="kuro-neko">黒猫</span> <aside id="siam-cat">シャム猫</aside> </div> <div class="dog">犬</div> </div>
var elm1 = $('#animal');
var siam_cat = elm1.find('#siam-cat').html();
console.log(siam_cat);
出力
シャム猫
childrenメソッド
childrenメソッドは直下の子要素のみ取得可能。
var elm2 = $('#animal');
var dog = elm1.children('.dog');// 直下の子要素のみ取得可能
console.log(dog);
出力
犬
var firstRow = parElm.children().eq(0);
<input id="hoge" type="text" />
var tagName = $('#hoge').get(0).tagName;var tagName = $('#hoge').prop("tagName");
var url = "sample1.html";
$.ajax({
type: "GET",
url: url,
cache: false,
dataType: "text",
success: function(text, type) {
var obj = $.parseHTML(text);
var res = $(obj).find('#test2').html();
console.log(res);
},
error: function(xmlHttpRequest, textStatus, errorThrown){
alert(textStatus);
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/note_prg/js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
alert('セキュリティエラー：外部HTMLのスクリプトが実行された');
});
</script>
</head>
<body>
<div>
<div id='test1'>Hello World! 壱</div><div id="test2">Hello World! 弐</div></div>
</body>
</html>
Hello World! 弐$.parseHTML();
「$.parseHTML(text);」でパースすると外部HTML内に埋め込まれているJavaScriptを実行しません。
var text = "<div><div id='test1'>Hello World! 壱</div><div id='test2'>Hello World! 弐</div></div>";
var obj = $.parseHTML(text);
var res = $(obj).find('#test2').html();
console.log(res);
Hello World! 弐
$('body').append(obj);
取得できないケース
「div」などタグでラップされていないとfindで取得することはできない。
var text = "<div id='test1'>Hello World! 壱</div><div id='test2'>Hello World! 弐</div>";
var obj = $.parseHTML(text);
var res = $(obj).find('#test2').html();// ← 空となり取得できず
var text = "<body><div id='test1'>Hello World! 壱</div><div id='test2'>Hello World! 弐</div></body>";
var obj = $.parseHTML(text);
var res = $(obj).find('#test2').html();// ← 空となり取得できず
$.parseHTMLの利点
「$.parseHTML(text);」でパースすると外部HTML内に埋め込まれているJavaScriptを実行しません。