1、新建并保存一个html文档,进入html代码编辑页面。
2、写一个input文本输入框,并定义ID,然后写一个按钮,并定义ID。
3、要做的效果就是点击按钮为输入框赋值,然后把输入框和按钮的css样式写好,不写样式也可以。
4、引入jquery文件,路径要正确,写jquery代码,打开浏览器测试一下,点击按钮之后,输入框内就会自动输入赋值的内容。
html代码如下:<input
type="button"
value="显示"
id="b1"/>
jquery代码如下:
添加jquery引用。。。
<script
type="text/javascript">
$(function(){
$("b1").click("d出一个窗口页面")
})
</script>
不知楼主说的窗口页面是否是这样的。
<html><head><title>Simple jsp page</title>
<style type="text/css">
<!--
#div1 {
position:absolute
left:338px
top:91px
width:446px
height:294px
z-index:1
border:solid #7A7A7A 4px
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").hide()//先让div隐藏
$("#span1").click(function(){
$("#div1").fadeIn("slow")//淡入淡出效果 显示div
})
$("#span2").click(function(){
$("#div1").fadeOut("slow")//淡入淡出效果 隐藏div
})
})
</script>
</head>
<body>
1个简单d出div的小例子 页面不是很美观 效果达到了<p/><p/><p/><p/><p/><p/>
<span style="cursor:pointer" id="span1">点我d出div</span>
<div id="div1">
<div align="right" style="background-color:#CDCDCD"><span id="span2" style="cursor:pointer">关闭</span>
</div>
<p><p>
<form>
username:<input type="text"/><p />
age:<input type="text"/><p />
<input type="submit" value="submit"/><br />
</form>
</div>
</body>
</html>
以上代码直接复制粘贴,html文件就可以运行,可以做d出 *** 作。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)