[Powered by Google Translate] [સેમિનાર: JQUERY] [વિપુલ શેખાવત, હાર્વર્ડ યુનિવર્સિટી] [આ CS50 છે.] [CS50.TV] તમે ઘરે સાથે અનુસરી રહ્યાં છો, તો તમે ખરેખર ઑનલાઇન મારા સ્લાઇડ્સ ઍક્સેસ કરી શકો છો આ લિંક પર જઈને. તે bit.ly. પર, TjjRWj છે તમે પણ, ફક્ત સીધા URL પર જઇ શકો છો જે મારા નામ છે જે cloud.cs50.net ~ / vshekhawat છે, અને jquery. હું ખૂબ તમે ઘરે જોઈ રહ્યાં છો, જો તમે સાથે અનુસરવા માટે પ્રોત્સાહન આપે છે, તમે અહીં છો, તો પણ, આ એક સુંદર અરસપરસ પ્રસ્તુતિ છે કારણ કે. 

આજે તેથી, હું jQuery વિશે વાત કરવા જઈ રહ્યો છું, અને પ્રથમ પ્રશ્ન છે jQuery શું છે? આ વર્ષે, હું તમને ગાય્ઝ જાવાસ્ક્રિપ્ટ આવરી લેવામાં ન હોય ખબર અમે છેલ્લા વર્ષમાં હોય તેટલી વિગતો છે. જાવાસ્ક્રિપ્ટ, પ્રથમ તો, માત્ર એક ક્લાઈન્ટ બાજુ ભાષા છે તમે દરેક વપરાશકર્તા મશીન પર સ્ક્રિપ્ટો અને કોડ સ્કોર ઉપયોગ કરે છે. તેથી તમે, લોકો માટે વેબ પૃષ્ઠોને પૂરી પાડે છે કે જે સર્વર છે પરંતુ તમે તેમની મશીન પર સામગ્રી કરવા માંગો છો શકે છે તમારા સર્વર દરેક 30 સેકન્ડ કે કંઈક કરવા માટે વિનંતીઓ મોકલવા માટે તેમના મશીન પૂછો. તમે JavaScript ઉપયોગ કરીને તે કરી શકો છો. JQuery માત્ર જાવાસ્ક્રિપ્ટ ટોચ પર વધુ કાર્યક્ષમતા પૂરી પાડે છે કે તમે માટે વધારાની સામગ્રી કરે છે. તમે ટોચ પર સમાવિષ્ટો જોવા, તો કે જે તમે કરવા માટે સમર્થ રહ્યા છો તે સામગ્રી કેટલાક વર્ણવે છે. તેથી એકંદરે, તે જાન્યુઆરી 2006 માં બનાવવામાં આવી હતી. તે પ્રથમ ઓગસ્ટ 2005 માં કલ્પના કરવામાં આવી હતી. તે થોડા વર્ષો માટે આસપાસ કરવામાં આવી છે, અને તે ખરેખર નવા વેબ 2.0 ચળવળના ભાગ છે કે ઈન્ટરનેટ તેથી ચળકતી કરવામાં આવ્યું છે. તે સૌથી વધુ ઉપયોગમાં લેવાતી JavaScript લાઇબ્રેરી છે. મિલિયન 19.6 બોલ વેબસાઇટ્સ તેનો ઉપયોગ કરવામાં આવે છે, અને વપરાશ પણ વધી રહ્યો છે builtwith.com અનુસાર, જે દેખીતી રીતે, છેલ્લા વર્ષમાં, માત્ર સતત એકદમ linearly વધી રહી છે. ટોચ 10 મિલિયન સાઇટ્સ પૈકી, હજુ પણ નથી - તેમને આશરે 40% હાલમાં તેનો ઉપયોગ કરવામાં આવે છે. ફેસબુક તે વાપરે છે, અન્ય વેબસાઇટ્સ ઘણાં હાલમાં તે ઉપયોગ કરે છે. તમે ઇચ્છો તો તમે તમારા પોતાના પર આ આંકડા જોઈ શકો છો. જો તે ફાઉન્ડેશન અને 13 બોર્ડ સભ્યો ધરાવે છે કારણ કે તમે તે legit કહી શકે છે નિયમિત ધોરણે તેની પર કામ કરે છે 20 લોકો એક ટીમ સાથે. તેથી તે ખૂબ જ વ્યાપક ઉપયોગ, તે. Org URL છે તે ફેન્સી છે, તે અન્ય સામગ્રી માટે સ્પિન-મોટે છે, તેથી તેને એક મોટી સોદો છે. 

શા માટે તમે તેનો ઉપયોગ કરવો જોઇએ? JQuery ખૂબ જ હળવા હોય છે. તે એક વિશાળ ફાઇલ નથી થાય છે. તમે ડાઉનલોડ કરી શકો છો જો minified ફાઈલ છે, કે જે બધા સફેદ જગ્યા અને ટિપ્પણીઓ વગર છે, અને તે માત્ર 32 kB છે. તેથી તે માત્ર તમારા વેબ પૃષ્ઠ પર ટૉસ સરળ છે અને માત્ર તેનો ઉપયોગ શરૂ કરવા માટે. તે પણ ખૂબ જ અસરકારક રીતે લખેલા છે, તેથી તે ઘણો લાગી નથી - જો તમે તેનો ઉપયોગ ખૂબ ત્યારે તે તમારી વેબસાઇટ ધીમું નથી. તે તમે અગાઉ બન્યું હતું કે વસ્તુઓ અમલ કરી શકો છો. કાર્યક્ષમતા કેટલાક પાસાઓ છે, એનિમેશન બનાવવા, જેમ કે સામાન્ય રીતે કરવા માટે ખૂબ, ખૂબ મુશ્કેલ રહેશે. પરંતુ jQuery માં તેઓ ખરેખર ખૂબ જ સરળ નથી. અને આમ કરવા માટે નકામી છે, એવી કેટલીક બાબતો છે જાવાસ્ક્રિપ્ટ શક્ય, પોસ્ટ વિનંતિ મોકલીને, જેમ પરંતુ સર્વર માટે વિનંતી મોકલવા માટે, તમે લખવા માટે છે કોડ ઓફ પાંચ કે છ કે સાત રેખાઓ. હવે તમે માત્ર એક જ વિધેય કોલ માં, કોડ એક વાક્ય માં કરી શકો છો. કે ખરેખર તમે કરી રહ્યાં છો કે સામગ્રી ઘણો સરળ બનાવે છે. અને બધા ઠંડી બાળકો તેનો ઉપયોગ કરવામાં આવે છે. કે દ્વારા, હું મને એમ થાય છે. મારા અંતિમ પ્રોજેક્ટ છેલ્લા વર્ષ, જે news.whrb.org છે રેડિયો સ્ટેશન માટે છે, કે જે હું આ બ્લોગ બનાવનાર જે બધા અમે કર્યું છે કે શો અને તેમને માટે MP3 ફાઇલોને આયોજન કરે છે. જો તમે ભૂતકાળમાં શો દ્વારા બ્રાઉઝ કરી શકો છો અને તે બધા jQuery ની મદદથી કરી શકાય છે. તમે કહી શકો છો કારણ કે આ બધા એનિમેશન છે, આવશ્યકપણે. તમારી પાસે તેથી જો - જો તમે નવી પોસ્ટ બનાવી રહ્યા છો તો, તમે આ થોડું slideDowns જુઓ; કે બધા jQuery ની મદદથી કરી શકાય છે. અને આ ફેડ - તેથી સામગ્રી કે જે પ્રકારની બધા, jQuery ઉપયોગથી થાય છે અને તમે સતત સાઇટ નેવિગેટ કરવા માટે પૃષ્ઠને ફરીથી લોડ કરવા માટે નથી. JQuery ઉપયોગ કરીને બનાવવામાં આવ્યું છે કે અન્ય ઠંડી વસ્તુ આ પ્રસ્તુતિ છે. હું scrolldeck કહેવાય આ ઓપન સોર્સ વસ્તુ નો ઉપયોગ કરું છું જે કોઈને jQuery ટોચ પર લખ્યું. તમે ખરેખર સ્રોત જુઓ, તો તમે તે જોઈ શકે છે તેઓ આ ડોલર સાઇન ઉપયોગ કરી રહ્યાં છો; ડોલર ચિહ્ન એક કાર્ય એક jQuery કાર્ય છે કે જે અર્થ માટે jQuery ઉપયોગ થાય છે. તેથી તેઓ jQuery ટોચ પર wrapper વ્યાખ્યાયિત કરી રહ્યા છીએ કે જો તમે આ જેમ એક પ્રસ્તુતિ બનાવવા માટે પરવાનગી આપે છે અને તમે અહીં તેઓ મૂળ jQuery ફાઈલ સહિત રહ્યા છો તે જોઈ શકે છે જે jQuery વાપરવા માંગો, તો તમે સામેલ કરવા પડશે શું છે તમારા પોતાના વેબસાઇટ્સ છે. 

