JavaScript基础学习

最新推荐文章于 2024-06-16 09:35:05 发布

小柒iilz

最新推荐文章于 2024-06-16 09:35:05 发布

阅读量2k

点赞数 1

分类专栏：基础学习文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/wl0326ghb/article/details/128493011

版权

基础学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 概述

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
诞生于1995年，当时的主要目的是验证表单的数据是否合法。
JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。

javaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。
常用 1 修改html及css代码（2）验证表单

特点：

代码可使用任何文本编辑工具编写，语法类似 C 和Java，
无锡编译，由javaScript 引擎解释执行
弱类型语言
基于对象

1. 嵌入方法

1.1 内嵌式

理论上 js 可以写在任何一个地方，但是一般写在 head 标签或者 body 标签下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="application/ecmascript">
			alert("xss");
		</script>
	</head>
	<body>
		
	</body>
</html>

或者写在body

<body>
  <script type="application/ecmascript">
			alert("xss");
		</script>
</body>

1.2 外链式

首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中

首先新建 js文件，写入 js语句

alert(“xss”); /*弹框 */

index

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<script type="application/ecmascript" src="js/js.js"></script> /* 引用 编写的js文件*/
	</head>
	<body>
		
	</body>
</html>

一般在生产环境中，用的外链式比较多

1.3 行内式

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性，
onclick 单机事件点击之后出现一个弹窗

	<body>
		<input type="button" value="点击" onclick="alert('xss');" />
	</body>

2.语句

1.在编程语言中，这些编程指令被称为语句。JavaScript 程序就是一系列的编程语句。
注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。
2.JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

3.用分号（;）分隔JavaScript语句。

3.注释

单行注释： // 注释语句快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

4. 变量

变量是用于存储信息的“容器”
ps：在javascript中，单双引号没区别
var a=’moonsec’;

4.1 变量的声明

在 js 代码中，使用变量，需要进行变量声明，就是告诉 js，解释引擎，这个标识符（具有唯一性的变量名）是一个变量。
声明变量：使用关键字var 声明变量

var username；

初始化：使用 = 为变量首次赋值，

var username=“wl”

使用：直接使用即可

console.log(username)；

window对象中会注册一个名为console的成员变量，指代调试工具中的控制台。通过调用该console对象的log()函数，可以在控制台中打印信息。

<body>
		<script>
			var a = 'xiaoqi';
			console.log(a);
		</script>
</body>

4.2 变量命名规则

命令规则：
可以包含字母、数字、下划线（_）、对于js 来讲，不建议使用 $
不能以数字开头
常用于表示函数、变量等的名称，名称最好有明确的含义
不允许使用语言关键字和保留字做变量名

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

5. 常量的生命和使用

常量
是其值不能改变的量，使用 const 关键字来定义，习惯上，常量名使用纯大写形式

const PI=3.14;

6.JavaScript 作用域

6.1 JavaScript 局部变量

局部作用域变量在函数内声明，变量为局部作用域。

	<script>
		function getname(){
			var name='xiaoqi';
		console.log(name);
		}
	getname();
	</script>

6.2 JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。

	<script>
		var name  = 'xiaoqi';
		function getname(){
			//var name='xiaoqi';
		console.log(name);
		}
	getname();
	</script>

7. 数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined
对象类型数组字典

7.1.判断类型

var a = “iamstring.”;
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name=“22”;};

alert(typeof a) ------------> string
alert(typeof b) ------------> number
alert(typeof c) ------------> object
alert(typeof d) ------------> object
alert(typeof e) ------------> function
alert(typeof f) ------------> function

7.2 数字类型（Number）

只有一种数字类型，数字可以是小数，也可以的整数
以0开头默认使用8进制来表示我的这个数字
以0x开头默认使用16进制来表述我的这个数字
如果以-开头默认以负数
如果带有e：以科学计数法来解析我的这个数字

parseInt(…) 将某值转换成数字，不成功则NaN
parseFloat(…) 将某值转换成浮点数，不成功则NaN
特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

7.3 字符串型（string）

字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含单引号/双引号的，由单引号来界定我双引号中包含的字符串

obj.length 长度

obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, …) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(
, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$ $：直接量$ 符号

7.4 布尔类型（bool lean）

一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布尔数据类型只有两个：true 和 false
这两个个值一般用于说明某个事物是真或者假
js一般用布尔类型来比较所得到的结果

布尔类型仅包含真假，
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

7.5 NULL （空）

null
关键字null是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在的引用。
如果试图去引用一个没有定义的值，就会返回一个null。
这里注意一点：null并不等于"" 或者0

7.6undefined （未定义）

这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值

！null 和 undefined区别：
null它表示一个变量被赋予一个空值，而undefined是表示变量还没有被赋值

7.7 数组

1、数组内可以存放任意数据类型的数据（本质上它也是对象）
2、数组元素不赋值的情况下值为undefined
3、如果数组打印的时候，元素不赋值""
4、访问数组范围之外的元素，不会出现越界的问题，undefined
5、定义数组大小，照样可以添加更多元素

7.7.1 定义数组的方法

1、var arr=[]//定义一个空数组
2、var arr=[10,20,{“name”:“tomy”,“age”:19},0.1,“string”,true,[“aaa”,“bbb”]]//定义的同时赋值
3、var arr=new Array();//定义一个空数组
4、var arr = new Array(10,20,{“name”:“tomy”,“age”:19},0.1,“string”,true,[“aaa”,“bbb”])//定义的同时赋值
5、var arr=new Array(10)//定义一个长度为10的数组

var arr=new Array(10)//定义一个长度为10的数组var arr=new Array();//定义一个空数组
<scrtpt>
  var arr=[]//定义一个空数组
  var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]//定义的同时赋值
  var arr=new Array();//定义一个空数组
  var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"])//定义的同时赋值
  var arr=new Array(10)//定义一个长度为10的数组
</scrtpt>

7.7.2 数组的操作

操作	描述
obj.length	数组的大小
obj.push(ele)	尾部追加元素
obj.pop()	尾部获取一个元素
obj.unshift(ele)	头部插入元素
obj.shift()	头部移除元素
obj.splice(start, deleteCount, value, …)	插入、删除或替换数组的元素
obj.splice(n,0,val)	指定位置插入元素
obj.splice(n,1,val)	指定位置替换元素
obj.splice(n,1)	指定位置删除元素
obj.slice( )	切片
obj.reverse( )	反转
obj.join(sep)	将数组元素连接起来以构建一个字符串
obj.concat(val,…)	连接数组
obj.sort( )	对数组元素进行排序

7.7.3 数组遍历

<script>
			
			var arraylist=['1','2','3'];
			for(var i in arraylist)
			{
				console.log(arraylist[i]);
			}
</script>

或者

<script>
			
			var arraylist=['1','2','3'];
			for(i=0;i<arraylist.length;i++)
			{
				console.log(arraylist[i])
			}
		</script>

8.函数

** JavaScript 函数语法**
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：

<script>
			
			function myFunction(a,b)
			{
				return a*b;
			}
			var x=myFunction(7,8);
			console.log(x);
		</script>

普通函数

<script>
  

function func(arg)
{
	return arg+1;
}
		
var result = func(1);
console.log(result);		var result = func(1);
console.log(result);
</script>

匿名函数（没有名字的函数）

 setInterval(function(){ <!--//setInterval内置函数，每隔多少秒执行 -->
		console.log(123);
},500)
<!-- 自执行函数  -->
/*（创建函数并且自动执行）*/
(function(arg){
	console.log(arg);
})(1);

9. 字典

字典是一种以键-值对形式存储数据的数据结构
字典是一种以键-值对形式存储数据的数据结构
var dict = {‘k1’:“moonsec”,‘k2’:‘moon’,‘age’:18};
输出字典元素
for(var item in dict){
console.log(dict[item]);
}
获取指定元素
dict[‘age’] 获取key为age的元素
赋值
dict[‘age’]=10
删除元素
delete dict[‘one’];
delete dict.age;

10.js 的序列化和反序列化

Json与字符串的转换
把对象转为字符串
JSON.stringify()
把字符串转为数组
newli = JSON.parse()

序列化即js中的Object转化为字符串
使用toJSONString
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
使用stringify
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
反序列化 即js中JSON字符串转化为Object

11.转义

命令	说明
decodeURI( )	URl中未转义的字符
decodeURIComponent( )	URI组件中的未转义字符
encodeURI( )	URI中的转义字符
encodeURIComponent( )	转义URI组件中的字符
escape( )	对字符串转义
unescape( )	给转义字符串解码
URIError	由URl的编码和解码方法抛出

12.eval

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

aa = “alert(‘xss’)”
eval(aa)

13.时间

Date 对象
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-???)
myDate.getMonth(); //获取当前月份(0-11,0代表1月) 所以获取当前月份是 myDate.getMonth()+1;
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime = myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
加一天
var dateTime = new Date();
dateTime=dateTime.setDate(dateTime.getDate()+1);
dateTime=new Date(dateTime);
dateTime=dateTime.setDate(dateTime.getDate()+1);

14.面向对象

JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。
第一种方法

		<script>
			function Person(name)
			{
				this.name=name;
				this.get_name=function()
				{
					console.log(this.name);
				}
				this.set_name=function()
				{
					console.log(this.name);
				}
			}
			var p1 = new Person('xiaoqi');
			p1.get_name();
			p1.set_name();
		</script>

对于上述代码需要注意：
Person充当的构造函数
this代指对象
创建对象时需要使用 new

第二种

