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

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

Работа со свойствами и содержимым элементов

.attr()

Для работы с большинством атрибутов используется метод .attr()
// читаем атрибут
var id = $('#id').attr('id');
// измена аттрибута **/
$('#id').attr('id', 'id2');
// *** Задание кучи атрибутов в JSON-формате ***/
$('p:eq(1)').attr({
  'id'       : 'bat'
  'class' : 'buzz',
  'title'   : 'Очаровательный абзац, isn`t it?'
});

.removeAttr()

/* Удаление атрибута */
$(':checkbox').removeAttr('disabled');

.prop()

Возвращает или изменяет значение свойств выбранных элементов страницы. Имеет четыре варианта использования:
// если первый input-элемент на странице не активен, вернет true. Иначе false
$("input:first").prop("disabled")  
//   вернет активность всем input-элементам
$("input").prop("disabled", false)
// сделает активным последний переключатель на странице и сделает его выбранным
$("radio:last").prop({"disabled":false, "checked":true)  
// также есть возможность передавать функцию, где index — позиция элемента в наборе, value — текущее значение свойства propName у элемента.
.prop(propName, function(index, value)) 

.css()

//## Доступ к стилям ##//
// получаем значение:
$('#ak_47').css('height');
/*З.Ы. console.log()*/

// Ставим 
$('.dogma:first').css('background-color', 'orange');
/*** формат мистера Джейсона ***/
$('.dogma:first').css({
  'fontSize' : '33px',
  'font-weight' : 'bold',
  'backgroundColor' : 'orange'
  /* и т.д. и т.п. Поддерживаются оба стиля написания свойств */
});

.html(), replaceWith() и .text()

Предназначены для работы с содержимым тэга. После изменения всё прежнее содержимое затирается.
/* Читаем текст и html */
$('p#abzass').text();
$('p#absazz').html();
/** Ставим свое движение **/
$('div.clauz').text('Красный, белый, синий, да я в любом состоянии готов служить России');
/*? В одну строку хтмл записывается ?*/
$('#hischenija').html("<span style='display:none; visability:hidden;'></span>");
$("hr").replaceWith("<br/>");//Заменить элементы <hr/> на <br/>

.val()

Доступ к содержимому элементов форм
/* получение введённого в input текста */
$('input[name=name]').val();
/*# Изменение текста кнопки отправки #*/
$(':submit').val('не катят такие данные');

.data()

Метод .data() предназначен для сохранения информации об элементе в обьекте jQuery безопасным и доступным способом.
/*  Присвоим первым двум абзацам имена и сохраним эту информацию */
$('p:first').data('name', 'pookie')
.next('p').data('name', 'cookie');
/*# и выведем их в консоль  #*/
console.log('my name is '+$('p:first').data('name'));
console.log('my name is '+$('p:eq(1)').data('name'));

// через JSON можно добавить целую группу данных:
$('p:empty').data({
  'nickname' : 'jobi',
  'favorite' : {
    'kino'  : 'last mohikan',
    'song' : 'pod Luganskom rodilsa'
    'vodka' : 'pivo'
    }
});
/*** кэширую в переменную ***/
var info = $('p:empty').data();
// обращаюсь к данным:
console.log(info.nickname);
console.log(info.favorite.song);

.addClass(), .removeClass() и .toggleClass()

Ввиду большой популярности и огромной пользы классов css специально для них были разработаны три метода. Первые два предназначены соответственно для добавления и удаления атрибута класса.
$('p:last').addClass('super');
$('p:first').removeClass('good');
Третий, самый замечтательный метод, принимант имя (или имена) класса, а затем либо добавляет класс, если он отсутствует в теге, либо удаляет его, если класс имеется.
$('div').toggleClass('fura');
$('#megabox').toggleClass('gray scale');

.hasClass()

Работает аналогично .is() и возвращает true, если такой класс имеется или false в обратном случае.
if($('div#id').hasClass('star')){
  $('#cosmo').css({
    'fontWeight' : 'bold',
    'fontSize' : '33px'
  });
}

.height() и .width()

Возвращают высоту и ширину элементов ДОМа (число в пикселях). При передаче числового параметра изменяют их.
/* вычислим без калькулятора высоту */
$('#submet').click(function(){
  var height = $(this).height();
  /* и изменим её, если она больше 700px */
  if(height>700){
    $(this).height(500)
  }
}); 

.innerWidth(), innerHeight(), .outerWidth() и outerHeight()

var div = $('div#div');
/** получим внутреннюю ширину без учёта рамки и отступов **/
var innerwidth = div.innerWidth();
var innerHeight= div.innerHeight();
// устанавливаем:
div.innerWidth(555);
/*** а теперь - с рамкой ***/
var outerheight = div.outerHeight();
/**** с рамкой и  марджином ****/
var outerwidth = div.outerWidth(true);

Воздействие на результирующие наборы
.map() и .each()

Эти методы дают разработчику возможность применить к каждому элементу набора собственную функцию обратного вызова.
/* вызов без параметров */
$('p, .star, span').each(function(){
  $(this).css('background', 'red');
});

/* С одним параметром */
$(document.body).click(function () {
  $("div").each(function (i) {
    if (this.style.color != "blue") {
      this.style.color = "blue";
    }else{
      this.style.color = "";
    }
  });
});
    
/* передадим инлекс элемента в наборе */
$("button").click(function () {
  $("div").each(function (index, domEle) {
   // domEle == this
    $(domEle).css("backgroundColor", "yellow");
    if ($(this).is("#stop")) {
      $("span").text("Stopped at div index #" + index);
      return false;
    }
  });
});
.map( callback(index, domElement) ) — метод полезен тем, что дает возможность без написания циклов сделать преобразования над выбранными элементами или массивом (для массивов нужно использовать jQuery.map()). Если функция возвращает null или undefined, то элемент будет проигнорирован.
/* Выведем адреса всех ссылок на странице: */
var links = $('a').map(function(el){ 
  return this.href;
}).get().join("\n");
console.log(links);

$("h2").each(function(){ // Заменить <h2> на <h1>,
  var h2 = $(this); // сохранив содержимое
  h2.replaceWith("<h1>" + h2.html() + "</h1>");
});
// добавлениe символа параграфа во все <h1>
$("h1").map(function(){
  return this.firstChild;
}).before("§");
2015.07.05 121

Объявление: "Программистка-индивидуалка. Выезд, апартаменты. Классика, реверс-инжениринг, глубокий кодинг без ТЗ. Звони! Есть подруга бизнес-аналитик".
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


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