memo
Create jQuery
コード
HTML
<div id="typo">
<div class="inner"> Create jQuery
<!--/.inner--></div>
<!--/.typo--> </div>JS
$(function(){
$('#typo .inner').on('mouseover',function(){
$(this).css('color','#ebc000');
$('#typo').css('background','#ae5e9b');
});
$('#typo .inner').on('mouseout',function(){
$(this).css('color','#fff');
$('#typo').css('background','#22558A');
});
});
タイミングコントロール
実行のタイミングをコントロールする方法
| mouseover | 特定の要素にマウスオーバーしたタイミング |
|---|---|
| mouseout | 特定の要素にマウスアウトしたタイミング |
| mousedown | 要素上でクリックボタンが押されたタイミング |
| mouseup | 要素上でクリックボタンが離れたタイミング |
| mousemove | マウスが動いたタイミング |
| click | 特定の要素にクリックしたタイミング |
| dbclick | 特定の要素にダブルクリックしたタイミング |
| keydown | 要素にフォーカスした状態で、キーボードのキーが押されたタイミング |
| keyup | 要素にフォーカスした状態で、キーボードのキーが離されたタイミング |
| focus | 要素にフォーカスが当たったタイミング |
| blur | 要素にフォーカスが外れたタイミング |
| change | 入力内容が変更されたタイミング |
| resize | ウィンドウのサイズが変わったタイミング |
| scroll | スクロールしたタイミング |
マウスカーソルが重なったらテキストの色が変わり、離れたら元に戻る
JS
/*マウスカーソルが重なったら色を変える*/
$(function(){
$('#typo .inner').on('mouseover',function(){
$(this).css('color','#ebc000');
});
/*マウスカーソルが離れたら色を変える*/
$('#typo .inner').on('mouseout',function(){
$(this).css('color','#fff');
});
});
メソッドチェーン
メソッドを鎖のようにつなげて記述し、実行するプログラム手法
/*cssを書き換える文字色を変更する*/
$(function () {
$('#typo .inner')
.on('click',function(){
$('#typo .inner').animate({
opacity:0.5,
fontSize:'20px'
},1500);
})
.on('mouseover', function () {
$('#typo').css({
color: '#ebc000',
backgroundColor: '#ae5e9b'
}) //css
$('#typo .inner').css({
color: '#ebc000'
}); //css
}) //.on
.on('mouseout', function () {
$('#typo').css({
color: '#fff',
backgroundColor: '#22558A'
}) //css
$('#typo .inner').css({
color: '#fff'
}); //css
}); //.on
});
});
jQueryアニメーション
アニメーション
/*テキストを上から下に移動する*/
$(function () {
$('#typo .inner')
.css('top','-30px')
.on('click',function(){
$('#typo .inner').animate({
top: '250px'
},1500,'swing',
/*終了後の処理*/
function(){
$('#typo .inner').animate({ top:'150px'},500);
}
);
});
});
プロフィール
| 名前 | ぬえさぶろう |
|---|---|
| 仕事 | PCの部品管理・取扱説明書作成 |
| 好物 | 納豆・カレー |
| 技能 |
|