Внутренняя ошибка сервера

M>На сайте теперь полная версия. Поднимаю наверх в надежде на оценки

$$("table").each(function(table){
  Selector.findChildElements(table, ["tr"])
    .findAll(function(row,i){ return i % 2 == 1; })
    .invoke("addClassName", "odd");
});

$$('#xxx tr:nth-child(odd)').each(function(el) {
    el.addClassName("odd");
});

$("tr:nth-child(odd)").addClass("odd");

$('#myid').css({
    backgroundColor: "#888",
    color: "gray",
    width: "100px"
})

var el = document.getElementById('myid');
el.style.backgroundColor = "#888";
el.style.color = "gray";
el.style.width = "100px";

$("<input id='textBox' type='text'/>" +
  "<input id='textBox' type='text'/>" +
  "<input id='textBox' type='text'/>").insertAfter("#something");

$("#textBox")[0].val("one");
$("#textBox")[1].val("two");
$("#textBox")[2].val("three");

$("#textBox")[1].val("two");

$("<input class='textBox' type='text'/>" +
  "<input class='textBox' type='text'/>" +
  "<input class='textBox' type='text'/>");

alert($(".textBox").length); // 3 штуки.

$("<input class='textBox' type='text'/>" +
  "<input class='textBox' type='text'/>" +
  "<input class='textBox' type='text'/>").insertAfter("#something");

$(".textBox:first").val("one");
$(".textBox:eq(1)").val("two");
$(".textBox:nth(2)").val("three");

В результате мы получим вот такой HTML:

<p><span>Ahoy</span>, how are you?<p>I'm fine</p></p>

M> Это я стандарты не люблю

<p>
  <p>text</p>
</p>

<p/>
<p>text</p>
<p/>

I>Я не критикую мне просто интересно — реально удобно чтоли? вот не понимаю я зачем изобретать все вермя велосипед. использовать различные СВОИ шаблонизаторы вместо xslt+xml, использовать фреймворки для JS. зачем?

// находим все элементы с class="ex" (это ссылки)
// и присваиваем им в onclick функцию
$(".ex").click(
    function() // при клике по ссылке с class=".ex" будет вызвана эта функция
    {
        var a = $(this);

        // показываем элемент с id="loader"
        $("#loader").show("fast");      

        // находим элемент с id="example"
        $("#example") 
            .animate({height: "hide"}, "fast") // прячем его
            .find("#anchors").empty()          // в нем находим элемент с id="anchors" и очищаем его контент
            .end()                             // возвращаемся к элементу с id="anchors"
            .find("div").remove()              // находим все div'ы (внутри элемента с id="example") и удаляем их
            .end()                             // возвращаемся к элементу с id="anchors"
            .animate(                          // прячем (опять? видать баг в коде :) )
                {height: "hide"},          //   схлопываем по высоте
                "fast",                    //   быстро
                function()                 //   по завершении вызываем функцию, в которой
                {
                    // берем значение из аттрибута href кликнутой ссылки
                    // и подгружаем с этой ссылке контент с помощью ajax'а
                    $.get(a.attr("href") + "?" + Math.random(), handleResponse);
                }
            );

        return false;
    }
);

// находим все элементы с классом ex и присваиваем им onclick
$(".ex").click(...

// аналог
var a = getElementsByTagName("a");
for(i = 0; i < a.length; i++)
{
    if(a.className == "ex")
    {
        a.onclick = ...
    }
}

// находим все элементы div внутри элемента с id="example"
$("#example").find("div")

// аналог
?????????

M>Что такое стандартные контролы в стандартной обвязке?

M>Что за свои шаблонизаторы? В статье об этом ни слова

M>// находим все элементы с классом ex и присваиваем им onclick
M>$(".ex").click(...

M>// аналог
M>var a = getElementsByTagName("a");
M>for(i = 0; i < a.length; i++)
M>{
M>    if(a.className == "ex")
M>    {
M>        a.onclick = ...
M>    }
M>}
M>

 function GetElementByProp( o, prop, propval ) {
  GetElementByProp.GEBarr = [];
  GetElementByProp.GEBprop = prop;
  GetElementByProp.GEBpropval = null;
  return GetElementByProp.internal( o )
 }

 function GetElementByProp.internal( o ) {
  if ( o.getAttribute && o.getAttribute( GEBprop ) == GEBpropval ) GetElementByProp.GEBarr.push( o );
  o = o.firstChild;
  while ( o != null ) {
   GetElementByProp.internal( o );
   o = o.nextSibling;
  }
 }

M>Решение занимает четыре строчки. Для того, чтобы его написать, мне понадобилось меньше пяти минут. И так — во всем

$("#myid > div")
$(".articles div:nth(odd)")

M>>Что такое стандартные контролы в стандартной обвязке?

M>>Что за свои шаблонизаторы? В статье об этом ни слова

I> function GetElementByProp.internal( o ) {
скип...
I> }

I>

    $(document).ready(
        function() {
            $("#blocks tr") // находим все tr внутри элемента с id="blocks"
                .hover(
                    function() {  // onmouseover
                        var t = $(this);
                        if(t.attr('class') != 'selected')
                            t.css("background-color", "#efefef");
                        else
                            t.css("background-color", "#FFFF66");
                    },
                    function() { // onmouseout
                        var t = $(this);
                        if(t.attr('class') != 'selected')
                            t.css("background-color", "#fff");
                        else
                            t.css("background-color", "#FFFF99");
                    }
                )
                .click( // onclick
                    function() {
                        var t = $(this);
                        t.toggleClass('selected');
                        if(t.attr('class') == 'selected')
                            t.css("background-color", "#FFFF66");
                    }
                );
        }
    )

M>>Решение занимает четыре строчки. Для того, чтобы его написать, мне понадобилось меньше пяти минут. И так — во всем

M>>Полный XPath поддерживать сложно, потому что все это — эмуляция, так как браузеры не обеспечивают нативную поддержку ни XPath ни CSS selectors

I>есть полная реализация на js XPath 1.0 100k

M>>Это всяко будет медленнее, чем getElementById

$('#example > div')
// vs.
GetElementByProp( document.body, "id", "example" )[0].getElementsByTagName("div")

$('a.clicker').click(
    function(){
        alert('yo');
    }
)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>

<div><div><div class="ext">asasd</div></div></div>
<div class="ext"></div>

<script language="javascript">
    function TreeGo( o, func ) {
        while ( o != null ) {
            func( o );
            if ( o.firstChild != null ) TreeGo( o.firstChild, func );
            o = o.nextSibling;
        }
    }

    TreeGo(
        document.body, 
        function( o ) {
            o.toString;
        }
    );

    function getPrimitive( o ) {
        var t = "";
        for ( var i in o ) i != "innerHTML" && i != "outerHTML" && ( ""+o[i] ).indexOf("function") < 0 ? t += i + "=" + o[i] + "," : "";
        return t;
    }

    var arr = [];
    TreeGo( 
        document.body,
        function( o ) {
            if ( /(classname *?= *?ext.*?tagname *?= *?div)|(tagname *?= *?div.*classname *?= *?ext)/i.test( getPrimitive( o ) ) ) arr.push( o );
        }
    );


    for ( i = 0; i < arr.length; i++ ) alert( arr[i].tagName + " " + arr[i].className );
</script>


</body>
</html>

<div><div><div class="myclass ext">asasd</div></div></div>
<div class="ext"></div>
<div class="extile"></div>

$('p.content').hide();

// Do a quick check for the existence of the actual ID attribute
// to avoid selecting by the name attribute in IE
// also check to insure id is a string to avoid selecting an element with the name of 'id' inside a form

if ( (jQuery.browser.msie||jQuery.browser.opera) && oid && typeof oid.id == "string" && oid.id != m[2] )
    oid = jQuery('[@id="'+m[2]+'"]', elem)[0];

Не смеши мои тапочки. XPath он регекспом реализовал. Для некоторых частных примитивных случаев действительно можно применить регексп. (хотя даже аналог p[class="content"] ты уже заколебешься регекспом воспроизводить). А дальше что? Напомню, регексп работает с текстом, а не с DOM. Как ты собрался доступ к элементу получать? Ну вот покажи мне, как на регекспах спрятать (display=none) все P c классом content.

$('.className') // один набор элементов
$('div > p') // другой набор элементов

$('#myelem').find('span :nth(odd)') // третий и четвертый набор

if ( /(classname *?= *?ext.*?tagname *?= *?div)|(tagname *?= *?div.*classname *?= *?ext)/i.test( getPrimitive( o ) ) )

$('.className')

M>>На RSDN есть правило — не оскорблять собеседников. Особенно, если собеседник — модератор

M>>В этом сила jQuery — как думается, так и пишется

M>>Эээ нет. $("#elem").hide() во-первых проще, во-вторых быстрее в написании, в третьих на .01ms медленнее, чем, скажем, getElementById('elem').style.display = 'none'. Зачем мне использовать второе, если можно использовать первое?

M>>Задачи быстро перестают быть базовыми. Структура документа может быть изменена радикально (а что, прришел новый дизайнер и все переиграл ). Гораздо легче изначально использовать инструмент, требующий минимум усилий для изменения поведения. Сравним:

M>>if ( /(classname *?= *?ext.*?tagname *?= *?div)|(tagname *?= *?div.*classname *?= *?ext)/i.test( getPrimitive( o ) ) )
M>>

// This may seem like some crazy code, but trust me when I say that this
// is the only cross-browser way to do this. --John
isFunction: function( fn ) {
    return !!fn && typeof fn != "string" && !fn.nodeName && 
        fn.constructor != Array && /function/i.test( fn + "" );
},

// IE elem.getAttribute passes even for style (getAttribute работает даже для стилей)

// IE actually uses filters for opacity

// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level

// Note that you can't set the name property of input elements in IE.
// Use $(html) or .append(html) or .html(html) to create elements
// on the fly including the name property.

M>>Он имеет право понты кидать, поверь

M>>Область применения — везде, где нужна работа с DOM'ом. Единственное, где его не стоит, наверное, применять — там, где суммарный вес сайта меньше, чем библиотека в зазипованном виде

M>>Поверь мне, придется Особенно интересно это выглядит, когда таблица вдруг заменяется табличной версткой. Тогда никакими id не отмашешься

<table id="checkout_grid">
    <tr>
        <td>
            <input type="checkbox" id="#ID#" value="#ID#" />
        </td>
        <td> ... описание и еще много td - с ценой и т.п.</td>
    </tr>
    <!--- еще много таких tr - по одному на каждый предмет --->
</table>
<input type="button" id="step2" value="Step 2 >>" style="display: none" />

// все равно, что body.onload, но круче.
// срабатывает, когда DOM уже готов, но прорисовка
// не обязательно завершилась
$document.ready(
    function() {
        // находим все checkbox'ы в checkout_grid
        // и присваиваем им onclick

        $("#checkout_grid input:checkbox").click(
        function() {
            // инициализируем счетчик
            var c = 0;

            // смотрим, сколько у нас отмеченных чекбоксов
            $("#checkout_grid input:checkbox").each(
                function(){
                    if(this.checked) c++;
                }
            )

            // если отмеченных чекбоксов нет, прячем кнопку "Step 2 >>"
            if(c > 0)
                $("#step2").show();
            else
                $("#step2").hide();
        }
    );
    }
);

<html><head><script type="text/javascript" language="JavaScript" src="../jquery.pack.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
    $('#test').click(function () {
        $.post('ajaxtest2.php', {}, onAjaxSuccess);
        
        function onAjaxSuccess(xml) {
          items = $("item", xml);
          item = $("#1", xml);
          item2 = $("item[@id='2']", xml);
          alert(item2.html());  //undefined, также как и остальные свойства объекта item2
        }
    });
});
</script></head>
<body><form><input type="button" id="test" value="go" /></form></body></html>

<?php
  header("Content-Type: text/xml; charset=utf-8");
?>
<list>
  <item id="1">
    Item 1 
  </item>
  <item id="2">
    Item 2 
  </item>
</list>

    alert(item2.html());  //undefined, также как и остальные свойства объекта item2

<html>
    <head>
        <script language="Javascript" type="text/javascript" src="/js/jquery-latest.js"></script>

        <script>
            $(document).ready(
                function() {
                    $(document.body).append('preved');
                }
            );
        </script>
    </head>
    <body>
    </body>
</html>

Для начала – решение на чистом Javascript:

var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ ) {
var rows = tables[t].getElementsByTagName("tr");
for ( var i = 1; i < rows.length; i += 2 )
if ( !/(^|s)odd(s|$)/.test( rows[i].className ) )
rows[i].className += " odd";
}

Ну а теперь – jQuery:

$("tr:nth-child(odd)").addClass("odd");

Как видно из этого примера, библиотека jQuery позволяет находить простые и изящные решения для, казалось бы, сложных задач.

Я, конечно, понимаю, что пример натянут, но вы что, серъёзно считаете, что это корректное сравнение??? За этой 1-ой строчкой стоит полновесный скрипт, создание десятков функций, сто с лишним вызовов при загрузке, ещё с десяток, если не больше вызовов непосредственно при исполнении этой конкретной задачи.

Я специально акцентирую внимание на "вызовах" и их количестве, чтобы подчеркнуть теневую активную работу скрипта, да и сам по себе вызов функции — не самое простое, что есть в javascript. В общем, по сравнению с приведённым вами примером "чистого" javascript-a, решение от jQuery намного сложнее, в тени остаётся масса работы (большая часть из которой не имеет вообще никакого отношения к вышеупомянутой задаче)...

