js用button激活 Alert 元素关闭按钮的交互功能

一、总结

1、点(.)对应class,井号(#)对应id 

2、jquery:amaze里面用的jquery,jquery熟悉之后,这些东西就很简单了,jquery很简单,一层一层的$().__()

二、js用button激活 Alert 元素关闭按钮的交互功能

样例

代码:

 <div class="am-alert" id="your-alert">
<button type="button" class="am-close">&times;</button>
<p>在应用 JS 激活之前这个警告框是无法关闭的。不信点右边的 x 试试。</p>
</div>
<button type="button" class="am-btn am-btn-danger" id="doc-alert-btn-bind">点击激活上面 Alert 的关闭功能</button>
<script>
$(function() {
$('#doc-alert-btn-bind').one('click', function() {
$('#your-alert').alert();
alert('已激活,点击上的 X 试试!');
});
});
</script>

1、点(.)对应class,井号(#)对应id

2、第9行,添加alert()事件后,警告框才有效

3、函数模式:$(function(){}),就是整个都被一个$()包进去了

4、选择器添加事件方法:通过id或者类名直接添加事件,而不是在什么onclick里面添加js函数

5、jquery的one()方法:第八行的 one 是jquery里面的one()方法,意思是 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

js用button激活 Alert 元素关闭按钮的交互功能的更多相关文章

  1. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  2. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  3. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  4. amazeui学习笔记--js插件(UI增强2)--按钮交互Button

    amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...

  5. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...

  6. Ext JS中Button的一般使用

    Ext JS中Button按钮的显示,以及按钮的部分事件 一.属性 renderTo:将当前对象所生成的HTML对象存放在指定的对象中 text:得到按钮名称 minWidth:按钮最小宽度 hidd ...

  7. JS代码中加上alert才能正常显示效果

    模拟一个生成验证码的效果,发现JS代码中加上alert可以正常刷新,没有alert时图片就会丢失,找到解决方法,但是还不是很明白,先记录下来. 生成验证码的servlet代码如下: package s ...

  8. js中如何删除某个元素下面的所有子元素?(两种方法)

    js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...

  9. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

随机推荐

  1. 小白学开发(iOS)OC_ SEL数据类型(2015-08-10)

    // //  main.m //  SEL数据类型 // //  Created by admin on 15/8/12. //  Copyright (c) 2015年 admin. All rig ...

  2. c++值传递,指针传递,引用传递以及指针与引用的区别

    值传递: 形参是实参的拷贝,改变形参的值并不会影响外部实参的值.从被调用函数的角度来说,值传递是单向的(实参->形参),参数的值只能传入, 不能传出.当函数内部需要修改参数,并且不希望这个改变影 ...

  3. 65.Express---express-session

    转自:https://blog.csdn.net/zhangweiwtmdbf/article/details/50723816 第一部分 session概述 1.1 session 是什么? Ses ...

  4. POJ 3038 贪心(multiset)

    题意: 思路: 1. 贪心 我们考虑肯定是走最近的最合适 想象自己是一个黑一日游的司机: 1.如果有乘客要上车,那么就让他上,收钱! 2.如果超载了,把距目的地最远的几个乘客踢下去,退钱. 3.行驶到 ...

  5. 【2017 Multi-University Training Contest - Team 5】Rikka with Graph

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6090 [Description] 给你n个点; 让你在这n个点上最多连m条无向边; 使得 ∑ni= ...

  6. Spring 实现数据库读写分离(转)

    现在大型的电子商务系统,在数据库层面大都采用读写分离技术,就是一个Master数据库,多个Slave数据库.Master库负责数据更新和实时数据查询,Slave库当然负责非实时数据查询.因为在实际的应 ...

  7. 分享一些 WINDOWS 资源站点(备用)

    分享一些 WINDOWS 资源站点(备用) Windows Embedded  http://www.10down.net/windows-embedded.php Windows 7 SP1 Upd ...

  8. SQL数值转字符串保留指定小数位

    IF EXISTS ( SELECT * FROM sysobjects WHERE xtype = 'fn' AND name = 'fn_NumberFormat' ) BEGIN DROP FU ...

  9. 1.23 Python知识进阶 - 面向对象编程

    一.编程方法 1.函数式编程:"函数式编程"是一种"编程范式"(programming paradigm),也就是如何编写程序的方法论.它属于"结构化 ...

  10. Linux下搭建JSP环境

    Linux下搭建JSP环境     作为一名Java EE系统架构工程师,经常需要搭配和建立JSP(Java Server Pages)的开发环境和运行环境,所以本人在平时的工作中积累了一些在Linu ...