જે સ્પર્શ, તમે કેવી રીતે તેને સ્થાપિત નથી? તમે હમણાં, ફાઇલ jQuery.com અને ડાઉનલોડ કરવા માટે જઈ શકે છે વેબ ડિરેક્ટરીમાં તેને ઉમેરો અને તે સમાવેશ થાય છે. તેથી માત્ર ટોચ પર, તમારા HTML ફાઇલ વડા ટૅગમાં તમારી મુખ્ય HTML ફાઇલ છે, માત્ર કોડ કે જે વાક્ય છે તમે ઉપયોગ કરી રહ્યાં છો jQuery જે આવૃત્તિ માટે યોગ્ય આવૃત્તિ સાથે. તમે, jQuery.com પર જઈને તેને ડાઉનલોડ કરી શકો છો "ડાઉનલોડ jQuery" ક્લિક કરો અને તમે તેને મળ્યો છે. આ તે છે. અને ખરેખર, અમે તેને જેવી લાગે છે શું પર એક નજર કરી શકો છો. તમે અહીં ડાઉનલોડ પર ક્લિક કરો, તો jQuery આ છે. તે તમારા માટે બધા જાદુ સામગ્રી કરે છે કે જે માત્ર એક મોટા જાવાસ્ક્રિપ્ટ ફાઈલ છે. આ બધા વાંચી શકાય છે જે minified આવૃત્તિ છે. તમે પણ વાંચી શકાય છે, જે વિકાસ આવૃત્તિ જોઈ શકો છો પરંતુ હજુ પણ ખૂબ, ખૂબ લાંબી. તે ત્યાં સામગ્રી ઘણો છે. તમને પણ તે Google ની હોસ્ટ સંસ્કરણ પર લિંક કરી શકો છો. કે જેથી તમે તેને પૂરી પાડવા માટે ગૂગલ પર આધાર રાખે છે માટે પરવાનગી મળશે. તેઓ બધા સમયે ઉપલબ્ધ છે તે દરેક આવૃત્તિ પૂરી પાડે છે. તેથી તમે કદાચ તમારા માટે હોસ્ટ કરવા માટે Google પર આધાર રાખે છે શકે છે. અથવા તમે jQuery પોતાના નવીનતમ સંસ્કરણ પર લિંક કરી શકો છો. તેઓ હંમેશા તાજેતરની આવૃત્તિ સુધારાશે છે કે URL છે. , તે jQuery-તાજેતરની, અને તે સાથે એક સમસ્યા છે જે કે જો સુધારાશે jQuery અને અગાઉના અમુક વિધેયોનો તેઓ retrograded અથવા અપ્રચલિત બને હતી તે નથી કરી શકે છે - તે હવે આધારભૂત ન મળી શરૂ કરી શકે છે. તમે, આવૃત્તિ 1.8.2 નો ઉપયોગ વેબસાઇટ લખી તેથી જો સમય આવૃત્તિ દ્વારા 2.7 બહાર આવે છે તમે લખ્યું હતું કેટલાક કાર્યોને હવે કામ નથી. તેથી તે 32 kB ફાઈલ માત્ર ડાઉનલોડ કરવા માટે સારી છે તમારા વેબ પૃષ્ઠ પર મૂકી છે, અને તે કાયમ માટે કામ કરીશું. 

હું આગળ જાઓ અને jQuery ના વાસ્તવિક કાર્યક્ષમતા વિશે વાત શરૂ કરવા જઈ રહ્યો છું. પ્રથમ વસ્તુ પસંદગીકારો છે. આ jQuery શરૂઆતમાં પૂરી પાડવા માટે કલ્પના કરવામાં આવી છે તે છે. અને તમે જોવા માટે દસ્તા પર ક્લિક કરી શકો છો હું આવરી લેવાની વધી પસંદગીકારો માટે વિગતવાર દસ્તાવેજીકરણ. પસંદગીકારો પાછળનો તમે પૃષ્ઠ પર HTML તત્વો પસંદ કરી શકે છે. એક પૃષ્ઠ પર તત્વો ID અને વર્ગો અને તેમને અન્ય ઓળખવા પાસાં હોય છે. પણ નથી - અલગ ઓર્ડર માં they're. તેઓ દરેક અન્ય અંદર નેસ્ટ રહ્યાં છો તે સમયના કેટલાક. JQuery તમે પૃષ્ઠ ઘટકો મેળવવા જે સરળ ક્વેરીઝ ઘડવા માટે પરવાનગી આપે છે. પછી તમે jQuery કાર્યો ઉપયોગ કરીને આ તત્વો ચાલાકી કરી શકો છો અમે પછી મળશે એ મેનીપ્યુલેશન વિભાગ છે. તમે HTML, આ સીએસએસ બદલવા, ફેરફાર કરી શકો છો તમે પણ ચેતન અને ચોક્કસ ઘટનાઓ પર સક્રિય છે કે વિધેયો ઉમેરી શકો છો. કંઈક ક્લિક હોય તો તેથી, ઉદાહરણ તરીકે,, જો તમે શું કરવા કંઈક કરવા માંગો છો તમે jQuery તેમજ ઉપયોગ કરીને તે કરી શકો છો. અને તત્વો પસંદ કરવા માટે માર્ગો એક વિશાળ હોય છે. તેમાંના મોટા ભાગના, હું ઉપયોગ ક્યારેય કર્યું છે, પરંતુ મૂળભૂત રાશિઓ હોય છે જે ખૂબ મહત્વપૂર્ણ છે. આ તત્વ પસંદગીકાર, ઉદાહરણ તરીકે, જો તમે હમણાં કંઈપણ પસંદ're કે DIV છે - હું ખરેખર આ સ્લાઇડ પ્રસ્તુતિ માટે ખુલ્લો કોડ છે. તેથી, ઉદાહરણ તરીકે, અહીં પ્રથમ સ્લાઇડ છે. અહીં આપણે એક DIV છે. અમે ખરેખર પાનાં પર બધી divs પસંદ કરો તો, તે માત્ર અમને આ ફાઈલમાં હાજર છે તમામ divs ઝાકઝમાળ આપી શકશો. આ ID ને પસંદગીકાર તમે આપેલ ID સાથે કંઈપણ પસંદ કરી શકો છો. આ ઉદાહરણ માટે, આ વસ્તુ ને "શું," ધરાવે છે તેથી જો અને અમે # શું તેના બદલે કેટલાક ID ને સાથે આ ન હોય તો, તે માત્ર એક તત્વ છે અને તે પૃષ્ઠ કે તત્વ છે કે જે એરે પરત ફર્યા હતા. અમે પણ હોવાના પસંદગીકારો આ રીતે ભેગા કરી શકો છો માત્ર divs છે કે ID સાથે વસ્તુઓ પસંદ કરો. હા છે. માત્ર તે પાસે ID છે divs પસંદ કરો. વર્ગ માટે તમે માત્ર એક ટપકું નો ઉપયોગ, તે સીએસએસ જેવી જ વાત છે. વંશજ પણ કામ કરે છે; તમે અમુક વર્ગ પાસે તેથી જો ઉદાહરણ તરીકે, જેથી - અને તે અંદર તત્વો નેસ્ટ છે ત્યાં અમુક વર્ગ છે અને તે બીજા પૃષ્ઠ પર લિંક કરવા માટે એક એન્કર ટૅગ છે, તમે લિંક પ્રાપ્ત કરવા માટે આ વાક્યરચના ઉપયોગ કરી શકો છો. તમે પણ ઘણી વસ્તુઓ પસંદ કરી શકો છો; માત્ર અલ્પવિરામ દ્વારા તેમને અલગ, તમે ઇચ્છો કોઈપણ પસંદગીકાર વાપરો, અને તમે એક એરે માં, એક જ સમયે તેમને બધા પસંદ કરશે. અને પછી પણ પસંદગીકાર નથી ત્યાં છે, જેથી તમે બધા divs પસંદ કરી શકો છો અમુક ચોક્કસ વર્ગ નથી કે. અને તે માત્ર આ પસંદગી કેવી રીતે કામ કરે પરિચય વિચાર મદદરૂપ રીત છે. હું એક બીજા કેટલાક નક્કર ઉદાહરણો બતાવીશું. 

ઉન્નત પસંદગીકારો છે - આ માત્ર થોડા ઉદાહરણો છે. ત્યાં આ ડઝનેક છે, પરંતુ તમે બધા ઇમેજ ટૅગ્સ પસંદ કરવા માંગતા હોય તો કેટલાક તત્વ અંદર, તો પછી તમે માત્ર કરો: છબી. તમે, ઉદાહરણ તરીકે, પણ તત્વો પસંદ કરવા માંગતા હોય તો તેમને 20 હોય તો, તમે, 0, 2, 4, 6 અને તેથી પર પસંદ કરવા માંગો છો પણ, અથવા તમે પણ કરી શકો છો: તમે શું વિચિત્ર. આ સ્યુડો પસંદગીકારો છે, કે જે તેઓ વાસ્તવમાં ગણતરી અર્થ એ થાય કે દરેક અન્ય તત્વ બદલે માત્ર જવું અને તેમને બધા પસંદ કરતાં. તમે પણ કરી શકો છો - દરેક તત્વ પણ ચોક્કસ લક્ષણો હોઈ શકે છે. તેથી, ઉદાહરણ તરીકે, વર્ગ = કેન્દ્ર પણ એક વિશેષતા છે. આ એન્કર ટેગ માટે, href, હાઇપરટેક્સ્ટ સંદર્ભ, પણ એક વિશેષતા છે. તે ખરેખર સામાન્ય છે - જેથી તમે એક ચોક્કસ પૃષ્ઠ અથવા માત્ર લિંક્સ કે કંઈક પસંદ કરી શકો છો. જો તમે ઇચ્છો કે કોઇ લક્ષણ સાથે કંઈ પસંદ કરી શકો છો. અને પછી, પણ, લક્ષણ છે. તમે, ઉદાહરણ તરીકે, તમામ ઇનપુટ તત્વો પસંદ કરવા ઈચ્છતો હોય તો કે, તેમને નામ તરીકે શબ્દ "પાસ" હોય છે એક પાનું ઇનપુટ ટેક્સ્ટ બ્લોક હોય તો કે તમે જે પસંદ કરી શકે છે એક રીતે હશો કે "પાસવર્ડ" તરીકે ઓળખવામાં આવે છે. અને ઘણા વધુ હોય છે. તમે આગળ વધો અને દસ્તાવેજીકરણ જોઈ શકો છો અને તે કેવી રીતે કામ કરે ચોક્કસ ઉદાહરણો જુઓ. 

