Андрей

function f() { return 1 }
f.key = 'value'

1. Берете содержимое дива
2. Разбиваете на строки
3. Находите строку с картинкой
4. Ставите её куда вам нужно
5. Записываете обратно в див

вот пример: jsfiddle.net/acpcmzwo/1

Почитайте эту статью, написано просто и понятно: frontender.info/writing-efficient-css-selectors
Ответ на первый вопрос в этом абзаце

Зачем совмещать селекторы? Вы сами ответили, что кода будет меньше.

PS: не используйте такие миксины,
во-первых для этого есть autoprefixer,
во-вторых border-radius уже сто лет работает без префиксов

PPS: Заниматься оптимизацией селекторов css стоит только если у вас все остальное идеально

Вот так: jsfiddle.net/aLhetfa4/1
Для верхнего левого уголка, сумма индексов в матрице меньше половины,
для верхнего правого разница индексов меньше половины, и так далее..

Итоговый код такой: jsfiddle.net/aLhetfa4/3

upd:
Немного сместил систему отсчета, и код стал еще проще:
jsfiddle.net/aLhetfa4/4

Как минимум можно не искать каждый раз $(this).val()

Насколько я понял по коду, тут участвуют всего два элемента, поэтому просто опишите когда показывается один, и когда второй.

var val = +$(this).val(); // значения ведь числа?

// массивы подставьте свои
var showFirst = [1, 4, 6, 7].indexOf(val) >= 0; 
var showSecond = [2, 3, 4, 8].indexOf(val) >= 0;
$('#f_lr1rooq').toggle(showFirst);
$('#f_lr1ronq').toggle(showSecond);

upd:
Собственно в этом тоже никакого смысла

$('#f_lr1rowtd option:selected').each(function () { ... }

Можно убрать, и сделать так:

var val = +$('#f_lr1rowtd option:selected').val();
// дальше логика выше

Так происходит потому что после удаления элементов удаляются все события.

Перетасовать элементы, можно и без удаления.

function shuffle() {
  var $root = $(this);
  var $divs = $root.children();
  for (var i = $divs.length-1; i>1; i--) {
    var rnd = Math.floor(Math.random() * i);
    // случайный элемент из списка перемещается в конец
    $divs.eq(rnd).appendTo($root);
  }
}

...Теперь у него две проблемы

Если я правильно понял условие, то вот так можно без регекспа:

var s = "<div>...</div>BLBLBLBLB<p>...</p>BL<a>...</a><div>...</div>ffffff.jpg";
var name = s.substring(s.lastIndexOf('>') + 1);

Вот так можно с регекспом:

var s = "<div>...</div>BLBLBLBLB<p>...</p>BL<a>...</a><div>...</div>ffffff.jpg";
var name = /[^>]+$/.exec(s);

var f = function() {}; — function expression
function f() {}; — function declaration

Основная разница в том, что второе поднимает определение функции до начала области видимости, в которой она объявлена. То есть можно использовать функцию до ее объявления.

hoisted(); // выведет 'foo'

function hoisted() {
  console.log('foo');
}

notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
   console.log('bar');
};

upd:
Другое отличие состоит в возможности моментального вызова функции, так называемое iife

var expression = function() { console.log('foo'); }();
// выведет 'foo'

function declaration() { console.log('bar'); }();
// SyntaxError: expected expression, got ')'

Просто setInterval

var $elements = $('.class');
var index = 0;
var intervalId = setInterval(function() {
  if (index >= $elements.length) return clearInterval(intervalId);
  $elements.eq(index).css({border: '1px solid red'}); // тут делаем что нужно
  index++;
}, 1000);

Фотошоповский эффект при выделении: matthewjamestaylor.com/blog/animated-photoshop-sel...
Кратко: делаете подложку, которая больше требуемого блока на 1px в каждую сторону, и делаете подложке фон из анимированной картинки:

Подозрительная конструкция
$.when.apply($, promise)
Вторым аргументом должен идти массив.
Мне кажется можно обойтись без нее, просто promise.then