Fatal编程技术网
  • javascript/
  • 代码仅限于纯Javascript；需要Jquery翻译吗

代码仅限于纯Javascript；需要Jquery翻译吗

javascript jquery

代码仅限于纯Javascript；需要Jquery翻译吗,javascript,jquery,Javascript,Jquery,所以，我正在为我的一个好朋友写一个网站。我知道纯JavaScript，但jQuery在我看来就像一团乱麻。我还没花时间学呢。不过，当我在互联网上找到某个函数时，我并不介意使用它。这就是发生的事情。当我找到它并用它在我构建的漫画阅读器上切换页面时，我非常高兴 我希望修改的代码在下面的一个工作示例中，如果jsFiddle死了，有人想要jsFiddle用户jtbowden提供这段很棒的代码 <html> <head> <script type="text/javascr

所以，我正在为我的一个好朋友写一个网站。我知道纯JavaScript，但jQuery在我看来就像一团乱麻。我还没花时间学呢。不过，当我在互联网上找到某个函数时，我并不介意使用它。这就是发生的事情。当我找到它并用它在我构建的漫画阅读器上切换页面时，我非常高兴

我希望修改的代码在下面的一个工作示例中，如果jsFiddle死了，有人想要jsFiddle用户jtbowden提供这段很棒的代码

<html>
<head>

<script type="text/javascript" src="./jquery-1.js"></script>

<script type="text/javascript">

$(window).load(function(){
$('.box').click(function() {

$(this).animate({
    left: '-50%'
}, 500, function() {
    $(this).css('left', '150%');
    $(this).appendTo('#container');
});

$(this).next().animate({
    left: '50%'
}, 500);
});
})

</script>

<style type="text/css">
body {
padding: 0px;    
}

#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 310px;
overflow: hidden; 
background-color:black; 
}

.box {
position: absolute;
width: 23%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 5px;
margin-left: -25%;
}

img.cover {
position:absolute;
display:block;
margin-left:5%;
margin-right:auto;
top:5%;
height:90%
}

img.cover:hover {
position:absolute;
display:block;
margin-left:auto;
margin-right:auto;
top:0%;
height:100%
}

#box1 {
background-color: green;
left: 30%;
}

#box2 {
background-color: yellow;
}

#box3 {
background-color: red;
}

#box4 {
background-color: orange;
}

#box5 {
background-color: blue;
}
</style>
</head>

<body>
<div id="container">
<div id="box1" class="box"></div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
</body>
</html>
然而，我的朋友不喜欢这个代码，因为他和我一样，不能阅读它。这是他的网站，他给我的薪水很高，所以他是老板。他要求我将这段代码从jQuery重写为纯JavaScript，这样他就可以理解它，这将允许他在将来需要或只是感觉需要时进行自己的更改。问题是，我不知道怎么做。我只是找到了我想要的代码，将其添加到站点，并编辑CSS以满足我的需要。我不知道这段代码是如何工作的，也不知道我需要做什么才能使它成为纯JavaScript

我告诉过他，但他没有退缩。我的网站仅限于纯JavaScript、HTML5和CSS3。他不会把剩下的钱付给我，直到这些钱被转换成纯JavaScript并且租金即将到期。所以，我希望有人能帮我重新发明轮子，并将jQuery代码转换成纯JavaScript

至少，您可以带我浏览一下jQuery库中的代码和位，并告诉我这到底在做什么，而不是移动left属性吗？它是如何显示动画的我拿它来说，这是。动画部分？我认为浏览器在中间跳过帧？

我、我的朋友以及最终我的房东都会感激我的帮助

提前谢谢