<script>
			class Person(name)
			{
				constructor(name)
				{
					this.username=name;
				}
				getName()
				{
					console.log(this.username);
				}
				setName(name)
				{
					this.username=name;
				}
			}
			
			var p1=new Person('xiaoqi');
			//p1.getName();
			p1.setName('alex');
			p1.getName();
</script>

15.原型

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用时 prototype没有任何作用
当函数以构造函数调用时，它所创建的对象中都会有一个隐含的的属性
指向该构造函数的原型我们可以通过__proto__来访问该属性
我们可以将对象中公有的内容，统一设置到原型对象中

<script>
  function Persion(username,age)
  {
    
	}
//console.log(Persion.prototype);
var p = new Persion();
console.log(p.__proto__ == Persion.prototype);


定义原型变量和原型变量
function Persion(username,age){

}
//console.log(Persion.prototype);
Persion.prototype.a = '女';
Persion.prototype.Sayname=function(){
	return Persion.name;
}
var p1 = new Persion('moonsec');
var p2 = new Persion();
alert(p1.Sayname());

</script>

16. 运算符

用于执行程序代码运算，会针对一个以上操作数来进行

16.1 算数运算符

符号	说明
+	加
-	减
*	乘
/	除
%	求余
++	自增
–	自减

字符串拼接使用“+”

16.2 比较运算符

符号	说明
<	小于
>	大于
==	等于
！=	不等于
<+	小于等于
>=	大于等于
===	全等于（将数值以及数据类型一并比较）
！===	不全等于（将数值以及数据类型一并比较）

16.3 赋值运算符

符号	描述
=	等号右边的值赋给左边
+=	a=a+2;==>a+=2
-=	a=a-2;==>a-=2
*=	a=a2;==>a=2
/ =	a=a/2;==>a/=2
%=	a=a%2;==>a%=2

16.4 逻辑运算符

符号	描述
&&	与
\|\|	或
！	非

&& 全真为真
|| 一个为真就是真
！取反

16.5 1.1. 三元运算符（三目运算符）

表达式1?表达式2:表达式3
当表达式1成立时执行表达式2 否则执行表达式3
var max = 2>1?‘>’:‘<’;
console.log(max);

17. 流程控制语句

17.1 if 语句

结构
if（条件）
{
函数体
}

17.2 if else 语句

if（条件）
{
	函数体1
}
else
{
	函数体2
}

17.3 if,elseif,else 语句

if(条件1)
{
	函数体1
}
elseif(条件2）
{
	函数体2
}
elseif(条件n)
{
	函数体n
}
else
{
}

17.4 switch 语句：多分枝语句

switch(表达式)
{
	case n: 代码块; break;
	case n: 代码块; break;
	default: 默认代码块
}

<sctipt>
  switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
} 

</sctipt>

17.5 循环控制结构：

17.5.1 whiel 循环

while循环：先判断条件当条件成立再执行
while(循环成立条件){
…
}

17.5.2 do…while 循环

do…while循环:不论条件成不成立先执行一遍再判断
do{
…
}while(循环成立条件)

17.5.3 for 循环

const arr = [1, 2, 3];
for(let i = 0; i　< arr.length; i++) {
    console.log(arr[i]);
}

18. js 操作DOM

18.1 什么是DOM

DOM（document object model）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

18.2 DOM查找元素

document获取节点的基本方法
document.getElementById(‘id’); //通过id来获取元素,返回指定的唯一元素。

document.getElementsByName(“name”); //通过name来获取元素，返回name='name’的集合。

document.getElementsByClassName(“classname”) //用classname来获取元素，返回的是一个class="classname"的集合(不兼容IE8及以下)。

document.getElementsByTagName(‘div’); //用元素的标签获取元素，返回所有标签=“div”的集合。

例子

18.2.1 查找

直接查找
var obj = document.getElementById(‘id’);
间接查找
文件内容操作

innerText 仅文本

document.getElementById(‘div1’).innerText

innerHTML 全内容

document.getElementById(‘div1’).innerHTML

value // 也可以获得input标签的value值
input value 获取当前的值
select 获取选中的value的值 d.selectedIndex=1
Textarea 获取value的值
selectedIndex 可以更改默认的值

document.getElementById(‘myselect’).selectedIndex=2

如果有多个，可以通过下标来获取它的值

也可以进行更改

18.2.2 操作

样式操作
className 列出样式字符串
classList 列出样式返回数组
classList.add 增加样式
classList.remove 删除样式

obj.style.fontSize='16px'; > document.getElementById('div1').style.fontsize='50px';

属性操作
获取属性
getAttribute() 获取某个属性或者某些内容

document.getElementById(‘div1’).getAttribute(‘id’)

增加设置一个属性
添加属性
setAttribute(‘xxx’,‘alexe’)

document.getElementById(‘div1’).setAttribute(‘xxx’)