આગામી વસ્તુ DOM મેનીપ્યુલેશન છે. અમે તત્વો પસંદ કરો પછી, અમે ખરેખર તેમની સાથે સામગ્રી કરવા માંગો છો કરશે. અત્યાર સુધી અમે બધા ખાતે જોવામાં, પરંતુ ન હોય તો તમે દસ્તાવેજીકરણ જુઓ તો, આપણે શું કરી શકે છે કે જે ઘણો ખરેખર છે. આ બિંદુએ, અમે આ પ્રસ્તુતિ પર તત્વો પસંદ કરવા માટે જઈ રહ્યાં છો અને તેમને jQuery મદદથી ચાલાકી. આ jQuery ઉપયોગ કરીને લાગુ કરવામાં આવે છે, કારણ કે અમે jQuery પુસ્તકાલય વપરાશ હોય છે અને અમે આ કોડ અંદર તે કાર્યો ઉપયોગ કરી શકો છો. તમારા વિશે ખબર નથી શકે છે એક ઉપયોગી વસ્તુ કન્સોલ છે. અને Google Chrome હું વાપરું છું શું છે. તમે Alt આદેશ જોહાન દબાવી શકો છો અથવા Alt નિયંત્રણ જોહાન કન્સોલ ખોલવા માટે. Firefox માં હું તે આદેશ પાળી કેવલી અથવા નિયંત્રણ પાળી કે લાગે છે Safari માં તમે કેટલાક સુયોજનો બદલવા જવા માટે હોય છે. ત્યાં તમે તેને કરવા માંગો છો, તો લિંક છે, પરંતુ હું Chrome અથવા Firefox મેળવવામાં ભલામણ કરીએ છીએ. તેથી માતાનો કન્સોલ ખોલો દો, તે અહીં નીચે છે. તે તમને મૂળભૂત રીતે તમે ઇચ્છો કાંઇ માત્ર પરવાનગી આપે છે. તેથી જો તમે ફક્ત એક ચલ નામના એક્સ બનાવવા લખી શકો છો X = 5, X + 2 છે તે જોવા કરીએ. તમે સીએસ કંઈક આવું પણ કરી શકે + + ચાલો જોઈએ, X CS50 હશે + + 45,. તમે માત્ર અમુક લાક્ષણિક જાવાસ્ક્રિપ્ટ સામગ્રી કરી શકો છો. પરંતુ તમે પણ અહીં jQuery કરી શકો છો. 

તેથી અહીં આ પ્રથમ પાસું જોવા કરીએ. અમે એક શબ્દમાળા છે જે HTML, નામની એક ચલ બનાવવા જઈ રહ્યાં છો. તે કેટલાક નવા લખાણ કહેવાય છે કે, તે એક ફકરો ટૅગ છે. તેથી આપણે આ HTML હોય છે, તે ફકરો ટૅગ્સ માં, અમુક નવા ટેક્સ્ટ છે. હવે અમે ખરેખર પાનું ઉમેરવા માંગો છો. હું આ ફકરા માટે HTML, અહીં આ શીર્ષક, ઉમેરો ID છે કે જેથી તે સેટ. અમે પછી ઉમેરો ને પસંદ કરો અને જો તે ઉમેરી હું હમણાં બનાવેલ છે એ HTML ચલ, તે અધિકાર આ ફકરો ટૅગ પછી, ઓવરને અંતે કે એચટીએમએલ ઉમેરો કરશે. અમે તે શું તો - અમે, તો આ ફકરો પસંદ અને અમે, હું માત્ર ઉમેરાયેલ HTML ચલ સાથે ઉમેરો કાર્ય કહેવાય કર્યું તે પૃષ્ઠ પર અધિકાર ત્યાં નવા ટેક્સ્ટ ઉમેરો કરશે. અમે પણ તે તત્વ શરૂઆતમાં પહેલાં જશે, જેનો અર્થ ઉમેરવું કરી શકો છો. તેથી શરૂઆતના અને પછીથી કેટલાક નવા ટેક્સ્ટ છે. હું આગળ જાઓ અને હું માત્ર કર્યું આ સામગ્રી છુટકારો મેળવવા માટે તાજું કરી શકો છો. પરંતુ તમે અંત થાય છે ઉપયોગ કરી શકો છો કેવી રીતે એક ઉદાહરણ છે અને પદ્ધતિઓ ઉમેરો આ પાનાં પર સામગ્રી ચાલાકી, કેટલાક એચટીએમએલ ઉમેરો. 

તમે પણ વર્ગો બદલી શકો છો. પાછા આ શૈલી ફાઈલ માં, હું જીતી વર્ગ માટે આ બનાવી છે કે લખાણ રંગ લાલ, કેટલીક પૃષ્ઠભૂમિ રંગ અને લખાણ છાયા છે. તે કદરૂપું લાગે છે, પરંતુ હું ખરેખર કરી શકો છો - આ ફકરો વર્ગ ID ને અનુલક્ષે છે. તેથી હું વિજય માટે વર્ગ ઉમેરી શકો છો. હું, કન્સોલ આ અમલ કરી શકો છો અને તે છે કે જે વર્ગ ઉમેરો કરશે, અને હવે તે કદરૂપું લાગે છે, જેમ ઈચ્છિત. આ સીએસએસ આપમેળે કે વર્ગો તમને લાગુ નહીં - એક વર્ગ માટે css હોય તો, તે આપમેળે લાગુ નહીં તમે એક તત્વ ના વર્ગ બદલો તો. પછી અમે માત્ર દૂર વર્ગ ઉપયોગ કરીને તેને દૂર કરી શકો છો. તમે લાલ અથવા પ્રકાશિત જેવા કેટલાક પૂર્વવ્યાખ્યાયિત વર્ગો ધરાવે છે, તેથી જો અને પછી તમે તત્વો માટે તે લાગુ કરવા માંગો છો તમે દર વખતે સ્ટાઇલ બધા સીએસએસ કરવા માટે નથી. તમે માત્ર એક તત્વ માટે વર્ગ ઉમેરી શકો છો, અને પછી તે આપોઆપ બની જશે - તે આપોઆપ કે વર્ગ માટે યોગ્ય તપાસ કરશે. અમે પણ વસ્તુઓ દૂર કરી શકો છો; જેથી હું બધા divs પસંદ કરવા જઈ રહ્યો છું આ પાનાં પર છે અને તેમને દૂર કરે છે. કે જેમ જોવા માટે શું ચાલે છે? તે કંઇ જેવો બનશે, તેથી કંઈ જ બાકી ખરેખર છે. મારી પ્રસ્તુતિ ચાલ્યો આવે છે. હું, સદભાગ્યે, તાજું કરો અને તેને પાછું લાવવા કરી શકો છો તે માત્ર એક જ વાર ચાલી રહ્યું છે, કારણ કે તમે સંપૂર્ણપણે પાનું બોલ એક તત્વ નાશ કરવા માંગો છો પરંતુ જો કે, દૂર એક ઉદાહરણ છે. 

તમે પણ પર ફરીથી લખી શકો છો, અને હું પૃષ્ઠ પર તમામ ફકરા ટેગ્સ પસંદ કરવા જઈ રહ્યો છું અને તેમને અંદર જવા અને તેઓ તેમને હોય ગમે લખાણ બદલો સાથે માત્ર શબ્દ "પરીક્ષણ." જો તમે આ કરો છો, તો તમે આ પરીક્ષણ સાથે પાનાં પર દરેક ફકરો બદલો મળશે. Yep. તેઓ બધા પરીક્ષણ સાથે બદલી રહ્યાં છો. તેથી તે ટેક્સ્ટ ઍક્સેસ અને તે ફરીથી લખી ઉદાહરણ છે. તમે પણ માહિતી પ્રાપ્ત કરી શકે છે, અને આ ઇનપુટ બોક્સ માટે ખરેખર ઠંડી હોય છે. તમે લોકો માં સામગ્રી ટાઇપ કરવામાં આવે છે કે જે ઇનપુટ બોક્સમાં હોય તો લોકો તેને સામગ્રી ટાઇપ કરી રહ્યા છે, અહીં આપણે ઇનપુટ, ટેક્સ્ટ એક પ્રકાર સાથે કોઇ ઇનપુટ ટેગ પસંદ કરો. આ કિસ્સામાં, સમગ્ર પ્રસ્તુતિ એક જ ઇનપુટ બોક્સ છે, તેથી અમે માત્ર પ્રથમ એક પસંદ પડશે, અને પછી આપણે તેને વાલ વિધેય કોલ. કે, કિંમત આપે છે, અને ઇનપુટ બોક્સ માટે મૂલ્ય તે અંદર હોઈ બને ગમે માત્ર છે. અમે આવું તેથી, જો તે માત્ર શબ્દમાળા સામગ્રી આપે છે. અમે વધુ સામગ્રી લખ્યા બાદ તેને ફરીથી કૉલ, તો તે વધુ સામગ્રી માં કરે છે. કે, તપાસો પછી ઇનપુટ બોક્સમાં તત્વો ઍક્સેસ કરવા માટે એક મહાન માર્ગ છે, અને આ માન્ય ઇમેઇલ સરનામું છે, આ ઉદાહરણ માટે, માન્ય તારીખ છે. લોકો તેને ટાઇપ કરી રહ્યા છે તરીકે તમને ફક્ત તરત સામગ્રી મેળવી શકે અને, પછી તે માન્ય છે કે કેમ તેની તપાસ સર્વર તે પાછું મોકલી, તો તમે તેને સાથે માંગો કાંઇ. અને તે તમે તે બોક્સ અંદર શું ઍક્સેસ કેવી રીતે. 

