Отход от jQuery

Vlad · June 1, 2011

Нужно переделать небольшую функцию сделанную с помощью jquery на "классический JavaScript". Честно говоря, разбаловал он меня, забыл как многие вещи делаются изначально.

  $('#menu span').click(function () {
    $('#menu > li').removeClass("show");
    $(this).parent().addClass("show");
    $("#menu ul").hide();
    $(this).parent().children("ul").show()
  })

Этот код применяется на сайте, чтобы менять и показывать вкладки в ленточном интерфейсе htmlbook.ru. Может кто помочь?

psywalker · June 1, 2011

А у меня как раз всё наоборот, я JS учу в свободное время, а JQ вообще не знаю. Возможно и смог бы помочь, если бы ты объяснил, что должен делать этот скрипт?

sigma77 · June 1, 2011

А у меня как раз всё наоборот, я JS учу в свободное время, а JQ вообще не знаю. Возможно и смог бы помочь, если бы ты объяснил, что должен делать этот скрипт?

Смотри, тут всё просто


  $('#menu span').click(function () { // Получаем все элементы спан, вложенные в блок с id="menu"
    $('#menu > li').removeClass("show"); // Удаляем класс у элементов li, которые являются прямыми потомками #menu
    $(this).parent().addClass("show"); // Поднимаемся вверх к первому родителю спана, по которому произошел клик
    $("#menu ul").hide(); // Скрываем все ul, вложенных в #menu
    $(this).parent().children("ul").show() // Поднимаемся вверх к первому родителю спана, 
                                          //далее спускаемся к первому дочернему ul и показываем его
  })

Помочь могу, но уже вечером, ближе к ночи. Ну и я думаю тут есть люди, которые в js понимают намного лучше меня

Great Rash · June 1, 2011


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		ul {list-style: none;}
		li {float: left; margin: 0 5px;}
		li ul {position: absolute; top: 35px; left: 0; width: 100%; border: 1px solid; background: none;}

		.hide ul {display: none;}
		.show ul {display: block;}
	</style>

	<script type="text/javascript">
		window.onload = function() {
			var s = document.getElementById('menu').getElementsByTagName('span');
			var li = document.getElementById('menu').getElementsByTagName('li');

			for (var i = 0; i < s.length; i++) {
				s[i].onclick = function() {
					for (var j = 0; j < li.length; j++) {
						li[j].className = 'hide';
					}

					this.parentNode.className = 'show';
				}
			}
		}
	</script>
</head>
<body>

	<ul id="menu">
		<li class="show">
			<span>Основное</span>

			<ul style="background: pink;">
				<li><a href="#">Статьи</a></li>
				<li><a href="#">Блог</a></li>
				<li><a href="#">Практикум</a></li>
				<li><a href="#">Рецепты HTML и CSS</a></li>
				<li><a href="#">Цифровые книги</a></li>
				<li><a href="#">Форум</a></li>
			</ul>
		</li>
		<li class="hide">
			<span>HTML</span>

			<ul style="background: lightgreen;">
				<li><a href="#">Статьи</a></li>
				<li><a href="#">Блог</a></li>
				<li><a href="#">Практикум</a></li>
			</ul>
		</li>
		<li class="hide">
			<span>CSS</span>

			<ul style="background: lightblue;">
				<li><a href="#">Рецепты HTML и CSS</a></li>
				<li><a href="#">Цифровые книги</a></li>
				<li><a href="#">Форум</a></li>
			</ul>
		</li>
    </ul>

</body>
</html>

В jQuery логика уж очень запутанна, паренты, чилды... избавился от половины ненужных вещей, в итоге на чистом JS код не на много длиннее. jQuery разжижает мозг, ну его нафиг

psywalker · June 1, 2011

А у меня как раз всё наоборот, я JS учу в свободное время, а JQ вообще не знаю. Возможно и смог бы помочь, если бы ты объяснил, что должен делать этот скрипт?
Смотри, тут всё просто
  $('#menu span').click(function () { // Получаем все элементы спан, вложенные в блок с id="menu"
    $('#menu > li').removeClass("show"); // Удаляем класс у элементов li, которые являются прямыми потомками #menu
    $(this).parent().addClass("show"); // Поднимаемся вверх к первому родителю спана, по которому произошел клик
    $("#menu ul").hide(); // Скрываем все ul, вложенных в #menu
    $(this).parent().children("ul").show() // Поднимаемся вверх к первому родителю спана, 
                                          //далее спускаемся к первому дочернему ul и показываем его
  })
Помочь могу, но уже вечером, ближе к ночи. Ну и я думаю тут есть люди, которые в js понимают намного лучше меня

Ага, спасибо Оксан, но кое-что всё таки непонятно, смотри:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<ul id="menu">
      <li class="show"><span>Основное</span>
        <ul id="tab_main">
          <li><a href="/content"><img alt="Статьи" src="/themes/hb/images/content.png">
Статьи</a></li>
          <li><a href="/blog"><img alt="Блог" src="/themes/hb/images/blog.png">
Блог</a></li>
          <li><a href="/practical"><img alt="Практикум" src="/themes/hb/images/practical.png">
Практикум</a></li>
          <li><a href="/faq"><img alt="Рецепты HTML и CSS" src="/themes/hb/images/recipe.png">
