Статьи

JQuery — пять вопросов и ответов

Декабрь 20, 2017

У меня был довольно хороший ответ на эти статьи в стиле вопросов и ответов Я получил хороший трафик от Nettuts в их списке «Best of May». Поэтому я решил написать вторую часть этой серии.

Как я могу увеличить и уменьшить текст с помощью jQuery?

Посмотреть пример

Есть несколько способов, которыми вы можете достичь этой цели. Мы просто сосредоточимся на одном. Во-первых, давайте добавим нашу простую разметку.

<div>
 <p id="text">
  This is some text. This is some text. This is some text. This is some text. This
  is some text. This is some text. This is some text. This is some text. This is some
  text. This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text. This
  is some text. This is some text.
 </p>
 <a href="#" id="smallerTextLink">Smaller Text</a><br>
 <a href="#" id="largerTextLink">Larger Text</a>
</div>

Здесь у нас есть общий текст и две ссылки. Эти ссылки при нажатии будут контролировать, будет ли текст увеличен или уменьшен. Теперь давайте добавим наш jQuery.

$(document).ready(function()
{
$('a').click(function()
{
    var theElement = $("#text").css("font-size");
    var textSize = parseFloat(theElement, 10);
    var unitOfMeasurement = theElement.slice(-2);

    if ( (this).id == "largerTextLink")
    {
	textSize += 2;
    }
    else
    {
	 textSize -= 2;
    };

    $('p').css("font-size",  textSize + unitOfMeasurement);

    return false;
    });
});

Как всегда, мы сделаем это шаг за шагом. 

