思路:先用form表单写出input和button
通过js监听两个button,去百度就把name改成wd,把action改为百度的,谷歌同理
这样通过修改form的属性,就可以做到一个input两个按钮就可以用两个搜索引擎搜索
<form class="searchForm" method="get"
action="https://www.baidu.com/s">
<!-- action和input 的name属性都会被js覆盖掉,这里写上是为了即使js的函数挂了依然可以用百度搜索,函数正常的情况下不写也可以运行 -->
<input class="searchInput" type="text" name="wd" placeholder="请输入关键词" />
<button class="baiDuSearch" type="submit">百度</button>
<button class="googleSearch" type="submit">谷歌</button>
</form>
$(".baiDuSearch").click(function () {
$(".searchForm").attr('action', 'https://www.baidu.com/s'); //jQuery的attr方法可以覆盖一个属性
//这里是把form标签的action属性修改为https://www.baidu.com/s
$(".searchInput").attr('name', 'wd'); //通过jquery为name属性赋值
$(".searchForm").submit(); //提交class为searchForm的表单
})
$(".googleSearch").click(function () {
$(".searchForm").attr('action', 'https://www.google.com.hk/search'); //通过jquery为action属性赋值
$(".searchInput").attr('name', 'q'); //通过jquery为name属性赋值
$(".searchForm").submit(); //提交class为searchForm的表单
})