jQuery ਦੇ ਨਾਲ DOM ਹੇਰਾਫੇਰੀ- ਤਕਨੀਕਾਂ ਅਤੇ ਉਦਾਹਰਨਾਂ

jQuery ਦੇ ਨਾਲ DOM ਹੇਰਾਫੇਰੀ ਤੁਹਾਨੂੰ DOM ਢਾਂਚੇ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾ ਕੇ ਇੱਕ ਵੈਬ ਪੇਜ 'ਤੇ ਡੇਟਾ ਨੂੰ ਸੋਧਣ, ਜੋੜਨ, ਹਟਾਉਣ ਜਾਂ ਉਸ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। jQuery DOM ਹੇਰਾਫੇਰੀ ਕਾਰਜਾਂ ਨੂੰ ਕਰਨ ਲਈ ਸੁਵਿਧਾਜਨਕ ਢੰਗ ਅਤੇ ਫੰਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਇੱਥੇ ਖਾਸ ਉਦਾਹਰਣਾਂ ਦੇ ਨਾਲ ਹਰੇਕ ਭਾਗ ਲਈ ਸਪੱਸ਼ਟੀਕਰਨ ਦਿੱਤੇ ਗਏ ਹਨ:

ਤੱਤ ਦੀ ਚੋਣ

• $("p") <p>: ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਤੱਤ ਚੁਣੋ ।
• $(".myClass"): ਕਲਾਸ ਵਾਲੇ ਸਾਰੇ ਤੱਤ ਚੁਣੋ myClass ।
• $("#myElement"): ID ਵਾਲਾ ਤੱਤ ਚੁਣੋ myElement ।
• $("parentElement").find(".childElement") childElement: ਕਲਾਸ ਦੇ ਅੰਦਰ ਸਾਰੇ ਬਾਲ ਤੱਤ ਚੁਣੋ parentElement ।

ਉਦਾਹਰਨ:

$("p").css("color", "red");

ਸਮੱਗਰੀ ਨੂੰ ਬਦਲਣਾ

• $("#myElement").html("<b>Hello World</b>"): ID ਦੇ ਨਾਲ ਤੱਤ ਲਈ HTML ਸਮੱਗਰੀ ਸੈੱਟ ਕਰੋ myElement ।
• $("p").text("New text") <p>: ਸਾਰੇ ਤੱਤਾਂ ਲਈ ਟੈਕਸਟ ਸਮੱਗਰੀ ਸੈੱਟ ਕਰੋ ।

ਉਦਾਹਰਨ:

$("p").text("New paragraph");

ਤੱਤ ਜੋੜਨਾ ਅਤੇ ਹਟਾਉਣਾ

• $("ul").append("<li>New item</li>"): ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ ਸੂਚੀ() <li> ਦੇ ਅੰਤ ਵਿੱਚ ਇੱਕ ਤੱਤ ਸ਼ਾਮਲ ਕਰੋ । <ul>
• $(".myClass").remove() myClass: ਪੰਨੇ ਤੋਂ ਕਲਾਸ ਵਾਲੇ ਸਾਰੇ ਤੱਤ ਹਟਾਓ ।

ਉਦਾਹਰਨ:

$("ul").append("<li>Item 4</li>");

ਗੁਣਾਂ ਅਤੇ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਬਦਲਣਾ

• $("img").attr("src", "new-image.jpg") src: ਸਾਰੇ <img> ਤੱਤਾਂ ਲਈ ਗੁਣ ਮੁੱਲ ਬਦਲੋ ।
• $("#myElement").addClass("newClass") newClass: ID ਦੇ ਨਾਲ ਐਲੀਮੈਂਟ ਵਿੱਚ ਕਲਾਸ ਜੋੜੋ myElement ।
• $("#myElement").removeClass("oldClass") oldClass: ID ਨਾਲ ਐਲੀਮੈਂਟ ਤੋਂ ਕਲਾਸ ਹਟਾਓ myElement ।

ਉਦਾਹਰਨ:

$("img").attr("alt", "New Image");

ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ

$("button").click(function() { }): ਜਦੋਂ ਇੱਕ <button> ਐਲੀਮੈਂਟ ਕਲਿਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਰਜਿਸਟਰ ਕਰੋ।

ਉਦਾਹਰਨ:

$("button").click(function() {  
  alert("Button clicked!");  
});  

ਪ੍ਰਭਾਵ ਅਤੇ ਐਨੀਮੇਸ਼ਨ

• $("#myElement").hide(): ID ਨਾਲ ਤੱਤ ਨੂੰ ਓਹਲੇ ਕਰੋ myElement ।
• $("#myElement").show(): ID ਦੇ ਨਾਲ ਤੱਤ ਦਿਖਾਓ myElement ।
• $("#myElement").fadeOut(): ID ਦੇ ਨਾਲ ਤੱਤ 'ਤੇ ਫੇਡ-ਆਊਟ ਪ੍ਰਭਾਵ ਕਰੋ myElement ।
• $("#myElement").fadeIn(): ID ਦੇ ਨਾਲ ਤੱਤ 'ਤੇ ਫੇਡ-ਇਨ ਪ੍ਰਭਾਵ ਕਰੋ myElement ।

ਉਦਾਹਰਨ:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});