$(document).ready(function()
        {
            $('a').click(function()

Когда документ будет готов к манипулированию, мы собираемся захватить все теги привязки и запустить функцию, когда они щелкаются. 

var theElement = $("#text").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);

Здесь мы создаем несколько переменных. «theElement» возьмет абзац с идентификатором «text» и получит его размер шрифта. «.css» может использоваться для получения и установки значений. Когда мы просто добавляем свойство в скобках, мы говорим jQuery, чтобы получить размер шрифта для абзаца. Это значение будет возвращено как число и единица измерения (т. Е. 20 пикселей). Нам нужно разделить эти два.

Переменная textSize использует метод parseFloat. «parseFloat» будет проходить через значение и обрезать любые нечисловые символы. В этом случае мы разбираем свойство font-size, чтобы избавиться от «px». «10» просто означает, что мы работаем на десятой базе.

unitOfMeasurement захватывает единицу измерения для размера шрифта, захватывая последние два символа значения (px). Нам нужно это для того, чтобы добавить новое значение.

if ( (this).id == "largerTextLink")
{
	textSize += 2;
}
else
{
	textSize -= 2;
};

Этот оператор if проверяет, имеет ли щелкающий тег привязки идентификатор «largeTextLink». Если это так, то мы собираемся добавить 2px к textSize. Это так же, как запись — textSize = textSize + 2 -. Если это не так, пользователь должен был щелкнуть тег привязки «lowerTextLink». В этом случае мы уменьшим textSize на 2 пикселя.

$('p').css("font-size",  textSize + unitOfMeasurement);
return false;

Наконец, мы собираемся захватить абзац и установить новое значение. Размер шрифта будет установлен на новый textSize, который мы наметим, плюс unitOfMeasurement. Довольно просто, правда?

Как я могу увеличить изображение при нажатии на него?

Посмотреть пример

Это довольно легко. Сначала мы добавим очень краткий HTML.

<img src="img/logo.gif" alt="Logo" id="image">
 <p>
  Click To Zoom In
 </p>

У нас просто есть наше изображение и параграф. Мы могли бы так же просто использовать тег привязки вместо абзаца. Я просто хотел показать вам, что мы можем применить событие click ко всему!

$(document).ready(function()
    {
    $("#image").css("width", "100px");
        $("#image").toggle(function()
            {
                $(this).animate({width: "300px"}, 1000);
                $('p').text("Click To Zoom Out");
                
            }, function(){
                $(this).animate({width: "100px"}, 1000);
                $('p').text("Click To Zoom In");
            });
    });

Вы знаете тренировку … шаг за шагом. 

$(document).ready(function()
    {
    $("#image").css("width", "100px");

Когда документ будет готов, мы собираемся установить ширину элемента с идентификатором «image» равной 100px. Эта вторая часть на самом деле не нужна, она просто немного укорачивает.

$("#image").toggle(function()
 {
  $(this).animate({width: "300px"}, 1000);
  $('p').text("Click To Zoom Out");

Когда изображение щелкнуло, мы собираемся запустить метод переключения. Используя «toggle», мы можем установить две функции. Первый будет запущен, когда изображение будет щелкнуто один раз. Вторая функция будет использоваться при повторном нажатии на изображение. Это лучше всего использовать при создании своего рода макета расширения / сжатия.

При первом нажатии на изображение мы собираемся захватить «это» (изображение, на которое нажали) и анимировать его. Мы изменим ширину изображения до 300 пикселей и увеличим до нового размера в течение одной секунды (1000).

}, function(){
 $(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");

При повторном щелчке по изображению мы изменим ширину изображения до 100px и изменим текст абзаца соответственно.

Как я могу создать ссылку «Подробнее», которая будет мгновенно расширяться, чтобы показать пользователю дополнительный текст при нажатии?

Посмотреть пример

Очень легко! Давайте добавим наш образец HTML.

<p>
 This is some text. This is some text. This is some text. This is some text. This
 is some text. This is some text. This is some text. This is some text. This is some
 text. This is some text. This is some text. <span class="readMore">Read More</span>
</p>
<p>
 This is some text. This is some text. This is some text. This is some text. This
 is some text. This is some text. This is some text. This is some text. This is some
 text. This is some text. This is some text. This is some text. This is some text.
</p>

Это просто какой-то общий текст внутри двух тегов абзаца. У нас также есть диапазон с классом «readMore». При щелчке по этому тегу span мы должны удалить его.

Теперь для JQuery! 

$(document).ready(function()
 {
  $('p:eq(1)').hide();
  $('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()
 {
  $('p:eq(1)').fadeIn("slow");
  $(this).fadeOut("normal");
});
});

Здесь мы собираемся скрыть второй абзац (p: eq (1). Помните, Javascript использует базовый ноль. В результате «1» будет равен второму абзацу.

$('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()

Далее мы возьмем тег span с классом readMore и установим немного CSS. Мы изменим курсор на указатель, чтобы у пользователя была некоторая обратная связь, чтобы он знал, что это кликабельный тег span. Далее мы изменим цвет на случайный, чтобы выделить тег. Мы также немного уменьшим размер текста. Далее мы запустим функцию при нажатии на диапазон.

$('p:eq(1)').fadeIn("slow");
$(this).fadeOut("normal");

При щелчке по тегу мы собираемся захватить второй абзац (p: eq (1)) и постепенно его добавлять. Затем «this» (тег span, который был нажат) исчезнет в течение .4 секунд («нормально»).

Это все, что нужно сделать!

Как я могу сдвигать изображение на определенное количество пикселей при каждом нажатии?

Посмотреть пример

Я могу решить эту одну из пяти строк кода, Боб! 

<img src="img/logo.gif" alt="Detached Designs" id="image">
<a href="#" id="scroll">Scroll</a>

Это наш простой HTML. Это просто изображение и якорный тег. Теперь для JQuery.

$(document).ready(function()
 {
  $("#scroll").click(function()
 {
 var theLeftAmount = $("#image").css("left");
 var theNumber = parseFloat(theLeftAmount, 10);
 theNumber += 25;
 var amountToShift = theNumber + "px";
 $("#image").css("left", amountToShift); });
 });

Здесь мы идем с анализом! 

$(document).ready(function()
 {
  $("#scroll").click(function()

Когда документ будет готов к манипулированию, мы собираемся захватить тег привязки с идентификатором «scroll» и запускать функцию при нажатии на нее.

var theLeftAmount = $("#image").css("left");
var theNumber = parseFloat(theLeftAmount, 10);
theNumber += 25;
var amountToShift = theNumber + "px";

Здесь мы собираемся создать несколько переменных. Чтобы сместить изображение, мы собираемся изменить свойство «left» в CSS. Переменная «theLeftAmount» собирается получить текущее значение для левого свойства. Если в файле CSS для свойства left установлено значение «20px» … «theLeftAmount» будет равно «20px».

«theNumber» собирается проанализировать возвращаемое число и удалить «px» с конца. «10» указывает, что мы работаем с основанием 10.

Далее мы возьмем это число и добавим к нему 25 пикселей. Затем мы создадим новую переменную под названием «amountToShift» и сделаем это уравнение для нашего числа «theNumber» плюс единицу измерения — которая в данном случае равна «px».

$("#image").css("left", amountToShift); });

Наконец, мы собираемся изменить свойство left нашего изображения на наше новое значение (amountToShift).

Имейте в виду, что во всех этих примерах использование «.css» добавит стили непосредственно в наш документ. Я сделал это таким образом, чтобы все было просто. В идеале вам нужно добавить стили непосредственно в таблицу стилей, а затем ссылаться на них с помощью «addClass».

Этот последний вопрос от меня ко всем вам

Есть ли что-то, что вы хотели бы, чтобы я рассмотрел в будущих уроках? Спасибо! Я надеюсь, что все это поможет вам. Скачать исходный код для всех этих примеров

29
Share: