कुछ वीडियो पहले मैं तत्वों का चयन और फिर उन्हें जोड़ तोड़ की इस अवधारणा की शुरुआत की।
इसलिए हम एक एच 1 या सभी छवि टैग का चयन करें और फिर हम रंग बदल सकते हैं या उन्हें चेतन या जब आप उन पर क्लिक करें उन्हें कुछ करने के लिए कर सकते हैं।
अब तक हम केवल आधा चयन करने और इस वीडियो को कवर किया है।
हम एक बार हम उन्हें चुना है तत्वों में हेरफेर करने के लिए कई मायनों में से कुछ को पेश करने जा रहे हैं।
तो यहाँ चार मुख्य बातें मैं के बारे में बात करना चाहते हैं।
पहले एक है कि हम कैसे एक तत्व शैली बदल सकता है।
हम कैसे यह नीले रंग बनाने के लिए या इसे छिपाने बनाते हैं।
फ़ॉन्ट आकार बदलें।
आगे हम जोड़ने और जावास्क्रिप्ट के साथ वर्गों को हटाने और फिर एक टैग की सामग्री को बदलने के बारे में बात करेंगे।
तो कैसे मैं उदाहरण के लिए एक एच 1 टैग के अंदर पाठ को बदल कर।
और फिर अंत में गुण बदल रहा है।
इसलिए हम एक छवि टैग या एक ए.ए. टैग पर रेफरी पर स्रोत कैसे बदल सकता हूँ।
हम शैली संपत्ति के बारे में बात कर रही द्वारा शुरू करने के लिए जा रहे हैं।
तो जब डोम का निर्माण किया है और एक व्यक्ति नोड बना है या एक वस्तु बना है हर एक तत्व के लिए वहाँ एक संपत्ति कहा जाता है शैली और शैली संपत्ति हर एक CSSA संपत्ति है कि हम तैयार कर सकती है गुण के लिए एक की एक बड़ी वस्तु सैकड़ों है।
इसलिए हम जावास्क्रिप्ट कि तब शैली और तत्व जाना होगा अलग ढंग से लिख सकते हैं।
तो यहाँ मैं अपनी आईडी पर प्रकाश डाला द्वारा एक तत्व का चयन कर रहा हूँ तो यह एक चर बुलाया टैग करने के लिए इसे बचाने के लिए चयन करें और फिर इसे जोड़ तोड़।
और क्या मैं मैं स्थापित कर रहा हूँ कर रहा हूँ।
टैग डॉट शैली डॉट रंग नीले टैग डॉट शैली डॉट सीमा 10 पिक्सल ठोस लाल बराबर हो सकता है।
यह ध्यान रखें कि दाईं ओर एक स्ट्रिंग होना चाहिए महत्वपूर्ण है।
तो भी सी एस एस में हालांकि हम चारों ओर नीले या लगभग 70 पी एक्स उद्धरण खड़ा करने की जरूरत नहीं है।
इस सी एस एस नहीं है।
यह जावास्क्रिप्ट है।
इसलिए हम अभी भी नियमित जावास्क्रिप्ट नियमों का पालन करना पड़ता है।
तो मैं एक सरल वेब पेज सेट अप है कि मैं इन गुणों में से कुछ को प्रदर्शित करने के लिए उपयोग करने के लिए जा रहा हूँ है।
इसलिए इस वेब पेज सुपर सरल सिर्फ एक एच -1 एक है कि पैरा के बजाय पैरा है।
वहाँ एक मजबूत टैग और फिर दो आराध्य Corgi घोला जा सकता है की दो छवियों है।
तो मैं क्या करने जा रहा हूँ कौंसुल करने के लिए जाना है और मैं कुछ का चयन करके शुरू करने की जरूरत है और मैं रंग और इस एच-1 की सीमा को बदलने के लिए जा रहा हूँ।
इसलिए मैं यह चयन करने के लिए की जरूरत है और वहाँ करने के लिए है कि चयनकर्ता एच -1 प्रश्नों एक नए दस्तावेज़ में कई तरीके है।
और फिर मैं तुम्हें एच -1 शैली है जो एक विशाल वस्तु टन और गुण के टन है दिखाने के लिए जा रहा हूँ।
तो मैं एच-1 शैली काले रंग की तरह उनमें से एक को बदलने की कोशिश है कि पीले रंग बनाने के लिए जा रहा हूँ।
और आप इसे तुरंत पीले करने के लिए बदल देख सकता था।
सीमा एच -1 कि शैली है कि सीमा के पांच पिक्सल ठोस गुलाबी करते हैं के बराबर होती है साथ वही बात।
और वहाँ हम चले।
तो ज़ाहिर है अगर हम सिर्फ चाहता था यह एक गुलाबी सीमा के साथ पीले हो।
समय पेज लोड से जावास्क्रिप्ट का उपयोग करने के लिए ऐसा करने का कोई कारण नहीं है।
हम सिर्फ हमारे CSSA फाइल में डाल दिया हम जावास्क्रिप्ट का उपयोग होता है, तो हम इसे पीला कर दिया चाहता था और जब उपयोगकर्ता पाँच सेकंड के लिए पेज पर किया गया है एक गुलाबी सीमा है या यह उपयोगकर्ता के एक विशिष्ट भाग को स्क्रोल जब ऐसा करने के लिए अगर वह चाहता था पेज या उपयोगकर्ता में कुछ पर क्लिक किया।
यह सब के बारे में बातें इंटरैक्टिव बना रही है और हम चाहते हैं कि शीघ्र ही कैसे करना देखेंगे।
खैर शैली संपत्ति का उपयोग कर के बारे में अच्छी बात यह है कि वहाँ निश्चित रूप से एक बेहतर तरीका है, तो आप अपने आप को खोजने की तरह मैं यहाँ क्या कर रहा हूँ और यह एक टैग पर पाँच अलग अलग गुणों को बदलने के लिए एक व्यक्ति तत्व पर फ़ाइलों का एक गुच्छा में हेर-फेर है।
और वहाँ कुछ कारणों से एक बेहतर तरीका है कि वहाँ है।
पहले एक है कि यह बहुत ही सूखी कोड नहीं है।
वहाँ दोहराया बाहर टैग की शैली टैग की शैली का एक बहुत कुछ है।
इससे भी महत्वपूर्ण बात है, हालांकि इस अवधारणा चिंताओं की जुदाई कहा जाता है।
इसलिए चिंताओं की जुदाई इस अवधारणा है कि हमारे एच एम एल आर सी एस जावास्क्रिप्ट नहीं है।
प्रत्येक अपने खुद के छोटे डोमेन के लिए जिम्मेदार हैं और हम इसे नहीं करना चाहती।
हम उन दोनों के बीच विदेशी की एक बहुत कुछ नहीं करना चाहती।
इसलिए इस चित्र में आप देख सकते हैं वहाँ प्रत्येक टीम के साथ जो संरचना है और जावास्क्रिप्ट के बीच विदेशी का एक छोटा सा है, जो कि व्यवहार है कि और फिर आकलन देख प्रस्तुति है।
और वहाँ जावास्क्रिप्ट लेकिन याद रखें कि यह हुआ करता था पहले सी एस एस के साथ आया था कि आप हर एक तत्व में व्यक्तिगत रूप से अपने शैलियों में लिखने के लिए जहाँ हम वास्तव में शैली विशेषता का उपयोग किया था एच HTML के साथ एक छोटे से ओवरलैप है।
उस मामले में हमारी प्रस्तुति में स्टाइल वास्तव में संरचना में बुना गया था और सी एस एस के साथ अब हम उन्हें बाहर अलग कर दिया है।
इसलिए हमारे एचएमओ शुद्ध संरचना है और फिर हमारी सफलता शुद्ध शैली है।
तो क्या जावास्क्रिप्ट में फिट बैठता है कि यह एक पेज के व्यवहार को नियंत्रित करना चाहिए और कभी कभी बातें लग रही है लेकिन कैसे बदल रहा है कि इसका मतलब है सिर्फ जावास्क्रिप्ट अंदर गुणों को बदलने के बजाय वास्तव में जावास्क्रिप्ट में स्टाइल कर रही है।
हम क्या कर सकते हैं उन्हें CSSA फ़ाइल के अंदर पर और बंद कर देते है।
तो पैटर्न वास्तव में आम है कि में से एक यह है कि हम मुख्य आकर्षण की तरह एक CSSA वर्ग को परिभाषित और उस पर प्रकाश डाला कक्षा पांच या छह या फिर भी कई अलग अलग गुण है कि हम बदल रहे हैं होगा।
और फिर हम तो जावास्क्रिप्ट के साथ एक तत्व का चयन और यह है कि प्रकाश डाला वर्ग दे सकते हैं।
इसलिए जावास्क्रिप्ट में एक लाइन के साथ हम एक वर्ग है कि उसके बाद पाँच अलग अलग गुण बदल जाएगा जोड़ सकते हैं।
चलो कैसे इस जावास्क्रिप्ट में लागू किया जाएगा पर एक नज़र रखना।
तो बजाय एक टैग का चयन और फिर बदलती शैली लेकिन रंग नीला हो सकता है और उसके बाद से सीमा ऊपर स्टाइल 10 पिक्सेल ठोस लाल क्या हम बजाय कर सकता है हो सकता है कि कक्षा में एक वर्ग के लिए कुछ भी कहा जा सकता है मिल रहा है।
आम तौर पर आप यह तो दर्शाती क्या वर्ग ऐसा माना जाता है कि कुछ हद तक सार्थक होना चाहते हैं।
यह कुछ ऐसा है कि प्रकाश डाला जा रहा है या यह एक सही जवाब है।
जो भी कारण है कि तुम क्लास आवेदन कर रहे हैं के लिए एक उच्च स्कोर के लिए एक अच्छा नाम के साथ आने की कोशिश कर।
तो यह एक अच्छा नाम नहीं है, लेकिन कुछ वर्ग कुछ वर्ग रंग नीला और सीमा 10 पिक्सेल ठोस लाल होना करने के लिए बदल रहा है।
तब सब मुझे क्या करना है मेरे टैग का चयन करें और फिर कक्षा सूची डॉट को टैग डॉट कुछ वर्ग को जोड़ने और उस पर प्रकाश डाला करने के विचार का एक नया वर्ग इन शैलियों के सभी में कुछ वर्ग बुलाया लागू किया जाएगा के साथ मेरा टैग दे देंगे।
वहाँ कुछ अन्य बातें हम वर्ग की सूची के साथ नहीं कर सकते।
तो इस उदाहरण में मैं तीन तरीकों को जोड़ने के जो हम पहले से ही देखा था जो कि कैसे हम एक वर्ग को हटा दें जो एक वर्ग के नाम लेता जोड़ सकते हैं दिखाने के लिए और यह वर्ग सूची से उस वर्ग के नाम और उसके बाद कक्षा सूची टॉगल जो अत्यंत उपयोगी है निकालता है।
यह एक वर्ग के नाम लेता है।
और अगर दिया तत्व पहले से ही उस वर्ग है यह तो इसे हटा दें, तो तत्व है कि वर्ग तो मैं यह मोड़ पर होगा नहीं है जाएगा।
तो बहुत बहुत उपयोगी है।
हम यह सब समय पर बाद में इस्तेमाल करेंगे।
तो इससे पहले कि मैं यहाँ मेरे उदाहरण के लिए वापस जाने के लिए मुझे आप के लिए है कि प्रदर्शन करते हैं।
मैं वास्तव में एक नए वर्ग को परिभाषित करने के लिए जा रहा हूँ।
तो बजाय एक नया स्टाइल शीट बनाने और एक लिंक मैं सिर्फ सिर्फ समय की खातिर एक शैली टैग का उपयोग करने के लिए जा रहा हूँ का उपयोग कर से।
तो मैं एक वर्ग तो आप सिर्फ यह बड़ा फोन करने के लिए जा रहे हैं परिभाषित करने के लिए जा रहा हूँ।
और मैं क्या करने जा रहा हूँ फ़ॉन्ट आकार बदलने 100 पिक्सल हो सकता है और नारंगी होना करने के लिए रंग बदलने के लिए है।
और फिर अंत की यह पांच पिक्सेल ठोस लाल रंग का एक सीमा दे।
तो मैं उस पर छोड़ देंगे।
अगर मैं अपने पाठ्यक्रम के पेज कुछ भी नहीं बदलता ताज़ा लेकिन जब मैं करना चाहता हूँ कुछ करने के लिए है कि कक्षा लागू है।
इसलिए मैं इस पैरा कि मैं अब तक यह चयन करने की जरूरत क्या करना बड़ा वर्ग है बनाने के लिए जा रहा हूँ।
पैरा दस्तावेज़ कि क्वेरी चयनकर्ता पैरा बराबर होती है।
ठीक।
और हम सिर्फ कक्षा सूची पर एक नज़र लेने के द्वारा शुरू करते हैं और आप देख सकते हैं कि यह खाली है।
इस पैरा के लिए अभी तक कोई सौंपा वर्गों रहे हैं।
तो अगर मैं एक प्रदान करना चाहते हैं मैं सब करने की जरूरत है का कहना है कि पी-डब वर्ग सूची में जोड़ने डॉट और मैं कक्षा बड़ा जोड़ना चाहते है।
और वहाँ हम चले।
तो यह स्वतः अपने स्टाइल शीट से नए परिवर्तन को दर्शाता है।
सभी मुझे करना चाहिए था बड़ा वर्ग को जोड़ने है।
इसलिए उम्मीद है कि आप देख सकते हैं कि यह एक बहुत आसान है और हम जिम्मेदारियों को अलग कर रहे हैं कि।
तो सभी कर रहे हैं कि जावास्क्रिप्ट करता है उस पर या एस एस के एक विशिष्ट भाग के बजाय वास्तव में मैन्युअल व्यक्तिगत गुणों से छेड़छाड़ के बंद हो जाती है।
अब हम सिर्फ हमारी जावास्क्रिप्ट के बजाय संभव के रूप में छोटे रूप में चीजें बदल रहे हैं।
तो अगर मैं इसे निकालना चाहते हैं, यह सब मैं क्या करने की जरूरत है टॉगल बड़ा वर्ग को दूर नहीं वर्गहीन करते हैं और मेरी पसंदीदा एक है जो मैं उल्लेख सुपर उपयोगी है।
तो अगर मैं टॉगल अब सही मारा और दर्ज वहाँ कोई वर्ग सौंपा तो यह वर्ग बड़ा आवंटित जाएगा मारा।
अब बड़ा पहले से ही सौंपा जाता है तो यह इसे हटा देंगे।
तो यह स्पष्ट रूप से नहीं उपयोगी इस मामले विशाल फ़ॉन्ट कक्षा में इस पागल नारंगी बनाने के लिए है, लेकिन हम क्या कर सकते हैं एक सूची करने के लिए की तरह कुछ पर है, अगर हम उपयोगकर्ता उस पर क्लिक करने के लिए ऐसा करने में सक्षम होना चाहता हूँ।
और कहा कि इसे बाहर पार कर जाएगा।
लेकिन वे फिर से क्लिक कर सकते हैं और फिर इसे बाहर uncross होगा या सिर्फ सामान्य करने के लिए वापस जाओ।
यही किया जाएगा।
या फिर हम एक वर्ग टॉगल तो हम एक वर्ग किया कहा हो सकता है और मैं फिर से लागू क्लिक करें द्वारा यह कर सकता है।
इसे हटा दिया गया है।
यही कारण है कि आप टॉगल उपयोग हो सकता है जब की सिर्फ एक उदाहरण है।
लेकिन यह वास्तव में बहुत उपयोगी है।
अंतिम बात मैं कक्षा सूची के बारे में लाने के ऊपर चल जाएगा कि यह तकनीकी रूप से एक सरणी नहीं है।
तो इसका मतलब है कि हम एक वर्ग को जोड़ने के क्रम में एक विज्ञापन का उपयोग किया है।
हम धक्का तरह से कुछ नहीं कर सकते।
तो बस एक छोटी सी टिप्पणी, लेकिन यह पता चला है कि यह तकनीकी रूप से एक सरणी नहीं है महत्वपूर्ण है।
इसलिए हम अपने जावास्क्रिप्ट के माध्यम से शैली से छेड़छाड़ के दो अलग अलग तरीकों को कवर किया।
पहले एक स्वयं इसे एक समय जो इसे ईमानदारी से ठीक है अगर तुम सिर्फ एक या दो बातें कर रहे है पर एक संपत्ति कर रही है।