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");
});