Получение/установка jQuery

Одна из самых важных частей jQuery - это возможность манипулировать DOM.

jQuery предоставляет методы для эффективной манипуляции HTML-элементами и свойствами.

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

HTML DOM (Document Object Model)

Документ объектной модели, обычно называемыйDOM, это важная часть, делающая веб-сайт интерактивным.

Документ объектной моделиЭто HTML-документ, отображаемый в окне.

Это интерфейс, который позволяет jQuery манипулировать содержимым, структурой и стилем веб-сайта.

jQuery��取或 устанавливает содержимое, html(), text() и val()

С помощью jQuery мы можем легко манипулировать HTML-элементами.

У нас есть следующие методы jQuery для операций с DOM:

• html()

• text()

• val()

В следующем разделе мы покажем, как использовать каждый метод.

Метод jQuery html()

jQuery html()Метод получения или установки содержимого выбранного элемента (innerHTML).

Следующий пример��取 содержимое первого абзаца при нажатии на кнопку:

$("button").click(function(){
　　alert($("p").html()));
});

Следующий пример изменяет содержимое всех абзацев при нажатии на кнопку:

$("button").click(function(){
　　$("p").html("Я хочу сказать:　<b>Hello　world</b>");
});

Метод jQuery text()

jQuery text()Метод получения или установки текстового содержимого выбранного элемента (включая его потомков).

Следующий пример��取 текст всех абзацев при нажатии на кнопку:

$("button").click(function(){
　　alert($("p").text()));
});

Следующий пример изменяет текст всех абзацев при нажатии на кнопку:

$("button").click(function(){
　　$("p").text("Я хочу сказать:　Hello　world");
});

различия между html() и text()

html()иtext()Методы html() и text() могут устанавливать или получить содержимое HTML-элемента, но есть следующие различия:

html():

• установка или получение содержимого выбранного элемента (текст + HTML-теги)

• при использовании метода html()получениепри использовании метода text() он вернетсодержимое первого выбранного элемента

text():

• установка или получение содержимого выбранного элемента (только текст)

• при использовании метода text()получениепри использовании метода text() он вернетвсе выбранные элементытекстовый контент

Следующий пример демонстрирует различие между методами html() и text():

$("#btn1").click(function(){
　　$("p").html("Я хочу сказать:　<b>Hello　world</b>");
});
$("#btn2").click(function(){
　　$("p").text("Я хочу сказать:　<b>Hello　world</b>");
});

Метод jQuery val()

jQuery val()Метод получения или установки значения атрибута value выбранного элемента формы.

Следующий пример получения<input>Значение поля:

$("button").click(function(){
　　$("input:text").val();
});

Следующий пример настройки<input>Значение поля:

$("button").click(function(){
　　$("input").val("Hello world");
});

jQuery получить или установить атрибут - attr()

jQuery attr()Метод��取 или установка свойств и значений выбранных элементов.

Ниже приведен пример получения изображения:srcЗначение атрибута:

$("button").click(function(){
　　$("img").attr("src");
});

Ниже приведен пример установки изображения:srcЗначение атрибута:

$("button").click(function(){
　　$("img").attr("src", "logo_jquery.png");
});

Ниже приведен пример настройки нескольких атрибутов и значений:

$("button").click(function(){
　　$("img").attr({
　　　　alt: "Seagull Icon",
　　　　title: "Image by Seagull",
　　　　width: "350px",
　　　　height: "300px"
　　});
});

jQuery HTML справочник

Для получения полной информации о методах HTML, пожалуйста, посетите нашHTML / CSS jQuery справочник.