html+jquery簡潔美觀的搜尋框
阿新 • • 發佈：2020-12-31
技術標籤：html簡單元件htmljqueryjscsscss3
html+jquery簡潔美觀的搜尋框
搜尋框效果圖：
HTML程式碼：
<div class="main">
<div class="pannel-div search">
<input type="text" class="in" id="in" placeholder="請輸入查詢內容" />
<button class=" jquery程式碼：
function showInput(){
var val = $("#in").val();
alert(val);
}
CSS樣式：
CSS樣式單獨為檔案，在html中引用，檔名為：inputt.css
.main{
width:100%;
}
.pannel-div{
width: 450px;
float: left;
height HTML+jquery+CSS完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html+jquery簡潔美觀的搜尋框</title>
<link rel="stylesheet" type="text/css" href="css/inputt.css">
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="pannel-div search">
<input type="text" class="in" id="in" placeholder="請輸入查詢內容" /><button class="btn_search" onclick="showInput()">搜尋</button>
</div>
</div>
<script type="text/javascript">
function showInput(){
var val = $("#in").val();
alert(val);
}
</script>
</body>
</html>