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>
</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>
</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")