તમે પણ તેના બદલે ઉમેરી રહ્યા છે તેથી, સીએસએસ સીધા સંશોધિત કરી શકો છો કેટલાક પૂર્વવ્યાખ્યાયિત ગુણધર્મો ધરાવે છે કે વર્ગ હોય, તમે ફક્ત તમે કંઈપણ કરવા માંગો છો ગમે સીએસએસ ઉમેરી શકો છો. સમગ્ર પ્રસ્તુતિ છે કે જે તેથી ચાલો પસંદ શરીર, અને રંગ લખાણ છે તે જ રંગો વ્યાખ્યાયિત કે મિલકત છે. અમે લાલ તેને બદલી જો નહિં, તો આ પાનું બધી લખાણ લાલ ચાલુ કરશે. અમે પૃષ્ઠભૂમિ રંગ વાદળી કંઈક કરી શકો છો ત્યાં અમે જાઓ, તે સુંદર છે. શું તમે ખરેખર આ સાથે માંગો કંઈપણ કરી શકે છે. જો સીએસએસ મિલકત મદદથી, તમે ખરેખર કંઇ કોઈપણ સમયે જુએ છે કે કેવી રીતે સંશોધિત કરી શકો છો. આગામી વસ્તુ અસરો છે. ઇફેક્ટ્સ, મૂળભૂત રીતે સીએસએસ બદલવા તરીકે જ વસ્તુ છે પરંતુ તેઓ ખરેખર તે માટે કેટલાક વિશેષ એનિમેશન પૂરી પાડે છે. તેથી તેના બદલે માત્ર રંગ દર્શાવે છે કે છૂપાઇ કંઈક અથવા બદલવા માટે, તમે ખરેખર તે એનિમેટેડ કરી શકો છો. તમે તે માટે વિસ્તૃત દસ્તાવેજ પર એક નજર કરવા માંગતા હોય તો અહીં દસ્તાવેજીકરણ, છે. પરંતુ હું મુખ્ય રાશિઓ આવરી જઈ રહ્યો. શો અને ચામડું ગુણધર્મો છે. ને ખરેખર આ સમગ્ર બોક્સ અનુલક્ષે બતાવો / છુપાવો, હું તેને છુપાવી તો, તે માત્ર અદૃશ્ય થઈ જશે. હું તેને પાછા આવવાની બનાવવા માંગો છો અને જો હું તેને ફરીથી બતાવી શકો છો. અને તે પાછું છે. તે વાસ્તવમાં, અદૃશ્ય થઈ ન હતી હું ખરેખર પાનું દૂર ન હતી, હું હમણાં જ છુપાયેલા માટે દૃશ્યતા ના સીએસએસ મિલકત સેટ તેથી તમે હવે તેને જોઈ શકતા નથી. પણ સ્લાઇડ ઉપર અને નીચે સ્લાઇડ છે; તમે આ અસર માટે પરવાનગી આપે છે કે જે. તે અદૃશ્ય થઈ સુધી સ્લાઇડ્સ, અને તે અદૃશ્ય થઈ જાય છે પછી તમે તેને પાછા આવો બનાવવા માટે તે સ્લાઇડ નીચે કરી શકો છો. અને હવે તેને પાછું છે. ફેડ ને આ બોક્સ અનુલક્ષે છે - જે આ ફેડ અસર પણ છે. હું તેને બહાર ઝાંખું હોય, તો પછી તે ધીમે ધીમે અદ્રશ્ય થઈ પડશે. હું પણ ઝાંખા શકે છે, અને તે પાછા આવશે. તમે પણ ફેડ કાર્ય માટે વિશિષ્ટ છે, કે જે માટે ફેડ કરી શકો છો. તમે તેને તમે ઇચ્છો કે કોઇ ચોક્કસ અસ્પષ્ટ ઝાંખા હોઈ શકે છે. તમે .5 થી ધીમે ધીમે તે નિરાશાજનક તેથી, જો તે અડધા દૃશ્યમાન બની શકશો. હું તે .1 પર જાઓ કરી શકો છો, અને પાછા માટે 1 ફરી તે સંપૂર્ણપણે દૃશ્યમાન બનાવવા માટે. માત્ર તમે શું કરી શકો છો કે જે અન્ય એનિમેશન છે. 

જો ટોગલ અસરો પણ છે. તેથી હું આ બોક્સ અનુલક્ષે જે ટૉગલ કરો ને પસંદ કરો જઈ રહ્યો અને તે DIV પર તમે ટૉગલ કરો કૉલ કરી શકો છો, તે દૃશ્યમાન છે, જો તે અદૃશ્ય થઈ જશે, તે અદ્રશ્ય છે જો તે ફરીથી દૃશ્યમાન થઈ જશે. તેથી હું માત્ર બે વખત આ ટૉગલ કાર્ય કહેવાય; પ્રથમ એક હતું ચામડું તરીકે જ વાત, બીજા કૉલ શો તરીકે જ બાબત હતી. અને તમે પણ ફેડ ટૉગલ સાથે આ શું કરી શકો છો જે વાસ્તવમાં તે ફેડ્સ સિવાય આ જ બાબત, કરે છે. અને સ્લાઇડ સાથે જ વસ્તુ બદલો. સંકળાયેલ અસરો તેમજ છે, જેનો અર્થ તમે એક તત્વ પસંદ કરો અને તે પર એનિમેશન પદ્ધતિઓ એક ટોળું કૉલ જો, તમે તેને બહાર ઝાંખું ઇચ્છતા હોય, તો પછી, નીચે સ્લાઇડ અને પછી છુપાવવા અને પછી ઝાંખા, તે એક પંક્તિ માં તેમને કરશે. તેથી અદ્રશ્ય, પાછા આવ્યા - કેટલાક કારણોસર, ચામડું થાય ન હતી. માતાનો તેને અજમાવી દો. અરે વાહ, તેથી તેને બહાર ઝાંખુ અને પછી તે દૂર નીકળત હતો. અને ખાદ્યપદાર્થો વધુ હોય છે. તમે એનિમેટ વિધેય વાપરી શકે છે તમારા પોતાના એનિમેશન બનાવવા માટે, જે એકદમ જટિલ છે પરંતુ તે અનંત એક્સ્ટેન્સિબિલિટી સાથે તમને પૂરુ પાડે છે. તમે તમને જોઈતા એનિમેશન કોઇ પણ પ્રકારની બનાવી શકો છો. તમે પણ એક જ સમયે અનેક એનિમેશન અપ કતારમાં કતાર ઉપયોગ કરી શકો છો. તેથી, જો તમે પાનું સમગ્ર ઉડવા માટે કંઈક કરવા માંગો છો, તો તળિયે ડાબી બાજુએ ઉપર જમણી થી સ્લાઇડ, તમે કે શું કરી શકો છો અને માત્ર અન્ય પછી એક જતા ક્રિયાઓ એક ટોળું હોય છે. 

