前端页面积累----按钮

青春..荒唐

浏览: 974626 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML
前端积累

积累

提示：表单的话，用input元素创建按钮；例如提交按钮

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="提交">//value规定与按钮关联的初始值
</form>

（表单中慎用button）写在外面的话<button type="submit" form="nameform" value="Submit">提交</button>

form后加表单的id

（一）点击按钮实现页面跳转

1.①新标签页面打开window.open('')

也可以加个属性（'_self'），在当前标签页打开

通过onclick

<button onclick="window.open('333.html')">跳页面</button>

或者给onclick写个触发事件

<button onclick="jump()">刷新</button>

<script type="text/javascript">
    function jump(){
        window.open('333.html')
    }
</script>

②还可以写个click函数触发页面跳转，这里要用到JQuery

<button id="jump">刷新</button>

<script>    
$(document).ready(function(){
        $("#jump").click(function(e){
            window.open('');
        })
    })
</script>

点击跳页面

①按钮式

或者

②a标签--链接式

或者

③弹框后跳页面

function logout()...{

alert("你确定要注销身份吗？");

window.location.href="logout.asp?act=logout"

}

</script>

（二）点击按钮实现效果----①显示或隐藏相关内容

（按钮点击事件）

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();//slideToggle()方法通过滑动效果显示或隐藏相关内容
  });
  $("p").dblclick(function(){
    $("button").click();//click单击；dbclick双击
  });
});
</script>
</head>
<body>
<button>点击这里进行切换</button>
<p>双击本段落会触发上面这个按钮的 click 事件。</p>
</body>
</html>

②按钮标签：

获得焦点：页面刷新后获得焦点<button type="button" autofocus="autofocus">焦点按钮</button>

禁用按钮：<button type="button" disabled="disabled">Click Me!</button>

按钮类型：提交，重置

<button type="submit" value="Submit">Submit</button>

<button type="reset"value="Reset">Reset</button>

（三）HTML绑定点击事件方法及对比

①利用JQurey绑定：

<button type="submit" id="btn_submit"> submit </button>
<script>
$('#btn_submit').click(function(){.........});
</script>

②原生js绑定：这类方法旧版本IE不支持

③直接在button按钮上加onclick函数

<button type="submit" id="btn_submit" onclick="btnAction()"> 按钮</button>
<script>
     function btnAction(){ }
</script>

对比：推荐使用jQuery绑定（代码简洁，绑定方法为追加绑定）

原生js绑定代码量稍大；onclick标签绑定，html前端与js前端混合，难以维护，不建议使用

（四）返回按钮----跳回上个页面

①点击图片返回

②a标签

<a href="javascript :history.back(-1)">返回上一页</a>

或者

<a href="javascript :;" onClick="javascript :history.back(-1);">返回上一页</a>

③按钮（推荐用button）

或者

（六）刷新

刷新：window.location.reload();

定时刷新：setTimeout("window.location.reload();",2000);

history.go(0)

例如：<input type="button" class="btn" value="刷新" onclick="javascript:history.go(0);"/>

window.location.reload()

window.location.reload(true)

location=location

（七）关闭页面

关闭：window.close()

定时关闭：setTimeout("window.close();",3000);

分享到：

windows和linux终端相关命令 | a标签下划线设置及其他属性

2017-06-16 14:07
浏览 722
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论