jQuery、React、Vue是目前前端開發中最常用的三個庫/框架。它們分別用于簡化DOM操作、創建高性能的用戶界面以及快速構建可維護的大型應用程序。下面我們將分別介紹它們的特點和優勢。

JavaScript代碼：
$(document).ready(function(){
$('button').click(function(){
$('p').hide();
});
});

首先，我們來看jQuery。jQuery是一個快速、簡潔的JavaScript庫，它封裝了DOM操作、事件處理、動畫效果等復雜的JavaScript代碼，使開發者能夠更快更便捷地完成頁面開發。上述代碼是一個簡單的jQuery代碼例子，它使用了文檔就緒函數將button的點擊事件與p標簽的隱藏事件綁定在一起。

JavaScript代碼：
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return(
<h1>Hello, React!</h1>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));

React是一個由Facebook開發的用戶界面庫，它采用了虛擬DOM和聲明式編程風格，可以高效地處理大型應用程序。上述代碼是一個簡單的React組件，它定義了一個App類，并重寫了render方法來返回一個帶有“Hello, React!”文本的h1元素。ReactDOM將該組件渲染到頁面中指定的root元素中。

JavaScript代碼：
<template>
<div>
<h1>{{message}}</h1>
<button v-on:click="changeMessage">Click Me!</button>
</div>
</template>
<script>
export default{
data(){
return{
message: 'Hello, Vue!'
}
},
methods:{
changeMessage(){
this.message = 'Vue is Awesome!';
}
}
}
</script>

最后，我們來看Vue。Vue是一個漸進式的JavaScript框架，它結合了易用性、高效性和靈活性，可以幫助開發者快速構建交互性應用。上述代碼是一個簡單的Vue組件，它定義了一個帶有message屬性的數據對象，并在頁面中使用雙花括號輸出該屬性的值。點擊按鈕時，changeMessage方法會將該屬性值修改為“Vue is Awesome!”。