અમે વિશે વાત કરવા જઈ રહ્યાં છો આગામી વસ્તુ ઘટનાઓ છે. ઘટનાઓ તમને પરવાનગી આપે છે - અત્યાર સુધી, અમે માત્ર કન્સોલ માં વસ્તુઓ ટાઇપ કરવામાં આવ્યાં છે અને તે, આ થાય બનાવવા માટે એક રીત છે પરંતુ વાસ્તવિક પાનાં પર, તમે સમક્ષ રજુ કરવાનો પ્રયત્ન જવા નથી કન્સોલ માં વપરાશકર્તા પ્રકાર વસ્તુઓ બનાવે છે. તમે વસ્તુઓ આપોઆપ થાય છે કરવા માંગો છો. તે માટે, તમારે અમુક ચોક્કસ ઘટના પર સક્રિય ઘટનાઓ કે ઉપયોગ કરવાની જરૂર છે. તમે સંપૂર્ણ વિગતો માટે દસ્તાવેજીકરણનો તપાસી શકો છો. તેથી માતાનો જોવા દો. અમે બોક્સ છુપાવવા અથવા બતાવવા માંગો છો હું હજુ સુધી તે અમલમાં ન હતી કારણ કે, પરંતુ હમણાં આ બટન કાંઇ નથી. હું ખરેખર HTML પાનાં પર જવા માટે જઇ રહ્યો છું. અહીં સ્લાઇડ છે. સ્લાઇડ માટે DIV છે. તે સ્લાઇડ ના વર્ગ પણ છે. લખાણ છે. હવે, આ બોક્સ અને બોક્સ બટન છે. અમે કેવી રીતે વાસ્તવમાં આ અદૃશ્ય કરશે? તમામ પ્રથમ, આ બોક્સ ને અદૃશ્ય બનાવે છે કે કાર્ય લખી દો. આ funtion માટે વાક્યરચના છે, માતાનો માત્ર તેને hideTheBox કૉલ દો. લેવામાં આવશે કોઈ દલીલો છે, કારણ કે તે કોઇ પણ દલીલો લેવા નથી. અમે બોક્સ ને પસંદ કરી શકો છો. પસંદ કરો jQuery મદદથી તેથી, અમે, બોક્સ ને પસંદ કરી શકો છો અને પછી તે અદૃશ્ય થઈ જાય બનાવે છે. ચાલો તે બહાર ઝાંખું કરો. અમે ખરેખર કન્સોલ આ કાર્ય ચાલી હતી તો અમે આ કાર્ય વ્યાખ્યાયિત કરી શકે; અમે hideTheBox કૉલ કરી શકો છો, અને તે કામ કરે છે. પરંતુ અમે બટન ખરેખર દબાવવામાં આવે છે ત્યારે તે શું કરવા માંગો છો. કે આમ કરવા માટે, અમે એક ઘટના ઉપયોગ માટે હોય છે. અમુક ચોક્કસ બટન અથવા અમુક ક્રિયા રહ્યું માટે એક ઇવેન્ટ બાંધવા માટે, અમે ઇવેન્ટ ટ્રિગર કરી શકે છે કે તત્વ પસંદ કરવા માટે હોય છે - અથવા તે માફ કરશો, ઇવેન્ટ ટ્રિગર કરી શકે છે. 

બધા તેથી, પ્રથમ માતાનો બોક્સ બટન ને પસંદ કરવા દો કારણ કે જે બટન માટે, હવે બટન છે, અને, અમે તેને ક્લિક ત્યારે એનિમેશન બનાવવા માંગો છો. તેથી આ ક્લિક કાર્ય છે. તમે તે માટે બીજી કાર્ય બાંધવા માટે પરવાનગી આપે છે. આ કાર્ય એક દલીલ તરીકે અન્ય કાર્ય લે છે અમે hideTheBox વિધેય માં પસાર કરી શકો છો અને આ બટન ક્લિક થયેલ છે જ્યારે, કે જે કાર્ય આપોઆપ ચલાવવા આવશે. તેથી આ, અમે આ સેવ, તો હું તાજું પડશે કામ કરશે અને - એક બીજું, હું દિલગીર છું. મને ખરેખર ઝડપથી ઠીક કરીએ. ઠીક છે. ત્યાં અમે જાઓ. અમે બટન ક્લિક કરો ત્યારે તો હવે બોક્સ અદ્રશ્ય થઈ છે. અમે પણ, માત્ર fadeToggle માટે આ બદલી શકો છો બોક્સ છુપાવવા અથવા બતાવવા માટે માત્ર તેને બદલી, અમે તાજું તો આ પણ ખૂબ જ કામ કરશે. અમે તેને છુપાવી શકો છો, અમે પણ તે બતાવી શકે છે, અને તે કામ કરવા માટે ચાલુ રહેશે. અમે શું કરી શકો છો અન્ય બાબત એ છે કે, આપણે ખરેખર આ hideTheBox કાર્ય વ્યાખ્યાયિત કરવા માટે નથી અમે ક્લિક વિધેય કોલ પહેલાં. તેથી તેના બદલે કાર્ય વ્યાખ્યાયિત અને hideTheBox ફોન ની, અમે ફક્ત આ વસ્તુ ક્લિક થયેલ છે, જો તે ફોન કરવા જઈ રહ્યા છો. તેથી આપણે અહીં તે અજ્ઞાત રૂપે વ્યાખ્યાયિત કરી શકો છો જે જાવાસ્ક્રિપ્ટ છે કે લક્ષણ છે. તમે એક કાર્ય વ્યાખ્યાયિત કરી શકો છો; સામાન્ય રીતે, અમે કાર્ય hideTheBox કહે છે દલીલો સાથે, પરંતુ તેના બદલે, અમે માત્ર, કોઈ દલીલો કાર્ય કહી શકો છો , કાર્ય વ્યાખ્યાયિત કરવા માટે સર્પાકાર તાણવું શરૂ કે વાંકડીયા તાણવું બંધ કરો અને પછી, ફક્ત અહીં કાર્ય વ્યાખ્યાયિત પ્રથમ ફકરા કે વાકયમાં વધારાનાં નિરથક એવાં શબ્દ, પદ કે વાક્ય છે અને છેલ્લા ફકરા કે વાકયમાં વધારાનાં નિરથક એવાં શબ્દ, પદ કે વાક્ય અંદર કે ક્લિક કાર્ય દલીલો દર્શાવે છે. અમે આ કાર્ય માં પસાર કરી રહ્યાં છે તેથી, અમે અહીં કોડ આ વાક્ય નકલ કરી શકો છો, અને તે ચોક્કસ જ વસ્તુ કરશે. અને હવે અમે આ રેન્ડમ fadeTheBox કાર્ય નથી કે કોઇ દેખીતા કારણ આસપાસ બેઠક છે. આ કાર્ય અજ્ઞાત રૂપે વ્યાખ્યાયિત કરવામાં આવ્યું હતું, તેને એક નામ નથી. અમે બોક્સ બટન પર ક્લિક કરો ત્યારે તે માત્ર ત્યારે જ ચલાવવા આવશે. તેથી પ્રેરણાદાયક વધુ એક વખત, એક વધુ સમય, અને તમે તે હજુ પણ કામ કરે છે જોઈ શકે છે. અને તે તમે ઘટનાઓ બનાવવા કેવી રીતે. 

અમે ઉપયોગ કરી શકો છો કે જે વિવિધ ઘટનાઓ ઘણો હોય છે. હું માત્ર કેવી રીતે આ કામ તમે બતાવવા માટે કન્સોલ વાપરી પાછા સ્વિચ કરવા જઇ રહ્યો છું. આ દરેક માટે ID ને કે દરેક બોક્સ દર્શાવે છે. આ બોક્સ ક્લિક ID છે, તેથી આ એક કી ID છે, અને આ એક માઉસ ID છે. બદલે દર વખતે બહાર લખીને; વધુ એક વસ્તુ તો આ ક્રિયા કાર્ય છે તે છે હું ખરેખર આગળ ગયા અને અહીં આ ક્રિયા કાર્ય નીચે વ્યાખ્યાયિત કરે છે. તે hideTheBox કાર્ય જેવા જ વસ્તુ નથી. આ બોક્સ અને ફેડ્સ તે બહાર અથવા સાઇન ફેડ્સ તે ક્યાં તો નહીં અમે અહીં વાપરવા માટે સમર્થ છો શા માટે છે અને તે છે. અમે આ ક્લિક ID પર ક્લિક કરો તો, અમે બોક્સ અદૃશ્ય અથવા પ્રદર્શિત બનાવવા માંગો છો. તે આપણે જો છેલ્લા સ્લાઇડ હતી કે બટન તરીકે જ વાત છે. અમે તે કોલ હવે પછી, અમે આ પર ક્લિક કરી શકો છો અને બોક્સ અદૃશ્ય થઈ જાય પછી ફરી તેના પર ક્લિક કરો અને બોક્સ પુનઃ દેખાશે. તે ખૂબ સરળ છે. ડબલ ક્લિક કરો, એ જ વસ્તુ નથી સિવાય કે તે ડબલ ક્લિક કરો માટે જરૂરી છે. તમે એક વખત તે પર ક્લિક કરો અને ફરીથી તેના પર ક્લિક કરો તો કંઇ, થશે પરંતુ જો તમે ડબલ ઝડપથી ક્લિક કરો, તો તે અદૃશ્ય થઈ પડશે. જો તમે ડબલ ફરી ક્લિક કરો, તો તે પાછા આવશે. કે જેથી ખૂબ સરળ છે. કીબોર્ડ ઇનપુટ અલૌકિક પ્રકારની છે; હું તે ખરેખર તો આ ઉદાહરણ કામ કરે લાગતું નથી કારણ કે નીચે કી, કી અને કી દબાવો અને અન્ય કી ક્રિયાઓ તમે તેને બાંધવા શું તત્વ વાંધો કોઈ સક્રિય કરો. ઉદાહરણ તરીકે, હું શરીર અથવા સંપૂર્ણપણે બીજું કંઈક કરવા માટે નીચે કી બંધાયેલા, તો પણ પછી તે હજુ પણ કોઈ બાબત સક્રિય કરશે - તે ચોક્કસ નથી. હું આ પર ક્લિક કરી હોય અને કંઈપણ અદૃશ્ય બનાવવા માટે કી દબાવો નહિં. તે ધ્યાનમાં લીધા વગર હું સાઇન હાલમાં છું શું તત્વ ઓફ સક્રિય થશે તેથી આ ખરેખર આ ઉદાહરણ કામ નથી કારણ કે તે કીબોર્ડ ઇનપુટ DIV માં ઇનપુટ દાખલ તરીકે મને ઓળખી શકતી નથી. 

