ക്ലാസ് സ്വീകരിക്കുന്നത് (15)

പരീക്ഷിച്ചു നോക്കൂ

$(".ClassName").css("നിറം",""); അല്ലെങ്കിൽ $("#Idname").css("നിറം","");

ഞാൻ jQuery ഉപയോഗിച്ച് CSS മാറ്റുകയാണ്, ഇൻപുട്ട് മൂല്യത്തെ അടിസ്ഥാനമാക്കി ഞാൻ ചേർക്കുന്ന ശൈലി നീക്കംചെയ്യാൻ ഞാൻ ആഗ്രഹിക്കുന്നു:

If(color != "000000") $("body").css("background-color", color); വേറെ // ശൈലി നീക്കം ചെയ്യണോ?

എനിക്ക് ഇത് എങ്ങനെ ചെയ്യാൻ കഴിയും? കളർ പിക്കർ (അതായത്, കളർ വീലിനു മുകളിലൂടെ മൗസ് ചലിപ്പിക്കുമ്പോൾ) ഒരു നിറം തിരഞ്ഞെടുക്കുമ്പോഴെല്ലാം മുകളിലെ ലൈൻ എക്‌സിക്യൂട്ട് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക.

രണ്ടാമത്തെ കുറിപ്പ്: css ("പശ്ചാത്തല-നിറം", "ഒന്നുമില്ല") ഉപയോഗിച്ച് എനിക്ക് ഇത് ചെയ്യാൻ കഴിയില്ല, കാരണം ഇത് css ഫയലുകളിൽ നിന്ന് ഡിഫോൾട്ട് സ്റ്റൈലിംഗ് നീക്കംചെയ്യും. jQuery ചേർത്ത ഇൻലൈൻ പശ്ചാത്തല-വർണ്ണ ശൈലി നീക്കംചെയ്യാൻ ഞാൻ ആഗ്രഹിക്കുന്നു.

നിങ്ങൾ CSS ക്ലാസിൽ നിന്ന് നീക്കം ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ശൈലി എന്തുകൊണ്ട് സൃഷ്ടിച്ചുകൂടാ? ഇപ്പോൾ നിങ്ങൾക്ക് ഉപയോഗിക്കാം: .removeClass() . ഇത് ഉപയോഗിക്കുന്നതിനുള്ള സാധ്യതയും തുറക്കുന്നു: .toggleClass()

(ക്ലാസ് ഉണ്ടെങ്കിൽ അത് നീക്കം ചെയ്യുക, ഇല്ലെങ്കിൽ ചേർക്കുക).

ലേഔട്ട് പ്രശ്‌നങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ (സ്‌റ്റൈൽ അപ്രത്യക്ഷമായത് എന്തുകൊണ്ടാണെന്ന് കണ്ടെത്താൻ ശ്രമിക്കുന്നതിന് വിരുദ്ധമായി) ഒരു ക്ലാസ് ചേർക്കുന്നത്/നീക്കം ചെയ്യുന്നത് മാറ്റുന്നതിൽ/ട്രബിൾഷൂട്ട് ചെയ്യുന്നതിൽ ആശയക്കുഴപ്പം കുറവാണ്.

ഇതുപോലുള്ള ഒന്ന് എങ്ങനെയുണ്ട്:

Var myCss = $(ഘടകം).attr("css"); myCss = myCss.replace("പശ്ചാത്തലം-നിറം: "+$(ഘടകം).css("പശ്ചാത്തലം-നിറം")+";", ""); if(myCss == "") ($(ഘടകം).removeAttr("css"); ) else ($(element).attr("css", myCss); )

ഇത് മറ്റ് ചില പരിഹാരങ്ങളേക്കാൾ സങ്കീർണ്ണമാണ്, എന്നാൽ സാഹചര്യങ്ങളിൽ കൂടുതൽ വഴക്കം നൽകാൻ കഴിയും:

1) നിങ്ങൾ പ്രയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന/തിരഞ്ഞെടുത്ത രീതിയിൽ നീക്കം ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ശൈലി ഒറ്റപ്പെടുത്താൻ (എൻക്യാപ്‌സുലേറ്റ്) ഒരു ക്ലാസ് നിർവചനം ഉണ്ടാക്കുക. ഇത് ശൂന്യമായിരിക്കാം (ഈ സാഹചര്യത്തിൽ ഇത് ഒരുപക്ഷേ ആയിരിക്കണം):

MyColor()

2) gilly3-ൻ്റെ ഈ ഉത്തരത്തിൽ നിന്ന് http://jsfiddle.net/kdp5V/167/ അടിസ്ഥാനമാക്കി ഈ കോഡ് ഉപയോഗിക്കുക:

ഫംഗ്ഷൻ മാറ്റം CSSRule (styleSelector, പ്രോപ്പർട്ടി, മൂല്യം) ((var ssIdx = 0; ssIdx)< document.styleSheets.length; ssIdx++) { var ss = document.styleSheets; var rules = ss.cssRules || ss.rules; if(rules){ for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) { var rule = rules; if (rule.selectorText == styleSelector) { if(typeof value == "നിർവചിക്കാത്തത്" || !value){ rule.style.removeProperty(property); } else { rule.style.setProperty(property,value); } return; // stops at FIRST occurrence of this styleSelector } } } } }

മുന്നറിയിപ്പുകൾ:

• വിപുലമായ പരിശോധനയ്ക്ക് വിധേയമല്ല.
• പുതിയ മൂല്യത്തിൽ പ്രധാനപ്പെട്ടതോ മറ്റ് നിർദ്ദേശങ്ങളോ ഉൾപ്പെടുത്താൻ കഴിയില്ല. ഈ കൃത്രിമത്വത്തിൻ്റെ ഫലമായി നിലവിലുള്ള അത്തരം നിർദ്ദേശങ്ങൾ നഷ്‌ടമാകും.
• മാറ്റങ്ങൾ മാത്രമാണ് സെലക്ടർ ശൈലിയുടെ രൂപം ആദ്യം വെളിപ്പെടുത്തിയത്. മുഴുവൻ ശൈലികളും ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്യുന്നില്ല, എന്നാൽ കൂടുതൽ സങ്കീർണ്ണമായ എന്തെങ്കിലും ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ കഴിയും.
• ഏതെങ്കിലും അസാധുവായ/ഉപയോഗിക്കാൻ കഴിയാത്ത മൂല്യങ്ങൾ അവഗണിക്കപ്പെടും അല്ലെങ്കിൽ ഒരു പിശക് ഉണ്ടാക്കും.
• Chrome-ൽ (കുറഞ്ഞത്), നോൺ-ലോക്കൽ (ക്രോസ്-സൈറ്റിലെന്നപോലെ) CSS നിയമങ്ങൾ document.styleSheets ഒബ്‌ജക്റ്റ് വഴി വെളിപ്പെടുത്തില്ല, അതിനാൽ ഇത് അവർക്ക് പ്രവർത്തിക്കില്ല. ആ കോഡിൻ്റെ "ആദ്യം കണ്ടെത്തിയ" സ്വഭാവം കണക്കിലെടുത്ത് നിങ്ങൾ ലോക്കൽ ഓവർറൈഡുകൾ ചേർക്കുകയും അവ കൈകാര്യം ചെയ്യുകയും വേണം.
• document.styleSheets പൊതുവെ കൃത്രിമത്വത്തോട് പ്രത്യേകിച്ച് സൗഹൃദമല്ല, ആക്രമണാത്മക ഉപയോഗത്തിന് ഇത് പ്രവർത്തിക്കുമെന്ന് പ്രതീക്ഷിക്കരുത്.

ഈ രീതിയിൽ ഒറ്റപ്പെടുത്തുന്ന ശൈലിയാണ് CSS, കൈകാര്യം ചെയ്യുന്നത് അല്ലെങ്കിലും. CSS നിയമങ്ങൾ കൈകാര്യം ചെയ്യുന്നത് jQuery എന്തിനെക്കുറിച്ചല്ല, jQuery DOM ഘടകങ്ങൾ കൈകാര്യം ചെയ്യുകയും അത് ചെയ്യുന്നതിന് ഒരു CSS സെലക്ടർ ഉപയോഗിക്കുകയും ചെയ്യുന്നു.

el = document.querySelector(ഘടകം) സ്റ്റൈലുകൾ അനുവദിക്കുക = el.getAttribute("style") el.setAttribute("style", styles.replace("width: 100%", ""))

സ്വീകരിച്ച ഉത്തരം പ്രവർത്തിക്കുന്നു, പക്ഷേ എൻ്റെ ടെസ്റ്റുകളിൽ DOM-ൽ ഒരു ശൂന്യമായ ശൈലി ആട്രിബ്യൂട്ട് അവശേഷിക്കുന്നു. വലിയ കാര്യമില്ല, പക്ഷേ ഇത് എല്ലാം നീക്കംചെയ്യുന്നു:

RemoveAttr("സ്റ്റൈൽ");

നിങ്ങൾ എല്ലാ ഡൈനാമിക് ശൈലികളും നീക്കംചെയ്‌ത് സ്റ്റൈൽ ഷീറ്റിലേക്ക് മടങ്ങാൻ ആഗ്രഹിക്കുന്നുവെന്ന് ഇത് അനുമാനിക്കുന്നു.

$(ഘടകം).style.attr = " ";

എൻ്റെ പ്ലഗിൻ ഉപയോഗിക്കുക:

$.fn.removeCss=function(എല്ലാം)(എങ്കിൽ(എല്ലാം===ശരി)( $(ഇത്).removeAttr("class"); ) തിരികെ $(this)removeAttr("style") )

നിങ്ങളുടെ കാര്യത്തിൽ, ഇത് ഇതുപോലെ ഉപയോഗിക്കുക:

$().removeCss();

$().removeCss(false);

നിങ്ങൾക്ക് അതിൻ്റെ ക്ലാസുകളിൽ നിർവചിച്ചിരിക്കുന്ന CSS നീക്കം ചെയ്യണമെങ്കിൽ:

$().removeCss(true);

ലളിതമായി ഉപയോഗിക്കുന്നത്:

$(".tag-class").removeAttr("style");

$("#tag-id").removeAttr("style");

പ്രോപ്പർട്ടി ശൂന്യമായ സ്ട്രിംഗിലേക്ക് മാറ്റുന്നത് ജോലി ചെയ്യുന്നതായി തോന്നുന്നു.

$.css("പശ്ചാത്തല-നിറം", "");

ഈ jQuery ഫംഗ്‌ഷനുകളിൽ ഏതെങ്കിലും പ്രവർത്തിക്കണം:

$("#ഘടകം").removeAttr("style"); $("#ഘടകം").removeAttr("പശ്ചാത്തലം-നിറം")

ശരി, 6 വർഷം പഴക്കമുള്ള ഫാൻ അടയ്ക്കുകയാണ്. അടച്ചുപൂട്ടലിൻ്റെ ഏറ്റവും ലളിതമായ ഉദാഹരണം നിങ്ങൾക്ക് കേൾക്കണോ?

ഇനിപ്പറയുന്ന സാഹചര്യം നമുക്ക് സങ്കൽപ്പിക്കാം: ഡ്രൈവർ ഒരു കാറിൽ ഇരിക്കുന്നു. ഈ കാർ വിമാനത്തിനുള്ളിലാണ്. വിമാനം എയർപോർട്ടിലാണ്. ഒരു ഡ്രൈവറുടെ വാഹനത്തിന് പുറത്തുള്ള കാര്യങ്ങൾ ആക്‌സസ് ചെയ്യാനുള്ള കഴിവ്, എന്നാൽ ഒരു വിമാനത്തിനുള്ളിൽ, ആ വിമാനം എയർപോർട്ടിൽ നിന്ന് പുറപ്പെടുകയാണെങ്കിൽ പോലും, ഒരു അടച്ചുപൂട്ടലാണ്. അത്രയേയുള്ളൂ. നിങ്ങൾക്ക് 27 വയസ്സ് തികയുമ്പോൾ, കൂടുതൽ വിശദമായ വിശദീകരണമോ ചുവടെയുള്ള ഉദാഹരണമോ നോക്കുക.

എൻ്റെ വിമാനത്തിൻ്റെ ചരിത്രം എങ്ങനെ കോഡാക്കി മാറ്റാമെന്നത് ഇതാ.

var plane = ഫംഗ്‌ഷൻ (defaultAirport) ( var lastAirportLeft = defaultAirport; var കാർ = (ഡ്രൈവർ: (startAccessPlaneInfo: function() ( setInterval(function() ( console.log("അവസാനം എയർപോർട്ട് ആയിരുന്നു " + lastAirportLeft); ), 2000); ... plane.leaveTheAirport("ജോൺ എഫ്. കെന്നഡി");

ഒറിജിനൽ മൂല്യങ്ങൾ മാറ്റിക്കൊണ്ട് പൊതിഞ്ഞ സെറ്റിൻ്റെ ഘടകങ്ങളുടെ ഗുണങ്ങളും ആട്രിബ്യൂട്ടുകളും കൈകാര്യം ചെയ്യാൻ jQuery ലൈബ്രറി നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങൾക്ക് പുതിയ പ്രോപ്പർട്ടികൾ സജ്ജമാക്കാനും യഥാർത്ഥ പ്രോപ്പർട്ടികളുടെ മൂല്യങ്ങൾ നേടാനും മാറ്റാനും കഴിയും. ക്ലാസുകൾ നീക്കം ചെയ്യുകയോ ചേർക്കുകയോ ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് ഘടകങ്ങളുടെ പ്രദർശന ശൈലി ചലനാത്മകമായി മാറ്റാൻ കഴിയും.

മൂലക ഗുണങ്ങളും ആട്രിബ്യൂട്ടുകളും കൈകാര്യം ചെയ്യുന്നു 1. ഒരു ക്ലാസ് 1.1 ചേർക്കുകയും നീക്കം ചെയ്യുകയും ചെയ്യുന്നു. Method.addClass()

പൊതിഞ്ഞ സെറ്റിൻ്റെ ഓരോ ഘടകത്തിലേക്കും നിർദ്ദിഷ്ട ക്ലാസ് (അല്ലെങ്കിൽ ഒന്നിലധികം ക്ലാസുകൾ) ചേർക്കുന്നു. ഈ രീതി പ്രവർത്തിക്കുന്നതിന്, നിങ്ങൾ ആദ്യം ചേർത്ത ക്ലാസിനായി ഒരു ശൈലി സൃഷ്ടിക്കണം. ഈ രീതി പഴയ ക്ലാസ് നീക്കം ചെയ്യുന്നില്ല, പക്ഷേ പുതിയത് ചേർക്കുന്നു.

AddClass(ക്ലാസ് നാമം) ക്ലാസ്സിൻ്റെ പേര് സ്‌പെയ്‌സുകളാൽ വേർതിരിച്ച ഒന്നോ അതിലധികമോ ക്ലാസ് പേരുകളാണ്. .addClass(function) ഫംഗ്‌ഷൻ - നിലവിലുള്ളവയിലേക്ക് ചേർക്കുന്നതിന് ഒന്നോ അതിലധികമോ സ്‌പെയ്‌സ് വേർതിരിച്ച ക്ലാസ് പേരുകൾ നൽകുന്നു. സെറ്റിലെ ഒരു മൂലകത്തിൻ്റെ സൂചികയും ക്ലാസ്സിൻ്റെ (ഇ) നിലവിലുള്ള പേരും വാദമായി എടുക്കുന്നു.

1.2 Method.removeClass()

പൊതിഞ്ഞ സെറ്റിൻ്റെ എല്ലാ ഘടകങ്ങളിൽ നിന്നും നിർദ്ദിഷ്‌ട ക്ലാസ് നാമം(ങ്ങൾ) നീക്കംചെയ്യുന്നു.

RemoveClass(ക്ലാസ് നാമം) ക്ലാസ് നാമം - ഓപ്ഷണൽ പാരാമീറ്റർ, ഒന്നോ അതിലധികമോ ക്ലാസ് പേരുകൾ സ്പേസ് കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു. ക്ലാസിൻ്റെ പേര് വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, സെറ്റിൻ്റെ ഘടകങ്ങളിൽ നിന്ന് നിലവിലുള്ള എല്ലാ ക്ലാസുകളും മെത്തേഡ് നീക്കം ചെയ്യുന്നു. ഒരു ക്ലാസിൻ്റെ പേര് വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, നിർദ്ദിഷ്ട ക്ലാസ് മാത്രം ഇല്ലാതാക്കുന്നു. .removeClass(function) ഫംഗ്‌ഷൻ - നിലവിലുള്ളവയിൽ നിന്ന് നീക്കം ചെയ്യപ്പെടുന്ന ഒന്നോ അതിലധികമോ സ്‌പെയ്‌സ് വേർതിരിച്ച ക്ലാസ് പേരുകൾ നൽകുന്നു. സെറ്റിലെ മൂലകത്തിൻ്റെ സൂചികയും ക്ലാസ്സിൻ്റെ (എ) പഴയ പേരും വാദമായി എടുക്കുന്നു.

1.3 Method.toggleClass()

സെറ്റിലെ ഓരോ ഘടകത്തിൽ നിന്നും ഒന്നോ അതിലധികമോ ക്ലാസുകൾ ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്യുന്നു. പൊതിഞ്ഞ സെറ്റിൻ്റെ ഓരോ ഘടകങ്ങളും പ്രത്യേകം പരിശോധിക്കുന്നു. മൂലകത്തിൽ ഇല്ലെങ്കിൽ, ഈ രീതി നിർദ്ദിഷ്ട ക്ലാസ് നാമം ചേർക്കുന്നു, അത് ഉള്ള മൂലകങ്ങളിൽ നിന്ന് അത് നീക്കം ചെയ്യുന്നു. ഘടകങ്ങളുടെ വിഷ്വൽ പ്രാതിനിധ്യം ടോഗിൾ ചെയ്യാൻ ഉപയോഗിക്കുന്നു.

ToggleClass(classname) classname എന്നത് സെറ്റിൻ്റെ ഓരോ ഘടകത്തിനും ടോഗിൾ ചെയ്യപ്പെടുന്ന ഒന്നോ അതിലധികമോ സ്‌പെയ്‌സ് വേർതിരിച്ച ക്ലാസ് പേരുകളാണ്. .toggleClass(classname, boolean) ക്ലാസ് നാമം - സെറ്റിൻ്റെ ഓരോ ഘടകത്തിനും വേണ്ടി ടോഗിൾ ചെയ്യുന്ന ഒന്നോ അതിലധികമോ ഇടം വേർതിരിച്ച ക്ലാസ് നാമങ്ങൾ. ബൂളിയൻ മൂല്യം - നിർദ്ദിഷ്ട ക്ലാസ് ഇൻസ്റ്റാൾ ചെയ്യുകയോ ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്യുന്നു. ട്രൂ ക്ലാസ് ചേർക്കുന്നു, തെറ്റ് അത് നീക്കംചെയ്യുന്നു. .toggleClass(boolean) boolean എന്നത് സെറ്റിലെ ഓരോ എലമെൻ്റിൻ്റെയും ക്ലാസുകൾ ടോഗിൾ ചെയ്യണമോ എന്ന് സജ്ജീകരിക്കുന്ന ഒരു ഓപ്ഷണൽ പാരാമീറ്ററാണ്. .toggleClass(function, boolean) ഫംഗ്‌ഷൻ - സെറ്റിൻ്റെ ഓരോ ഘടകത്തിനും ടോഗിൾ ചെയ്യുന്ന ക്ലാസിൻ്റെ പേര് നൽകുന്നു. സെറ്റിലെ മൂലകത്തിൻ്റെ സൂചികയും ക്ലാസിൻ്റെ പഴയ മൂല്യവും ആർഗ്യുമെൻ്റായി സ്വീകരിക്കുന്നു. ബൂളിയൻ മൂല്യം - ഓപ്ഷണൽ പാരാമീറ്റർ, സെറ്റിൻ്റെ ഓരോ ഘടകത്തിൻ്റെയും ക്ലാസുകൾ മാറുമോ എന്ന് സജ്ജീകരിക്കുന്നു.

1.4 Method.hasClass()

പൊരുത്തപ്പെടുന്ന സെറ്റിലെ ഒരു ഘടകത്തിനെങ്കിലും നിർദ്ദിഷ്‌ട ക്ലാസ് നാമമുണ്ടോയെന്ന് പരിശോധിക്കുന്നു. സെറ്റിലെ എലമെൻ്റുകളിൽ ഒരെണ്ണത്തിനെങ്കിലും സാധുതയുള്ള ക്ലാസ് നാമമുണ്ടെങ്കിൽ true നൽകുന്നു, അല്ലാത്തപക്ഷം തെറ്റ്.

HasClass(ക്ലാസ് നാമം) ക്ലാസ്സിൻ്റെ പേര് - തിരയാനുള്ള ക്ലാസിൻ്റെ പേരുള്ള ഒരു സ്ട്രിംഗ്.

2. എലമെൻ്റ് ആട്രിബ്യൂട്ടുകൾ മാറ്റുന്നു

ഈ രീതിക്ക് സെറ്റിൻ്റെ ആദ്യ ഘടകത്തിൻ്റെ ആട്രിബ്യൂട്ട് മൂല്യം ലഭിക്കുന്നു അല്ലെങ്കിൽ സെറ്റിൻ്റെ ഘടകങ്ങൾക്കായി ഒന്നോ അതിലധികമോ ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ സജ്ജമാക്കുന്നു.

2.1 Method.attr() .attr(attributename) ആട്രിബ്യൂട്ട് - പൊതിഞ്ഞ സെറ്റിലെ ആദ്യ മൂലകത്തിൻ്റെ ആട്രിബ്യൂട്ട് മൂല്യം നൽകുന്നു. ആട്രിബ്യൂട്ട് നഷ്‌ടപ്പെട്ടാൽ, നിർവചിക്കാതെ തിരികെ നൽകും. .attr(ആട്രിബ്യൂട്ട് നാമം, മൂല്യം) ആട്രിബ്യൂട്ട് നാമ മൂല്യം എന്നത് ഒരു സ്ട്രിംഗ് അല്ലെങ്കിൽ സംഖ്യയാണ്, അത് പൊതിഞ്ഞ സെറ്റിൻ്റെ എല്ലാ ഘടകങ്ങളുടെയും ആട്രിബ്യൂട്ട് മൂല്യമായി ചേർക്കും. .attr (ആട്രിബ്യൂട്ടുകൾ) ആട്രിബ്യൂട്ടുകൾ - ഒബ്ജക്റ്റിൻ്റെ ഗുണങ്ങളിൽ നിന്ന് പകർത്തിയ മൂല്യങ്ങൾ പൊതിഞ്ഞ സെറ്റിൻ്റെ എല്ലാ ഘടകങ്ങൾക്കും സജ്ജീകരിക്കും. .attr(ആട്രിബ്യൂട്ട് നാമം, ഫംഗ്‌ഷൻ) ആട്രിബ്യൂട്ട് നാമം - നിർദ്ദിഷ്ട മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുന്ന ആട്രിബ്യൂട്ടിൻ്റെ പേര് വ്യക്തമാക്കുന്നു. ഫംഗ്‌ഷൻ - സെറ്റിലെ ഒരു മൂലകത്തിൻ്റെ സൂചികയും ആട്രിബ്യൂട്ടിൻ്റെ പഴയ മൂല്യവും ആർഗ്യുമെൻ്റായി എടുക്കുന്നു. റിട്ടേൺ മൂല്യം ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കും. 2.2 Method.removeAttr()

പൊതിഞ്ഞ സെറ്റിൻ്റെ ഓരോ ഘടകത്തിൽ നിന്നും നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ട് നീക്കംചെയ്യുന്നു.

RemoveAttr(attributename) ആട്രിബ്യൂട്ടേനാം എന്നത് നീക്കം ചെയ്യേണ്ട ആട്രിബ്യൂട്ടിനെ തിരിച്ചറിയുന്ന ഒരു സ്ട്രിംഗ് ആണ്.

3. മൂലക ഗുണങ്ങൾ മാറ്റുന്നു 3.1. Method.css()

പൊതിഞ്ഞ സെറ്റിലെ ആദ്യ ഘടകത്തിനായുള്ള സ്റ്റൈൽ പ്രോപ്പർട്ടിയുടെ കണക്കാക്കിയ മൂല്യം നൽകുന്നു, അല്ലെങ്കിൽ സെറ്റിലെ ഓരോ ഘടകത്തിനും ഒന്നോ അതിലധികമോ CSS പ്രോപ്പർട്ടികൾ സജ്ജമാക്കുന്നു.

Css(പ്രോപ്പർട്ടി നാമം) പ്രോപ്പർട്ടി നാമം - വസ്തുവിൻ്റെ പേരുള്ള ഒരു സ്ട്രിംഗ്, സെറ്റിൻ്റെ ആദ്യ ഘടകത്തിന് അതിൻ്റെ കണക്കാക്കിയ മൂല്യം നൽകുന്നു. .css(പ്രോപ്പർട്ടി നാമങ്ങൾ) പ്രോപ്പർട്ടി നാമങ്ങൾ - പ്രോപ്പർട്ടികളുടെ ഒരു നിര, സെറ്റിൻ്റെ ആദ്യ ഘടകത്തിനായി അവയുടെ കണക്കാക്കിയ മൂല്യങ്ങൾ നൽകുന്നു. .css(പ്രോപ്പർട്ടി നാമം, മൂല്യം) പ്രോപ്പർട്ടി നെയിം മൂല്യം എന്നത് ഒരു സ്ട്രിംഗ് അല്ലെങ്കിൽ നമ്പറാണ്, അത് പൊതിഞ്ഞ സെറ്റിൻ്റെ എല്ലാ ഘടകങ്ങൾക്കും നിർദ്ദിഷ്ട പ്രോപ്പർട്ടി മൂല്യമായി സജ്ജീകരിക്കും. .css(പ്രോപ്പർട്ടി നാമം, ഫംഗ്‌ഷൻ) പ്രോപ്പർട്ടി നാമം - വസ്തുവിൻ്റെ പേരുള്ള ഒരു സ്ട്രിംഗ്. ഫംഗ്‌ഷൻ - സെറ്റിലെ മൂലകത്തിൻ്റെ സൂചികയും പ്രോപ്പർട്ടിയുടെ പഴയ മൂല്യവും ഫംഗ്‌ഷനിലേക്കുള്ള ആർഗ്യുമെൻ്റുകളായി കൈമാറുന്നു. റിട്ടേൺ മൂല്യം സെറ്റിൻ്റെ എല്ലാ ഘടകങ്ങളിലേക്കും സജ്ജമാക്കും. .css(പ്രോപ്പർട്ടീസ് ഒബ്‌ജക്റ്റ്) പ്രോപ്പർട്ടീസ് ഒബ്‌ജക്റ്റ് - പാസാക്കിയ ഒബ്‌ജക്റ്റിലെ കീകളായി നിർവചിച്ചിരിക്കുന്ന പേരുകൾ സിഎസ്എസ് പ്രോപ്പർട്ടികൾ അനുബന്ധ സെറ്റിലെ എല്ലാ ഘടകങ്ങൾക്കും അവയുടെ അനുബന്ധ മൂല്യങ്ങളിലേക്ക് ചേർക്കുന്നു.

4. ഒരു മൂലകത്തിൻ്റെ അളവുകളും കോർഡിനേറ്റുകളും നേടുകയും മാറ്റുകയും ചെയ്യുക 4.1. Method.width()

ഒരു സെറ്റിലെ ആദ്യ ഘടകത്തിനായുള്ള നിലവിലെ വീതി നൽകുന്നു, അല്ലെങ്കിൽ ഒരു സെറ്റിലെ ഓരോ ഘടകത്തിനും വീതി സജ്ജീകരിക്കുന്നു. അളവെടുപ്പിൻ്റെ ഡിഫോൾട്ട് യൂണിറ്റ് px ആണ്. ലഭിച്ച മൂല്യം ഗണിതശാസ്ത്ര കണക്കുകൂട്ടലുകളിൽ ഉപയോഗിക്കുകയാണെങ്കിൽ ഈ രീതി ഉപയോഗിക്കാം. അളവുകളുടെ യൂണിറ്റ് വ്യക്തമാക്കാതെ, ഇൻഡൻ്റുകളും ഫ്രെയിം കനവും കണക്കിലെടുക്കാതെ അളവുകൾ കണക്കാക്കുന്നു. നിങ്ങൾ ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുമ്പോൾ, മൂലകത്തിൻ്റെ അളവുകൾ മാറിയേക്കാം.

വീതി () രീതിയെ പരാമീറ്ററുകൾ ഇല്ലാതെ വിളിക്കുന്നു. ഒരു യൂണിറ്റ് വ്യക്തമാക്കാതെ, ഒരു സെറ്റിലെ ആദ്യ ഘടകത്തിനായുള്ള നിലവിലെ വീതി മൂല്യം നൽകുന്നു. .width(value) മൂല്യം എന്നത് സെറ്റിൻ്റെ ഓരോ ഘടകത്തിനും സജ്ജീകരിക്കുന്ന വീതിയുടെ ഒരു പൂർണ്ണസംഖ്യാ സംഖ്യാ മൂല്യം അല്ലെങ്കിൽ സ്ട്രിംഗ് മൂല്യമാണ്. .width(function) ഫംഗ്‌ഷൻ - മൂലകത്തിൻ്റെ സൂചികയും പ്രോപ്പർട്ടിയുടെ പഴയ മൂല്യവും ഒരു ആർഗ്യുമെൻ്റായി എടുക്കുന്നു, റിട്ടേൺ മൂല്യം എല്ലാ ഘടകങ്ങളുടെയും വീതിയിലേക്ക് സജ്ജീകരിക്കും.

4.2 Method.height()

ഒരു സെറ്റിലെ ആദ്യ ഘടകത്തിനായുള്ള നിലവിലെ ഉയരം മൂല്യം നൽകുന്നു, അല്ലെങ്കിൽ ഒരു സെറ്റിലെ ഓരോ ഘടകത്തിനും ഉയരം സജ്ജമാക്കുന്നു.

ഉയരം () രീതിയെ പരാമീറ്ററുകൾ ഇല്ലാതെ വിളിക്കുന്നു. ഒരു സെറ്റിലെ ആദ്യ ഘടകത്തിനായുള്ള നിലവിലെ ഉയരം മൂല്യം നൽകുന്നു. .height(മൂല്യം) മൂല്യം എന്നത് ഒരു പൂർണ്ണസംഖ്യയുടെ സംഖ്യാ മൂല്യം അല്ലെങ്കിൽ സെറ്റിൻ്റെ ഓരോ ഘടകത്തിനും സജ്ജീകരിക്കുന്ന ഉയരത്തിൻ്റെ സ്ട്രിംഗ് മൂല്യമാണ്. .height(പ്രവർത്തനം) ഫംഗ്‌ഷൻ - മൂലകത്തിൻ്റെ സൂചികയും പ്രോപ്പർട്ടിയുടെ പഴയ മൂല്യവും ഒരു ആർഗ്യുമെൻ്റായി എടുക്കുന്നു, റിട്ടേൺ മൂല്യം എല്ലാ ഘടകങ്ങളുടെയും ഉയരത്തിലേക്ക് സജ്ജീകരിക്കും.

4.3 Method.innerWidth()

പാഡിംഗ് ഉൾപ്പെടെ പൊതിഞ്ഞ സെറ്റിലെ ആദ്യ ഘടകത്തിൻ്റെ വീതി നൽകുന്നു, അല്ലെങ്കിൽ പൊതിഞ്ഞ സെറ്റിൻ്റെ ഓരോ ഘടകത്തിനും അത് സജ്ജീകരിക്കുന്നു.

InnerWidth() രീതിയെ പരാമീറ്ററുകൾ ഇല്ലാതെ വിളിക്കുന്നു. ഒരു സെറ്റിലെ ആദ്യ ഘടകത്തിന് നിലവിലെ അകത്തെ വീതി നൽകുന്നു. .innerWidth(മൂല്യം) മൂല്യം എന്നത് സെറ്റിൻ്റെ ഓരോ ഘടകത്തിനും സജ്ജീകരിക്കുന്ന ഒരു പൂർണ്ണസംഖ്യാ സംഖ്യാ മൂല്യമാണ്. .innerWidth(ഫംഗ്ഷൻ) പ്രവർത്തനം

4.4 Method.innerHeight()

പാഡിംഗ് കണക്കിലെടുത്ത് പൊതിഞ്ഞ സെറ്റിലെ ആദ്യ മൂലകത്തിൻ്റെ ഉയരം നൽകുന്നു.

InnerHeight() രീതിയെ പരാമീറ്ററുകൾ ഇല്ലാതെ വിളിക്കുന്നു. ഒരു സെറ്റിലെ ആദ്യ ഘടകത്തിനായുള്ള നിലവിലെ ആന്തരിക ഉയരം മൂല്യം നൽകുന്നു. .innerHeight(മൂല്യം) മൂല്യം ഒരു പൂർണ്ണസംഖ്യ സംഖ്യാ മൂല്യമാണ്, അത് സെറ്റിൻ്റെ ഓരോ ഘടകത്തിനും സജ്ജീകരിക്കും. .innerHeight(ഫംഗ്ഷൻ) ഫംഗ്‌ഷൻ - മൂലകത്തിൻ്റെ സൂചികയും പ്രോപ്പർട്ടിയുടെ പഴയ മൂല്യവും ഒരു ആർഗ്യുമെൻ്റായി എടുക്കുന്നു, റിട്ടേൺ മൂല്യം സെറ്റിൻ്റെ എല്ലാ ഘടകങ്ങളുടെയും അകത്തെ വീതിയിലേക്ക് സജ്ജീകരിക്കും.

4.5 Method.outerWidth()

പൊതിഞ്ഞ സെറ്റിലെ ആദ്യ മൂലകത്തിൻ്റെ വീതി തിരികെ നൽകുക. ഈ അളവുകളിൽ ഫ്രെയിമിൻ്റെ കനവും ഇൻഡൻ്റിൻ്റെ വീതിയും ഉൾപ്പെടുന്നു.

ഔട്ടർ വിഡ്ത്ത് (ബൂളിയൻ) ബൂളിയൻ

4.6 Method.outerHeight()

പൊതിഞ്ഞ സെറ്റിലെ ആദ്യ മൂലകത്തിൻ്റെ ഉയരം തിരികെ നൽകുക. ഈ അളവുകളിൽ ഫ്രെയിമിൻ്റെ കനവും ഇൻഡൻ്റിൻ്റെ വീതിയും ഉൾപ്പെടുന്നു.

OuterHeight(boolean) boolean - ഓപ്ഷണൽ മൂല്യം, true ആയി സജ്ജീകരിച്ചാൽ മാർജിൻ മൂല്യം കണക്കിലെടുക്കും, അല്ലാത്തപക്ഷം അല്ല.

4.7 Method.offset()

ആദ്യ ഘടകത്തിൻ്റെ നിലവിലെ കോർഡിനേറ്റുകൾ നേടുന്നു അല്ലെങ്കിൽ ഓരോ ഘടകത്തിനും കോർഡിനേറ്റുകൾ സജ്ജമാക്കുന്നു. ഡോക്യുമെൻ്റിൻ്റെ ആരംഭവുമായി ബന്ധപ്പെട്ട് പൊതിഞ്ഞ സെറ്റിൻ്റെ ആദ്യ ഘടകത്തിൻ്റെ px കോർഡിനേറ്റുകൾ അടങ്ങിയ ഇടത്തും മുകളിലും ഉള്ള പ്രോപ്പർട്ടികൾ ഉള്ള ഒരു JavaScript ഒബ്‌ജക്റ്റ് നൽകുന്നു. ഈ രീതി ദൃശ്യമായ ഘടകങ്ങൾക്ക് മാത്രം ബാധകമാണ്.

ഓഫ്സെറ്റ് () രീതിയെ പരാമീറ്ററുകൾ ഇല്ലാതെ വിളിക്കുന്നു.

4.8 Method.position()

ഏറ്റവും അടുത്തുള്ള പാരൻ്റ് എലമെൻ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ പൊതിഞ്ഞ സെറ്റിൻ്റെ ആദ്യ ഘടകത്തിൻ്റെ px കോർഡിനേറ്റുകൾ അടങ്ങിയ ഇടത്തും മുകളിലും ഉള്ള പ്രോപ്പർട്ടികൾ ഉള്ള ഒരു JavaScript ഒബ്‌ജക്റ്റ് നൽകുന്നു. ഈ രീതി ദൃശ്യമായ ഘടകങ്ങൾക്ക് മാത്രം ബാധകമാണ്.

സ്ഥാനം () രീതിയെ പരാമീറ്ററുകൾ ഇല്ലാതെ വിളിക്കുന്നു.

ഹോസ്പിറ്റാലിറ്റിയുടെ രചയിതാവ് ചോദിച്ച ചില .css ഫയലിൽ വ്യക്തമാക്കിയ മൂലകത്തിൻ്റെ ശൈലി എങ്ങനെ നീക്കം ചെയ്യാം എന്ന ചോദ്യത്തിലെ വിഭാഗത്തിൽ, അവരോഹണ ക്രമത്തിൽ ആണ് ഏറ്റവും മികച്ച ഉത്തരം:
1) നിങ്ങളുടേതായ .css ഫയൽ സൃഷ്‌ടിക്കുകയും നിങ്ങൾ അസാധുവാക്കാൻ ആഗ്രഹിക്കുന്ന ഫയലിന് ശേഷം html-ൽ അതിലേക്കുള്ള ഒരു ലിങ്ക് സ്ഥാപിക്കുകയും ചെയ്യുക. ആദ്യ ഫയലിൽ വ്യക്തമാക്കിയിരിക്കുന്നതുപോലെ സെലക്ടർ എഴുതുക. ആവശ്യമായ സ്വത്ത് ശരിയാക്കുക.
2) അവസാനിക്കുന്ന ഒന്നിന് മുമ്പ് ആവശ്യമുള്ള സെലക്ടർ (പ്രോപ്പർട്ടി: പുതിയ മൂല്യം; ) സ്ഥാപിക്കുക - അത് ഓരോ ഫയലിലും എഴുതിയിരിക്കണം, അല്ലെങ്കിൽ, ഹെഡ് ഒരു ഉൾപ്പെടുത്തലിൽ ആണെങ്കിൽ, അതിൽ എഴുതണം.
3) ഘടകങ്ങളിൽ നേരിട്ട് ശൈലികൾ എഴുതുക (ശുപാർശ ചെയ്തിട്ടില്ല) - അവ എല്ലാ ഫയലുകളിലും ഓരോ ടാഗിലും എഴുതിയിരിക്കണം.
നിങ്ങൾക്ക് ഒരു പ്രോപ്പർട്ടി ഇല്ലാതാക്കണമെങ്കിൽ, ഓരോ വ്യക്തിക്കും ഇത് വ്യത്യസ്തമായി ചെയ്യാവുന്നതാണ്. ഓരോ വസ്തുവും നോക്കുക. ഉദാഹരണത്തിന്: വീതി: ഓട്ടോ; font-family: inherit അല്ലെങ്കിൽ ബോഡി, പശ്ചാത്തലം എന്നിവയ്ക്കായി വ്യക്തമാക്കിയത്: ഒന്നും സുതാര്യമല്ല;
തുടങ്ങിയവ.
ഈ img-ന്: img (ഉയരം: ഓട്ടോ; വീതി: ഓട്ടോ; ) - css-ൽ (ആവശ്യമായ സെലക്ടർ img-ന് പകരം .css ഫയലിൽ എഴുതിയത് പോലെയാണ്),
അഥവാ - HTML-ൽ
ഒരു ഘടകത്തിൽ പ്രയോഗിച്ച പ്രോപ്പർട്ടികൾ കാണുന്നതിന്, ശൈലികളും സെലക്ടറുകളും കാണുക, നിങ്ങളുടെ തിരുത്തലുകൾ ബ്രൗസറിൽ നേരിട്ട് പരിശോധിക്കുക (നിങ്ങൾക്ക് അത് എഴുതുകയും അത് എങ്ങനെ പ്രവർത്തിക്കുമെന്ന് കാണുക, തുടർന്ന് ഒരു ഫയലിലേക്ക് മാറ്റുകയും ചെയ്യാം) - Firefox + ലിങ്ക്
ഓപ്പറ, ക്രോം, ഇൻറർനെറ്റ് എക്സ്പ്ലോറർ എന്നിവയ്ക്ക് ഇതിനകം സ്വന്തം ഫയർബഗ് ഉണ്ട്. ഓപ്പറയിൽ - മെനു → പേജ് → വികസന ഉപകരണങ്ങൾ → ഓപ്പറ ഡ്രാഗൺഫ്ലൈ തുറക്കുക (അല്ലെങ്കിൽ പേജിലെ സമാനമായ മൗസ് ബട്ടൺ - ഘടകം പരിശോധിക്കുക)
Chrome-ൽ - പേജിൽ വലത് ക്ലിക്ക് ചെയ്യുക - എലമെൻ്റ് കോഡ് കാണുക
IE-ൽ - കീബോർഡിൽ F12 അമർത്തുക

07/04/2012 രൊമ്ചിക്

ശുഭദിനം. ഞങ്ങൾ jQuery പഠിക്കുന്നത് തുടരുന്നു. jQuery ഒരു JavaScript ചട്ടക്കൂടാണെന്ന് ഞാൻ നിങ്ങളെ ഓർമ്മിപ്പിക്കട്ടെ. എലമെൻ്റുകൾ എങ്ങനെ തിരഞ്ഞെടുക്കാമെന്നും സെലക്ഷൻ ഫിൽട്ടർ ചെയ്യാമെന്നും ഇഫക്റ്റുകളില്ലാത്ത ഘടകങ്ങളിൽ സ്റ്റാൻഡേർഡ് ഓപ്പറേഷനുകൾ നടത്താമെന്നും ഇഫക്റ്റുകളുള്ള ഘടകങ്ങളിൽ സ്റ്റാൻഡേർഡ് ഓപ്പറേഷനുകൾ എങ്ങനെ നടത്താമെന്നും നിങ്ങളും ഞാനും ഇതിനകം പഠിച്ചിട്ടുണ്ട്. എലമെൻ്റ് ആട്രിബ്യൂട്ടുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്ന രീതികൾ പഠിക്കുന്നതിൽ ഇന്ന് നമ്മൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കും...

പ്രായോഗികമായി, പലപ്പോഴും html ഘടകങ്ങളുടെ വിവിധ ആട്രിബ്യൂട്ടുകൾ മാറ്റേണ്ടത് ആവശ്യമാണ്, ക്ലാസുകൾ ചേർക്കുകയും നീക്കംചെയ്യുകയും ചെയ്യുക, ഘടകങ്ങളുടെ വിവിധ css ഗുണങ്ങൾ കാണുകയും മാറ്റുകയും ചെയ്യുക. ഈ ആവശ്യത്തിനായി, jQuery ന് പ്രത്യേക രീതികളുണ്ട്, അത് ഞങ്ങൾ പരിഗണിക്കും.

attr () രീതി

ഒരു മൂലകത്തിൻ്റെ ആട്രിബ്യൂട്ട് മൂല്യം തിരികെ നൽകാനോ മാറ്റാനോ attr(കീ, മൂല്യം) രീതി ഉപയോഗിക്കുന്നു, ഇവിടെ:

• കീ - ആട്രിബ്യൂട്ട് നാമം
• മൂല്യം - ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യം (ഒരു മൂല്യം വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, അത് മാറ്റുന്നു, അല്ലാത്തപക്ഷം അത് തിരികെ നൽകും)

ഉദാഹരണത്തിന്, id=test ഉള്ള ഒരു div-ന് വീതി=300px ഉണ്ട്, നമുക്ക് അതിൻ്റെ വീതി അറിയണം

$(ഡോക്യുമെൻ്റ്).റെഡി(ഫംഗ്ഷൻ())( $("#ടെസ്റ്റ്").attr("വീതി"); ))

removeAttr () രീതി

removeAttr(കീ) രീതി - നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ട് നീക്കംചെയ്യുന്നു, ഇവിടെ:

• കീ - ആട്രിബ്യൂട്ട് പേര്

ഉദാഹരണത്തിന്, ഞങ്ങൾക്ക് id=test, width=300px ഉള്ള ഒരു div ഉണ്ട്, ഈ ആട്രിബ്യൂട്ട് നീക്കംചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു:

$(ഡോക്യുമെൻ്റ്).റെഡി(ഫംഗ്ഷൻ())( $("#ടെസ്റ്റ്").removeAttr("വീതി"); ))

addClass() രീതി

addClass(name) രീതി - പേര് ഉപയോഗിച്ച് തിരഞ്ഞെടുത്ത ഘടകത്തിലേക്ക് ഒരു ക്ലാസ് ചേർക്കുന്നു.
ഉദാഹരണത്തിന്, id=test ഉപയോഗിച്ച് div-ലേക്ക് ഉദാഹരണ ക്ലാസ് ചേർക്കാം:

$(ഡോക്യുമെൻ്റ്).റെഡി(ഫംഗ്ഷൻ())( $("#ടെസ്റ്റ്").addClass("ഉദാഹരണം"); ))

removeClass() രീതി

RemoveClass(name) രീതി - പേരുള്ള ഘടകത്തിൽ നിന്ന് ക്ലാസ് നീക്കം ചെയ്യുന്നു.
ഉദാഹരണത്തിന്, ഞങ്ങൾക്ക് id=test ഉള്ള ഒരു div ഉണ്ട്, ഈ div-ൽ നിന്ന് ഞങ്ങളുടെ ക്ലാസ് നീക്കം ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു:

$(രേഖ).റെഡി(ഫംഗ്ഷൻ())( $("#ടെസ്റ്റ്").removeClass("ഉദാഹരണം"); ))

css () രീതി

രീതി css(പേര്, മൂല്യം) - പേരിനൊപ്പം ഒരു മൂലകത്തിൻ്റെ css പ്രോപ്പർട്ടി നേടുന്നതിന് നിങ്ങളെ അനുവദിക്കുന്നു (ഈ പ്രോപ്പർട്ടിയുടെ മൂല്യം രണ്ടാമത്തെ പാരാമീറ്ററിൽ വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ) അല്ലെങ്കിൽ css പ്രോപ്പർട്ടി മൂല്യം പേരിനൊപ്പം മാറ്റുക മൂല്യ മൂല്യം (രണ്ടാമത്തെ പാരാമീറ്റർ മൂല്യം വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ)
ഉദാഹരണത്തിന്, ഞങ്ങൾക്ക് h1 തലക്കെട്ടുകൾ ഉണ്ട്, ഫോണ്ട് വലുപ്പം 20px ആയി മാറ്റാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, തുടർന്ന്:

$(രേഖ).റെഡി(ഫംഗ്ഷൻ())( $("h1").css("font-size",20); ))

ആനിമേറ്റ് () രീതി

മൂലകങ്ങളുടെ ഗുണവിശേഷതകൾ മാറ്റുന്നതിനെക്കുറിച്ചാണ് ഞങ്ങൾ ഇതുവരെ നോക്കിയത്, എന്നാൽ jQuery-യ്ക്ക് മറ്റൊരു മികച്ച രീതിയുണ്ട്, അത് ആനിമേറ്റ് ചെയ്യുന്നതുപോലെ ഒരു മൂലകത്തിൻ്റെ ഗുണവിശേഷതകൾ സുഗമമായി മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇതാണ് ആനിമേറ്റ് (ക്രമീകരണങ്ങൾ, സമയം, പ്രവർത്തനം) രീതി, ഇവിടെ:

• ക്രമീകരണം - അവയുടെ മൂല്യം മാറ്റുന്ന പ്രോപ്പർട്ടികൾ
• സമയം - ഈ പ്രോപ്പർട്ടികൾ മൂല്യം മാറുന്ന സമയം
• ഫംഗ്ഷൻ എന്നത് മാറ്റം സംഭവിച്ചതിന് ശേഷം എക്സിക്യൂട്ട് ചെയ്യാൻ തുടങ്ങുന്ന ഒരു ഫംഗ്ഷനാണ്.

ഉദാഹരണത്തിന്, id=test, width=1000px എന്നിവയുള്ള ഒരു div നമുക്കുണ്ട്. 4 സെക്കൻഡിനുള്ളിൽ ഈ ഡിവിയുടെ വീതി 500px ആയി മാറ്റാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു.

$(ഡോക്യുമെൻ്റ്).റെഡി(ഫംഗ്ഷൻ())( $("#ടെസ്റ്റ്").ആനിമേറ്റ്(("വീതി":"500px"),4000); ))

എലമെൻ്റ് ആട്രിബ്യൂട്ടുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്ന, എലമെൻ്റ് ക്ലാസുകൾ ചേർക്കുകയും (നീക്കം ചെയ്യുകയും) എലമെൻ്റുകളുടെ css പ്രോപ്പർട്ടികൾ നേടുകയും ചെയ്യുന്ന (എഡിറ്റിംഗ്) jQuery രീതികൾക്കായി സമർപ്പിച്ച പോസ്റ്റ് ഞാൻ ഇവിടെയാണ് പൂർത്തിയാക്കുന്നത്.

ഒരു പേജിൽ നിലവിലുള്ള ഘടകങ്ങൾ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്ന് ഈ ട്യൂട്ടോറിയൽ ഉൾക്കൊള്ളുന്നു:

• ശൂന്യമായ() , നീക്കം() , വേർപെടുത്തുക() കൂടാതെ അൺറാപ്പ്() രീതികൾ ഉപയോഗിച്ച് ഒരു പേജിൽ നിന്ന് ഘടകങ്ങൾ നീക്കം ചെയ്യുന്നു
• റീപ്ലേസ്‌വിത്ത്(), റീപ്ലേസ്ആൾ() രീതികൾ ഉപയോഗിച്ച് മൂലകങ്ങളെ പുതിയ ഘടകങ്ങൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു
• ഒരു പേജിലെ ഒരു പാരൻ്റ് എലമെൻ്റിൽ നിന്ന് മറ്റൊന്നിലേക്ക് ഘടകങ്ങൾ നീക്കുന്നു

ഒരു പേജിൽ നിന്ന് ഘടകങ്ങൾ നീക്കംചെയ്യുന്നു ഒരു ഘടകത്തിനുള്ളിലെ എല്ലാം നീക്കംചെയ്യുന്നു: ശൂന്യം()

ഒരു പേജിൽ നിന്ന് ഉള്ളടക്കം നീക്കം ചെയ്യുന്നതിനുള്ള ഏറ്റവും ലളിതമായ മാർഗമാണ് ശൂന്യമായ() രീതി. ഒരു jQuery ഒബ്‌ജക്‌റ്റിൽ ശൂന്യമായ() രീതി വിളിക്കുന്നത്, jQuery ഒബ്‌ജക്‌റ്റിലെ ഘടകത്തിന് (അല്ലെങ്കിൽ ഘടകങ്ങൾ) ബന്ധപ്പെട്ട സെറ്റിൽ നിന്ന് എല്ലാ ഉള്ളടക്കവും നീക്കംചെയ്യുന്നു.

മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ശൂന്യമായ() രീതി സെറ്റിലെ ഓരോ ഘടകത്തിൽ നിന്നും എല്ലാ പാരമ്പര്യ ഘടകങ്ങളും നോഡുകളും (ടെക്‌സ്റ്റ് നോഡുകൾ പോലുള്ളവ) നീക്കം ചെയ്യുന്നു, മൂലകത്തെ ശൂന്യമാക്കുന്നു.

ഉദാഹരണം രണ്ട് ഡിവി ഘടകങ്ങളിൽ നിന്ന് ഉള്ളടക്കം നീക്കംചെയ്യുന്നു:

$(init); ഫംഗ്ഷൻ init() ( // #myDiv1, #myDiv2 എന്നിവയുടെ ഉള്ളടക്കങ്ങൾ ഇല്ലാതാക്കുക $(".emptyMe").empty(); )

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ മറ്റൊരു ഖണ്ഡിക

മുകളിലെ കോഡ് നടപ്പിലാക്കിയ ശേഷം, പേജിൻ്റെ ഉള്ളടക്കം ഇതിലേക്ക് മാറും:

ഒരു മുഴുവൻ ഘടകവും നീക്കംചെയ്യുന്നു: നീക്കം()

ശൂന്യമായ() രീതി ഒരു ഘടകത്തിനുള്ളിലെ എല്ലാം നീക്കം ചെയ്യുമ്പോൾ, നീക്കം() രീതി മൂലകം ഉൾപ്പെടെ എല്ലാം നീക്കം ചെയ്യുന്നു. ഉദാഹരണത്തിന്:

$(init); ഫംഗ്ഷൻ init() ( // #myDiv1, #myDiv2 എന്നിവ പൂർണ്ണമായും നീക്കം ചെയ്യുക $(".removeMe").remove(); )

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ മറ്റൊരു ഖണ്ഡിക

ടെക്സ്റ്റ് നോഡ് അത് പോലെ തന്നെ

മുകളിലെ കോഡ് എക്‌സിക്യൂട്ട് ചെയ്‌ത ശേഷം, പേജിൽ നിന്ന് രണ്ട് ഡിവി ഘടകങ്ങളും നീക്കംചെയ്യപ്പെടും:

നിങ്ങൾക്ക് നീക്കം() രീതിയിലേക്ക് ഒരു സോപാധിക സെലക്ടർ ഉപയോഗിച്ച് ഒരു സ്ട്രിംഗ് കൈമാറാൻ കഴിയും. ഈ സാഹചര്യത്തിൽ, നീക്കം ചെയ്യേണ്ട ഘടകങ്ങൾ സെലക്ടർ ഫിൽട്ടർ ചെയ്യും. ഉദാഹരണത്തിന്:

$(init); ഫംഗ്ഷൻ init() ( // #myDiv2 മാത്രം നീക്കം ചെയ്യുക $(".removeMe").remove(":contains("മറ്റൊരു ഖണ്ഡിക")"); )

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ മറ്റൊരു ഖണ്ഡിക

ടെക്സ്റ്റ് നോഡ് അത് പോലെ തന്നെ

മുകളിലെ ഉദാഹരണത്തിൽ, removeMe ക്ലാസ് ഉള്ള div ഘടകം മാത്രമേ നീക്കം ചെയ്യപ്പെടുകയുള്ളൂ ഒപ്പം"മറ്റൊരു ഖണ്ഡിക" എന്ന വാചകം അടങ്ങിയിരിക്കുന്നു. മറ്റെല്ലാം പേജിൽ നിലനിൽക്കും:

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

ഒരു ഘടകം അതിൻ്റെ ഡാറ്റ നശിപ്പിക്കാതെ നീക്കംചെയ്യുന്നു: വേർപെടുത്തുക()

നീക്കംചെയ്‌ത ഘടകങ്ങൾ ഉൾക്കൊള്ളുന്ന ഒരു jQuery ഒബ്‌ജക്‌റ്റ് റിമൂവ്() രീതി നൽകുന്നു. സൈദ്ധാന്തികമായി, നിങ്ങൾക്ക് പേജിലെ ഒരിടത്ത് നിന്ന് ഘടകങ്ങൾ നീക്കം ചെയ്‌ത് പിന്നീട് എവിടെയും വീണ്ടും അറ്റാച്ചുചെയ്യാം.

എന്നിരുന്നാലും, ഉറവിടങ്ങൾ സംരക്ഷിക്കുന്നതിനും മെമ്മറി ലീക്ക് പ്രശ്നങ്ങൾ ഒഴിവാക്കുന്നതിനും, നീക്കം() രീതി നീക്കം ചെയ്ത ഘടകവുമായി ബന്ധപ്പെട്ട എല്ലാ jQuery ഡാറ്റയും ഇവൻ്റുകളും നീക്കംചെയ്യുന്നു. ഉദാഹരണത്തിന്, ഒരു ഘടകത്തിന് ഒരു jQuery ക്ലിക്ക് ഇവൻ്റ് നൽകുകയും തുടർന്ന് നീക്കം() രീതി ഉപയോഗിച്ച് പേജിൽ നിന്ന് ഘടകം നീക്കം ചെയ്യുകയും ചെയ്താൽ, ഘടകത്തിൽ നിന്ന് ക്ലിക്ക് ഇവൻ്റ് നീക്കം ചെയ്യപ്പെടും. നിങ്ങൾ പിന്നീട് എലമെൻ്റ് പേജിലേക്ക് തിരികെ നൽകാനും അതിൻ്റെ പ്രവർത്തനം പുനഃസ്ഥാപിക്കാനും ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഇത് ഒരു പ്രശ്നമുണ്ടാക്കാം.

ഡിറ്റാച്ച്() രീതി (jQuery 1.4-ൽ അവതരിപ്പിച്ചത്) ഈ സാഹചര്യത്തിൽ സഹായിക്കും. ഇത് നീക്കം () രീതി പോലെ തന്നെ പ്രവർത്തിക്കുന്നു, ഒരു കാര്യം ഒഴികെ - അത് ഇല്ലാതാക്കുന്നില്ലനീക്കംചെയ്ത ഘടകവുമായി ബന്ധപ്പെട്ട jQuery ഡാറ്റയും ഇവൻ്റുകളും. jQuery മെറ്റാഡാറ്റ സംരക്ഷിച്ചുകൊണ്ട് നിങ്ങൾക്ക് പിന്നീട് നീക്കം ചെയ്ത ഘടകങ്ങൾ വീണ്ടും അറ്റാച്ചുചെയ്യാം എന്നാണ് ഇതിനർത്ഥം.

ഉദാഹരണം. പേജിലെ രണ്ട് ഖണ്ഡികകളിൽ ഓരോന്നിനും ഇനിപ്പറയുന്ന സ്ക്രിപ്റ്റ് jQuery ക്ലിക്ക് ഇവൻ്റ് നൽകുന്നു. രണ്ട് ഇവൻ്റ് ഹാൻഡ്‌ലറുകളും ഖണ്ഡികയ്‌ക്കായി CSS "റെഡ്" ക്ലാസ് ടോഗിൾ ചെയ്‌ത് ഓരോ തവണ ക്ലിക്ക് ചെയ്യുമ്പോഴും ചുവപ്പിൽ നിന്ന് കറുപ്പിലേക്കോ പിന്നിലേക്ക് മടങ്ങുന്നതിനോ മാറ്റുന്നു.

സ്ക്രിപ്റ്റ് പിന്നീട് നീക്കം() രീതി ഉപയോഗിച്ച് പേജിൽ നിന്ന് ആദ്യ ഖണ്ഡിക നീക്കം ചെയ്യുകയും ഖണ്ഡിക അടങ്ങിയ jQuery ഒബ്ജക്റ്റ് myDiv1Para വേരിയബിളിൽ സൂക്ഷിക്കുകയും ചെയ്യുന്നു. അതിനുശേഷം appendTo() രീതി ഉപയോഗിച്ച് പാരൻ്റ് ഡിവിയിലേക്ക് ഖണ്ഡിക വീണ്ടും അറ്റാച്ചുചെയ്യുന്നു.

രണ്ടാമത്തെ ഖണ്ഡികയിലും ഞങ്ങൾ ഇത് തന്നെ ചെയ്യുന്നു, പക്ഷേ നീക്കം () രീതിക്ക് പകരം ഞങ്ങൾ ഡിറ്റാച്ച് () രീതി ഉപയോഗിക്കുന്നു.

< p.red { color: red; } $(init); function init() { // Назначаем событие click каждому параграфу div $("#myDiv1>p").click(function() ( $(this).toggleClass("red"); )); $("#myDiv2>p").click(function() ( $(this).toggleClass("red "); )); // ഖണ്ഡിക ഇല്ലാതാക്കി പുനഃസ്ഥാപിക്കുക #myDiv1 var myDiv1Para = $("#myDiv1>p").remove(); myDiv1Para.appendTo("#myDiv1"); // ഖണ്ഡിക #myDiv2 var ഇല്ലാതാക്കി പുനഃസ്ഥാപിക്കുക myDiv2Para = $("#myDiv2>p").detach(); myDiv2Para.appendTo("#myDiv2"); )

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ മറ്റൊരു ഖണ്ഡിക

ഈ സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്ത ശേഷം, ആദ്യ ഖണ്ഡികയ്ക്ക് അതിൻ്റെ ക്ലിക്ക് ഇവൻ്റ് ഹാൻഡ്ലർ നഷ്ടപ്പെടും, രണ്ടാമത്തെ ഖണ്ഡിക അതിൻ്റെ പൂർണ്ണമായ പ്രവർത്തനക്ഷമത നിലനിർത്തും. നിങ്ങളുടെ ബ്രൗസറിൽ പേജ് തുറന്ന് പരിശോധിക്കാം. നിങ്ങൾ രണ്ടാമത്തെ ഖണ്ഡികയിലെ മൗസ് ബട്ടൺ അമർത്തുകയാണെങ്കിൽ, അത് നിറം മാറും, എന്നാൽ ആദ്യത്തേത് മൗസ് പ്രവർത്തനങ്ങളോട് ഒരു തരത്തിലും പ്രതികരിക്കില്ല.

കാരണം, നീക്കം() രീതി ആദ്യ ഖണ്ഡികയിലെ ഇവൻ്റ് ഹാൻഡ്‌ലറിനെ നീക്കം ചെയ്‌തു, എന്നാൽ ഡിറ്റാച്ച്() രീതി രണ്ടാമത്തെ ഖണ്ഡികയ്‌ക്കായി ക്ലിക്ക് ഇവൻ്റ് ഹാൻഡ്‌ലർ നിലനിർത്തി.

ഒരു പാരൻ്റ് എലമെൻ്റ് നീക്കംചെയ്യുന്നു: unwrap()

അൺറാപ്പ്() രീതി DOM-ൽ നിന്ന് ഒരു മൂലകത്തിൻ്റെ രക്ഷിതാവിനെ (അല്ലെങ്കിൽ ഘടകങ്ങളുടെ മാതാപിതാക്കളുടെ കൂട്ടം) നീക്കം ചെയ്യുന്നു. DOM-ൽ മൂലകം അതിൻ്റെ മാതൃ ഘടകത്തിൻ്റെ സ്ഥാനത്തെത്തും.

ഇനിപ്പറയുന്ന ഉദാഹരണം ഒരു ഡിവിയുടെ ഉള്ളടക്കം വികസിപ്പിക്കുന്നു. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, div അതിൻ്റെ ഉള്ളടക്കം ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു:

$(init); ഫംഗ്ഷൻ init() ( // #myDiv ഘടകം നീക്കം ചെയ്യുക, എന്നാൽ അതിലെ ഉള്ളടക്കങ്ങൾ $("#myPara").unwrap(); )

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ മറ്റൊരു ഖണ്ഡിക

മുകളിലുള്ള കോഡ് നടപ്പിലാക്കിയ ശേഷം, പേജ് ഉള്ളടക്കം ഇതുപോലെ കാണപ്പെടും:

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ മറ്റൊരു ഖണ്ഡിക

ഘടകങ്ങൾ മാറ്റിസ്ഥാപിക്കുന്നു ഒരു ഘടകത്തെ പുതിയ ഉള്ളടക്കം ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു: മാറ്റിസ്ഥാപിക്കുക()

റീപ്ലേസ്‌വിത്ത്() രീതി നിങ്ങളെ പുതിയ ഉള്ളടക്കം ഉപയോഗിച്ച് ഒരു ഘടകമോ ഘടകങ്ങളുടെ കൂട്ടമോ മാറ്റിസ്ഥാപിക്കാൻ അനുവദിക്കുന്നു. ഇനിപ്പറയുന്ന ഏതെങ്കിലും ഫോമിൽ നിങ്ങൾക്ക് പകരമുള്ള ഉള്ളടക്കം സമർപ്പിക്കാം:

• document.getElementById() അല്ലെങ്കിൽ document.createElement() പോലുള്ള JavaScript DOM ഫംഗ്‌ഷൻ ഉപയോഗിച്ച് സൃഷ്‌ടിച്ച ഒരു എലമെൻ്റ് ഒബ്‌ജക്റ്റ്
• മാറ്റിസ്ഥാപിക്കുന്ന ഉള്ളടക്കത്തെ പ്രതിനിധീകരിക്കുന്ന HTML സ്ട്രിംഗ്
• മാറ്റിസ്ഥാപിക്കാൻ ഉപയോഗിക്കുന്ന ഘടകം (അല്ലെങ്കിൽ ഘടകങ്ങൾ) അടങ്ങിയ ഒരു jQuery ഒബ്‌ജക്റ്റ്
• മാറ്റിസ്ഥാപിക്കാവുന്ന HTML കോഡ് നൽകേണ്ട ഒരു കോൾബാക്ക് ഫംഗ്‌ഷൻ

റീപ്ലേസ്‌വിത്ത്() രീതി പ്രവർത്തനത്തിൽ കാണിക്കുന്ന ഒരു ഉദാഹരണം ചുവടെയുണ്ട്. ആദ്യ പാരഗ്രാഫ് ഒരു പുതിയ HTML ലൈൻ ഉപയോഗിച്ച് മാറ്റി, രണ്ടാമത്തെ ഖണ്ഡികയെ എലമെൻ്റ് ഒബ്ജക്റ്റ് ഉപയോഗിച്ച് മാറ്റി, മൂന്നാമത്തെ ഖണ്ഡിക നിലവിലെ സമയം നൽകുന്ന ഒരു ഫംഗ്ഷൻ്റെ ഫലം ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു:

$(init); ഫംഗ്‌ഷൻ init() ( // #myDiv1 ലെ ഖണ്ഡിക ഒരു പുതിയ ഖണ്ഡിക ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുക $("#myDiv1>p").replaceWith("

വാചകത്തോടുകൂടിയ പുതിയ ഖണ്ഡിക

"; നിലവിലെ സമയം $("#myDiv3>p").replaceWith(currentTime); ഫംഗ്‌ഷൻ നിലവിലെ സമയം() (var currentTime = പുതിയ തീയതി(); var currentHours = currentTime.getHours(); var currentMinutes = currentTime.getMinutes (); var currentSeconds = നിലവിലെ സമയം .getSeconds(); //ആവശ്യമെങ്കിൽ currentMinutes = (currentMinutes) മുൻനിര പൂജ്യങ്ങൾ ഉപയോഗിച്ച് മിനിറ്റുകളും സെക്കൻഡുകളും പാഡ് ചെയ്യുക< 10 ? "0" : "") + currentMinutes; currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; return ("

നിലവിലെ സമയം: " + നിലവിലെ സമയം + ":" + നിലവിലെ മിനിറ്റ് + ":" + നിലവിലെ സെക്കൻഡ് + "

"); } }

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

കോഡ് നടപ്പിലാക്കിയ ശേഷം, പേജ് ഉള്ളടക്കം ഇതുപോലെ കാണപ്പെടും:

വാചകത്തോടുകൂടിയ പുതിയ ഖണ്ഡിക

നിലവിലെ സമയം: 13:52:17

ReplaceAll() : replaceWith() രീതിക്ക് പകരമാണ്

റീപ്ലേസ്ആൾ() രീതി റീപ്ലേസ്‌വിത്ത്() രീതിയുടെ അതേ ജോലിയാണ് ചെയ്യുന്നത്, എന്നാൽ റീപ്ലേസ്‌മെൻ്റ് ഉള്ളടക്കം ഒരു ആർഗ്യുമെൻ്റായി കൈമാറുന്നതിനുപകരം, മാറ്റിസ്ഥാപിക്കേണ്ട ഘടകം നിങ്ങൾ കൈമാറേണ്ടതുണ്ട്.

ഉദാഹരണത്തിന്, കോഡിൻ്റെ ഇനിപ്പറയുന്ന 2 വരികൾ ഒരേ കാര്യം ചെയ്യുന്നു:

$("#myDiv").replace With("

പുതിയ വാചകം ഇതാ

"); $("

പുതിയ വാചകം ഇതാ

").എല്ലാം മാറ്റിസ്ഥാപിക്കുക("#myDiv");

ചലിക്കുന്ന ഘടകങ്ങൾ

ഘടകങ്ങൾ എങ്ങനെ നീക്കംചെയ്യാമെന്നും മാറ്റിസ്ഥാപിക്കാമെന്നും ഇപ്പോൾ നിങ്ങൾക്കറിയാം. ചോദ്യം അവശേഷിക്കുന്നു: DOM ട്രീയിൽ ഘടകങ്ങൾ എങ്ങനെ നീക്കാം? ഉദാഹരണത്തിന്, ഒരു ഡിവി എലമെൻ്റിനുള്ളിൽ ഒരു ഖണ്ഡികയുണ്ട്, നിങ്ങൾ അത് മറ്റൊരു ഡിവിയിലേക്ക് നീക്കേണ്ടതുണ്ട്.

DOM-ന് ചുറ്റും ഘടകങ്ങൾ നീക്കുന്നതിന് jQuery-ക്ക് ഒരു പ്രത്യേക രീതി ഇല്ലെങ്കിലും, ഇത് ചെയ്യാൻ വളരെ എളുപ്പമാണ്. നിങ്ങൾ ചെയ്യേണ്ടത് നിങ്ങൾ നീക്കാൻ ആഗ്രഹിക്കുന്ന ഘടകത്തെ(കൾ) ഹൈലൈറ്റ് ചെയ്യുകയാണ്; തിരഞ്ഞെടുത്ത ഘടകത്തെ മറ്റൊരു പാരൻ്റ് എലമെൻ്റിലേക്ക് കൂട്ടിച്ചേർക്കുന്നതിന് append() , appendTo() , അല്ലെങ്കിൽ prepend() പോലുള്ള ഒരു "append" രീതി വിളിക്കുക. പേജിൽ എലമെൻ്റ്(കൾ) നിലവിലുണ്ടെന്ന് jQuery സ്വയമേവ തിരിച്ചറിയുകയും അവയെ പുതിയ രക്ഷിതാവിലേക്ക് മാറ്റുകയും ചെയ്യും.

ഉദാഹരണം വിവരിച്ച പ്രക്രിയയെ പുനർനിർമ്മിക്കുന്നു. ഖണ്ഡിക ആദ്യം മുതൽ നീങ്ങുന്നു ഡിവിരണ്ടാമത്തേതിൽ:

$(init); ഫംഗ്ഷൻ init() ( // ഖണ്ഡിക #myDiv1 ൽ നിന്ന് #myDiv2 $("#myDiv2") എന്നതിലേക്ക് നീക്കുക.append($("#myDiv1>p")); )

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

കോഡ് എക്സിക്യൂട്ട് ചെയ്ത ശേഷം, പേജ് ഇതുപോലെ കാണപ്പെടും:

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

ഒരു ഘടകം നീക്കുന്നതിനുള്ള മറ്റൊരു മാർഗം ഇതാ:

// ഖണ്ഡിക #myDiv1-ൽ നിന്ന് #myDiv2 $("#myDiv1>p") എന്നതിലേക്ക് നീക്കുക.appendTo($("#myDiv2")); // ഖണ്ഡിക #myDiv1-ൽ നിന്ന് #myDiv2 var എന്നതിലേക്ക് നീക്കുക = $("#myDiv1>p"); para.prependTo("#myDiv2"); // ഖണ്ഡിക #myDiv1-ൽ നിന്ന് #myDiv2 എന്നതിലേക്ക് നീക്കുക // അത് വ്യക്തമായി വേർപെടുത്തി ഒരു പുതിയ ലൊക്കേഷനിലേക്ക് ചേർക്കുക $("#myDiv1>p").detach().prependTo("#myDiv2");

ഉദാഹരണം 3 വളരെ ഉപയോഗപ്രദമായ jQuery സാങ്കേതികത കാണിക്കുന്നു: രീതി ബൈൻഡിംഗ്. മിക്ക jQuery രീതികളും ഒബ്‌ജക്‌റ്റുകൾ തിരികെ നൽകുന്നതിനാൽ, നിങ്ങൾക്ക് തിരികെ നൽകിയ ഒബ്‌ജക്റ്റിൽ മറ്റൊരു രീതിയെ വിളിക്കാം. ഏതാണ് അടുത്ത jQuery ഒബ്‌ജക്‌റ്റ് തിരികെ നൽകുന്നത്, തുടങ്ങിയവ.

അതിനാൽ മുകളിലുള്ള ഉദാഹരണത്തിൽ, jQuery ഒബ്‌ജക്റ്റ് ഡിറ്റാച്ച്() രീതി ഉപയോഗിച്ച് തിരികെ നൽകുന്നു, അത് ഖണ്ഡിക നീക്കം ചെയ്യാൻ വിളിക്കുന്നു. കൂടാതെ, ഇല്ലാതാക്കിയ പാരഗ്രാഫ് പുതിയ പാരൻ്റ് എലമെൻ്റിലേക്ക് ചേർക്കുന്നതിന്, തിരികെ ലഭിച്ച jQuery ഒബ്‌ജക്റ്റിൽ prependTo() രീതി വിളിക്കുന്നു.

ഒരേ സമയം ഒന്നിലധികം പാരൻ്റ് എലമെൻ്റുകളിലേക്ക് ചില ഉള്ളടക്കം നീക്കാൻ ശ്രമിച്ചാൽ എന്ത് സംഭവിക്കും? നിങ്ങൾ ഇത് ചെയ്യുകയാണെങ്കിൽ, jQuery ആദ്യം പഴയ രക്ഷിതാവിൽ നിന്ന് ഉള്ളടക്കം നീക്കംചെയ്യും, തുടർന്ന് ആവശ്യമുള്ളത്ര തവണ ഉള്ളടക്കം ക്ലോൺ ചെയ്യുകയും വ്യക്തമാക്കിയ ഓരോ പാരൻ്റ് എലമെൻ്റിലേക്കും ക്ലോണുകൾ ചേർക്കുകയും ചെയ്യും. ഉദാഹരണത്തിന്:

$(init); ഫംഗ്ഷൻ init() ( // ഖണ്ഡിക #myDiv1-ൽ നിന്ന് #myDiv2, #myDiv3 എന്നിവയിലേക്ക് നീക്കുക $("#myDiv2, #myDiv3").append($("#myDiv1>p")); )

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

മുകളിലുള്ള കോഡ് നടപ്പിലാക്കിയ ശേഷം, പേജ് ഉള്ളടക്കം ഇതുപോലെ കാണപ്പെടും:

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

വാചകത്തോടുകൂടിയ ഖണ്ഡിക

സംഗ്രഹം

മികച്ച jQuery വെബ്‌സൈറ്റുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ പ്രാപ്‌തമാക്കുന്ന അടിസ്ഥാന ആശയങ്ങളാണ് ഉള്ളടക്കം നീക്കം ചെയ്യുക, മാറ്റിസ്ഥാപിക്കുക, നീക്കുക.