Рецепты HTML и CSS</a></li>
          <li><a href="/books"><img alt="Цифровые книги" src="/themes/hb/images/digital.png">
Цифровые книги</a></li>
          <li><a href="http://forum.htmlbook.ru"><img alt="Форум" src="/themes/hb/images/forum.png">
Форум</a></li>
        </ul>
      </li>
      <li class="hide"><span>HTML</span>
        <ul id="tab_html">
          <li><a href="/samhtml"><img alt="Самоучитель HTML" src="/themes/hb/images/html.png">
Самоучитель HTML</a></li>
          <li><a href="/xhtml"><img alt="XHTML" src="/themes/hb/images/xhtml.png">
XHTML</a></li>
          <li><a href="/samhtml/validatsiya-dokumentov"><img alt="Валидация" src="/themes/hb/images/validate.png">
Валидация</a></li>
          <li><a href="/html"><img alt="Справочник по HTML" src="/themes/hb/images/html-manual.png">
Справочник по HTML</a></li>
          <li><a href="/html5"><img alt="HTML5" src="/themes/hb/images/html5.png">
HTML5</a></li>
        </ul>
      </li>
      <li class="hide"><span>CSS</span>
        <ul id="tab_css">
          <li><a href="/samcss"><img alt="Самоучитель CSS" src="/themes/hb/images/css.png">
Самоучитель CSS</a></li>
          <li><a href="/css"><img alt="Справочник по CSS" src="/themes/hb/images/css-manual.png">
Справочник по CSS</a></li>
          <li><a href="/layout"><img alt="Макеты" src="/themes/hb/images/layout.png">
Макеты</a></li>
        </ul>
      </li>
      <li id="help"><a href="/help">Помощь</a></li>
    </ul>
<script type="text/javascript">
	var menu = document.getElementById('menu'); // Получили ссылку на Меню
	var menuSpan = menu.getElementsByTagName('span'); // Получили ссылку на все span-ы главного Меню.
	var menuChild = menu.getElementsByTagName('ul'); // Получили ссылку на все меню внутри главного Меню
	var menuUl = menu.childNodes; // Получили ссылку на чайлНодс Меню, т.е. на ближайших вложенных узлов.
	for(var i = 0; i < menuSpan.length; i++){ // Идём по span-ам
		menuSpan[i].onclick = function(){ // Жмём на них, и при клике на один из них...
			for(var j = 0; j < menuChild.length; j++){ // Проходимся по Меню, по всем LI и вырубаем у них класс "show"
				if(menuChild[j].nodeName.toLowerCase() == 'li'){
					menuChild[j].className = menuChild[j].className.replace('show','');
				}
			}
			for(var j = 0; j < menuUl.length; j++){ // Проходимся по Меню, по всем прямым UL и вырубаем их.
				if(menuUl[j].nodeName.toLowerCase() == 'ul'){
					menuUl[j].style.display = 'none';
				}
			}
		}
	}

</script>
</body>
</html>

А вот остальные пункты я не понял. Что нужно ещё сделать?

Upd: Дружище Great Rash меня уже опередил, так что думаю код уже у тебя в кармане Влад

Vlad · June 1, 2011

В jQuery логика уж очень запутанна, паренты, чилды... избавился от половины ненужных вещей, в итоге на чистом JS код не на много длиннее. jQuery разжижает мозг, ну его нафиг

Спасибо, щас опробую. И да, мозг разщищается, ражжижается, раззжижжается, расшжижается, тьфу, понятно всё с мозгами.

mishka · June 1, 2011

Что стало причиной отказаться от jQuery?

Shift-Web · June 3, 2011

В jQuery логика уж очень запутанна, паренты, чилды...

Хе-хе ... что может быть удобнее родного синтаксиса css? ))

избавился от половины ненужных вещей, в итоге на чистом JS код не на много длиннее.

Да, тяжеловат.

jQuery разжижает мозг, ну его нафиг

И экономит время

Great Rash · June 3, 2011

Хе-хе ... что может быть удобнее родного синтаксиса css? ))

Я имел в виду данный конкретный код. И данное конкретное меню, а не jQuery вообще.

Да, тяжеловат.

На то он и чистый код, а не фреймворк... Smarty-код наверное полегче будет чем чистый PHP, ну и так везде.

И экономит время

А вот это когда как...

Vlad · June 3, 2011

Что стало причиной отказаться от jQuery?

Мне нужно использовать некоторые функции на форуме, где jQuery нет.

Shift-Web · June 4, 2011

Хе-хе ... что может быть удобнее родного синтаксиса css? ))
Я имел в виду данный конкретный код. И данное конкретное меню, а не jQuery вообще.
Да, тяжеловат.
На то он и чистый код, а не фреймворк... Smarty-код наверное полегче будет чем чистый PHP, ну и так везде.
И экономит время
А вот это когда как...

Стараюсь изучать жабакод в чистом виде, но он мне нужен для AJAX. А чистый AJAX на натив-жабе, это не сказать чтобы удобно и компактно. Насчёт смарти -- спорный вопрос(не люблю его почему то).

Great Rash · June 6, 2011

А чистый AJAX на натив-жабе, это не сказать чтобы удобно и компактно.

А jQuery типа не на "натив-жабе" написан

Ничто не мешает написать свой фреймворк и юзать его.

Sign In

Отход от jQuery

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information