jquery實現(xiàn)搜索框常見效果的方法
更新時間：2015年01月22日 10:52:38 投稿：shichen2014
這篇文章主要介紹了jquery實現(xiàn)搜索框常見效果的方法,可實現(xiàn)搜索框文字顯示效果,非常具有實用價值,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)搜索框常見效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
var searchBox = $("#search");
searchBox.focus(function(){
if(searchBox.val() == this.title){
searchBox.val("").css({'font-style':'normal','color':'#000'});
}
});
//光標離開搜索框時
searchBox.blur(function(){
if(searchBox.val() == ""){
searchBox.val(this.title).css({'font-style':'italic','color':'#ccc'});
}
});
searchBox.blur();
});
</script>
</head>
<body>
<input id="search" type="text" title="search" value="" /><input type="submit" value="搜索" />
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
相關(guān)文章
setInterval與clearInterval的使用示例代碼
本篇主要是對setInterval與clearInterval的使用示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
jQuery插件實現(xiàn)表格隔行換色且感應鼠標高亮行變色
實現(xiàn)表格隔行換色，且感應鼠標行變色的方法有很多，在本文將為大家介紹的是使用jQuery插件來實現(xiàn)，具體如下，感興趣的朋友可以練練手2013-09-09
本文給大家介紹jquery mobile彈出窗、彈出層知識匯總，涉及到jquery mobile彈出相關(guān)知識，本文寫的非常不錯，具有參考借鑒價值，需要的朋友參考下吧2016-01-01
jquery實現(xiàn)漂浮在網(wǎng)頁右側(cè)的qq在線客服插件示例
很實用的一款QQ在線客服代碼，點擊QQ圖標，可直接與客服對話，詳細如下，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
基于jQuery的試卷自動排版系統(tǒng)實現(xiàn)代碼
題目提干、選擇題的選項、說明文字可以包含多媒體信息（文字、圖片、列表、表格、視頻等等……）。2011-01-01
本代碼將實現(xiàn)以下樣式及功能：日歷標題背景色、日歷標題字體色、日歷背景色、日歷字體色、假日字體色、背景水印色、是否顯示上月和下月的日期，感興趣的朋友可以了解下哈2013-04-04
jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)
本篇文章主要介紹了jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了jQuery實現(xiàn)凍結(jié)表頭的方法,實例分析了jQuery擴展方法的實現(xiàn)技巧及固定表格樣式的方法,需要的朋友可以參考下2015-03-03
在閱讀本文之前，相信大家對 jQuery 的總體架構(gòu)已經(jīng)了解了，這一篇文章主要來介紹 jQuery 的入口函數(shù) jQuery.fn.init。有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
JQuery異步post上傳表單數(shù)據(jù)標準化模板
這篇文章主要介紹了JQuery異步post上傳表單數(shù)據(jù)標準化模板，主要分享詳細的代碼，具有一的的知識參考性，需要的小伙伴可以參考一下2022-02-02