如何将jquery转换为javascript答案

【问题标题】：how to convert jquery to javascript如何将jquery转换为javascript
【发布时间】：2016-03-31 09:05:25
【问题描述】：

我在 jquery 中完全是假的，似乎有很多关于 jquery 和 JS 的问题与我的有关。但无论如何我会努力的。

我正在尝试创建一个使用 peerjs 框架的 WebRTC 视频聊天应用程序（peerjs 用于获取用于拨打电话的唯一 ID）。我找到了一个例子，只想使用 JS。这是代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.min.js"></script>

  <script>
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  var myStream;
  var peer = new Peer({key: 'peerJS key'});

  var setOthersStream = function(stream){
    $('#others-video').prop('src', URL.createObjectURL(stream));
  };

  var setMyStream = function(stream){
    myStream = stream;
    $('#video').prop('src', URL.createObjectURL(stream));
  };

  peer.on('open', function(id){
    $('#peer-id').text(id);
  });

  peer.on('call', function(call){
    call.answer(myStream);
    call.on('stream', setOthersStream);
  });

  $(function(){
    navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){});

    $('#call').on('click', function(){
      var call = peer.call($('#others-peer-id').val(), myStream);
      call.on('stream', setOthersStream);
    });
  });

  peer.on('error', function(e){
    console.log(e.message);
  });
  </script>
</head>

<body>
  <p>Your ID : <span id="peer-id"></span></p>
  <div id="dial">
    <input type="text" id="others-peer-id" placeholder="Enter ID whom you want to call" /><button id="call">Call</button>
  </div>

我猜带有'$'标记的字符串是jquery。

而不是 jquery 库：

我想使用 node.js 库中的 socket.io。而且我怀疑我必须使它与此绑定：

 <script type="text/javascript" src="/socket.io/socket.io.js"></script>

请指导我。任何帮助将不胜感激。

【问题讨论】：

JQuery 是 javascript。 blog.udemy.com/jquery-vs-javascript

标签： javascript jquery socket.io

【解决方案1】：

以下是 Javascript 代码，我尚未对其进行测试，但它应该可以正常工作。

<html>
    <head>
        <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> -->
        <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.min.js"></script>

        <script>
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

            var myStream;
            var peer = new Peer({
                key : 'peerJS key'
            });

            var setOthersStream = function(stream) {
                document.querySelector('#others-video').setAttribute('src', URL.createObjectURL(stream));
            };

            var setMyStream = function(stream) {
                myStream = stream;
                document.querySelector('#video').setAttribute('src', URL.createObjectURL(stream));
            };

            peer.on('open', function(id) {
                document.querySelector('#peer-id').textContent = id;
            });

            peer.on('call', function(call) {
                call.answer(myStream);
                call.on('stream', setOthersStream);
            });

            window.onload = (function() {
                navigator.getUserMedia({
                    audio : true,
                    video : true
                }, setMyStream, function() {
                });

                document.querySelector('#call').addEventListener('click', function() {
                    var call = peer.call(document.querySelector('#others-peer-id').value, myStream);
                    call.addEventListener('stream', setOthersStream);
                });
            });

            peer.on('error', function(e) {
                console.log(e.message);
            });
        </script>
    </head>

    <body>
        <p>
            Your ID : <span id="peer-id"></span>
        </p>
        <div id="dial">
            <input type="text" id="others-peer-id" placeholder="Enter ID whom you want to call" />
            <button id="call">
                Call
            </button>
        </div>
    </body>
</html>

下面是变化映射

.val() -> .value
.on() -> .addEventListener()
.prop() -> .setAttribute()
$("selector") -> document.querySelector("selector")
jQuery.ready -> window.onload

【讨论】：

非常感谢您的热情回复。但不得不说这行不通。
编辑了我的代码，现在可以使用了。您只需要替换其中的密钥即可。匆忙中我没有注意到 Peer 不是 DOM 元素，因此没有必要将 .on() 替换为 .addEventListener()。