如何将此JavaScript转换为jQuery？

Question

我正在尝试将localStorage实现到我的一个项目中，但是我遇到了问题，因为这部分代码破坏了我的jQuery ui-layout。

function $(id) {
  return document.getElementById(id);
}

为了使布局有效，我必须添加$：

$(document).ready(function($) {

由于我不知道如何编写javascript或jquery，我只能实现它，下面的代码可以用我可以避免使用“function $（id）”部分和“$”的方式编写“？

以下是完整的代码：

// return value - this the prob?
function $(id) {
  return document.getElementById(id);
}

// write data to the local storage
function writeLocal() {
  var key = $('lsKey').value;
  var data = $('html').value;
  localStorage.setItem(key, data);
  updateItemsList();
}

// remove the item from localStorage
function deleteLocal(keyName) {
  localStorage.removeItem(keyName);
  updateItemsList();
}

// read the actual data for the key from localStorage
function readLocal(keyName) {
  $('lsKey').value = keyName;
  $('html').value = localStorage.getItem(keyName);
}

// allow retrieval of localStorage items
function updateItemsList() {  
  var items = localStorage.length;  
  var s = '<p>Saved Items</p>';
  s+= '<ul>';  
  for (var i=0; i<items; i++) {  
    var keyName = localStorage.key(i);
    s+= '<li class="lsdLI">' + 
        '<div style="float:right;">' + 
        '<input onClick="readLocal(\''+keyName+'\');"/>'+ 
        '<input onClick="deleteLocal(\''+keyName+'\');"/>'+
        '</div>'+
        '<b>'+keyName+'</b>' +
        '</li>';
  }

  $('lsValues').innerHTML = s + '</ul>';
}

// start by loading up whatever is persistant in localStorage

function load() {  
updateItemsList(); 
}  
window.onload = load; 

Answer 1

所以听起来你正在使用jquery UI并且它导致了冲突。最简单的方法就是重命名你正在使用的$便利功能...

// return value - this the prob?
function $$(id) {
  return document.getElementById(id);
}

// write data to the local storage
function writeLocal() {
  var key = $$('lsKey').value;
  var data = $$('html').value;
  localStorage.setItem(key, data);
  updateItemsList();
}

// remove the item from localStorage
function deleteLocal(keyName) {
  localStorage.removeItem(keyName);
  updateItemsList();
}

// read the actual data for the key from localStorage
function readLocal(keyName) {
  $$('lsKey').value = keyName;
  $$('html').value = localStorage.getItem(keyName);
}

// allow retrieval of localStorage items
function updateItemsList() {  
  var items = localStorage.length;  
  var s = '<p>Saved Items</p>';
  s+= '<ul>';  
  for (var i=0; i<items; i++) {  
    var keyName = localStorage.key(i);
    s+= '<li class="lsdLI">' + 
        '<div style="float:right;">' + 
        '<input onClick="readLocal(\''+keyName+'\');"/>'+ 
        '<input onClick="deleteLocal(\''+keyName+'\');"/>'+
        '</div>'+
        '<b>'+keyName+'</b>' +
        '</li>';
  }

  $$('lsValues').innerHTML = s + '';
}

// start by loading up whatever is persistant in localStorage

function load() {  
updateItemsList(); 
}  
window.onload = load;   

将你拥有的内容转换为jQuery并不难，只需从每个jQuery对象中抓取第一个项目。

// write data to the local storage
function writeLocal() {
  var key = $('lsKey')[0].value;
  var data = $('html')[0].value;
  localStorage.setItem(key, data);
  updateItemsList();
}

// remove the item from localStorage
function deleteLocal(keyName) {
  localStorage.removeItem(keyName);
  updateItemsList();
}

// read the actual data for the key from localStorage
function readLocal(keyName) {
  $('lsKey')[0].value = keyName;
  $('html')[0].value = localStorage.getItem(keyName);
}

// allow retrieval of localStorage items
function updateItemsList() {  
  var items = localStorage.length;  
  var s = '<p>Saved Items</p>';
  s+= '<ul>';  
  for (var i=0; i<items; i++) {  
    var keyName = localStorage.key(i);
    s+= '<li class="lsdLI">' + 
        '<div style="float:right;">' + 
        '<input onClick="readLocal(\''+keyName+'\');"/>'+ 
        '<input onClick="deleteLocal(\''+keyName+'\');"/>'+
        '</div>'+
        '<b>'+keyName+'</b>' +
        '</li>';
  }

  $('lsValues')[0].innerHTML = s + '';
}

// start by loading up whatever is persistant in localStorage

function load() {  
updateItemsList(); 
}  
window.onload = load;   

除了这两个选项之外，您还需要更多地更改代码以真正按照jQuery方式执行操作。而不是$（'lsKey'）。值将是$（'lsKey'）。val（）等。您必须更新代码以使用所有jQuery方法。

Answer 2

首先应定义函数，然后导入jquery库。然后，您可以拨打此电话

$.noConflict();

它将保持导入jquery之前的$变量。之后，您可以使用以下命令访问jquery：

  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });

所以你可以在该函数中使用jquery的$变量（或者你传递jQuery作为参数的任何函数）并在外面使用你自己的$变量。

您可以在此处详细了解该主题：http://api.jquery.com/jQuery.noConflict/