$("div.contentToChange")  // находим div с class="contentToChange"
    .find("p")            // в этом div находим все p
    .not(".alert")        // которые не имеют class="alert"
    .append(              // добавляем текст
        "<strong class=\"addedtext\"> This text was just appended to this paragraph</strong>"
    )

В результате таких вот "рекламных кампаний в массы о простоте" фреймворки начинают пользовать почём зря, тултипчики показать, раскрасить чего и т.п., то есть там, где 10-20-30 строк понятного кода были бы уже достаточным (идеальным) решением.

// jQuery
$('a.ajax');

// аналог
var links = getElementsByTagName('a');
var selectedLinks = [];
for(i = 0; i < links.length; i++)
{
    // split потому что может быть class="ajax links other_class"
    elemClasses = links[i].className.split(/\s+/);
    if(inArray(elemClasses, "ajax") > -1)
    {
        selectedLinks.push(links[i]);
    }
}

// функция взята из jQuery
function inArray(a, и)
{
    for ( var i = 0, al = a.length; i < al; i++ )
        if ( a[i] == b )
            return i;

    return -1;
}

Z>Ну, значит, ещё хуже дела обстоят, чем я думал.

В результате таких вот "рекламных кампаний в массы о простоте" фреймворки начинают пользовать почём зря, тултипчики показать, раскрасить чего и т.п., то есть там, где 10-20-30 строк понятного кода были бы уже достаточным (идеальным) решением.

Z>и прекратите уже, наконец, хитро популизировать jQuery, выдавая вызовы неких функций за весь его код, это вводит в заблуждение ньюбов. Почитал туториалы, "New JavaScript", "magic сhaining", дичь какая-то... Если и сравнивать, так библиотеку против библиотеки, где более-менее равная функциональность, это полезно для профи, делающего выбор. Отдельные же задачи всегда выиграют по всем статьям, или говоря лозунгами — "Чистый javascript рулит!"...

ajaxPost(
    url,
    {params},
    callback
)

// jQuery
$('a.ajax');

// аналог
var links = getElementsByTagName('a');
var selectedLinks = [];
for(i = 0; i < links.length; i++)
{
    // split потому что может быть class="ajax links other_class"
    elemClasses = links[i].className.split(/\s+/);
    if(inArray(elemClasses, "ajax") > -1)
    {
        selectedLinks.push(links[i]);
    }
}

// функция взята из jQuery
function inArray(a, и)
{
    for ( var i = 0, al = a.length; i < al; i++ )
        if ( a[i] == b )
            return i;

    return -1;
}

При этом "ручками" мы теряем гибкость. Как только мы добавляем в код гибкость, мы получаем что? Правильно — jQuery, prototype.js, mochikit, dojo или какую иную библиотеку.

Что произойдет, когда "a.ajax" превратится в "#ajax a"?

Из всего этого следуют Правила большого пальца:
1. Все, что можно купить, нужно покупать (cюда же входит подбор бесплатных компонентов, при их наличии)
2. Все, что нельзя купить, нужно аутсорсить
3. Нельзя аутсорсить "core" — то, за что тебе платят деньги.

Т.е., если ты продаешь программу для бухгалтерии:
1. СУБД, компилятор, визуальные компоненты, инсталлер, хелп вьювер и т.п. — приобретаются
2. Документация, саппорт, скины, кастомные кофигурации — аутсорсятся.
3. Ядро пишется твоей командой высококлассных специалистов, проверяется твоей командой профессионального QA.

Сейчас большинство народу, не принявшего п.1, уже вышли из бизнеса. Сейчас идет освоение п.2.

$("a.ajax").click(
    function(){
        $.get(
            $(this).attr("href"),
            {},
            callback
        )
    }
);

function callback(result){
    $("#mydiv").append(result);
}

// IE likes to send both get and post data, prevent this

// Create the request object; Microsoft failed to properly
// implement the XMLHttpRequest in IE7, so we use the ActiveXObject when it is available

// Set the correct header, if data is being sent
// Set the If-Modified-Since header, if ifModified mode.

Z>Если я буду реализовать такую же функциональность, то я приду совершенно к другому результату, он может быть и хуже, а может и лучше, who knows. Единственное, что меня раздражает в твоём посыле — это то, что jQuery позиционируется, как сгусток идеальных простых решений, дескать, проще уже не бывает. Рискну предположить обратное.

Z>Что же за пренебрежение к ручкам-то? Я готов ко всему, было бы желание. Про "меньше кода не напишешь" повторюсь — сие нам не ведомо.

Лично мои задачи решаются проще мною же лично, как ты говоришь, ручками. И масса людей со мной солидарны, благо jQuery и проч. пока ещё не захватили мир (не удалось это ни DHTML библиотекам, не выйдет это и у нынешних новомодных)