用js模拟jQuery方法,体会封装思想
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>simulationJquery.html</title>
</head>
<body>
<img src=images/123.jpg/>
<input id="hide" type="button" value="hide" style="position:absolute;top:250;left:50"/>
<input id="show" type="button" value="show" style="position:absolute;top:250;lfet:120"/>
<script type="text/javascript">
function photo(){
var img=document.images[0];
this.hide=function(){
img.style.visibility="hide";
}
this.show=function(){
img.style.visibility="visible";
}
}
</script>
<script type="text/javascript">
//d()表示定位指定的标签
function b(str){
//获取str变量的类型
var type=typeof(str);
if(type=="string"){
//截取第一个字符串
var first=str.substring(0,1);
//判断是否是#号
if("#"==first){
//获取#号之后的字符串
var end=str.substring(1,str.length);
//根据id定位标签
var element=document.getElementById(end);
//如果找到了
if(element!=null){
return element;
}else{
alert("没有这个标签");
}
}
}else{
alert("参数必须是字符串");
}
}
</script>
<script type="text/javascript">
var p=new photo();
d("#hide").onclick=function(){
p.hide();
}
d("#show").onclick=function(){
p.show();
}
</script>
</body>
</html>
将上述中的方法名换成$符号,就是"jquery"了.