jQuery - Четене и промяна на съдържанието на елемент, IT Chef

Статия, в която ще разгледаме какви методи има jQuery за четене и промяна на съдържанието на HTML елементи.

jQuery предоставя три метода, които ви позволяват да работите директно със съдържанието на елемент:

• html - за четене и промяна на HTML съдържанието на елемента;
• текст - за четене и промяна на текстовото съдържание на елемента;
• val - за четене и промяна на стойността на елементите на формата.

Четене на HTML съдържанието на елемент

Например, нека вземем HTML съдържанието на елемента с id ( id ) contact :

Ако селекцията съдържа няколко елемента, тогава този метод ще върне HTML съдържанието само на първия елемент:

За да получите HTML съдържанието на всички намерени елементи, трябва да използвате цикъл (например всеки):

Промяна на HTML съдържанието на елемент

Например, нека заменим съдържанието на елемента ul:

Ако на страницата има няколко елемента ul, този метод ще замени съдържанието на всеки от тях.

Ако трябва да промените съдържанието само на един елемент на страницата, най-лесният начин да направите това е чрез id.

Използване на функция за замяна на HTML съдържанието на елемент:

Например, нека променим съдържанието на елементите (зачертайте старото съдържание и добавете новото до него):

Получаване на текстовото съдържание на елемент

В jQuery получаването на съдържанието на елемент като обикновен текст се извършва с помощта на метода text. В този случай всички HTML тагове, ако присъстват в съдържанието, ще бъдат изрязани.

Например, нека вземем текстовото съдържание на елемента p и да го изведем към съдържанието на друг елемент:

Текстовият метод, подобно на html, връща съдържанието само на първия елемент в селекцията (ако има няколко елемента в нея).

Замяна на съдържанието на елемент с посочения текст

Текстовият метод може да се използва не само за четене, но и за промяна на съдържанието на посочения елемент. В този случай HTML таговете (ако присъстват в текста) ще бъдат кодирани с помощта на специални знаци.

Когато бъде изпълнен, елементът div с информацията за класа ще има следния HTML код:

На екрана този елемент ще изглежда така:

Ако има няколко елемента в селекцията, тогава текстовият метод ще замени съдържанието на всеки от тях:

Използване на текстовия метод като параметър на функцията (добавете дължината на нейната текстова информация в скоби към съдържанието на всеки избран елемент):

Изтриване на съдържанието на елемент

jQuery има празен метод за премахване на съдържанието на елемент. Този метод не само премахва елементите, но и другите му дъщерни възли, включително текст.

Например, нека премахнем съдържанието на всички елементи с класа за гласуване:

Получаване на стойността на елемент на формуляр

В jQuery четенето на стойностите на елементите input, select и textarea се извършва чрез метода val.

Например, нека получим стойността на входния елемент:

Методът val, ако има няколко елемента в колекцията, ще върне стойността само на първия от тях.

За да получите стойността на избрания елемент (избор, квадратче за отметка или радио бутон), използвайте :checked.

Ако колекцията няма елементи, тогава методът val връща undefined.

Например, нека получим стойността на елемент на текстово поле с име description:

Вземете стойността на избрания елемент:

Ако елементът select има множество възможности за избор (атрибутът multiple), тогава методът val ще върне масив, съдържащ стойността на всяка избрана опция. Ако няма отметната опция, този метод ще се върне катоотговорът е празен масив (преди jQuery 3, null).

Задаване на стойност на елемент на формуляр

Промяната на стойността на елемент на формуляр в jQuery се извършва с помощта на метода val.

Например, когато се щракне върху бутон, задайте входния елемент на неговия текст:

Този метод задава стойността за всички елементи от набора, към който се прилага.

Например, нека преобразуваме всички букви от стойността на входния елемент след загуба на фокус в главни букви:

Например, нека променим стойността на избрания елемент:

Например, нека присвоим стойности на избран елемент с множество селекции ( множество ):

Нека променим стойността на квадратчето за отметка:

---