Podії ფორმები. ჩამოაყალიბეთ Pods დამუშავების პოდები დამატებითი jQuery მეთოდების გამოყენებით

ამ სტატიაში განვიხილავთ მეთოდებს, რომლებსაც jQuery ბიბლიოთეკა სთავაზობს ვებ დეველოპერს შინაარსის დასამუშავებლად.

რობოტებისთვის, რომლებსაც აქვთ როლები სცენარებში JavaScript ბრაუზერიუზრუნველყოფს API-ს (მაგალითად, addEventListener ფუნქცია). ამ ფუნქციით შეგიძლიათ შეიყვანოთ კოდი, რომელიც უნდა გამორთოთ, თუ ბრაუზერი განსაზღვრული ელემენტისთვის გამოიმუშავებს მითითებულ კოდს.

დამატებითი jQuery მეთოდების დამუშავება

ფუნქციის სინტაქსის შესახებ

სანამ ხელმოწერების ელემენტების დამატებას გააგრძელებთ, ეს ელემენტები თავიდანვე უნდა მოიხსნას. თქვენ შეგიძლიათ გაიგოთ, თუ როგორ უნდა იპოვოთ საჭირო ელემენტები გვერდზე jQuery stat - აირჩიეთ ელემენტები.

jQuery-ში შეგიძლიათ დაურთოთ სუბტიტრები სიმღერის ელემენტს დამატებითი ფუნქციის და ერთი, ასევე მოკლე ჩანაწერების გამოყენებით.

// ფუნქცია .on-ზე (მოვლენები, დამმუშავებელი); // ფუნქცია ერთი .one (მოვლენები, დამმუშავებელი); // მოვლენები - ფუნქცია ან მოვლენების სია, რომლებიც გამოყოფილია სივრცეში; ასეთის არსებობის შემთხვევაში, აუცილებელია შეარჩიოთ დამმუშავებელი (დამმუშავებელი) // დამმუშავებელი - ფუნქცია (დამმუშავებელი) // მოკლე შენიშვნაფუნქციონირებს .event-ზე (დამმუშავებელი); // მოვლენა - მოვლენის სახელი (შეგიძლიათ გამოიყენოთ მხოლოდ იმ მოვლენების დასამუშავებლად, რომლებზეც jQuery-ს აქვს ასეთი მოკლე ჩანაწერი)

ფუნქცია "ერთი" გაფართოვებულია "on"-დან მხოლოდ იმ ფაქტზე, რომ ის ირჩევს სემპლერს მხოლოდ ერთხელ, როდესაც მითითებული ტიპის არჩეულია.

მაგალითად, დაამატეთ დამატებითი ფუნქცია დაწკაპუნების ღილაკზე btn კლასის ყველა ელემენტისთვის:

// vikoristanya ანონიმური ფუნქციის კოლექციონერი $(". Btn"). ჩართვა ("click", ფუნქცია () (// მოქმედებები, რომლებიც გამოჩნდება სისტემის მუშაობისას ... console.log ($ (this).text ( ));)); // აირჩიეთ პირველადი ფუნქცია digester-ში var myFunction = ფუნქცია () (console.log ($ (this). text ());) $ ( ". Btn"). On ("დაწკაპუნება", myFunction);

საძიებო კოდი, ჩანაწერები ვიკისტანკებიდან, ფუნქციის მოკლე ჩანაწერები:

$ (".btn"). დააწკაპუნეთ (ფუნქცია () (// მოქმედებები, რომლებიც გამოჩნდება, როცა დრო მოვა ... console.log ($ (this).text ());));

დამატებითი ინფორმაცია პროდუქტის შესახებ

გვერდის დათვალიერებისას შეგიძლიათ იპოვოთ დამატებითი ინფორმაცია მის შესახებ. ამ ინფორმაციის და თავად Event ობიექტის გადაცემა პროცესორზე მიმდინარეობს პირველი არგუმენტის შემდეგ.

$ ("#დემო"). ჩართვა ("დაწკაპუნება", ფუნქცია (e) (// e - მოვლენის ობიექტი, რომელიც შეიცავს დამატებით ინფორმაციას სიტუაციის შესახებ, რომელიც // ხშირად გამოიყენება Event ობიექტის სიმძლავრის წინააღმდეგ e.preventDefault (); // ზომების მიღება e.stopPropagation(); // ამოიღეთ გამრავლება // e.type - ამოიღეთ გავრცელების ტიპი // e.target - გაგზავნეთ ელემენტზე, რომელზეც გავრცელდა // e.currentTarget - გაგზავნეთ მიმდინარე ელემენტზე (რა მიზნით ეს ძალა, როგორც წესი, არის ამის ფუნქცია. // e.currentTarget === this // e.which - გასაღების კოდი (მაუსისთვის), ღილაკის კოდი ან სიმბოლო (კლავიატურისთვის) //e.pageX, e.pageY - კურსორის კოორდინაცია დოკუმენტის ზედა მარცხენა კუთხეში));

სახელების სივრცე

jQuery-ში, მას შემდეგ რაც შეიყვანთ პოდის სახელს, ასევე შეგიძლიათ მიუთითოთ სახელის სივრცე.

მაგალითად:

// დააწკაპუნეთ სახელების სივრცეში ჯერ $ ("#დემო"). On("click.first", function()(console.log("1 logger ქვეშ დაწკაპუნება");)); // დააწკაპუნეთ სახელების სივრცეში მეორე $ ("#დემო"). ჩართვა ("click.second", ფუნქცია () (console.log ("2 logger under click");));

სახელების გაშრობა კიდევ უფრო მარტივია. Vaughn გამოიყენება, მაგალითად, თუ გჭირდებათ სრული კომუნიკაციის დარეკვა ქვე-თან და მხოლოდ სასიმღერო სახელებით.

// დააწკაპუნეთ სახელზე დააწკაპუნეთ სახელების სივრცეში ჯერ $ ("# დემო"). Trigger ("click.first"); // დააწკაპუნეთ სახელზე დააწკაპუნეთ სახელების სივრცეში მეორე $ ("# დემო"). Trigger ("click.second");

ასევე, მე შემიძლია დაგეხმაროთ უბრალოდ იდენტიფიცირება ქვემოთ მოცემული სიმღერები:

// იხილეთ სემპლერები დაწკაპუნებით სახელების სივრცეში პირველი $ ("# დემო"). Off ("click.first"); // იხილეთ სემპლერები დაწკაპუნებით მეორე სახელების სივრცეში $ ("# დემო"). Off ("click.second");

ტრიგერის და გამორთვის ფუნქციების აღწერილობები და აპლიკაციები განხილულია ქვემოთ მოცემულ სტატიაში.

დამატებითი მონაცემების გადაცემა შემდგენელზე

საჭიროების შემთხვევაში, შეგიძლიათ გადასცეთ მონაცემები მონაცემთა შემგროვებელს (ჩართული ფუნქციის დამატებითი არგუმენტის ჩასმის დახმარებით). მონაცემთა გადაცემის წვდომა ანალიზატორის შუაში მიიღწევა Event ობიექტის მეშვეობით.

მუშაობს ასე (მაგალითად):

...

როგორ დავკიდოთ ჯოხი ერთ ელემენტზე

ერთი შემდგენელის ვიკორისტანის კონდახი დეკალებისთვის (2 ან მეტი) მიდის:

$ ("#Id"). ჩართულია ("keyup keypress blur change", ფუნქცია (e) (console.log (e.type); // type type)); // ან სხვა var myFunction = ფუნქცია () (...) $ ( "# id") .keyup (myFunction) .keyup (myFunction) .blur (myFunction). change (myFunction);

კანს აქვს თავისი ფუნქცია:

$ ("#Id"). ჩართვა ((მაუსის ჩასმა: ფუნქცია () (// მაუსის ჩასმა ...), მაუსის ღილაკი: ფუნქცია () (// მაუსის ღილაკი ...), დააწკაპუნეთ: ფუნქცია () (/ / დააჭირეთ ...) ));

ვიკორისტანის მაგალითი jQuery-ში მთელი რიგი ქვეჯგუფების (ფუნქციების) ერთი ქვესექციისთვის:

$ ("#დემო"). დააწკაპუნეთ(function()(console.log("1 sampler under click");)); $ ("#დემო"). დააწკაპუნეთ (function () (console.log ("2 sampler under click");));

მაგალითად, თქვენ შეგიძლიათ ამოიცნოთ სიშავის ტიპი, რომელიც ასე გამოჩნდება:

Var eventList = $._data($("#demo"), "events"); console.log(eventList);

პროგრამული უზრუნველყოფა დააჭირეთ ქვემოთ

jQuery-ში კოდზე დაწკაპუნების 2 მეთოდი არსებობს:

  • ტრიგერი - დააწკაპუნეთ ელემენტზე მითითებულ ველზე.
  • triggerHandler - ააქტიურებს ტრიგერს ტრიგერისთვის, თავად ტრიგერის გააქტიურების გარეშე.
$ ("#Header"). ჩართვა ("click", ფუნქცია () (კონსოლი ("დააწკაპუნეთ #header ელემენტზე");))); // პროგრამა დააწკაპუნეთ დაწკაპუნების ელემენტზე $ ("# header"). ტრიგერი ("დაწკაპუნება"); // მოკლე ჩანაწერი ამ ბლოგისთვის $("# სათაური"). დააწკაპუნეთ (); // დააწკაპუნეთ საძიებო ელემენტზე დააწკაპუნეთ შერჩეულ ელემენტზე $ ("# header"). TriggerHandler ("დაწკაპუნება");

jQuery - მოძებნეთ საყვარელი გვერდი (მზადაა)

მოცემულ ელემენტში საგნის დამატების პროცესი დაიწყება გვერდის წვდომის შემდეგ, თუ დოკუმენტის DOM ხე უკვე შექმნილია. წინააღმდეგ შემთხვევაში, ნიმუშების წერისას, შეგიძლიათ დაუბრუნდეთ ელემენტებს, რომლებიც ჯერ არ არის ხელმისაწვდომი გვერდზე.

jQuery-ში გვერდის ყველაზე მოკლე ჩანაწერი ასე გამოიყურება:

$ (ფუნქცია () (// მოქმედებები, რომლებიც უნდა გამოვიდეთ დოკუმენტის ჩამოტვირთვის შემდეგ...));

ალე, შეგიძლია ვიკორისტი და უფრო გრძელი შენიშვნა გააკეთოთ:

$ (დოკუმენტი).ready (ფუნქცია () (// მოქმედებები, რომლებიც უნდა წაიშალოს დოკუმენტის შეძენის შემდეგ...));

jQuery - Podіya zavantazhennya (დატვირთვა)

ბრაუზერი წარმოქმნის ელემენტის ჩატვირთვის მოთხოვნას, თუ შიგთავსი და ამ ელემენტის ყველა წვლილი ამჟამად ჩატვირთულია. ეს ტერმინი ეხება მხოლოდ იმ ელემენტებს, რომლებიც იმყოფება URL-ში: სურათი, სკრიპტი, iframe და ფანჯარა.

მაგალითად, გამორთეთ ფუნქცია, თუ გვერდი მთლიანად დაშიფრულია (მათ შორის სურათები):

$ (Window).on ("ჩატვირთვა", ფუნქცია () (// გვერდის დასრულების შემდეგ...));

მაგალითად, შეტყობინება გამოჩნდება კონსოლში, თუ არჩეულია დანიშნული სურათი:

...

jQuery - საგნები

jQuery-ში მოქმედების მხარდასაჭერად ყველაზე ხშირად გამოყენებული ცნებებია:

  • მაუსის დარტყმა
  • მაუსი
  • დააწკაპუნეთ
  • მაუსის მოძრაობა
  • საჭე
  • ჰოვერი
  • თაგვის შეყვანა
  • მაუსის გადატანა
  • თაგვის ფოთოლი
  • მაუსის ამოღება

jQuery - დააწკაპუნეთ

დაწკაპუნების რეჟიმი დასაკეცი რეჟიმია და ჩნდება მას შემდეგ, რაც მაუსის ჩამორთმევისა და მაუსის ღილაკების გენერირება მოხდება. მაუსის ჩამორთმევის სიგნალი ჩნდება, როდესაც ინდიკატორი ელემენტს აჭარბებს და მაუსის ღილაკს დაჭერით. მაუსის ღილაკი გააქტიურებულია, როდესაც ინდიკატორი ელემენტზეა და მაუსის ღილაკი გათავისუფლდება. დაწკაპუნების ტერმინი წარმოიქმნება, როდესაც კურსორი არის ელემენტზე და მაუსის ღილაკი დაჭერილია და იხსნება. ეს იდეები შეიძლება მოიხსნას ნებისმიერი გზით HTML ელემენტიდა.

მაგალითად, ჩვენ დავკიდებთ კომპენდიუმს დააწკაპუნეთფანჯრის ელემენტი. დაჭერისას დეტექტორი აჩვენებს დაჭერილი კლავიშის რაოდენობას და კურსორის კოორდინატებს:

$ (Window).on ("click", ფუნქცია (e) (// დაამუშავეთ დაწკაპუნება ... console.log ("ღილაკი დაჭერილია:" + e.which); // 1 - მარცხენა ღილაკი, 2 - შუა ღილაკი , 3 - უფლებები console.log ("კურსორის კოორდინატი: x = + e.pageX + "; y = + e.pageY);));

მაგალითად, onclick მოქმედება გამოიყენება btn კლასის ყველა ელემენტზე:

$ (".btn"). ჩართვა ("დაწკაპუნება", ფუნქცია () (// ღილაკის წნევის გამოვლენის კოდი ...)); მოკლე ჩანაწერი აკრეფისთვის: $ (". Btn"). დააწკაპუნეთ(ფუნქცია()(...));

მაგალითად, მოდით გავარკვიოთ, როგორ შეგიძლიათ აიღოთ ბლოკი დაწკაპუნებიდან ათი საათის შემდეგ:

...დაამაგრეთ ბლოკი 5 წამის შემდეგ...
...

jQuery - Hover


jQuery - რა არის hover?

როდესაც კურსორი იატაკზეა განთავსებული, ის დასაკეცია და შედგება 2 ნაწილისგან:

  • შეყვანა (მაუსის ჩასმა, მაუსის გადატანა);
  • გასვლა (თაგვის ამოღება, თაგვის ამოღება).

jQuery-ში მაუსის შეყვანის და მაუსის ამოღების ფუნქციები დიფერენცირებულია მხოლოდ მაუსის გადაღებისა და მაუსის ამოღებისგან, რათა არ მოხდეს მათი ავარია, როდესაც კურსორი უნდა შევიდეს და თავიდან აიცილოს ელემენტის მიერ შიდა ელემენტების მოსმენა. სხვა სიტყვებით რომ ვთქვათ, მაუსის გადატანა და მაუსის ამოღება შერწყმულია, მაგრამ მაუსის ჩასმა და მაუსის ამოღება არა.

მაგალითად, შეგიძლიათ შეცვალოთ სიის ელემენტის ფერი, როდესაც კურსორს ახალზე გადაიტანთ:

  • კალამი
  • ზეთისხილი
  • მმართველი
...

იგივე მოქმედებები, გარდა მაუსის გადატანისა და მაუსის ამოღების:

$ ("Ul>li"). mouseover(function() (// ელემენტის $(this) შეყვანისას.css("ფერი", "ფორთოხალი");)). mouseout(function()(// ელემენტის დატოვებისას $(this).css("ფერი", "შავი");));

ეს მეთოდები სულაც არ საჭიროებს ერთბაშად გაანალიზებას, მაგრამ შესაძლებელია მათი ცალ-ცალკე გაერთიანებაც.

მაგალითად, ჩვენ შეგვიძლია დავარეგულიროთ ელემენტის გადაადგილების რაოდენობა, როდესაც არჩეულია რეჟიმი „წერტილი სამიზნეზე“:

რაოდენობა: 0
...

იმის ნაცვლად, რომ აირჩიოთ მაუსის ჩასმა და მაუსის მაუსი, შეგიძლიათ აირჩიოთ hover.

მაგალითად, გადავიწეროთ სახელმძღვანელო კონდახი, ვიკორისტის ჰოვერი:

$ ("Ul>li"). Hover (ფუნქცია () (// ელემენტის $ (this) შეყვანისას.css ("ფერი", "ფორთოხალი");), ფუნქცია () (// ელემენტის დატოვებისას $ (this).css ("color", " შავი");));

jQuery-ში hover-ის გამოყენებისას, პირველი დამმუშავებელი გამოიყენება მოქმედების განსახორციელებლად, როდესაც კურსორი შედის ელემენტში (მაუსის პუნქტი), ხოლო მეორე, როდესაც ის ტოვებს ელემენტს (მაუსის ასვლა).

თუ თქვენ მიუთითებთ ერთ სემპლერს ჰოვერისთვის, მაშინ გამოსავალი გამოყენებული იქნება როგორც სამიზნის დამიზნების დასამუშავებლად, ასევე მის დასატოვებლად.

მაგალითად:

$ ("H1"). Hover (ფუნქცია () (console.log ("ელემენტში შესვლა ან გამოსვლა შესაძლებელი გახდა");));

jQuery - Podia ruhu misha

მაუსის მოძრაობის ეფექტი გამოიყენება ელემენტზე, როდესაც მაუსის მაჩვენებელი მოძრაობს მის შუაში. შესაძლებელია თუ არა HTML ელემენტის ამ გზით გამოტანა.

$ ("სამიზნე"). Mousemove (ფუნქცია (e) (console.log ("Click logger for mousemove."); Console.log ("კოორდინატები დოკუმენტის ზედა მარცხენა კუთხეში:" + e.pageX + "," + e.pageY); console.log("კურსორის კოორდინატები ნიშნის შუაში:" + e.offsetX + "," + e.offsetY);));

jQuery - თაგვის ბორბალი

დათვის მოძრავი ბორბლის მოსმენა შეიძლება ასე მოხდეს:

$ (ფანჯარა) .on ( "ბორბალი", ფუნქცია (e) (// კოდი (მაგალითად) ... console.log ( "გადაბრუნებული პიქსელების რაოდენობა:" + e.originalEvent.deltaY); თუ (e.originalEvent დელტაი< 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } });

გადახვევის მოდულის ეს იდეა ბრაუზერის მიერ არის გენერირებული მხოლოდ დათვის ტიკტიკისთვის, რომელშიც ელემენტი უმნიშვნელოდ გადახვევს, ასე რომ თქვენ შეგიძლიათ იმუშაოთ მასზე გადახურებულ ელემენტებზე, როგორიცაა დამალული. კიდევ ერთი განსხვავება მდგომარეობს იმაში, რომ ბორბალი წარმოიქმნება გადახვევამდე, ხოლო გადახვევა - მის შემდეგ.

jQuery - კლავიატურის საგნები

კლავიატურის ღილაკზე დაჭერისას, ბრაუზერი წარმოქმნის მოთხოვნებს შემდეგი თანმიმდევრობით:

Keydown -> keypress -> keyup

  • keydown (ღილაკი დაჭერილია, მაგრამ ჯერ არ არის გამოშვებული);
  • keypress (საკვანძო სიტყვები გენერირებულია ასოების, ციფრებისა და სხვა გასაღებებისთვის) - განკუთვნილია სიმბოლოს კოდის მოსაძიებლად (საკვანძო სიტყვები keydown და keyup საშუალებას გაძლევთ გაარკვიოთ მხოლოდ გასაღების კოდი, მაგრამ არა სიმბოლო);
  • კლავიატურა (გენერირდება ბრაუზერის მიერ გასაღების გათავისუფლებისას).

მაგალითად, დავწეროთ სემპლერი ყველა იმ ბგერის მოსასმენად, რომელიც ისმის ღილაკის დაჭერისას:

...

მაგალითი, რომელიც გვიჩვენებს, თუ როგორ შეგიძლიათ მოუსმინოთ კლავიშის დაჭერას და გაარკვიოთ, არის თუ არა ღილაკი დაჭერილი ან მითითებული:

$(დოკუმენტი).keypress("c", ფუნქცია(e)(if (e.ctrlKey)(console.log("keypress Ctrl+c");)));

მაგალითი იმისა, თუ როგორ შეგიძლიათ მოუსმინოთ Ctrl + Enter კლავიშს:

$ (დოკუმენტი).keydown (ფუნქცია (e) (// მინიშნებით macOS X-დან, თუ ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) (// შენი ქმედებები...))

მაგალითად, ვიკის გამოყენება კლავიშებისა და კლავიშებისთვის:

...

jQuery - ფორმის ელემენტების ტიპები

jQuery-ში შეგიძლიათ იხილოთ ნაბიჯები ფორმის ელემენტებისთვის და სხვა:

  • ფოკუსირება (ფოკუსირება)
  • დაბინდვა (ფოკუსირება)
  • შეცვლა
  • შეყვანა (ამისთვის ტექსტის ელემენტებიფორმიანი)
  • აირჩიეთ
  • წარადგინოს

jQuery - როგორ დავკარგოთ ყურადღება

ფოკუსის მნიშვნელობა ემატება ელემენტს, როდესაც ფოკუსი ამოღებულია. ეს ქცევა გენერირებულია ელემენტების შეყვანის, არჩევისა და განთავსებისთვის (a href = "..."), ისევე როგორც ნებისმიერი სხვა ელემენტისთვის, რომელსაც აქვს tabindex სიმძლავრის დაყენება. ელემენტის ფოკუსში მოსაყვანად, თქვენ უნდა დააჭიროთ ან დააჭიროთ Tab ღილაკს თქვენს კლავიატურაზე. ფოკუსის ქოთანი არ იშლება.

ფოკუს კრემს აქვს კიდევ ერთი მსგავსი პროდუქტი, რომელსაც ფოკუსინი ეწოდება. ფოკუსის კონტექსტში, ეს კონცეფცია გაერთიანებულია და შეგიძლიათ, მაგალითად, გამოიყენოთ იგი ფოკუსის იდენტიფიცირებისთვის მამის ელემენტებთან.

დაბინდვის ეფექტი გამოიყენება ელემენტზე, როდესაც ის კარგავს ფოკუსს. ისევე, როგორც ფოკუსი, ბუნდოვანიც ფოკუსირების მსგავსია. ეს იდეა გაძლიერებულია ბუნდოვანებით, რათა მოხდეს მისი გაერთიანება. ეს შეიძლება გაკეთდეს, მაგალითად, მამის ელემენტებზე ფოკუსირებისთვის და არა მხოლოდ იმ ელემენტებზე, რომლებიც მიზანმიმართულია.

მაგალითად, როდესაც div ელემენტი ირჩევს ფოკუსს, ჩვენ ვაყენებთ მის ფონს ნარინჯისფერ ფერზე:

...

ანალოგიურად, თქვენ ვერ ხედავთ ფოკუსის და დაბინდვის დახმარებას, ასე რომ არ მისცეთ სურნელი გაქრეს:

$ ("#დემო შეყვანა"). ფოკუსირება(ფუნქცია()($(this).parent()).css("ფონის ფერი", "ნარინჯისფერი");)).blur(function()($(this).parent()).css( "ფონი -ფერი "," მემკვიდრეობა ");));

jQuery - შეცვალეთ მოთხოვნა

ცვლილების ველი გამოიყენება შეყვანის, ტექსტური არეალის და ელემენტების შერჩევის მნიშვნელობის ცვლილებების დასარეგისტრირებლად. შერჩეული ელემენტების, ჩამრთველი ველებისა და რადიო ღილაკებისთვის ეს მეთოდი მოცემულია დაუყოვნებლივ (ისე, რომ მხოლოდ მომხმარებლებს შეუძლიათ აირჩიონ რომელი არჩევანი). თუმცა, სხვა ელემენტებისთვის ეს პარამეტრი არ გამოჩნდება მანამ, სანამ ელემენტი არ დაკარგავს ფოკუსს.

კონდახი vikoristannya podії ცვლილება stezhenya უკან ბანაკში checkbox ელემენტს. ღილაკის ხელმისაწვდომობა მითითებული იქნება პრიორიტეტულად და ნებისმიერ შემთხვევაში (შემოწმებულია ნებისმიერ შემთხვევაში) გამოყენებული იქნება ნიშანი:

...

მაგალითად, მოდით შევხედოთ, თუ როგორ უნდა ამოიღოთ შერჩეული ელემენტის მნიშვნელობა მისი შეცვლისას:

...

აი, როგორ გააუქმოთ შერჩეული ელემენტების ყველა არჩევანი მათი შეცვლისას:

...

პროგრამის მაგალითი, დააჭირეთ ცვლილებას შერჩეული ელემენტისთვის:

// სია - ელემენტის id ცვლილება $("#list"). ტრიგერი ("ცვლილება"); // მოკლე ჩანაწერი $("#list"). Change(); // დააჭირეთ ქვემოთ მოცემულ სიას შეცვალეთ $ ("# სია"). TriggerHandler ("ცვლილება");

შეყვანის ელემენტის მნიშვნელობის მოსაშორებლად გამოიყენეთ ცვლილების მეთოდი:

...

გარდა ცვლილების მეთოდისა, არის ტექსტის ელემენტების შეყვანის ველიც. ცვლილების ეს მოთხოვნა წარმოიქმნება დაუყოვნებლივ და არა მას შემდეგ, რაც ელემენტმა ყურადღება დაკარგა.

მაგრამ, გამოიყენეთ სწორი შეყვანა შეყვანის ელემენტის მნიშვნელობის გამოსატანად:

$ ("შეყვანა"). On("input", function()(var value = $(this).val(); console.log(მნიშვნელობა);));

მაგალითად, ამ შემთხვევაში, textarea ელემენტის მნიშვნელობის ამოღების ერთ-ერთი გზაა:

...

მაგალითად, მოდით შევხედოთ, თუ როგორ გამოვიყენოთ ცვლილების მეთოდი არჩეული შეყვანის ელემენტის მნიშვნელობის ამოსაღებად რადიოს ტოლი ტიპიდან:

ფანჯრები Linux macOS...

jQuery - აირჩიეთ

სელექტი გენერირდება ბრაუზერის მიერ, თუ შუაში არის შეყვანის ელემენტი type = "ტექსტი" ან ტექსტური არე ხედავს ტექსტს.

$ ("# სამიზნე"). აირჩიეთ (ფუნქცია () (console.log ("Click logger ქვეშ არჩევის");));

jQuery - ფორმის წარდგენის პროცედურა (გაგზავნა)

გაგზავნის მოქმედება ხდება ელემენტზე, როდესაც მომხმარებელი ცდილობს ფორმის გაგზავნას. ეს იდეა შეიძლება დაემატოს მხოლოდ ფორმირების ელემენტებს.

კონდახი, ვიკორასტანნია გაგზავნა:

...
...

დააწკაპუნეთ პროგრამაზე ფორმის გაგზავნისთვის:

$ ("# გამოხმაურება"). წარდგენა(); $ ("# გამოხმაურება"). ტრიგერი ("გაგზავნა");

jQuery - გადახვევის ფუნქცია

jQuery-ში გადახვევის გასაადვილებლად გამოიყენება გადახვევის კონცეფცია.

მაგალითად, გვერდის გადახვევის ფუნქციიდან გამომდინარე, ის აჩვენებს ელემენტს გადახვევის კლასით, თუ გადახვევის მნიშვნელობა 200 პიქსელზე მეტია და აითვისებს მას, თუ გადახვევის მნიშვნელობა ამ მნიშვნელობაზე ნაკლებია.

// $ (ფანჯარა) ფუნქციის მოკლე ჩაწერა. გადახვევა (ფუნქცია () (// მოქმედებები გვერდის გადახვევისას ... if ($ (this).scrollTop ()> 200) ($ ( ". Scrollup"). FadeIn () ;) else($(".scrollup").fadeOut();)));

jQuery - როგორ შევცვალოთ ფანჯრის ზომა (შეცვალეთ ზომა)

ხმის მოსასმენად შეცვალეთ ბრაუზერის ფანჯარა ზომის შეცვლის გამოყენებით:

მაგალითად, ჩვენ შეგვიძლია შევქმნათ ფორმატი, რომელიც ბრაუზერის ფანჯრის შეცვლისას გვერდის ბოლოს აჩვენებს სიგანეს და სიმაღლეს:

$(Window).resize(function()($("body").Append("

სიგანე x სიმაღლე = "+ window.innerWidth +" x "+ window.innerheight +"

"); });

jQuery - სტანდარტული ქცევის აღბეჭდვა

ზოგიერთი ელემენტი HTML-ში მიჰყვება სტანდარტულ ქცევას. მაგალითად, თუ მომხმარებელი დააჭერს შეტყობინებას, თქვენ უნდა მიჰყვეთ href ატრიბუტში მითითებულ მისამართს. თუ ეს აქტივობა არ გჭირდებათ, შეგიძლიათ შეინახოთ იგი. სტანდარტული ქცევის განსახორციელებლად, თქვენ უნდა გამოძახოთ მოვლენის ობიექტის preventDefault მეთოდი მოვლენის აღწერილობაში.

მაგალითად, მოდით ვისაუბროთ ვებსაიტზე ყველა შეტყობინების სტანდარტულ ქცევაზე, რომლებიც კლასიფიცირებულია როგორც სერვისი:

$ ("A.service"). ჩართულია ("დაწკაპუნება", ფუნქცია (e) (// სტანდარტული ბრაუზერის მოქმედება e.preventDefault(); // მოქმედებები, რომლებიც გააუქმებენ შეტყობინებას...));

რა არის დრენაჟი და როგორ იშლება?

სტანდარტული მოქმედების გარდა, მექანიზმში არის შერწყმის ცნებაც. საქმე იმაშია, რომ თუ ბრაუზერი წარმოქმნის იდეებს, მაშინ აუცილებელია მუშაობა არა მხოლოდ ნაკადის ელემენტზე (სამიზნე), არამედ მის ყველა ელემენტზე, მათ შორის მამაზეც:

მიმდინარე ელემენტი (მეტა) -> მამის ელემენტი მეტა -> საგვარეულო ელემენტი -> ... -> დოკუმენტი -> ფანჯარა

jQuery-ში არის სცენარები, როდესაც ლანიარდის ხედში ერთი და იგივე ელემენტის რომელიმე ელემენტს აქვს აღწერილობა ერთი და იგივე ნივთისთვის, რომელიც არ საჭიროებს დამატებას. და იმის უზრუნველსაყოფად, რომ ეს ტერიტორია არ გაფართოვდეს ამ ელემენტზე, ის უნდა გამკაცრდეს. საჭირო ელემენტის მისაღებად, თქვენ უნდა გამოძახოთ მოვლენის ობიექტის stopPropagation მეთოდი. ამ მეთოდის გამოყენების შემდეგ ის დაიწყებს ჩაძირვას და არ დნება.

მაგალითად, აუცილებელია, რომ როდესაც კურსორი ამაღლებულია ნიშნის კლასის ელემენტზე, ის იქცეს ნარინჯისფერ ფერად.

მოქმედი ტექსტი... ფრაგმენტი......გაგრძელებული...
...

ამ შემთხვევაში, თუ არ მიუთითებთ stopPropagation მეთოდს, მაშინ როდესაც კურსორი მიიყვანება span ელემენტზე ნიშნის კლასით, გავლენას მოახდენს არა მხოლოდ ერთი ელემენტი, არამედ ყველა სხვა ელემენტი. და ამ შემთხვევაში, საქმე ეხება იმ ფაქტს, რომ ფერი იცვლება არა მხოლოდ სპანში მოთავსებული ტექსტისთვის, არამედ მთელი აბზაცისთვის.

თუ თქვენ გჭირდებათ პატივი სცეთ ბრაუზერის სტანდარტულ ქცევას და შერწყმის ფუნქციას, მაშინ jQuery-ში, ორ მეთოდზე დაწკაპუნების ნაცვლად, შეგიძლიათ უბრალოდ გადააქციოთ ფუნქციის შედეგი false-ზე.

$ ("A"). ჩართულია ("დაწკაპუნება", ფუნქცია (e) (//e.preventDefault(); //e.stopPropagation()); ... return false;));

ენერგიის დამატება დინამიურად შექმნილ ობიექტებზე

იმისათვის, რომ დაურთოთ ზარი ელემენტს, რომელიც უკვე არ არსებობს, შეგიძლიათ გამოიყენოთ ფუნქციის კონსტრუქცია:

$(დოკუმენტი).on(eventName, selector, handler); // დოკუმენტი ან სხვა ძირითადი ელემენტი // eventName - მოქმედების სახელი // სელექტორი - სელექტორი, რომელიც იძლევა მოქმედებების გაფილტვრის საშუალებას, რისთვისაც აუცილებელია მოვლენის დამმუშავებლის გაშვება // დამმუშავებელი - ქმედების დამმუშავებელი

ეს მოქმედება შეიძლება გამოწვეული იყოს იმით, რაც ერთად მიედინება და, შესაბამისად, ხდება ამ ელემენტის ყველა წინაპარში. და ობიექტი, რომელზეც ყველა იდეა არის გაერთიანებული გვერდზე, არის დოკუმენტი. ამიტომ, უმეტეს შემთხვევაში, თქვენ თავად ირჩევთ. მას შემდეგ რაც იცნობთ ამომრჩეველს, ჩართვის ფუნქციას შეუძლია პროგრამულად შეარჩიოს ელემენტებს შორის (ელემენტები, რომლებიც დააწკაპუნებენ ამ თემაზე (სამიზნე) და მის ყველა წინაპარს, მამის ჩათვლით), რომლებიც წარმოადგენენ თქვენ. და შემდეგ ყველა არჩეული ელემენტისთვის შეიყვანეთ მნიშვნელობები ჩართვის ფუნქციაში. მოქმედებები, რომლებიც საშუალებას აძლევს ბავშვის დამუშავებას გადავიდეს სხვა ელემენტზე (წინაპარზე), jQuery-ში ეწოდება დელეგირების პროცესით.

მაგალითად, დავამატოთ ელემენტი, რომელიც ჯერ არ არის ხელმისაწვდომი გვერდზე:

დელეგირება შეიძლება გამოყენებულ იქნას არა მხოლოდ დინამიურად შექმნილი ობიექტების დასამუშავებლად, არამედ იმისთვის, რომ არ იყოს მიბმული კანის ელემენტთან (რადგან შეიძლება იყოს კიდევ უფრო მეტი მათგანი გვერდით) სემპლერთან.

მაგალითად, კომენტარებში კომენტარებზე გადასვლა უსაფრთხოა გარე შეტყობინებები(ასეთი ქმედებები გადამისამართდება მოშორების გვერდზე):

$(Document).on("click", "#comment a", ფუნქცია(e) (if (! (Location.hostname === this.hostname ||! This.hostname.length)) (e.preventDefault( location.href = "შორს? ბმული = "+ encodeURIcomponent($(this).attr("href"));)));

jQuery - ხილვადობის ქვეგანყოფილება

ნებისმიერი დავიწყების პირობებისთვის გამოიყენეთ გამორთვის მეთოდი. ამის დახმარებით თქვენ შეგიძლიათ ნახოთ მხოლოდ იგივე ელემენტები, რომლებიც დაემატა ჩართვის მეთოდს.

დააწკაპუნეთ გამორთვის მეთოდზე ყოველგვარი არგუმენტების გარეშე, რაც იმას ნიშნავს, რომ მინიჭებულ ელემენტებს დაემატა ყველა ხელმოწერა.

მაგალითად, ჩვენ ვააქტიურებთ ყველა მპოვნელს ბმულის კლასის ელემენტებისთვის:

$ ("ბმული"). Off();

მაგალითად, შეგიძლიათ იხილოთ დაწკაპუნების ფუნქცია ყველა ელემენტისთვის ბმულის კლასით:

$ ("ბმული"). გამორთულია ("ბმული");

სპეციალური სელექტორი (**) საშუალებას გაძლევთ აირჩიოთ მხოლოდ დელეგატები და დანაზოგები, რომლებიც არ იყო დელეგირებული:

$ ("ბმული"). გამორთვა ("დაწკაპუნება", "**");

იხილეთ მხოლოდ მინიჭებული დელეგირებული პოზიციები (სელექტორის გამოყენებით):

// დელეგირებული ქვედანაყოფის დამატება $("ul"). On ("click", "li", ფუნქცია () (// li ელემენტის შინაარსი ნაჩვენებია კონსოლის console.log ($ (this).text ());)) ; // დელეგირებული ქვედანაყოფის ხედი $("ul"). Off ("დაწკაპუნება", "li");

იხილეთ ყველა openModal დელეგირებული დაწკაპუნების ქვესახელები მოდალური სახელების სივრცეში ელემენტების show კლასით:

$ ("სხეული"). On("click.modal", ".show", openModal);

ქმნილება ენიჭება კორისტუვაჩ პოდიას

jQuery-ში სიმძლავრის შესაქმნელად გამოიყენეთ ჩართვის და ტრიგერების მეთოდები.

სპეციალური jQuery მეთოდის შექმნის პრინციპი განიხილება დამატებით:

...

ბოლო თემა ისე გამოიყურებოდა, რომ ღილაკების დაჭერისას ამოიწურა. ჩვენ განვიხილავთ ამ თემის სხვა ფორმებს. ეს მოიცავს ფორმის სერვერზე გაგზავნას.

ელემენტი ფოკუსში

თუ ფორმის ელემენტი ფოკუსშია, გამოიყენება ფოკუსის მეთოდი, ხოლო თუ ფორმის ელემენტი ფოკუსირებულია, გამოიყენება ბუნდოვანი მეთოდი. შესაძლებელია შეყვანის ველის შექმნა და ტექსტის ჩვენება კონსოლში ფოკუსის მოხსნის და ფოკუსის გათავისუფლებისას:

HTML კოდი:

ამ სხვადასხვა მიდგომებს აზრი არ აქვს ელემენტის სტილის შეცვლაში. ამიტომ CSS იყენებს ფოკუსის ფსევდო კლასს.

ღირებულების შეყვანა

შეყვანავწუხვარ, თუ შეყვანის ველში სხვა ტექსტია. ეს სასარგებლოა კანის სიმბოლოს დამატების ან წაშლისას, ასევე ტექსტის კოპირებისას შესვლის ველში. ზოგიერთ ბრაუზერში ის მუშაობს შეუმჩნევლად: სიმბოლოს შეყვანისას იქმნება ბუნდოვანი ხედი, რის შემდეგაც შეირჩევა შეყვანის ხედი და შემდეგ იქმნება ფოკუსირების ხედი. ვინაიდან არ არსებობს ფოკუსირებისა და დაბინდვის მაგალითები, პრობლემები არ არის. თუ სურნელია, მაშინ კანზე წასმისას სუნი გამოჩნდება.

დაამატეთ კიდევ ერთი ტეგი გვერდზე მისი მნიშვნელობა ნაჩვენებია ტექსტის შეყვანისას:

HTML კოდი:

JavaScript:

28
29
30
31
32

 var newv = document.getElementById("ახალი_მნიშვნელობა"); newv.onchange = ფუნქცია () (console.log ("მნიშვნელობა შეიცვალა:" + newv.value);

ფორმის მართვა

გაგზავნის მოთხოვნა მოთხოვნილია ფორმის სერვერზე გაგზავნისას. იგი გამოიყენება ფორმაში შეყვანილი მონაცემების გადასამოწმებლად. ფორმის შემმოწმებელი ამოწმებს ფორმის ელემენტების მნიშვნელობებს და თუ რაიმე მნიშვნელობა არასწორად იყო შეყვანილი, მოგეთხოვებათ ფორმის გაგზავნა. თუ ასეა, გამოჩნდება შეტყობინება, რომელშიც მითითებულია რა უნდა გამოსწორდეს.

მოდით შევქმნათ ტეგები ფორმაში და დაამატეთ ღილაკი ფორმის გასაგზავნად:

HTML კოდი:

ფორმის ელემენტები უკვე ნაპოვნია წინა კონდახებზე, ამიტომ წიგნში შემდგომი ძიება არ განხორციელდება.

თუ ფორმა სწორად არის შევსებული, ისე, რომ ყველა ველს ჰქონდეს მინიმუმ ორი სიმბოლო, მაშინ ბრაუზერი შეეცდება გაუშვას ფაილი, მოქმედების ატრიბუტში მითითებები და შეცდომის შეტყობინება, რადგან ასეთი ფაილი არ არსებობს. თუ მასში რისკი არ არის, არ უნდა შეგეშინდეთ სცენარის მუშაობის შემოწმება. თუ ერთ-ერთ ველში ორზე ნაკლები სიმბოლოა შეყვანილი, შეტყობინება და გაგზავნა გაუქმდება. თუ ბევრი შემოწმებაა გასაკეთებელი, მაშინ შეგიძლიათ დარწმუნდეთ, რომ აცნობიერებთ კანის შემოწმებას და ზეწოლას ახდენთ ფორმაზე.

The შეყვანამოვლენა ირთვება, როდესაც ელემენტის მნიშვნელობა გამოიყენება ვებზე დაფუძნებული ფორმების ინტერაქტიული კონტროლის შესაქმნელად, მომხმარებლისგან მონაცემების მიღების მიზნით; ხელმისაწვდომია შეყვანის მონაცემთა და საკონტროლო ვიჯეტების მრავალფეროვნება, რაც დამოკიდებულია მოწყობილობაზე და მომხმარებლის აგენტზე. "> , ელემენტი წარმოადგენს კონტროლს, რომელიც უზრუნველყოფს ოფციების მენიუს ">