如何将jquery转换为javascript
Posted
技术标签:
【中文标题】如何将jquery转换为javascript【英文标题】：how to convert jquery to 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 【参考方案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()。以上是关于如何将jquery转换为javascript的主要内容，如果未能解决你的问题，请参考以下文章