close

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