પરંતુ તમે માઉસ ક્રિયાઓ જોવા હોય તો, પ્રથમ એક હૉવર થયેલ છે, અને તે સીએસએસ ઉપયોગ કરીને આ અમુક કરી શકો છો. તમે સીએસએસ વાપરો તો તમે કંઈક પર હૉવર કરો, તો તમે કે જેથી તે બનાવી શકે છે પછી તેની શૈલી ફેરફારો. પરંતુ jQuery મદદથી તમે પણ અન્ય વસ્તુઓ શૈલીઓ બદલી શકો છો. તેથી, ઉદાહરણ તરીકે, અમે આ DIV પર હૉવર જો ક્રિયા કૉલ કરવા માટે જઈ રહ્યાં છો. છે કે અમે તેના પર હોવર, તો પછી બોક્સ અદૃશ્ય થઈ જાય છે. અમે દૂર તે જાય તો, બોક્સ પુનઃ દેખાશે. અમે આ ફોન કરો અને તેની પર હૉવર જો નહિં, તો આ બોક્સ અદૃશ્ય થઈ નથી અને તરત અમે દૂર ખસેડવા તરીકે, તે પાછું આવે છે. અમે માઉસ ને આ હોવર વિધેય કોલ નહિં, તો અમે બોક્સ પર હૉવર જો જે પછી, આ બોક્સ અનુલક્ષે, પછી બોક્સ વાસ્તવમાં અદૃશ્ય થઈ જાય છે - તે હમણાં ફંકી છે, પરંતુ છે - અમે દૂર તે જાય તો, તે પુનઃ દેખાશે. હમણાં તે કેટલાંક કારણોસર પાછળની છે. માઉસ દાખલ કરો અને માઉસ ચાલ કાર્યો અંશે સમાન છે, પરંતુ સહેજ અલગ હોય છે. માઉસ માઉસ તરીકે અપેક્ષિત બોક્સ, પ્રવેશે છે ત્યારે જ સક્રિય દાખલ કરો. તમે તેને ખસેડી તેથી, જો તે અદૃશ્ય થઈ પડશે. તમે દૂર ખસેડવા જ્યારે પરંતુ તે પુનઃ નહીં; તમે પાછા આવો તે માટે તે પર પાછા ખસેડવા પડશે. સક્રિય કરશે જે માઉસ ચાલ કાર્ય પણ છે માઉસ બૉક્સમાં પણ હાજર છે જ્યારે. તેથી તે માત્ર અને બહાર વિલીન, જવા પર રાખવા પડશે. અને તે ખરેખર લોગીંગ - તે બહાર તે માત્ર માં વિલીન જેવા લાગે છે અને, પરંતુ તે ખરેખર તો આ કરતાં ઘણો વધુ ક્રિયાઓ લોગીંગ છે જેથી તમે દૂર ખસેડવા જ્યારે તે માત્ર તે તેમને એક હજાર જેવી લૉગ કારણ કે ચાલુ રાખવા પડશે. કદાચ ન હજાર. કદાચ પાંચ. તે કરતાં વધુ કરે. આ બિંદુએ, બધા માઉસ ક્રિયાઓ છે, તેમને ઘણો હોય છે. , તમે અન્ય લોકો પર વાંચી શકો છો, પરંતુ તેઓ બધા સહેજ અલગ હોય છે તમને જરૂર છે જે એક અને તમે પસંદ કરી શકો છો ચોક્કસ જે હેતુ માટે તમે કરવા પ્રયાસ કરી રહ્યાં છો. 

હું વિશે વાત કરવા જઈ રહ્યો છું આગામી વસ્તુ AJAX છે. AJAX, હું, અમે આ વર્ષે ખૂબ ઊંડાણ માં JavaScript ને આવરી ન હતી ખબર તેથી હું માત્ર એક મિનિટ માટે સામાન્ય રીતે AJAX વિશે વાત કરવા જઈ રહ્યો છું. AJAX Asynchronous જાવાસ્ક્રિપ્ટ અને XML માટે વપરાય છે. મૂળભૂત રીતે તે, ઉદાહરણ તરીકે, જો તમે ફેસબુક પર છો અને જ્યારે તે તમને એક સૂચના નહીં રહ્યું AJAX તમારું વેબ બ્રાઉઝર પર ચાલી રહ્યું છે, કારણ કે છે. તમારા વેબ બ્રાઉઝરમાં ખરેખર છે સેકન્ડમાં દરેક દંપતિ તેમને પૂછ્યા, ફેસબુક ના સર્વર્સ પર જઈને, તમે મારા માટે નવા કંઈપણ પાસે અને પછી તે તમને પાછા આવે છે. આ તમે કોઈ સર્વર પર વિનંતીઓ મોકલવા માટે પરવાનગી આપે છે વાસ્તવમાં પાનું લોડ કર્યા વગર. તેથી સામાન્ય રીતે, તમે માત્ર PHP, અને ડેટાબેઝ ઉપયોગ કરી રહ્યાં છો, તો તમે સર્વર માંથી નવી માહિતી મળી શકે તે પહેલાં તમે પૃષ્ઠ તાજું કરવા માટે હોય છે. પરંતુ AJAX મદદથી, તમે સતત નવી માહિતી માટે ખેંચી શકો છો તમે એક બટન છે કે જેવી કંઈપણ ક્લિક કરો ત્યારે અથવા તે માટે ખેંચો. , અમને પૃષ્ઠ ફરીથી લોડ કર્યા વગર વિનંતિઓ મોકલવા માટે પરવાનગી આપે છે, જેથી અને અમે મેળવો અથવા વિનંતીઓ સમાચાર ક્યાં વાપરી શકો છો. 

વિનંતિઓ તમે જો Google.com માટે, ઉદાહરણ તરીકે, છે વિચાર અને Q = પરીક્ષણ કરવું. કે તેમને એક ક્વેરી ટેસ્ટ આપ્યા છે. તે URL ને પોતે માં તે પરિમાણોમાં પસાર કારણ કે છે અને તે એક વિચાર વિનંતી છે. તમે પોસ્ટ મારફતે મોકલી રહ્યાં છો તો એક પોસ્ટ વિનંતી છે. તમે એક પત્રમાં મૂકી અને તેમને રન નોંધાયો જહાજ એવું છે, પરંતુ તેઓ વાસ્તવમાં વિષયવસ્તુ જુઓ નથી. તેઓ URL માં દૃશ્યમાન નથી. તમે સીધા તે પ્રકાર નથી કરી શકો છો; તમે લગભગ ગુપ્ત મોકલી છે. જો તે પોસ્ટમાં છે. પરંતુ jQuery ઉપયોગ કરીને, તમે મેળવો અને વિનંતીઓ સમાચાર કરી શકો છો વધુ સરળતાથી તમે સામાન્ય રીતે સાદા જાવાસ્ક્રિપ્ટ ઉપયોગ કરીને કરી શકે છે. તમે વિનંતીઓ મળે મદદથી API નો પ્રશ્ન કરી શકે છે, અને તમે પણ પ્રવેશ જાણકારી માટે તપાસી શકો છો. આગળના પાનાં પર, હું જે "લંચ માટે શું?" પૂછે છે, આ બનાવનાર હાર્વર્ડ ખોરાક API નો ઉપયોગ કરીને, જેથી માતાનો સુધી ખેંચી દો. આ તમે એક API માં વિચાર વિનંતી કરવા માટે jQuery ઉપયોગ કરી શકો છો કેવી રીતે માત્ર એક ઉદાહરણ છે અને તેમાંથી પાછા માહિતી મેળવો. તેથી અમે આજે માટે મેનુ જોવા માંગો છો અને અમે લંચ માટે શું છે એ જોવા માંગો છો. અહીં jQuery માં વિચાર વિનંતી બનાવવા માટે URL છે. તમે $ ઉપયોગ કરે છે. કાર્ય વિચાર. પ્રથમ દલીલ તમે પ્રશ્ન કરી રહ્યા છીએ જેથી બરાબર શું આ URL છે. પછી આગળની દલીલ વિચાર વિનંતી પૂર્ણ થાય ત્યારે ચલાવે છે કે કાર્ય છે. તેથી તમે સર્વર પર કેટલાક વિનંતી રવાના પરત આવવા માટે રાહ જુઓ. તે પાછું આવે છે, ત્યારે તમે સર્વર માંથી પાછા તે માહિતી સાથે કેટલાક પગલાં લેવા જઈ રહ્યા છો. માતાનો આગળ વધો અને આ જ પ્રમાણે કોડ દો. હું હેતુ પર, ક્યાં તો આ કોડ ન હતી. અહીં TODO છે. તમામ પ્રથમ, આ ઘટના બંધાઈ ઉપયોગ કરવા દેવા આ બટન દબાવવામાં આવે ત્યારે, અમે વિચાર વિનંતી રવાના કરી. અને તે અમુક માહિતી સાથે વિનંતી વળતર મળે છે, જ્યારે અમે આ ભોજન માહિતી ID ને DIV તેને લખવા જઈ રહ્યા છો. તમામ પ્રથમ, આ ખોરાક બટન ને પસંદ કરવા દો. તે ક્લિક રહ્યું છે, ત્યારે અમે તેને કંઈક કરવા માંગો છો. ચાલો ફક્ત પહેલાં તરીકે, તે એક અનામી fuction બનાવે છે. તે સર્પાકાર કૌંસ લપેટી શકો છો, અને આ બટન દબાવવામાં આવે ત્યારે, અમે વિચાર વિનંતી મોકલવા માંગો છો લંચ માટે શું ચકાસવા માટે. કે આમ કરવા માટે, અમે માત્ર $ માં લખી શકો છો. મેળવો. આ ડોલર સાઇન મદદથી, jQuery કાર્ય છે. તે દલીલો એક દંપતિ લે છે. પ્રથમ એક, URL છે બીજા એક કૉલબૅક કાર્ય, કહેવાય છે કે કાર્ય છે કે વિનંતી ખરેખર આપે છે. માતાનો માત્ર પ્રથમ URL ને બિલ્ડ કરવા દો. અમે ડેવિડ અપ લખ્યું હતું કે, API તે વિચાર કરી શકે છે. અહીં જવું, અમે તેને food.cs50.net/api/1.3/menus કે જોઈ શકો છો અને પછી તમે ફક્ત તમે ઈચ્છો કે પરિમાણો નામો પાસ. તેથી પરિમાણ 1 કિંમત 1 છે. તે પ્રમાણભૂત તારીખ જેવી લાગે છે, આજે તારીખ, મૂળભૂત શરૂ તમે કંઈપણ પણ ઓવરને તારીખ મૂળભૂત દાખલ ન હોય તો આજે તમે કંઈપણ દાખલ ન હોય તો. એટલે કે અમે શું કરવા માંગો છો છે. અમે હમણાં જ આજે માટે માહિતી મેળવવા માંગો છો. 

