Question

这个jQuery代码是否可以作为独立的javascript运行？这是我想在我的项目中使用的唯一的javascript，所以我不想为这个1k脚本加载整个jquery库。

//chris coyier's little dropdown select-->

$(document).ready(function() {

//build dropdown
$("<select />").appendTo("nav.primary");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");  

// Populate dropdowns with the first menu items
$("div#brdmenu ul li a").each(function() {
    var el = $(this);
    $("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
    }).appendTo("nav.primary select");
});

//make responsive dropdown menu actually work           
$("nav.primary select").change(function() {
    window.location = $(this).find("option:selected").val();
});

});

我试图找到以前的答案，但大多数问题都是转换为jquery而不是反之亦然：）

Answer 1

显然可以用直接的javascript做这些事情，但是没有办法（我知道）自动进行转换。您必须逐行完成并自行进行转换。

Answer 2

顺便说一句。

我遗漏的一件事是 $（document）.ready ，但是有很多解决方案可用于stackoverflow。这是一个惊人的大量代码！

但其他功能：

// build the dropdown
var selectElement = document.createElement('select');
var primary = document.getElementsByClassName('primary')[0];

// create a default option and append it.
var opt = document.createElement('option');
var defaultOpt = opt.cloneNode(false);
defaultOpt.selected = true;
defaultOpt.value = "";
defaultOpt.text = "Go to...";
selectElement.appendChild(defaultOpt);

// populate the dropdown
var brdmenuUl = document.getElementById('brdmenu').getElementsByTagName('ul')[0];
var listItems = brdmenuUl.getElementsByTagName('li');
for(var i=0; i<listItems.length; i++){
    var li = listItems[i];
    var a = li.getElementsByTagName('a')[0];
    var newOpt = opt.cloneNode(false);
    newOpt.value = a.href;
    newOpt.text = a.innerHTML;
    selectElement.appendChild(newOpt);
}

// now listen for changes
if(selectElement.addEventListener){
    selectElement.addEventListener('change', selectJump, false);
}
else if(selectElement.attachEvent){
    selectElement.attachEvent('change', selectJump);
}

function selectJump(evt){
    window.location = evt.value;
}

primary.appendChild(selectElement);

一些笔记！

我们不是专门针对nav.primary，我们只是发现第一次出现类.primary。为获得最佳性能，您应该为该元素添加ID并使用 getElementById 。
与#brdmenu中的列表类似，我们会在每个LI中查找第一个 UL和第一个 A.这不是jQuery的功能，如果你需要在#brdmenu中迭代多个UL，你可以使用另一个for循环。

我认为应该都可行，但有一个小提琴here

Answer 3

这与市场的答案类似。我假设您想要获取 brdmenu 元素内的UL元素中的所有链接。如果您只想要LI元素的第一个链接，只需调整获取它们的循环。

此外，这不是一个好主意。使用链接的选择元素很久以前已经过时了，用户更喜欢真正的链接。此外，当在IE中使用光标键导航选项时，每次选择不同的选项时都会调度更改事件，因此用户只能在被送到该位置之前选择下一个选项。更好的是在选择位置后添加他们按下的“开始”按钮。

主要的变化是使用ID来获取 nav.primary 元素，我假设这是一个你应该通过ID获取的单个元素。

function doStuff() {

    function getText(el) {
      return el.textContent || el.innerText;
    }
    var div, link, links, uls;

    // Use an ID to get the nav.primary element
    var navPrimary = document.getElementById('navPrimary');

    // Create select element and add listener
    var sel = document.createElement('select');
    sel.onchange = function() {
      if (this.selectedIndex > 0) {  // -1 for none selected, 0 is default
        window.location = this.value;
      }
    };

    // Create default option and append to select
    sel.options[0] = new Option('Go to...','');
    sel.options[0].setAttribute('selected','');

    // Create options for the links inside #brdmenu
    div = document.getElementById('brdmenu');
    uls = div.getElementsByTagName('ul');

    for (var i=0, iLen=uls.length; i<iLen; i++) {
      links = uls[i].getElementsByTagName('a');

      for (var j=0, jLen=links.length; j<jLen; j++) {
        link = links[j];
        sel.appendChild(new Option(getText(link), link.href));
      }
    }

    // Add select to page if found navPrimary element
    if (navPrimary) {
      navPrimary.appendChild(sel);
    }
}

window.onload = doStuff;

只有28行实际代码，比原版仅多10行，不需要任何支持库，应该可以在任何正在使用的浏览器中使用（大部分都不是）。

将jQuery脚本转换为独立的javascript

3 个答案: