jquery domとは何ですか

jquery dom は、W3C 国際機関の一連の Web 標準であるドキュメント オブジェクト モデルを指します。DOM は、JavaScript で HTML、XHTML、および XML ドキュメントの読み取りと変更に使用できます。

推奨: 「jquery ビデオ チュートリアル 」

DOM とは何ですか?

ページ上の何かを変更するには、JavaScript が HTML ドキュメント内のすべての要素にアクセスする必要があります。このエントリは、HTML 要素を追加、移動、変更、削除するためのメソッドおよびプロパティとともに、ドキュメント オブジェクト モデル (DOM) を通じて取得されます。

1998 年に、W3C は DOM 仕様の最初のバージョンをリリースしました。この仕様により、HTML ページ内のすべての個々の要素へのアクセスと操作が可能になります。

すべてのブラウザがこの標準を実装しているため、DOM 互換性の問題を見つけることはほとんど不可能です。 DOM は、JavaScript で HTML の読み取りと変更に使用できます。-DOM 属性は、DOM Core よりも早く登場しました。HTML-DOM は、さまざまな HTML 要素の属性を説明するためのより簡潔な表記法を提供します。

例: HTML-DOM を使用してフォーム オブジェクト メソッドを取得します: document.forms

CSS-DOM

CSS-DOM は CSS の操作です。 JavaScript における CSS-DOM テクノロジの主な機能は、スタイル オブジェクトのさまざまな属性を取得および設定することです。スタイル オブジェクトのさまざまな属性を変更することで、Web ページにさまざまな効果を与えることができます。

要素のスタイル オブジェクトのフォントの色を設定するメソッド: elements.style.color = "red";

JQuery での DOM 操作

ノードの検索

要素は text() メソッドを通じて要素内の HTML コンテンツを読み取ることができます。これは DOM

$(function(){ 
var $para = $("p");         // 获取<p>节点 
var $li = $("ul li:eq(1)");         // 获取第二个<li>元素节点 
var p_txt = $para.attr("title");     // 输出<p>元素节点属性title 
var ul_txt = $li.attr("title");         // 获取<ul>里的第二个<li>元素节点的属性title 
var li_txt = $li.text();         // 输出第二个<li>元素节点的text 
});

# の innerHTML 属性に相当します。 ##ノードの挿入

ノードの削除:

要素を削除するとき、現在の要素に子要素が含まれている場合、それらの要素も削除されることに注意してください。要素を削除すると、現在削除されている要素への参照が返され、後で再度使用できます。

$(function(){
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo(“ul”); // 把刚才删除的又重新添加到<ul>元素里
});
//或
$(function(){
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title删除不等于"菠萝"的<li>元素删除
});

要素のクリア:

ul の 2 番目の li にあるすべての子孫ノードをクリアします。注: 空と削除の違いは、空は要素内の子孫ノードをクリアしますが、要素自体は保持されることです。

$(function(){
     $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容
  });

コピー ノード:

このコピーされた新しい要素には動作がありません。つまり、複製された新しい要素をクリックしても、以前に設定されたクリック イベントはありません。必要に応じて、パラメータ clone(true) が clone メソッドに渡されます。これは、要素をコピーするときに、要素内のバインドされたイベントもコピーされることを意味します。

$(function(){ 
    $("ul li").click(function(){ 
        $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素 
    }) 
});

置換ノード:

$(function(){ 
    $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
    // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
});

ラップノード:wrap,wrapAll,wrapInner

$(function(){
    $(“span”).wrap(“<strong></strong>”);
})

実行結果コード:

<strong><span>选择你最喜欢的水果</span></strong>
$("span").wrapAll("<strong></strong>");//以第一个为开始往后面紧贴   这个会破坏页面结构

実行後の結果

<strong>
    <span>选择你最喜欢的水果</span>
    <span>选择你最喜欢的水果</span>
</strong>
<span>选择你最喜欢的水果</span>
$("span").wrapInner ("<strong></strong>");

実行後の結果

<span><strong>选择你最喜欢的水果</strong></span>

属性操作

//取值
var p_txt = $("p").attr(“title”);
//设置属性
//找到a元素且有其中含有字符串“link”，修改属性href为“index.html"
$(function(){
    $("a:contains('link')").attr("href",“index.html");        
})
//如果想同时设置多个属性可以使用一下代码
$("a:contains('link')").attr({"href":“index.html","title":"test"});    //键值对    
attr({"属性1":"值1","属性2":"值2","属性3":"值3"})
  //删除属性 
  $(“a”).removeAttr(“title”);

注: jQuery には、html()、text()、height( ) など、値の取得と設定を同時に実装する関数が多数あります。 、width()、val()、css() など

スタイル操作

//读取和设置样式    使用属性方式 读取样式    
var p_class = $(“p”).attr(“class”);
 //设置样式
$(“p”).attr(“class”,”high”);

注: 属性を使用してスタイルを設定すると、元のスタイルが置き換えられます。追加の効果を実現したい場合は、 addClass

を使用してスタイルを追加できます:

Style:

<style type="text/css">
    .high    {font-weight:bold;    color:red; }
    .another{font-style:italic; color:blue;}
</style>

html:

<p title="选择你最喜欢的水果" class="high">选择你最喜欢的水果</p>      
//class="height another"  样式也可以这样写，中间用空格隔开
jQuery:
$(“p”).addClass(“another”);

注: スタイル設定は 2 つのルールに従います。複数のクラス値がある場合、それらのスタイルをマージすることと同じです。異なるクラスが同じスタイル属性を設定する場合、後者が前者をオーバーライドします。

スタイルの削除

 //移除样式
    $(“p”).removeClass(“high”);
 //同时移除多个样式
    $(“p”).removeClass(“high”).removeClass(“another”);
//样式全部移除
    $(“p”).removeClass();
Toggle

トグル イベントは、スタイルの設定とキャンセルを制御します。最初のクリックが実行されると、トグル イベント定義の最初の関数ブロックが実行されます。トグル イベントが実行されます。 2 回目のクリックが実行されたとき、定義内の 2 番目の機能ブロックなど。

$(function(){
    $(“p”).toggle(function(){        //内置方法一 添加样式
        $(this).addClass(“another”);            
    },function(){                //内置方法二 删除样式            
     $(this).removeClass(“another”);        
    })        
})   //会一直循环

toggleClassメソッドにも同様の機能があります

ハイパーリンクをクリックするとスタイルを設定するコードが実行されますが、このときスタイル設定時に自動的に判断されます。 style が対応する要素上にない場合、スタイルが追加されます。現在の要素からスタイルを削除します。

$(function(){
    $(“#link”).click(function(){
        $(“p”).toggleClass(“another”);            
        return false;
    })        
})

設定と取得括弧内に何もなければそれが取得され、存在すれば設定されます

--HTML文本值 
//取值
    var p_html = $(“p”).html();
  //设置
    $(“p”).html(“<strong>选择你最喜欢的水果</strong>”);
--text()方法  文本
//取值
　　var p_text = $(“p”).text();
//设置值
   $(“p”).text(“选择你最喜欢的水果”);
--val()方法  value
//取值
  var txt_value = $(this).val();
//设置值
  $(this).val("");

ノードをトラバースします

CSS-DOM

  //取值
    $(“p”).css(color);
  //设置值
    $(“p”).css(“color”,”red”);
  //和attr一样可以一次设置多个样式
    $(“p”).css({“color”:”red”,”background”:”#003333”});
  //透明度设置
    $(“p”).css(“opacity”,”0.5”);

以上がjquery domとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。