Създаването на базирано на Ajax приложение става много лесно и бързо с jQuery.
jQuery първоначално е създаден от John Resig в началото на 2006 г. Проектът jQuery в момента се поддържа и поддържа от разпределена група разработчици като проект с отворен код.
Можете да спестите много време и усилия с jQuery. Така че добавете този сайт към любимите си и продължете да четете
Има много повече неща, които можете да правите с jQuery.
Списъкът не свършва дотук, има много други страхотни неща, които можете да правите с jQuery.
Има няколко предимства, поради които човек трябва да избере използването на jQuery:
За да започнете, нека първо изтеглим копие на jQuery и след това да го включим в нашия проект. Две версии на jQuery са налични за изтегляне: бързам e не е компресиран .
Некомпресираният файл е по-подходящ за разработка или отстраняване на грешки; докато минимизираният и компресиран файл се препоръчва за производство, защото спестява честотна лента и подобрява производителността поради по-малкия размер на файла.
Можем да изтеглим jQuery от тук: https://jquery.com/download/
След като изтеглите jQuery файла, можете да видите, че той има js разширение, т.е. това е JavaScript файл. Всъщност JQuery не е нищо друго освен JavaScript библиотека, така че можете да включите jQuery файла в HTML документа с елемента точно както включвате обикновени JavaScript файлове.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Не забравяйте винаги да включвате jQuery файла преди персонализираните скриптове; в противен случай jQuery API няма да бъдат достъпни, когато вашият jQuery код се опита да получи достъп до тях.
Както може би сте забелязали, пропуснахме атрибута в предишния пример type="text/javascript" вътре в етикета . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiзавършен в HTML5 и във всички съвременни браузъри.
Като алтернатива можете да вградите jQuery във вашия документ чрез свободно достъпни връзки CDN (Content Delivery Network), ако предпочитате да избегнете изтеглянето на файла.
CDN могат да предложат предимство в производителността чрез намаляване на времето за зареждане, тъй като хостват jQuery на множество сървъри по целия свят и когато потребителят поиска файла, той ще бъде обслужен от най-близкия сървър.
Това също има предимството, че ако посетителят на вашата уеб страница вече е изтеглил копие на jQuery от същия CDN, докато е посещавал други сайтове, няма да се налага да го изтегля отново, тъй като вече е в кеша на браузъра им.
В този случай ще трябва да напишете:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>В допълнение към CDN, предоставен от проекта jquery, можете да включите jQuery чрез Google e Microsoft cdn.
След като видяхте целите на библиотеката jQuery и как да я включите във вашия документ, сега е моментът да приложите jQuery на практика.
Сега нека направим проста операция на jQuery, като променим цвета на текста на заглавката от предварителния цвятdefiзавършен черен до зелен цвят.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>В кода извършихме проста jQuery операция, като променихме цвета на заглавката, т.е. елемента използване на селектора на елемента jQuery и метода css(), когато документът е готов, известен като събитието за готовност на документа.
Изявление на jQuery обикновено започва със знак за долар ( $) и завършва с точка и запетая ( ;).
В jQuery знакът за долар ( $) е просто псевдоним за jQuery. Разгледайте следния примерен код, демонстриращ най-простия израз на jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Примерът просто показва предупредително съобщение „Hello I'm a JQuery sign“ към потребителя. Нека видим някои функции:
<script>: jQuery е просто JavaScript библиотека, jQuery кодът може да бъде поставен вътре в елемента <script>, или можете да го поставите във външен JavaScript файл;$(document).ready(handler); е известно като готово събитие. Къде е handler това е функция, която се предава на метода, който трябва да бъде изпълнен, веднага щом документът е готов, т.е. когато йерархията на DOM е напълно изградена.Методът jQuery ready() обикновено се използва с анонимна функция. Така че примерът по-горе може да бъде написан и със стенограма по следния начин:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Вътре във функция можете да напишете jQuery изрази, за да извършите всяко действие, следващо основен синтаксис, като:
$(selector).action();Къде е, $(selector) той основно избира HTML елементите от DOM дървото, така че да може да се манипулира и action() приложете някои действия върху избраните елементи, като промяна на стойността на свойството CSS или задаване на съдържанието на елемента и т.н.
Сега нека разгледаме друг пример, който задава текст на абзац:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>Примерът с jQuery се отнася за селектора p, и това избира всички абзаци, след това метода text() задайте текстовото съдържание на абзаца с „Hello World!".
Текстът на абзаца в предишния пример се заменя автоматично, когато документът е готов. Но нека да видим как да го направим, в случай че искате да извършите действие, преди да изпълните jQuery кода, за да замените текста на абзаца.
Нека разгледаме един последен пример:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>В този пример текстът на абзаца се заменя само когато настъпи събитие за щракване върху бутона "Replace Text“, което просто означава, когато потребител щракне върху този бутон.
Можете да използвате селектора на ID, за да изберете единичен елемент с уникалното ID на страницата.
Например, следният jQuery код ще избере и маркира елемент с атрибут ID id="markid", когато документът е готов.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Селекторът на клас може да се използва за избиране на елементи с определен клас.
Например, следният jQuery код ще избере и маркира елементи с атрибута class class="markclass", когато документът е готов.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Селекторът на елементи може да се използва за избиране на елементи по име на елемент.
Например, следният jQuery код ще избере и маркира целия параграф, т.е. елементите "<p>" на документа, когато е готов.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Можете да използвате селектора на атрибути, за да изберете елемент въз основа на един от неговите HTML атрибути, като например атрибут на връзка targetили атрибута на вход typeи т.н.
Например, следният jQuery код ще избере и маркира всички текстови входове, като елементи "<input>" с type="text", когато документът е готов.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Можете също да комбинирате CSS селектори, за да направите избора си още по-прецизен.
Например, можете да комбинирате селектора на клас със селектора на елемент, за да намерите елементи в документ, които имат определен тип и клас.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>Освен селекционерите definiti, jQuery предоставя свой собствен персонализиран селектор за допълнително подобряване на възможностите за избиране на елементи на страница.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>Събитията често се задействат от взаимодействие на потребителя с уеб страницата, като например щракване върху връзка или бутон, въвеждане на текст в поле за въвеждане или текстова област, извършване на избор в поле за избор, натискане на клавиш на клавиатурата, преместване на показалеца на мишката и т.н. В някои случаи самият браузър може да задейства събития, като събития за зареждане на страница и изтегляне.
jQuery подобрява основните механизми за обработка на събития, като предлага методи за събития за повечето собствени събития на браузъра, някои от тези методи са ready(), click(), keypress(), focus(), blur(), change()и т.н.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Най-общо събитията могат да бъдат класифицирани в четири основни групи:
Събитие с мишката се задейства, когато потребителят щракне върху елемент, премести показалеца на мишката и т.н.
Ето някои често използвани jQuery методи за обработка на събития с мишката.
click()Методът click() прикрепете функция за обработка на събития към избраните елементи за събитието “click“. Свързаната функция се изпълнява, когато потребителят щракне върху този елемент. Следващият пример ще скрие елементите <p> на страница при щракване.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Методът dblclick() прикрепете функция за обработка на събития към избраните елементи за събитието “dblclick“. Свързаната функция се изпълнява, когато потребителят щракне двукратно върху този елемент. Следващият пример ще скрие елементите <p> когато щракнете двукратно върху тях.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Методът hover() прикрепете една или две функции за обработка на събития към избрани елементи, които се изпълняват, когато показалецът на мишката се движи навътре и извън елементите. Първата функция се изпълнява, когато потребителят постави показалеца на мишката върху елемент, докато втората функция се изпълнява, когато потребителят премахне показалеца на мишката от този елемент.
Следващият пример ще подчертае елементи <p> когато поставите курсора върху него, осветяването ще бъде премахнато, когато премахнете курсора.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Методът mouseenter() прикачете функция за обработка на събития към избраните елементи, която се изпълнява, когато мишката влезе в елемент. Следващият пример ще добави подчертаване на клас към елемента <p> когато поставите курсора върху него.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Методът mouseleave() прикрепете функция за обработка на събития към избрани елементи, която се изпълнява, когато мишката напусне елемент. Следващият пример ще премахне осветяването на класа от елемента <p> когато премахнете курсора от него.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Събитие на клавиатурата се поражда, когато потребителят натисне или пусне клавиш на клавиатурата. Нека да разгледаме някои често използвани jQuery методи за обработка на събития от клавиатурата.
keypress()Методът keypress() прикрепя функция за обработка на събития към избрани елементи (обикновено контроли на формуляри), която се изпълнява, когато браузърът получи въвеждане от клавиатурата от потребителя. Следният пример ще покаже съобщение, когато събитието бъде задействано keypress и колко пъти се задейства, когато натиснете клавиша на клавиатурата.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Събитието натискане на клавиш е подобно на събитието натискане на клавиш, с изключение на модификаторите и непечатащите се клавиши като Shift, Esc, Backspace или Delete, клавишите със стрелки и т.н. те задействат събития с натискане на клавиши, но не и събития с натискане на клавиши.
keydown()Методът keydown() прикрепя функция за обработка на събития към избрани елементи (обикновено контроли на формуляри), която се изпълнява, когато потребителят за първи път натисне клавиш на клавиатурата. Следният пример ще покаже съобщение, когато събитието бъде задействано keydown и колко пъти се задейства, когато натиснете клавиша на клавиатурата.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Методът keyup() прикачете функция за обработка на събития към избрани елементи (обикновено контроли на формуляри), която се изпълнява, когато потребителят пусне клавиш от клавиатурата. Следващият пример ще покаже съобщение, когато събитието бъде задействано keyup и колко пъти се задейства, когато натиснете и пуснете клавиш на клавиатурата.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Събитие на формуляр се задейства, когато контрола на формуляр получи или изгуби фокус, или когато потребителят промени стойност на контрола на формуляр, като например въвеждане на текст при въвеждане на текст, избиране на опция в поле за избор и т.н. Ето някои често използвани jQuery методи за обработка на събития на формуляри.
change()Методът change() прикрепете функция за обработка на събития към елементи <input> и се изпълнява, когато стойността му се промени. Следният пример ще покаже предупредително съобщение, когато изберете опция в падащото поле за избор.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>За квадратчета за щракване, квадратчета за отметка и бутони за избор събитието се задейства незабавно, когато потребителят направи селекция с мишката, но за въвеждане на текст и текстова област събитието се задейства, след като елементът загуби фокус.
focus()Методът focus() прикрепя функция за манипулиране на събития към избрани елементи (обикновено контроли и свързвания на формуляри), която се изпълнява, когато получи фокус. Следният пример ще покаже съобщение, когато въвеждането на текст получи фокус.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Методът blur() прикачете функция за манипулиране на събития към елементи на формуляр като <input>, <textarea>, <select> който се изпълнява, когато загуби фокус. Следният пример ще покаже съобщение, когато въведеният текст загуби фокус.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Методът submit() прикрепете функция за обработка на събития към елементи <form> който се изпълнява, когато потребителят се опита да изпрати формуляр. Следващият пример ще покаже съобщение въз основа на въведената стойност при опит за изпращане на формуляра.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>Събитията също се задействат в ситуация, в която DOM (Document Object Model) страницата е готова или когато потребителят преоразмерява или превърта прозореца на браузъра и т.н. Ето някои често използвани jQuery методи за обработка на този тип събитие.
ready()Методът ready() указва функция, която да се изпълни, когато DOM е напълно зареден.
Следващият пример ще замени текста на абзаца веднага щом йерархията на DOM бъде напълно изградена и готова за манипулиране.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Методът resize() прикрепете функция за обработка на събития към елемента на прозореца, която се изпълнява, когато размерът на прозореца на браузъра се промени.
Следващият пример ще покаже текущата ширина и височина на прозореца на браузъра, когато се опитате да го преоразмерите, като плъзнете ъглите му.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Методът scroll() прикрепете функция за обработка на събития към прозореца или към iframe и елементи с възможност за превъртане, които се изпълняват всеки път, когато позицията на превъртане на елемента се промени.
Следният пример ще покаже съобщение при превъртане на прозореца на браузъра.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Операция по офталмопластика с помощта на търговския зрител Apple Vision Pro беше извършена в поликлиниката в Катания...
Развитието на фини двигателни умения чрез оцветяване подготвя децата за по-сложни умения като писане. Оцветявам…
Военноморският сектор е истинска световна икономическа сила, която се е насочила към пазар от 150 милиарда...
Миналия понеделник Financial Times обяви сделка с OpenAI. FT лицензира своята журналистика от световна класа...