html

                <div class="search">
<input type="text" id="inputSearch" class="" value="请输入商品名称"/>
</div>

css:

#inputSearch {
border: 1px solid #BABEBF;
color: #999999;
font-size: 14px;
height: 17px;
padding: 3px 6px 5px 6px;
width: 200px;
}

#inputSearch.focus{
   border: 1px solid red;
}

js:

$(function () {
$("#inputSearch").focus(function () {
$(this).addClass("focus");
if ($(this).val() == this.defaultValue) {
$(this).val("");
}
}).blur(function () {
$(this).removeClass("focus");
if ($(this).val() == "") {
$(this).val(this.defaultValue);
}
}).keyup(function (e) {
if (e.which == 13) {
alert("提交后台搜索");
}
});
});

【锋利的JQuery-学习笔记】输入框提示语-隐藏/显示的更多相关文章

  1. 锋利的JQuery 学习笔记

    第一章                认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...

  2. 锋利的jquery学习笔记

    1.$("#tt")获取的永远都是一个jquery对象,所以要判断页面上是否存在某个对象不能像js中 if($("#tt")){ } 而是通过: ){ } ps ...

  3. 锋利的jQuery学习笔记之jQuery选择器

    在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  6. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  7. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  8. jQuery学习笔记之插件开发(4)

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

  9. h5输入框提示语 + 正常文本框提示语

    <input id="username" name="username" type="text" placeholder=" ...

随机推荐

  1. 【学习笔记】【C语言】自增自减

    1. 简单使用 ++  自增运算符.如a++,++a,都等价于a = a+1 --自减运算符.如a--,--a,都等价于a = a-1 5++是错误的,因为5是常量 2. ++a和a++的区别 int ...

  2. Template_5模板拾遗1

    1,typename和class模板参数作为类的时候只能用classtemplate<typename T, template<typename ELEM> class CONT = ...

  3. Linux 软中断

    本文转载自: http://blog.chinaunix.net/uid-9620812-id-3833377.html,如有需要,请移步访问. Technorati 标签: Linux 软中断 -- ...

  4. Windows Phone 7 中拷贝文件到独立存储

    private void CopyToIsolatedStorage(){    using (IsolatedStorageFile storage = IsolatedStorageFile.Ge ...

  5. python 中range与xrange的区别

    先来看看range与xrange的用法介绍 help(range)Help on built-in function range in module __builtin__: range(...) r ...

  6. Java中提供的工具类

    System.arraycopy介绍 (1).System.arraycopy用于拷贝数组 arraycopy(Object src, int srcPos, Object dest, int des ...

  7. TextView文字排版问题:

    本文转载自:http://blog.sina.com.cn/s/blog_821e2bb101011803.html textview自动换行导致混乱的原因----半角字符与全角字符混乱所致!一般情况 ...

  8. WPF之旅(一)- 概述

    WPF与之前出现的其他技术相比引入了“内置硬件加速”和“分辨率无关”等创新功能.WPF是一种成熟的技术,它是几个已经发布的.NET平台的一部分,并通过几个版本不断地进行完善(WPF3.0 -> ...

  9. Linux内核学习方法

    Makefile不是Make Love 从前在学校,混了四年,没有学到任何东西,每天就是逃课,上网,玩游戏,睡觉.毕业的时候,人家跟我说Makefile我完全不知,但是一说Make Love我就来劲了 ...

  10. Python学习指南

    学习python书籍&资料: 1. Python v2.7.5 documentation 2. [Python参考手册(第4版)].(美)比兹利.扫描版.pdf 3. [Python技术手册 ...