અમે બંધારણમાં JSON હોઈ કરવા માંગો છો. માત્ર મનસ્વી છે; તમે ઇચ્છો છો કે જે કોઈપણ સ્વરૂપનો ઉપયોગ કરી શકો છો. તમે CSV ઉપયોગ કરી શકો છો, પરંતુ JSON જાવાસ્ક્રિપ્ટ ઓબ્જેક્ટ નોટેશન છે. જાવાસ્ક્રિપ્ટ તો એનો અર્થ તે સમજી છે તે માટે ખૂબ જ સરળ છે અને અમે વધુ સરળતાથી છે કે જે રીતે તે છાપી શકે છે. તેથી માતાનો JSON તેને વિનંતી કરીએ, અને લેટ્સ વિનંતી પાત્ર. = બપોરના ભોજન છે. માત્ર તે URL અપ લખવા માટે, અમે અહીં પાછા જાઓ. મેનુ છે. પ્રથમ પરિમાણ આઉટપુટ = JSON છે કારણ કે અમે શું કરવા માંગો છો, અને તમે એક સાથે પરિમાણો અલગ 'અને'. બીજા પરિમાણ છે - હું યાદ નથી. ભોજન. અને અમે ભોજન = બપોરના માંગો છો. તમે તમારા બ્રાઉઝરમાં તે લખીને અને તે પર જઈને આ URL ચકાસી શકો છો. તે તમને અમુક આઉટપુટ આપશે. તે માત્ર લંચ માટે છે તે સામગ્રી એક ટોળું છે. આ નીચ બંધારણમાં માં છે. અમે વધુ સારી રીતે બંધારણમાં માં અમારી પાનું પર કોઈ પ્રિન્ટ કરવા માંગો છો. URL સાચી છે, તેથી હવે અમે માત્ર એક કાર્ય લખવા માટે જરૂર વિનંતી સફળ હોય ત્યારે સામો ફોન. આ કાર્ય ખરેખર એક દલીલ લેશે. તે માહિતી હશે. આ ડેટા વિચાર વિનંતી કરવામાં આવે છે પછી વિચાર વિનંતી માંથી પાછા આવે છે. અમે સર્પાકાર કૌંસ કરી શકો છો; અહીં અમે અનામ કાર્ય લખી છે કે અમે પાછા માહિતી મેળવી ત્યારે જે માહિતી ઉપયોગ કરીને ચલાવે છે. માહિતી તેથી, અમે આ URL માં ટાઇપ ત્યારે, આ ડેટા જેવો બનશે શું છે. આ વિશાળ શબ્દમાળા હોઈ ચાલે છે. પરંતુ સારી વાત છે, જાવાસ્ક્રીપ્ટ એ JSON.parse કાર્ય નો ઉપયોગ કરીને તેને પદચ્છેદ કરી શકે છે. તેથી માતાનો parse માહિતી તરીકે ઓળખાતી નવી ચલ બનાવવા દો. અને parse માહિતી પદાર્થો એક એરે છે. દરેક પદાર્થ જેમ કે જાણકારી સમાવે છે - ઠીક છે, માતાનો એક નજર કરીએ. જો તે તારીખ, ભોજન, શ્રેણી, રેસીપી, આ બધા અન્ય સામગ્રી છે. તેથી માતાનો માત્ર દરેક એક માટે નામ છાપે દો. અમે તે પાછા વિચાર કે સામગ્રી સમગ્ર એરે પર ફરી વળવું ચાલો, અને માત્ર દરેક એક છાપે - દરેક એક નામ છાપે. આ લૂપ માટે છે. 

જાવાસ્ક્રિપ્ટ, તમે એક એરે પર ચલ અને લૂપ બનાવી શકો છો જ્યાં આ મદદરૂપ વાક્યરચના છે અને var હું, તેના બદલે var હું = 0 કરવું હોય, તેથી માત્ર iterator છે હું લંબાઈ કરતાં ઓછી હતી, હું + + + +, તમે માત્ર પદચ્છેદન માહિતી હું var કરી શકો છો. આ ઉદાહરણમાં, પદચ્છેદન માહિતી (i) વર્તમાન તત્વ અનુલક્ષે કરશે એરે છે, જે વાસ્તવિક પદાર્થ. અને અમે તેને નામ બહાર વિચાર કરવા માંગો છો. તેથી માત્ર કરવું નામ કરીએ. અને જો છેલ્લા વસ્તુ, અમે ફરીથી કેટલાક jQuery છે જવું કરી રહ્યાં છે. વાસ્તવમાં DIV હાલમાં ખાલી છે કે આ ભોજન માહિતી DIV ઉમેરો. તેથી માતાનો પસંદ કરો કે દો. અમે jQuery અને પસંદ ભોજન માહિતી DIV ને, અથવા ભોજન માહિતી ID નો ઉપયોગ કરશો, માફ કરશો. અમે આ માટે ઉમેરવા માંગો છો. અમે પરીક્ષણ કર્યું હોય તો, ઉદાહરણ તરીકે, તે માત્ર તે દરેક એક સમય પર ફરીથી લખી શકે છે. તેથી આપણે ફક્ત આ ઉમેરી શકો છો. એરે માં વર્તમાન તત્વ, અમે તેને નામ બહાર મળશે અને અમે ભોજન માહિતી ID ને DIV ઓવરને ઉમેરી શકશો. અને પછી, ફક્ત તે ક્લીનર જોવા બનાવવા માટે તે એક લીટી પર બધા નથી તેથી અમે પણ એક લાઇન બ્રેક ઉમેરી શકશો. બધા સારી રીતે જાય તેથી, જો કે સારા હોવું જોઈએ - તમામ પ્રથમ, આ બટન ક્લિક થયેલ છે જ્યારે, તે આ URL માટે વિચાર વિનંતી બંધ મોકલશે. ડેટા તે પાછા આવે છે, ત્યારે તે પાર્સ પડશે JSON, કે જે માહિતી રજૂ સમગ્ર એરે પર લૂપ, તેને ચાલુ અને પછી નામ અને એક લાઇન બ્રેક ઉમેરો અગાઉ ખાલી હતી જે આ ભોજન માહિતી ID માં દરેક લાઇન પર. તેથી આ પૃષ્ઠ પર પાછા જવા માટે, અમે તાજું પડશે, ક્લિક કરો, શોધવા - તે કામ કરતું નથી. તે કમનસીબ છે. ડિબગીંગ સાઇન આવે છે અને આ છે Index.html, લાઇન 1. તે રસપ્રદ છે. બધા હક, સાથે સાથે, આ કરી સમય પસાર કરતાં, હું હમણાં જ જઈ રહ્યો છું હું છે કે પૂર્ણ ફાઇલ ખેંચવાનો, જે પૂર્ણ આવૃત્તિ છે. હું તફાવત શું છે તેની ખાતરી નથી, પરંતુ અમે માત્ર તેના બદલે આ અપ ખોલી શકે છે. અને અમે AJAX પર જાઓ, અને યોગ્ય રીતે કામ કરીશું. કે, લંચ માટે આજે શું છે આ બોલ પર કોઈ ચોક્કસ ક્રમમાં તે આસપાસ અવતરણ સાથે છે, તેથી તે prettiest નથી. પરંતુ, દેખીતી રીતે, તમે અંતિમ પ્રોજેક્ટ માટે આ શું કરી રહ્યા હતા, તો તમે તેને સારી રીતે જુઓ કરશે. પરંતુ તમે વિચાર વિનંતી કરી કેવી રીતે માત્ર એક સરળ ઉદાહરણ છે. અમે ખરેખર કોડ જુઓ, તો હું guessing રહ્યો છું, હું ખૂબ ખાતરી છું તે હજુ પણ ખૂબ જ છે. ઓહ, હું શબ્દમાળા માટે તે બદલવા માટે ભૂલી ગયા છો, તે છે. ના, તે હજુ પણ કામ ન કરતું. અનુલક્ષીને, અહીં વાસ્તવિક પૂર્ણ કોડ છે આ જેવો હવો જોઈએ તે માટે, અને હું માત્ર અમલ શું તરીકે જ વાત કરે છે. તમે બટન પર ક્લિક કરો ત્યારે, તે JSON આપમેળે માહિતી પાર્સ મેળવવા માટે વાપરે છે. તે પાછા ડેટા લે છે અને સમગ્ર એરે મારફતે આંટીઓ અને છાપે - લંચ માટે આજે ગમે છે, તે નામ, અને દરેક વાક્ય પછી વાક્ય વિરામ appends. કે તમે વિચાર કાર્ય ઉપયોગ કેવી રીતે છે. 

તમે પણ મને પાસે સમય નથી, કે જે POST નો ઉપયોગ કરી શકો છો તે માટે એક ઉદાહરણ અપ લખવા માટે છે, પરંતુ અમે દસ્તા જોઈ શકો છો. જો તમે jquery.post જુઓ તો તમે તે લગભગ એ જ વસ્તુ છે કે જે જોઈ શકે છે. જો તમે URL છે, પરંતુ તેના બદલે મદદથી પરિમાણો પસાર - , ફક્ત URL ને પોતાને માટે શબ્દમાળા તેમને મૂકે જો તમે આ માહિતી ચલ પસાર કરવા માટે છે કે શબ્દકોશ, મૂળભૂત રીતે એક એરે છે કે કિંમતો માટે નકશા પરિમાણો. તમે કે પાસ, અને તે એક પોસ્ટ ઉપયોગ કરીને તેમને મોકલે છે. અને એકવાર તમે, તો પછી તમે સફળ કાર્ય કરી શકે છે કે જે હોય છે માહિતી પાછા આવે ત્યારે જે ચલાવે છે. નહિંતર, તે બરાબર જ છે. તેથી POST નો ઉપયોગ કરીને, જો તમે ઇનપુટ ફોર્મ હોય તો તમે, ઉદાહરણ તરીકે, પોસ્ટ ઉપયોગ કરવા માંગો છો શકે છે તમે તેને લોકો ઇનપુટ પાસવર્ડ્સ દો, અને તે પાસવર્ડ્સ બંધ મોકલો તમારા બેક ઓવરને સ્ક્રિપ્ટ માટે, તે વપરાશકર્તા માન્ય છે કે નથી ડેટાબેઝમાં ચેક કરવા. તમે શું કરી શકો છો કે જે બધા jQuery મદદથી બદલે બધા ખાતે પાનું તાજું કરવા માટે હોય છે. કે હું પહેલાં તમે દર્શાવ્યું કે બ્લૉગ અમલમાં કેવી રીતે. અમે ઓવરને પોર્ટલ પર જાઓ અને લોગ આઉટ, તો લૉગ આઉટ કામ કરતું નથી લૉગ આઉટ. ઠીક છે, મને માત્ર એક નવી વિંડોમાં તે ખોલવા દો. અહીં ત્યાં પાસવર્ડ છે, અને હું રેન્ડમ કંઈક લખો જવા આવી હતી. તે કામ કરતું નથી, પરંતુ જો તમે અમે ન જુઓ કે કરી શકો છો ખરેખર બધા ખાતે પાનું તાજું કરવા માટે હોય છે. આ કોડ છે, તમે તેને જોવા માંગો છો તો, અહીં બધા જ ઉપલબ્ધ છે. FIPS એ તેથી હું ક્યારેક ગયા વર્ષે લખ્યું હતું. તમે અહીં જોઈ શકો છો, અમે એક પોસ્ટ વિનંતી મોકલી રહ્યાં છો. હું, આ બોલ ઓવરને માં login.php તરીકે ઓળખાતી ફાઈલ છે પાસવર્ડ માન્ય હોય કે જેમાં ચકાસે છે. અમે પસાર પરિમાણો સાથે જોડાયેલ પાસવર્ડ છે, હાલમાં આ ઇનપુટ બોક્સમાં તે ઇનપુટ. અને માહિતી પાછી આવે ત્યારે, અમે તપાસો. ડેટા ખોટું છે, તો પછી આપણે ખોટો પાસવર્ડ કહે છે, તે સ્લાઇડ નીચે અને માત્ર તે પછી અદૃશ્ય થઈ બનાવે છે. અન્યથા, અમે એડમિન પાનું ભાર. અને આ બધા JSON મદદથી કરવામાં આવી હતી. કોડના આ બધી લીટીઓ, તમે ફક્ત આ બોલ ઓવરને માટે માહિતી પસાર કરી શકો છો તે સાચું છે કે નહીં તે તપાસો,, તમે યોગ્ય લૉગ ઇન છે કે નહીં તે તપાસો અને ખરેખર સાચી પાનું માટે વ્યક્તિ પુનઃદિશામાન, તે પ્રતિભાવ અથવા તેમને લૉગ ભાડા અને તેઓ અયોગ્ય પાસવર્ડ હતું કે તેમને કહી નથી. કે જેથી તમે jQuery POST ઉપયોગ કરી શકે છે કેવી રીતે એક ઉદાહરણ છે તમારી પાછળ ઓવરને એક પોસ્ટ વિનંતી મોકલવા માટે, કોઈને યોગ્ય રીતે લૉગ ઇન છે કે નહિ તેની તપાસ. 

બધા હક, હું હતી બધા ઉદાહરણો છે, અને હું આવરી ઇચ્છતા તમામ સામગ્રી છે કે જેથી. તે jQuery તમે કરવા માટે પરવાનગી આપે છે કે મુખ્ય વસ્તુઓ છે: , તત્વો પસંદ કરો DOM મેનીપ્યુલેશન ઉપયોગ કરીને તેમને સુધારવા, તમે અસરો ઉમેરી શકો છો, ચોક્કસ ઘટનાઓ પર વસ્તુઓ સક્રિય, અને પણ ખૂબ જ સરળતાથી અને સહેલાઇથી એજેક્સ વિનંતીઓ નથી. તેથી, આવતા અથવા જોવા માટે આભાર જો તમે કોઇ પ્રશ્નો હોય, તો માત્ર મને જણાવો. યાહ? [વિદ્યાર્થી] પાછા તમે દર્શાવ્યું, જ્યારે તમે અવતરણ પોસ્ટ વિનંતી બાદ JSON હતી અને હું માત્ર કે શું આશ્ચર્ય કરવામાં આવી હતી. >> અરે વાહ, હું જુઓ. આ પ્રશ્ન છે, ઉદાહરણ હું માત્ર દર્શાવ્યું હતું કે આસપાસ અવતરણ શબ્દ JSON ત્યાં હતી - હું માત્ર તેને ફરીથી ખેંચી કરીશું - પોસ્ટ કાર્ય આસપાસ. હું માત્ર બતાવવા માટે તે રોકીને છું. તેથી અહીં આ પોસ્ટ વિનંતી છે, અને તે અવતરણ આ JSON છે. માત્ર અમે આઉટપુટ હોઈ અપેક્ષા કરી રહ્યાં છે તે વ્યાખ્યાયિત કરે છે. અમે અપેક્ષિત માહિતી પ્રકાર તરીકે JSON પાસ, તેથી જો , તે જરૂરિયાત નથી, પરંતુ અમે તેને પસાર જો પછી માહિતી આપમેળે JSON તરીકે પદચ્છેદન કરવામાં આવશે. તેથી અમે તેને પર JSON parse વિધેય કોલ કરવાની જરૂર નથી તે માત્ર આપોઆપ બનશે પડશે. અને તમે પોસ્ટ માટે દસ્તાવેજીકરણનો પર એક નજર તો, આ માહિતી પ્રકાર ચલ, સર્વરમાંથી અપેક્ષા માહિતી પ્રકાર છે. ખોટું હોઈ શકે છે કે જે બુદ્ધિશાળી અનુમાન મૂળભૂત, જેથી તમે તેને ખાલી છોડી શકો છો, પરંતુ તે માહિતી ફક્ત પ્રકાર છે તમે તેને JSON અથવા XML છે અથવા કંઈક બીજું શું ઉપયોગ કરી રહ્યાં છો કે કોડિંગ છે. 

કોઈપણ અન્ય પ્રશ્નો? બધા અધિકાર. જો તમે કોઇ અન્ય પ્રશ્નો હોય, તો મને ઇમેઇલ નિઃસંકોચ vshekhawat@college.harvard.edu અંતે અને સ્લાઇડ્સ અને કોડ ખૂબ જલદી ઓનલાઇન ઉપલબ્ધ હોવી જોઈએ. તમારી અંતિમ પ્રોજેક્ટ સાથે સારા નસીબ, તમે jQuery ઉપયોગ આશા. [CS50.TV]