КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Методы JQuery для профессионалов

Обход элементов DOM-a

$('p').eq(0);//выбор по индексу, вернёт первый абзац
$('p').filter('.main');// выбор из абзацев все с классом main
$('p').not('#ter');// вернёт все p кроме #ter
.first() и .last()// идентичны .eq(0) и .eq(-1)
$('p').has('span');// абзацы имеющие спан
$('p').is('#terabite');// вернёт true если среди абзацев будет найден #terabite
$('p').slice(0, 3);// вырежет из набора абзацев первые три // второй параметр наобязателен

$('.main').next();// следующий за классом main сестринский  элемент
$('#id').nextAll();// все следующие за #id сестринские элементы 
$('#id').nextAll('span');// все следующие блоки спан
$('#id').nextUntil('#sisterhood');// все следующие до #sisterhood
.prev(), .prevAll() и .prevUntil()// аналогично  next() только для предшествующих элементов

$('div').children('p');//вернутся  дочерние абзацы дивов/если не указано вернутся все дочерние 
$('table').parent('div');// дивы, являющиеся напосредственными предками таблиц
$('.class').parents('table');// предки класса class, являющиеся таблицами // любая вложенность 
$(':checkbox').parentsUntil('.main');// все предки чекбокса  до классa main
$('input').closest('form');// поиск ближайшего элемента-предка
$('form').find('input#submit');// находим в форме инпут // любой уровень вложенности
$('P').siblings();// все сестринские элементы // можно передать какие именно 

$('p').add('span.class');// добавляем во все абзацы спан с классом class
$('div').add("<span class='son'>jQuery is the best</span>");// добавляем на лету
$('p').find('img').andSelf();// возвратит и абзацы и картинки в них
$('span.good').contents();// найдёт всё содержимое (элементы и их текст)
$('p').find('#id').end();// находим #id и возвращаемся к абзацам // к предыдущему набору

Создание новых элементов DOM-a

Чтобы создать новый элемент, нужно лишь сообщить jQuery его дескриптор. Например для создания просто абзаца и дива с атрибутами нам понадобится код
$('<p>');
$("<div class='krovostok'>Биография</div>");
// JSON-формат
$('<div>', {
  'class' : 'bat',
  'text' : 'bats are flying'
});

Вставка новых элементов в кошкин ДОМ

append() и prepend()

После создания приступим к вставке их куданадо.
var form = $('<form>', {
  'text' : 'форма обратного вызова',
  'css' : {'background' : 'green'}
});
$('body').prepend(form);// добавляет элемент в body до всего прочего 
$('body').append(form);// добавляет в самый конец

appendTo() и prependTo()

$('<form>', {
  'text' : 'форма обратного вызова',
  'css' : {'background' : 'green'}
}).prependTo('div#for_form');
Этот суперкод сделает то же что и предыдущий с методом prepend().

after() и before()

Эти методы аналогичны append() и prepend(), только вместо добавления содержимого в начало или конец элемента они добавляют его перед или после него. Добавим новый абзац после абзаца с классом class:
$('p .class').after('<p>Это тяжелая самая лёгкая работа</p>');

insertAfter() и insertBefore()

Подобно тому как методы .appendTo() и .prependTo() позволяют сократить размер кода для добавления новых элементов в дом, .insertAfter() и .insertBefore() предлагают аналогичную альтернативу для after и before:
$('<img>', {
  'src' : 'photoshop/gang.jpg'
}).insertAfter('#iid');

.wrap(), unwrap(), .wrapAll() и wrapInner()

С помощью метода wrap() разработчик моэжет легко и быстро поместить элемент в оболочку из одного или нескольких новых. В роли аргументов может выступать либо коллекция дескрипторов, либо функция обратного вызова, их генерирующая.
$('.class').wrap('<strong>');
$('.center').wrap('<strong><em></em></strong>');
// С callback-функцией:
/* Если спан имеет класс main, делаем его жирным, остальные наклонным шрифтом */
$('.div').wrap(function(){
  return $(this).is('.main')  ? '<strong>' : '<em>';
});
Метод .unwrap() делает обрантое - убирает родительский элемент. Он не принимает никаких аргументов.
$('span').unwrap();
Ментод wrapAll() оборачивает группу элементов в один общий. Он группирует их и создаёт одну оболочку вокруг всей группы. Группируя элементы, этот метод перемещает их в DOM, чтобы их можно было заключить в один дескриптор.
var div = $('div', {
  'css' : {'background' : 'green'}
});
$('p').wrapAll(div);
.wrapInner() заключает в оболочку не сам элемент, а только его содержимое.
// Сделаем  текст  абзацев наклонным:
$('p').wrapInner('<em></em>');

clear(), remove() , detach()

Используются для полного удаления элемента из DOM. Различие между ними в том, что .detach() сохраняет данные, связанные с данным обьектом, что предполагает последующее присоединение его к ДОМУ.
$('#id').clear();// удаляет всё содержимое 

var el=$('#id').detach();
el.appendTo('div#div');
2015.07.02 135

Укменские хакеры впервые решили выйти в сеть. Десятерых из них убило сразу. 220 вольт - это вам не шутки.
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика