jquery怎么写重置按钮的功能

其实我们在写前端页面时，经常会遇到一些前端页面写重置功能，那么什么是重置呢？

其实很简单，你点击百度搜索框，输入你的姓名，假设百度前端工程师要写一个重置的按钮，那么当他点击重置，那么你的姓名不见了这就是重置，所以你的思路应该是：

1）寻找你的按钮，并写入点击事件

2）你在点击后，找到百度搜索框，把它里面内容清空

下面我结合我公司的项目介绍关于重置的做法

工具/原料

jquery

方法/步骤

1

第一步写入jquery库

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title></title>

<link rel="stylesheet" href="../../css/mui.min.css" />

<script src="../../js/jquery.js"></script>



<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />

<script type="text/javascript" src="../../js/mui.min.js"></script>

<style>

.pos_abs {

position: absolute;

bottom: 0px;

right: 0px;

}

.mui-aside {}

.search_condition {

list-style: none;

font-size: 0;

text-align: center;

}

.search_condition li {

display: inline-block;

vertical-align: middle;

width: 25%;

padding: 15px 0;

font-size: 14px;

line-height: 1;

border-bottom: 1px solid #dbdbdb;

}

.active{

color:#fe355c;

}

aside #box{

margin-top:30px;

width:70px;

height:30px;

line-height: 30px;

}

aside #box{

margin-top:30px;

width:70px;

height:30px;

line-height: 30px;

}

</style>

</head>

<body>

<div class="search_wrap pos_rel">

<input type="search" class="product_search" placeholder="请输入商品名称">

<span class="search_icon pos_abs">

<span class="iconfont icon-fangdajing"></span>

</span>

</div>

<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">



<div class="mui-inner-wrap">



<aside class=" mui-off-canvas-right mui-aside" id="offCanvasSide" style="background: #fff;">

<div id="offCanvasSideScroll1" class="mui-scroll-wrapper">

<div class="mui-scroll">



<div class="aside_content">

<span>价格区间:</span><input type="text" id="box" class="pox" />-<input type="text" id="box" class="pox"/>

</div>

</div>

<div class="aside_bottom pos_abs">



<span class=" btn_reset">重置</span>

<span class=" btn_submit">确定</span>

</div>

</div>

</aside>



<div id="offCanvasContentScroll" class=" mui-content mui-scroll-wrapper">

<div class="mui-scroll">



<ul class="search_condition">

<li class="condition_list active" data-type="all" data-sort="desc">综合排序</li>

<li class="condition_list" data-type="sel" data-sort="desc">销量优先</li>

<li class="condition_list updown_condition" data-type="pri" data-sort="asc">价格<span class="iconfont icon-paixu"></span></li>

<li id="offCanvasShow" class="condition_list filter_btn">筛选<span class="iconfont icon-shaixuan"></span></li>

</ul>

</div>

</div>

</div>

<script>

$(function() {

//重置功能的写法

//测滑容器的实现和原理



var offCanvasWrapper = mui('#offCanvasWrapper');

console.log(offCanvasWrapper);

var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');

console.log(offCanvasInner);

var offCanvasSide = document.getElementById("offCanvasSide");

//开启、关闭侧滑

mui(".mui-off-canvas-wrap").on("tap", "#offCanvasShow", function() {

offCanvasWrapper.offCanvas('close');

})

/* mui(".mui-off-canvas-wrap").on("tap", "#offCanvasHide", function() {

offCanvasWrapper.offCanvas('close');

})*/

});

</script>

</body>

</html>
2

第二步寻找你的按钮，并写入点击事件

我们在上面的代码里面找到重置，代码如下：

$(".btn_reset").on('click',function(){

});

具体代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title></title>

<link rel="stylesheet" href="../../css/mui.min.css" />

<script src="../../js/jquery.js"></script>

<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />

<script type="text/javascript" src="../../js/mui.min.js"></script>

<style>

.pos_abs {

position: absolute;

bottom: 0px;

right: 0px;

}

.mui-aside {}

.search_condition {

list-style: none;

font-size: 0;

text-align: center;

}

.search_condition li {

display: inline-block;

vertical-align: middle;

width: 25%;

padding: 15px 0;

font-size: 14px;

line-height: 1;

border-bottom: 1px solid #dbdbdb;

}

.active{

color:#fe355c;

}

aside #box{

margin-top:30px;

width:70px;

height:30px;

line-height: 30px;

}

aside #box{

margin-top:30px;

width:70px;

height:30px;

line-height: 30px;

}

</style>

</head>

<body>

<div class="search_wrap pos_rel">

<input type="search" class="product_search" placeholder="请输入商品名称">

<span class="search_icon pos_abs">

<span class="iconfont icon-fangdajing"></span>

</span>

</div>

<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">



<div class="mui-inner-wrap">



<aside class=" mui-off-canvas-right mui-aside" id="offCanvasSide" style="background: #fff;">

<div id="offCanvasSideScroll1" class="mui-scroll-wrapper">

<div class="mui-scroll">



<div class="aside_content">

<span>价格区间:</span><input type="text" id="box" class="pox" />-<input type="text" id="box" class="pox"/>

</div>

</div>

<div class="aside_bottom pos_abs">

<span class=" btn_reset">重置</span>