删除属性
removeAttribute(value)

创建标签

有两种方式

字符串方式
对象的方式

字符串方式

beforeBegin: 插入到标签开始前
afterBegin:插入到标签开始标记之后
beforeEnd:插入到标签结束标记前
afterEnd:插入到标签结束标记后

新建一个页面，写一个ipupt，一个文本框，点击按钮，添加文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="+" onclick="add()" />
		<div id="dv1">
			<p><input type="text"/></p>
		</div>
		<script>
			function add()
			{
				var tag="<p><input type='text'></p>"
				document.getElementById('div1').insertAdjacentHTML('beforeEndr',tag);
			}
		</script>
	</body>
</html>

对象的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="+" onclick="add2();" />
		<div id="dv1">
			<p><input type="text"/></p>
		</div>
		<script>
			// function add()
			// {
			// 	var tag="<p><input type='text'></p>"
			// 	document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
			// }
			function add2()
			{
				var tag=document.createElement('input');
				tag.setAttribute('type','text');
				tag.style.color-'red';
				var p=document.createElement('p');
				p.appendChild(tag);
				document.getElementById('div1').appendChild(p);
			}
		</script> <!--appendChid 再节点后面增加一个子节点-->
	</body>
</html>

提交表单

任何标签都可以通过dom提交

一般提交按钮用 submit，这里用button

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="f1" action="index.html">
			<input type="submit" value="提交">
			<input type="button" value="提交" onclick="Sub();">
		</form>
		<script>
			function Sub()
			{
				document.getElementById('f1').submit();
			}
		</script>
	</body>
</html>

其他函数

其他
console.log 终端输出
alert 弹出框
confirm 确认框标题 true false

		<script>
			var p='xiaoqi'
			console.log(p);
			//alert('xss') 弹窗
			//alert(confirm((p));
			//alert(p);
			//confirm(p);
		</script>

url和刷新
location.href 获取url
location.href =‘url’ 重定向
location.reload() 重新加载

定时器
setInterval() //一直执行
clearInterval()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="i1" type="text" />
		<input type="button" value="停止" onclick="stop();" />
		
		<script>
			function setTime()
			{
				var tag=new Date();
				document.getElementById('i1').value=tag;
			}
			var obj=setInterval('setTime()','1000') //每隔一秒刷新
			function stop()
			{
				clearInterval(obj); // 
			}
		</script>
	</body>
</html>

setTimeout（）只执行一次
clearTimeout（）
例子
点击删除，出现一个文本框，提示已删除，隔几秒之后清楚，恢复

<div id="status"></div>
		<input type="button" value="删除" onclick="Delele();">
		<script>
			function Delele()
			{
				document.getElementById('status').innerText="已删除";
				setTimeout(
					function()
				{
					document.getElementById('status').innerText="";
				},5000)
			}
	</script>

事件

绑定事件两种方式

通过标签直接绑定
获取dom对象，然后绑定

a.直接标签绑定直接标签绑定 οnclick=‘’

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="submit" value="点我" onclick="add();" />
		<script>
			function add()
			{
				alert('xss');
			}
		</script>
	</body>
</html>

先获取dom对象，然后进行绑定
document.getElementById(‘xxx’).onclick()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="i1" type="submit" value="点我" />
		<script>

			document.getElementById('i1').onclick(alert('xss'));
			
		</script>
	</body>
</html>

课后例子

跑马灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="c1">
			欢迎来到xiaoqi的渗透测试学习
		</div>
		<script>
			function p()
			{
				var tag=document.getElementById('c1'); //将c1的值给tag
				var t= tag.innerText; //读取文本
				var l= t.charAt(0);
				var s= t.substring(1,t.length);
				tag.innerText=s+l; 
			}
			setInterval('p()',500)
		</script>
	</body>
</html>

搜索框

当 input 输入框获取焦点时执行一段 Javascript代码：
onfocus 事件在对象获得焦点时发生。

当用户离开input输入框时执行一段Javascript代码：
onblur 事件会在对象失去焦点时发生。

有个搜索框，里面有默认值，当点击的时候，让默认值自动清空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form method="get" action="http://www.baidu.com">
			<input id="c1" type="text" value="请输入关键搜索" onfocus="f1();"onblur="f2();" />
			<input type="submit" value="搜索" />
		</form>
		<script>
			function f1()
			{
				var tag=document.getElementById('c1');
				var c=tag.value
				if (c == '请输入关键搜索')  //判断搜索框是否有内容，没有，点击清空默认值
				{
					tag.value='';
				}
				
			}
			function f2()
			{
				var tag=document.getElementById('c1');
				var c= tag.value;
				if (c.length==0)  // 判断搜索框中是否有值，没有则给个默认
				{
					tag.value='请输入关键字搜索';
				}
			}
		</script>
	</body>
</html>