TIL 2021.10.01常用jQueryメソッド
jQuery cdn位置
リンクはbody htmlの最後尾に置くべきで、このようにやっとスピードを高めることができます!
htmlを描き終えて最後に置くのが理想です!
要素を変更するとき
変換する値を変数に入れる
html('things to change')
css('color', 'red')
.attr
該当する要素の内部属性(
href、src等)を変更した場合 //jquery
const text = $("#test1").html('replace);
console.log(text);
//vanila
document.querySelectorAll("#test2")[0].innerHTML = "replace
const text2 = document.querySelectorAll("#test1")[0].innerHTML;
console.log(text2);
const
要素のみを出力する場合
変数を入れずに空の状態で入れる
//jquery
const text = $("#test1").html();
console.log(text);
//vanila
const text2 = document.querySelectorAll("#test2")[0].innerHTML;
console.log(text2);after()/ before()
他の要素を1つの要素「内」に入れると、after/beforeは1つの要素に同級要素(つまり同じ階層)を追加するために使用されます.
<body>
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<script>
$(".inner").after("<p class='apply'>Test</p>");
$("p").after(function () {
return `<div>${this.className}</div><br>`;
});
</script>
</body>関数の後に追加された要素については、関数を適用して特定のテキストを配置したり、個別の動作を実行したりすることができます(jQuery 1.4から).
また、複数の要素を同時に要素に追加することもできます.
var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );
addClass(「既存css」)
change()
inputドロップダウンリストに適用する方法で、対応する値が変更されたときにイベントが発生します.
<body>
<form>
<input class="target" type="text" value="Field 1" />
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">Trigger the handler</div>
<script>
$(".target").change(function () {
alert(`Handler for ${this.value} called.`);
});
</script>
</body>
コメントリンク
20-helpful-jquery-method
Reference
この問題について(TIL 2021.10.01常用jQueryメソッド), 我々は、より多くの情報をここで見つけました https://velog.io/@nellholic108/TIL-2021.10.01-자주-사용되는-jQuery-메서드テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol