JQuery இல் ஒரு உறுப்பை எவ்வாறு உருவாக்குவது என்பதை அறிக

ஒரு புதிய உறுப்பை உருவாக்குவது jQuery JavaScript நூலகத்துடன் நீங்கள் செய்யக்கூடிய மிக அடிப்படையான பணிகளில் ஒன்றாகும். JQuery ஐப் பயன்படுத்தி, ஆவணப் பொருள் மாதிரி (DOM) உடன் சமமான அணுகுமுறையை விட பணி மிகவும் எளிமையானது. நீங்கள் அதை அதிக நெகிழ்வான மற்றும் வெளிப்படையானதாகக் காண்பீர்கள், நீங்கள் jQuery ஐ அதிகம் பயன்படுத்துகிறீர்கள்.

ஒரு நோக்கத்திற்காக, உங்கள் உறுப்பை ஒரு வலைப்பக்கத்தில் சேர்க்க வேண்டும். JQuery ஐப் பயன்படுத்தி ஒரு புதிய பட்டியல் உருப்படியை எவ்வாறு சேர்ப்பது அல்லது ஒரு பத்தியை புதிய உள்ளடக்கத்துடன் மாற்றுவது எப்படி என்பதை அறிக.

JQuery என்றால் என்ன?

JQuery நூலகம் ஒரு தொகுப்பு ஜாவாஸ்கிரிப்ட் இரண்டு முதன்மை நோக்கங்களைக் கொண்ட குறியீடு:

இது பொதுவான ஜாவாஸ்கிரிப்ட் செயல்பாடுகளை எளிதாக்குகிறது.
இது பல்வேறு உலாவிகளுக்கு இடையில் குறுக்கு-இணக்கத்தன்மை ஜாவாஸ்கிரிப்ட் சிக்கல்களைக் கையாளுகிறது.

இரண்டாவது குறிக்கோள் பிழைகளைச் சமாளிக்கிறது, ஆனால் இது உலாவிகளுக்கு இடையில் செயல்படுத்தும் வேறுபாடுகளையும் நிவர்த்தி செய்கிறது. உலாவிகள் காலப்போக்கில் மேம்படுவதால், இரண்டு நோக்கங்களும் முன்பு இருந்ததை விட குறைவான தேவை. ஆனால் jQuery இன்னும் ஒரு மதிப்புமிக்க கருவியாக இருக்கலாம்.

ஒரு உறுப்பு என்றால் என்ன?

ஒரு உறுப்பு சில நேரங்களில் குறிச்சொல் என்று குறிப்பிடப்படுகிறது. இரண்டும் ஒன்றுக்கொன்று மாற்றாகப் பயன்படுத்தப்பட்டாலும், ஒரு நுட்பமான வேறுபாடு உள்ளது. குறிச்சொல் என்பது இலக்கியத்தைக் குறிக்கிறது

அல்லது

உரை உள்ளடக்கத்தை மார்க்அப் செய்ய நீங்கள் ஒரு HTML கோப்பில் சேர்க்கிறீர்கள். ஒரு உறுப்பு என்பது திரைக்குப் பின்னால் உள்ள பொருள், இது குறிக்கப்பட்ட உரையைக் குறிக்கிறது. HTML குறிச்சொற்களுக்கு DOM எண்ணாக ஒரு உறுப்பை நினைத்துப் பாருங்கள்.

JQuery ஐப் பயன்படுத்தி ஒரு புதிய உறுப்பை உருவாக்குவது எப்படி

பெரும்பாலான jQuery செயல்பாடுகளைப் போலவே, ஒரு உறுப்பை உருவாக்குவது டாலர் செயல்பாட்டில் தொடங்குகிறது, $ () . இது மையத்திற்கான குறுக்குவழி jQuery () செயல்பாடு இந்த செயல்பாடு மூன்று தனித்துவமான நோக்கங்களைக் கொண்டுள்ளது, அது:

பொருந்தும் கூறுகள், பொதுவாக ஆவணத்தில் ஏற்கனவே உள்ளவை
புதிய கூறுகளை உருவாக்குகிறது
DOM தயாராக இருக்கும்போது ஒரு அழைப்பு செயல்பாட்டை இயக்குகிறது

HTML கொண்ட ஒரு சரத்தை முதல் அளவுருவாக நீங்கள் அனுப்பும்போது, இந்த செயல்பாடு ஒரு புதிய உறுப்பை உருவாக்கும்:

$(' ')

இது தனித்துவமான jQuery பொருளை வழங்குகிறது, அதில் தனிமங்களின் தொகுப்பு உள்ளது. இந்த வழக்கில், நாம் இப்போது உருவாக்கிய ஒரு 'அ' உறுப்பை குறிக்கும் ஒரு பொருள் உள்ளது.

லோரேம் இப்சம் டாலர் சிட் அமெட், ஒப்புதல்

இந்த செயலை பொருந்தும் கூறுகளிலிருந்து வேறுபடுத்துவதற்கு சரம் HTML போல இருக்க வேண்டும். நடைமுறையில், இதன் பொருள் சரம் a உடன் தொடங்க வேண்டும் < . இந்த முறையைப் பயன்படுத்தி ஆவணத்தில் எளிய உரையைச் சேர்க்க முடியாது.

இது உங்கள் ஆவணத்தில் உறுப்பைச் சேர்க்காது என்பதைப் புரிந்துகொள்வது முக்கியம், நீங்கள் சேர்க்க ஒரு புதிய உறுப்பை மட்டுமே உருவாக்குகிறது. உறுப்பு 'இணைக்கப்படவில்லை', நினைவகத்தை எடுத்துக்கொள்கிறது ஆனால் உண்மையில் இறுதிப் பக்கத்தின் பகுதியாக இல்லை -இன்னும்.

மேலும் சிக்கலான HTML ஐச் சேர்க்கிறது

டாலர் செயல்பாடு உண்மையில் ஒன்றுக்கு மேற்பட்ட உறுப்புகளை உருவாக்க முடியும். உண்மையில், நீங்கள் விரும்பும் HTML உறுப்புகளின் எந்த மரத்தையும் இது உருவாக்க முடியும்:

$('one
two
three
')

பண்புகளுடன் ஒரு உறுப்பை உருவாக்க நீங்கள் இந்த வடிவமைப்பைப் பயன்படுத்தலாம்:

$(' ')

ஒரு புதிய உறுப்பில் பண்புகளை எவ்வாறு அமைப்பது

முழு HTML சரத்தை நீங்களே உருவாக்காமல் ஒரு புதிய jQuery உறுப்பை உருவாக்கி அதன் பண்புகளை அமைக்கலாம். நீங்கள் பண்பு மதிப்புகளை மாறும் வகையில் உருவாக்கினால் இது பயனுள்ளதாக இருக்கும். உதாரணத்திற்கு:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';  
$(' ', { src: photo });

ஒரு உறுப்பை எவ்வாறு சேர்ப்பது

நீங்கள் ஒரு புதிய உறுப்பை உருவாக்கியவுடன், அதை பல்வேறு வழிகளில் ஆவணத்தில் சேர்க்கலாம். JQuery ஆவணங்கள் இந்த முறைகளை கீழ் ஒன்றாக சேகரிக்கிறது 'கையாளுதல்' வகை .

இருக்கும் உறுப்பின் குழந்தையாகச் சேர்க்கவும்

$('body').append($('Hello, world
'));  
$(document.body).append($el);

எடுத்துக்காட்டாக, பட்டியலின் முடிவில் ஒரு புதிய பட்டியலைச் சேர்க்க இந்த முறையைப் பயன்படுத்தலாம்.

இருக்கும் உறுப்பின் உடன்பிறப்பாக இதைச் சேர்க்கவும்

$('p.last').after('A new paragraph
')  
$('ul li:first').before('new item
')

உதாரணமாக, நீங்கள் மற்ற இரண்டு பேரின் நடுவில் ஒரு புதிய பத்தியைச் சேர்க்க விரும்பினால் இது ஒரு நல்ல தேர்வாகும்.

தற்போதுள்ள உறுப்பை மாற்றவும்

தற்போதுள்ள உறுப்பைப் பயன்படுத்தி புதிதாக உருவாக்கப்பட்ட ஒன்றுக்கு இடமாற்றம் செய்யலாம் பதிலாக () முறை:

$('#old').replaceWith('New paragraph
');

இருக்கும் உறுப்பைச் சுற்றி மடக்கு

இது மிகவும் அரிதான பயன்பாட்டு வழக்கு, ஆனால் நீங்கள் ஏற்கனவே உள்ள உறுப்பை புதிய ஒன்றில் இணைக்க விரும்பலாம். உதாரணமாக, உங்களிடம் ஏ குறியீடு நீங்கள் ஒரு மடிக்க விரும்பும் உறுப்பு க்கான :

$('code#n1').wrap('

')

நீங்கள் உருவாக்கிய உறுப்பை அணுகுதல்

தி $ () செயல்பாடு jQuery பொருளை வழங்குகிறது. பின்தொடர்தல் நடவடிக்கைகளுக்கு இது பயனுள்ளதாக இருக்கும்:

$el = $('p'); $('body').append($el);

மாநாட்டின் மூலம், jQuery புரோகிராமர்கள் பெரும்பாலும் jQuery மாறிகளை முன்னணி டாலர் அடையாளத்துடன் பெயரிடுகின்றனர். இது வெறுமனே ஒரு பெயரிடும் திட்டம் மற்றும் நேரடியாக தொடர்புடையது அல்ல $ () செயல்பாடு

JQuery ஐப் பயன்படுத்தி உறுப்புகளை உருவாக்குதல்

சொந்த ஜாவாஸ்கிரிப்ட் செயல்பாடுகளைப் பயன்படுத்தி நீங்கள் DOM ஐ கையாள முடியும் என்றாலும், jQuery அதைச் செய்வதை மிகவும் எளிதாக்குகிறது. DOM பற்றி நன்கு புரிந்துகொள்வது இன்னும் மிகவும் பயனுள்ளதாக இருக்கிறது, ஆனால் jQuery அதனுடன் வேலை செய்வதை மிகவும் இனிமையாக ஆக்குகிறது.

பகிர் பகிர் ட்வீட் மின்னஞ்சல் வலைத்தளங்களின் மறைக்கப்பட்ட ஹீரோ: DOM ஐ புரிந்துகொள்வது

வலை வடிவமைப்பு கற்றல் மற்றும் ஆவண பொருள் மாதிரி பற்றி மேலும் தெரிந்து கொள்ள வேண்டுமா? DOM பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டியது இங்கே.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

நிரலாக்க
இணைய மேம்பாடு
jQuery

எழுத்தாளர் பற்றி பாபி ஜாக்(58 கட்டுரைகள் வெளியிடப்பட்டன)

பாபி ஒரு தொழில்நுட்ப ஆர்வலர் ஆவார், அவர் இரண்டு தசாப்தங்களாக மென்பொருள் உருவாக்குநராக பணியாற்றினார். அவர் கேமிங் மீது ஆர்வம் கொண்டவர், ஸ்விட்ச் பிளேயர் இதழில் விமர்சனம் ஆசிரியராகப் பணியாற்றுகிறார், மேலும் ஆன்லைன் வெளியீடு மற்றும் வலை மேம்பாட்டின் அனைத்து அம்சங்களிலும் மூழ்கி இருக்கிறார்.

பாபி ஜாக் இருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்