快捷導(dǎo)航

jquery實(shí)現(xiàn)搜索框常見(jiàn)效果的方法

更新時(shí)間：2015年01月22日 10:52:38 投稿：shichen2014

這篇文章主要介紹了jquery實(shí)現(xiàn)搜索框常見(jiàn)效果的方法,可實(shí)現(xiàn)搜索框文字顯示效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)搜索框常見(jiàn)效果的方法。分享給大家供大家參考。具體實(shí)現(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'});

   }

  });

  //光標(biāo)離開(kāi)搜索框時(shí)

  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>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

setInterval與clearInterval的使用示例代碼
本篇主要是對(duì)setInterval與clearInterval的使用示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
jQuery插件實(shí)現(xiàn)表格隔行換色且感應(yīng)鼠標(biāo)高亮行變色
實(shí)現(xiàn)表格隔行換色，且感應(yīng)鼠標(biāo)行變色的方法有很多，在本文將為大家介紹的是使用jQuery插件來(lái)實(shí)現(xiàn)，具體如下，感興趣的朋友可以練練手
2013-09-09
jQuery Mobile彈出窗、彈出層知識(shí)匯總
本文給大家介紹jquery mobile彈出窗、彈出層知識(shí)匯總，涉及到j(luò)query mobile彈出相關(guān)知識(shí)，本文寫(xiě)的非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2016-01-01
jquery實(shí)現(xiàn)漂浮在網(wǎng)頁(yè)右側(cè)的qq在線(xiàn)客服插件示例
很實(shí)用的一款QQ在線(xiàn)客服代碼，點(diǎn)擊QQ圖標(biāo)，可直接與客服對(duì)話(huà)，詳細(xì)如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
2013-05-05
基于jQuery的試卷自動(dòng)排版系統(tǒng)實(shí)現(xiàn)代碼
題目提干、選擇題的選項(xiàng)、說(shuō)明文字可以包含多媒體信息（文字、圖片、列表、表格、視頻等等……）。
2011-01-01
jQuery寫(xiě)的日歷(包括日歷的樣式及功能)
本代碼將實(shí)現(xiàn)以下樣式及功能：日歷標(biāo)題背景色、日歷標(biāo)題字體色、日歷背景色、日歷字體色、假日字體色、背景水印色、是否顯示上月和下月的日期，感興趣的朋友可以了解下哈
2013-04-04
jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)
本篇文章主要介紹了jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
jQuery實(shí)現(xiàn)凍結(jié)表頭的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)凍結(jié)表頭的方法,實(shí)例分析了jQuery擴(kuò)展方法的實(shí)現(xiàn)技巧及固定表格樣式的方法,需要的朋友可以參考下
2015-03-03
jQuery源碼分析之init的詳細(xì)介紹
在閱讀本文之前，相信大家對(duì) jQuery 的總體架構(gòu)已經(jīng)了解了，這一篇文章主要來(lái)介紹 jQuery 的入口函數(shù) jQuery.fn.init。有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-02-02
JQuery異步post上傳表單數(shù)據(jù)標(biāo)準(zhǔn)化模板
這篇文章主要介紹了JQuery異步post上傳表單數(shù)據(jù)標(biāo)準(zhǔn)化模板，主要分享詳細(xì)的代碼，具有一的的知識(shí)參考性，需要的小伙伴可以參考一下
2022-02-02