<span class=" btn_submit">确定</span>

</div>

</div>

</aside>



<div id="offCanvasContentScroll" class=" mui-content mui-scroll-wrapper">

<div class="mui-scroll">



<ul class="search_condition">

<li class="condition_list active" data-type="all" data-sort="desc">综合排序</li>

<li class="condition_list" data-type="sel" data-sort="desc">销量优先</li>

<li class="condition_list updown_condition" data-type="pri" data-sort="asc">价格<span class="iconfont icon-paixu"></span></li>

<li id="offCanvasShow" class="condition_list filter_btn">筛选<span class="iconfont icon-shaixuan"></span></li>

</ul>



</div>

</div>

</div>

<script>

$(function() {

//重置功能的写法--此处是你应该阅读的地方

$(".btn_reset").on('click',function(){

});

$("aside #box").on("input",function(){

console.log(!/^\d+$/.test($(this).val()));

if(!/^\d+$/.test($(this).val())) {

$(this).val($(this).val().replace(/[^\d]$/g, ""));

}

} )

//测滑容器的实现和原理

var offCanvasWrapper = mui('#offCanvasWrapper');

console.log(offCanvasWrapper);

var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');

console.log(offCanvasInner);

var offCanvasSide = document.getElementById("offCanvasSide");

//开启、关闭侧滑

mui(".mui-off-canvas-wrap").on("tap", "#offCanvasShow", function() {

offCanvasWrapper.offCanvas('close');

})

/* mui(".mui-off-canvas-wrap").on("tap", "#offCanvasHide", function() {

offCanvasWrapper.offCanvas('close');

})*/

});

</script>

</body>

</html>
3

第3步你在点击后，找到价格输入框，把它里面内容清空

代码如下：

$(".btn_reset").on('click',function(){

$(".pox").val(" ");

});

具体代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title></title>

<link rel="stylesheet" href="../../css/mui.min.css" />

<script src="../../js/jquery.js"></script>

<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />

<script type="text/javascript" src="../../js/mui.min.js"></script>

<style>

.pos_abs {

position: absolute;

bottom: 0px;

right: 0px;

}

.mui-aside {}

.search_condition {

list-style: none;

font-size: 0;

text-align: center;

}

.search_condition li {

display: inline-block;

vertical-align: middle;

width: 25%;

padding: 15px 0;

font-size: 14px;

line-height: 1;

border-bottom: 1px solid #dbdbdb;

}

.active{

color:#fe355c;

}

aside #box{

margin-top:30px;

width:70px;

height:30px;

line-height: 30px;

}

aside #box{

margin-top:30px;

width:70px;

height:30px;

line-height: 30px;

}

</style>

</head>

<body>

<div class="search_wrap pos_rel">

<input type="search" class="product_search" placeholder="请输入商品名称">

<span class="search_icon pos_abs">

<span class="iconfont icon-fangdajing"></span>

</span>

</div>

<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">



<div class="mui-inner-wrap">



<aside class=" mui-off-canvas-right mui-aside" id="offCanvasSide" style="background: #fff;">

<div id="offCanvasSideScroll1" class="mui-scroll-wrapper">

<div class="mui-scroll">



<div class="aside_content">

<span>价格区间:</span><input type="text" id="box" class="pox" />-<input type="text" id="box" class="pox"/>

</div>

</div>

<div class="aside_bottom pos_abs">

<span class=" btn_reset">重置</span>

<span class=" btn_submit">确定</span>

</div>

</div>

</aside>



<div id="offCanvasContentScroll" class=" mui-content mui-scroll-wrapper">

<div class="mui-scroll">



<ul class="search_condition">

<li class="condition_list active" data-type="all" data-sort="desc">综合排序</li>

<li class="condition_list" data-type="sel" data-sort="desc">销量优先</li>

<li class="condition_list updown_condition" data-type="pri" data-sort="asc">价格<span class="iconfont icon-paixu"></span></li>

<li id="offCanvasShow" class="condition_list filter_btn">筛选<span class="iconfont icon-shaixuan"></span></li>

</ul>



</div>

</div>

</div>

<script>

$(function() {

//重置功能的写法

$(".btn_reset").on('click',function(){

$(".pox").val(" ");

});

$("aside #box").on("input",function(){

console.log(!/^\d+$/.test($(this).val()));

if(!/^\d+$/.test($(this).val())) {

$(this).val($(this).val().replace(/[^\d]$/g, ""));

}

} )

//测滑容器的实现和原理

var offCanvasWrapper = mui('#offCanvasWrapper');

console.log(offCanvasWrapper);

var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');

console.log(offCanvasInner);

var offCanvasSide = document.getElementById("offCanvasSide");

//开启、关闭侧滑

mui(".mui-off-canvas-wrap").on("tap", "#offCanvasShow", function() {

offCanvasWrapper.offCanvas('close');

})

/* mui(".mui-off-canvas-wrap").on("tap", "#offCanvasHide", function() {

offCanvasWrapper.offCanvas('close');

})*/

});

</script>

</body>

</html>

注：

你里面如果有什么标签显示高亮，你要去掉方法也是一样

$("找到你要找到的对象 .active").removeClass("active")

jquery怎么写重置按钮的功能

工具/原料

方法/步骤

猜你喜欢