jQuery はページ要素を効率的に操作できます。
DOMとCSSページ要素の選択について:
$("span"); //すべてのspan要素
$("#elem") //idを持つ要素
$(" .classname "); //クラス名を持つ要素
$("div#elem"); //
$("ul li a.menu"); //クラス "menu"のタグ
$("p>span"); //pの直接の子要素span
$("input[type=password]") //指定された型の入力要素
; $("p:first"); //ページの最初の段落
$("p:even") //すべての偶数段落
$(":header");要素(h1～h6)
$(":button"); //すべてのボタン要素
$(":radio");
$(":checked") ; //選択された状態の選択ボックスまたはセグメント選択ボックス
html() すべての HTML (テキストを含む) を取得する JavaScript の innerHTML と同様に、要素または要素のグループの HTML コンテンツを取得します。
var htmlContent=$("#elem").html();$("#elem").html("<p>Here is some new content.</p>");/*修改内容*/var textContent=$("#elem").text();
$("#elem").text("new content"); //修改内容
$("#elem").append("<p>Here is some new content.</p>") //添加文本内容var title=$("#elem").attr("title"); //返回属性值
$("#elem").attr("title","new title"); //修改属性值hide() // 要素を非表示、遅い値は約 600 ミリ秒です
$("#elem").hide("slow",function(){
});
$("#elem").fadeOut("slow",funtion(){ // フェード後の操作 ｝)；$("#elem").fadeIn(500,function( ; Opacity、最終的な不透明度が 0.5 にフェードインまたはフェードアウトすることを示します });
2. スライド、フェードインとフェードアウトに似ています
slideDown();
slideUp();
slideToggle();
3.アニメーション
animate()は多くのCSSスタイルに適用できます。たとえば、要素の高さと幅を変更し、フェードアウトして非表示にします。
$("#elem").animate(
{
width:400px;
height:400px;
},1500,function(){
$(this).fadeOut("slow");
}
);コマンドチェーン
同じ要素セットに対して多くの操作を連続して実行できます:
$ ("#elem") .text("jQuery からこんにちは").fadeOut().fadeIn();
以上がjQueryによるページ要素の効率的な操作例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
