Обьясните алгоритм выполнения кода

function chess() {

Объявляем функцию с именем chess, которую потом можно будет вызвать (вот так: chess())

for (var i = 0; i < 8; i++) {

Здесь начинается цикл, код внутри него будет выполняться 8 раз, при этом значениями переменной i будут целые числа от нуля до семи.

Затем идёт ещё один цикл, таким образом мы имеем двойной цикл, код внутри будет выполняться 8*8 раз.

if ((i % 2 == 0 && j % 2 == 0) || (j % 2 != 0 && i % 2 !== 0)) {

Это условие, оно проверяет, является ли текущая клетка шахматной доски (на пересечении i-ой строки и j-ого столбца) белой.

В условии используются операторы % (остаток от деления) и операторы ==, ===, !=, !== (сравнения). Условие можно упростить до i % 2 === j % 2.

$("#board").append('<div class="white"></div>');

Здесь сначала получается jQuery обёртка над элементом с id board, затем в конец этого элемента добавляется новый элемент, с классом white или black.

В результате выполнения функции в элемент #board добавятся 64 новых элемента, классы элементов внутри будут чередоваться. Так что вместо двух циклов можно было бы написать один на 64 операции.

Чтобы получилась шахматная доска, надо добавить какие-нибудь стили, например такие:

for (var i = 0; i < 8; i++) { 
  for (var j = 0; j < 8; j++) { 
    if ((i % 2 == 0 && j % 2 == 0) || (j % 2 != 0 && i % 2 !== 0)) { 
      $("#board").append('<div class="white"></div>'); 
    } else { 
      $("#board").append('<div class="black"></div>'); 
    } 
  } 
}

#board { 
  display: grid; 
  grid-template: repeat(8, 20px) / repeat(8, 20px); 
} 
 
.black { 
  background: black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<div id="board"></div>

Вот полный код и можно посмотреть что он генерирует.

Ну а для того что бы вам было понятно как оно работает просто посмотрите что из себя представляет цикл for.

И что значит оператор деления %.

function chess(){ 
  for(var i = 0;i<8;i++){ 
      for(var j = 0;j<8;j++){ 
          if((i%2==0 && j%2== 0) || (j%2!=0 && i%2!==0)){ 
              $("#board").append('<div class="white"></div>'); 
          }else{ 
              $("#board").append('<div class="black"></div>'); 
          } 
      } 
  } 
} 
chess();

#board{ 
  width: 80px; 
  height: 80px; 
  background: green; 
  padding: 5px; 
} 
.white, 
.black{ 
  width:10px; 
  height: 10px; 
  float: left; 
} 
.white{ 
  background: white; 
} 
.black{ 
  background: black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="board"></div>