Возможности console.log

Опубликовано 2017.01.27 в разделе JavaScript.

Для вывода отладочных сообщений в JavaScript используют команду console.log, о ней знают все, кто хоть сколько-нибудь связан с web-разработкой.

Она выводит строку, число или объект.

Например:

  1. var m = {q:4,d:6};
  2. console.log(m);

Выведет:

Но можно задать отладочным сообщениям оформление.

Например:

  1. console.log("%c%s","color: red; background: yellow; font-size: 20px;","Debug message")

Выведет:

Вхождение подстроки в JavaScript

Опубликовано 2016.06.29 в разделе JavaScript.

Чтобы проверить вхождение одной строки в другую - следует использовать такой код. +1 используется из-за того, что вхождение может начинаться с нулевого символа строки
  1. var main_string = 'main string content';
  2. if(main_string.indexOf('string') + 1) {
  3. console.log('true');
  4. } else {
  5. console.log('false');
  6. }

Селектор по атрибуту с [] в значении

Опубликовано 2015.12.03 в разделе JavaScript.

Допустим у вас есть такая вёрстка:
  1. <input type="hidden" name="field_main_image[und][0][fid]" value="152" />
И вам нужно ява скриптом обратиться к этому инпуту по имени и забрать значение атрибута value. Делается это так.
  1. var input_value = $('[name=field_main_image\\[und\\]\\[0\\]\\[fid\\]]').attr('value')
Всё элементарно, но надо знать, что скобки экранируются двумя слэшами, а не одним.

Событие наведения и снятия курсора на jQuery

Опубликовано 2015.12.03 в разделе JavaScript.

Всё достаточно просто. Не забывайте подключать саму библиотеку jQuery
  1. $(document).ready(function() {
  2. $('#element').hover(
  3. function(){
  4. // навели курсор на объект
  5. console.log('hover');
  6. },function(){
  7. // отвели курсор с объекта
  8. console.log('no hover');
  9. });
  10. });

Убрать все GET параметры

Опубликовано 2015.11.28 в разделе JavaScript.

Если вам нужно очистить URL от всех GET параметров, то обычно используют код:
  1. window.location = 'my-url';
Он в принципе работает, но остаётся знак вопроса в конце урла. Если заменять window.location.href - ситуация такая же. Есть магический способ. Он делает тоже самое, но знак вопроса пропадает О_о Выглядит он так:
  1. window.location.href=window.location.href.split('?')[0]
Я не понимаю почему это работает)) Может кто-то сможет толково объяснить?

href mailto с русским заголовком

Опубликовано 2014.10.24 в разделе JavaScript.

Если в ссылке в атрибуте href прописать mailto:e-mail - то при клике на такую ссылку у пользователя откроется почтовый клиент и создастся письмо, адресованное адресу, указанному после mailto: Так же в ссылке можно передавать заголовок письма и его содержимое. Для этого нужны переменные subject и body. Таким образом ссылка будет выглядеть вот так:
  1. <a href="mailto:example@server.dom?subject=My email&body=My text of this e-mail">написать письмо</a>
Такой код будет корректно отрабатываться во всех браузерах. Если нажать на такую ссылку - то откроется почтовый клиент

Разная анимация для Nivo slider

Опубликовано 2014.03.28 в разделе JavaScript.

У слайдера Nivo slider есть один существенный недостаток - одинаковая анимация для смены картинок. То есть если листать картинки как влево, так и вправо - анимация всегда будет одной и той-же. Это не всегда выглядит красиво. Победить эту проблему получилось только патчем библиотеки. Я приведу пример и приложу исходник. Открывайте jquery.nivo.slider.js и ищите текст // Get our vars, это примерно 290 строка. Добавьте после неё следующую строчку:
  1. var slide_bilo = $('div.nivo-controlNav a.active').attr('rel');

foreach в JavaScript

Опубликовано 2013.06.05 в разделе JavaScript.

Часто используемой php`шной функции foreach в JavaScript`е нет. Поэтому следует использовать конструкцию for. Это достаточно просто.
  1. <script type="text/javascript">
  2. var data = new Array('house', 'table', 'Drupal');
  3. for (var key in data) {
  4. var val = data[key];
  5. alert (key + ' = ' + val);
  6. }
  7. </script>

jQuery CSS. Управление стилями.

Опубликовано 2012.08.12 в разделе JavaScript.

Библиотека jQuery позволяет свободно управлять css свойствами элементов DOM дерева. Если вы уже знакомы с основами синтаксиса jQuery - то разобраться со стилями для вас не составит никакого труда. Задать свойство можно так:
  1. $(element).css('color','green');
Вот и всё, теперь у элемента есть свойство color, которое равно green. Например имеем разметку:
  1. <p id="abzac">
  2. Подкрасить в красный цвет яваскриптом.
  3. </p>

jQuery элементы

Опубликовано 2012.08.08 в разделе JavaScript.

Для доступа к DOM элементам на странице достаточно знать идентификатор элемента, его класс или любые другие отличительные признаки. Другими словами-селекторы. Например,если средствами jQuery необходимо получить объект элемента-то следует написать:
  1. $(element);
Предположим у нас есть поле ввода с идентификатором field:
  1. <!--Поле ввода-->
  2. <input type="text" id="field" value="Test string" class="my-class" />
  3.  
  4. <!--Сам скрипт-->
  5. <script type="text/javascript">
  6. var el=$('#field');
  7. </script>