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程序設計有所幫助。
相關文章
jquery tablesorter.js 支持中文表格排序改進
之前研究過一下表格排序。上網(wǎng)找了一些代碼研究了一下。勉強做了一個用著。后面發(fā)現(xiàn)當動態(tài)給單元格加超鏈接,或者列中存在一些空白,就排序不了了。2009-12-12詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
這篇文章主要介紹了詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用,jQuery庫和Ajax異步結構以及JSON數(shù)據(jù)傳輸也是JS日常編程中最常用到的東西,需要的朋友可以參考下2015-08-08jQuery+canvas實現(xiàn)的球體平拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實現(xiàn)的球體平拋及顏色動態(tài)變換效果,通過jQuery結合html5的canvas技術調用時間函數(shù)實時進行數(shù)學運算,最終實現(xiàn)球體平拋及顏色動態(tài)變換的效果,需要的朋友可以參考下2016-01-01jQuery學習筆記(2)--用jquery實現(xiàn)各種模態(tài)提示框代碼及項目構架
想實現(xiàn)一個模態(tài)的框框,找了很多的jquery插件,都沒有碰到自己滿意的于是自己摸索了一個,接下來為大家介紹下實現(xiàn)的思路及代碼,希望對你有所幫助2013-04-04淺談JQ中mouseover和mouseenter的區(qū)別
下面小編就為大家?guī)硪黄獪\談JQ中mouseover和mouseenter的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。2016-09-09jQuery 1.9.1源碼分析系列(十四)之常用jQuery工具
這篇文章主要介紹了jQuery 1.9.1源碼分析系列(十四)之常用jQuery工具的相關資料,需要的朋友可以參考下2015-12-12