编辑：我用CSS动画重写了这个：

    <html>
    <head>

    <script type="text/javascript">
    function divSwitch(num) {
    var currentBox=document.getElementById("box"+num);
    if (num>=5) {
    num=0;
    }
    var nextBox=document.getElementById("box"+(num+1));

    var checkedButton = getCheckedRadio(document.forms.setOption.elements.aniOption);
    if (checkedButton) {
    switch(checkedButton.value) {
    case "R":
    currentBox.className="outFromRtL";
    nextBox.className="inFromRtL";
    break;

    case "L":
    currentBox.className="outFromLtR";
    nextBox.className="inFromLtR";
    break;  

    case "N":
    if (currentBox.className!="box") {
    for (var q=1; q<=5; q++) {
    var setBoxBack=document.getElementById("box"+q);
    setBoxBack.className="box";
    }
    }
    currentBox.style.left='-50%';
    nextBox.style.left='50%';
    break;

    default:
    alert("Well... That's not supposed to happen!  How did you break it!?");
    break;
    }
    }
    }

    function getCheckedRadio(radio_group) {
        for (var i = 0; i < radio_group.length; i++) {
            var button = radio_group[i];
            if (button.checked) {
                return button;
            }
        }
        return undefined;
    }
    </script>

    <style type="text/css">
        body {
        padding: 0px;    
    }

    #container {
        position: absolute;
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 310px;
        overflow: hidden; 
    background-color:black; 
    }

    .box {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 150%;
        top: 5px;
    }

    .inFromRtL {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: rightSlideIn;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes rightSlideIn {
          from {
            left:150%;
          }
          to {
            left:50%;
          }
    }

    .outFromRtL {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: -50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: rightSlideOut;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes rightSlideOut {
          from {
            left:50%;
          }
          to {
            left:-150%;
          }
    }

    .inFromLtR {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: leftSlideIn;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes leftSlideIn {
          from {
            left:-150%;
          }
          to {
            left:50%;
          }
    }

    .outFromLtR {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 150%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: leftSlideOut;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes leftSlideOut {
          from {
            left:50%;
          }
          to {
            left:150%;
          }
    }

    #box1 {
        background-color: green;
        left: 50%;
    }

    #box2 {
        background-color: yellow;
    }

    #box3 {
        background-color: red;
    }

    #box4 {
        background-color: orange;
    }

    #box5 {
        background-color: blue;
    }
      </style>
    </head>

    <body>
    <div id="container">
    <div id="box1" class="box" onclick="divSwitch(1);">Div #1</div>
    <div id="box2" class="box" onclick="divSwitch(2);">Div #2</div>
    <div id="box3" class="box" onclick="divSwitch(3);">Div #3</div>
    <div id="box4" class="box" onclick="divSwitch(4);">Div #4</div>
    <div id="box5" class="box" onclick="divSwitch(5);">Div #5</div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="animationOptions">
    <form id="setOption">
    <input type="radio" name="aniOption" id="L" value="L" checked="true">Left to Right
    <input type="radio" name="aniOption" id="R" value="R">Right to Left
    <input type="radio" name="aniOption" id="N" value="N">None
    </form>
    </div>
    </body>
    </html>
是的，它的代码多一点，但仍然只有5kb，我不需要75kb的jQuery文件。

有两种方法可以实现这一点，首先使用它可以向您展示特定方法和函数的源代码，另一种方法就是查看和研究，当某些模块或库没有好的文档时，我会这样做，正如Paul Irish所说的，它是面向专业人士的文档，因为您知道纯JavaScript，所以应该很容易阅读。希望这能有所帮助。

不可能让事情变得更简单。如果您解开jQuery，您会发现它背后的代码相对于您现在看到的非常复杂。查看jquery.com文档中的方法所做的事情会更容易。我会为你评论的

// when the window is loaded, do the code within
$(window).load(function() {
  // now i can assign events since the dom is loaded
  // but you could use $(document).ready instead

  // when any class with "box" is clicked, do the code within
  // this is binding a click event to all elements having a "box" class
  $('.box').click(function() {

    // animate the currently clicked "box" element
    $(this).animate({
      // move it left 50% and take 500 milliseconds to do it
      left: '-50%' 
    }, 500, function() {
      // the code here is called once the animation has completed
      // set the style to left 150%
      $(this).css('left', '150%');
      // put the box inside the element with id=container
      $(this).appendTo('#container');
    });

    // animate the element just next to the box element 
    // moving it left 50% taking 500 milliseconds to do it.
    $(this).next().animate({ left: '50%' }, 500);

  });

});
现在假设您必须使用setInterval和easing函数编写动画代码，更不用说跨浏览器事件了。将这段代码变得更加冗长和复杂，您可能会做类似的事情。

事件绑定和DOM操作可以相对轻松地进行转换，但在尝试使用本机JavaScript在所有浏览器中设置元素动画时会遇到很多问题。这些都是您不想担心的问题，以及为什么要使用jQuery这样的库。我个人认为，在更改为纯javascript后，它会变得更加复杂，因为它涉及到动画，而动画是jQuery的一个重要部分。此外，jQuery使事情变得更简单，代码也更短。如果您已经依赖HTML5/CSS3，那么您可以使用CSS转换，当您设置元素的样式属性时，这些转换将为元素设置动画。尽管如此，@Licson评论说，你很可能会失去可读性，而不是获得可读性。我并不担心所有浏览器，只担心Firefox。它必须在他的电脑上工作，这就是他使用的。如果他愿意，让他为其他人修改它。jQuery是一个javascript库，创建它是为了让这件事变得更容易。虽然用javascript编写它不是不可能的，但它肯定会更难理解。你们两个为什么不花点时间试着理解jQuery呢。好了：你能在没有动画的情况下将这段代码重写成纯JavaScript吗？把盒子换一下就行了？关键是要从别人告诉你的东西中学习，而不是让别人为你写。如果您自己无法grep jQuery代码，那么您必须问问自己是否应该这样做。