Web制作

mouseenter・カーソルに合わせて色を変える/jQueryで新しい要素を作り出す。~jQueryマスターのための構文~

mouseenterイベント~マウスカーソルをのせると色を変える操作

const onMouseenter=(e)=>{
$(e.target).css({
'background-color':'#ff9999',
});
};

$('.box')
.on('mouseenter',onMouseenter);

初歩学習の段階であれば、第一引数で指定したmouseenterは、どこで定義したもの?と思うかもしれません。

こちらは、マウスをのせるというイベントの種類自体を表しています。

元々定義されたものです。

このイベントに対して、第2引数のonMouseenter関数を実行しています。

簡単な例ですが、元々存在するものではあるけれど、コードに書いていないから悩んでしまうという例でした。

コードを読んでいる際は考えが固執してしまいますので、こんな感じで悩んでしまうかもしれません。

Even in the workplace, you may find yourself unknowingly being perceived by others as having a rigid way of thinking, or conversely, you may come across someone who you think is a bit rigid.

Because it's been done this way for a long time, etc.

If you take it seriously, you may even feel hysterical.

I hope this is one of the things you notice while studying.

jQueryで新しい要素を作成する方法

const $newElement=$('<p>',{
class:'child',
text:'追加した要素',
});

作成した要素は、jQueryオブジェクトに変換されます。

変数newElementの頭にjQueryを表す$が付いていることから分かると思います。

変換されたjQueryオブジェクトを利用して、通常のjQuery構文である、jQueryのセレクタとメソッドを利用した操作を行うことができるようになります。

jQueryで操作・命令するためのセレクタを作り出したいけれど、記述自体がないのであれば、まずセレクタを作り出すということから開始しなければいけないということですね。

【javaSciptやjQueryをセットで学べる講座】

-Web制作

Copyright© サァーチpage , 2024 All Rights Reserved.