jQuery 的on()方法
jQuery 的on()方法
一、总结
一句话总结:
1、普通添加事件:$("a").on("click", function () {执行的代码})
2、未创建元素:$("body").on("click", "a", function (e) {执行的代码})
3、传递参数:$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})
1、jquery的on方法给元素添加事件?
$("a").on("click", function () {执行的代码})
$("a").on("click", function () {
console.log(0)
})
2、jquery的on方法给未创建的元素添加事件?
$("body").on("click", "a", function (e) {执行的代码})
$("body").on("click", "a", function (e) { });
3、jquery的on方法传递参数?
$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})
$("p").on("click", { "txt": "文本" }, function (e) {
$("a").text(e.data.txt);
})
4、jquery的on方法 给未创建的元素添加事件 实例?
给新添加的元素hidden_panel类添加点击事件:$("body").on("click", ".hidden_panel", function (e) { 执行的代码 });
<script>
$(function () {
$("body").on("click", ".hidden_panel", function (e) {
$(this).children(".panel-body").toggle();
$(this).children(".panel-footer").toggle();
$(this).find(".panel-heading_symbol_left").toggle();
$(this).find(".panel-heading_symbol_down").toggle();
});
});
</script>
二、jQuery on()方法使用
转自或参考:jQuery on()方法使用
https://www.cnblogs.com/sntetwt/p/10758176.html
jQuery on()方法
基本语法:
语法结构一:
$(selector).on(event,function)
语法结构二:
$(selector).on(events,[selector],[data],function)
语法结构三:
$(selector).on(object,[selector],[data])
结构一:
$("a").on("click", function () {
console.log(0)
})
结构二[selector],适用于未创建的元素:
$("body").on("click", "a", function (e) { });
结构二[data],函数传递:
$("p").on("click", { "txt": "文本" }, function (e) {
$("a").text(e.data.txt);
})
结构三{object},绑定不同函数:
$("p").on({
click: function () { $(this).css("color", "green"); },
mouseover: function () { $(this).css("color", "red"); },
mouseout: function () { $(this).css("color", "black"); },
});
off()方法,解除绑定
$("body").on("click","a",function(){
$("a").off("click");
})
one()方法,绑定一次
$("a").one("click",function(){ });
trigger()方法,关联事件
$("p").click(function () {
$("a").trigger("click");
});
$("a").on("click", function () {
console.log(0)
});
jQuery 的on()方法的更多相关文章
- jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
- jquery.on()超级方法
$.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- [转]jQuery的each方法的几种常用的用法
下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下: var arr = [ "one", "two", "three&quo ...
- jquery中$.ajax方法提交表单
function postdata(){ //提交数据函数 $.ajax({ //调用jqu ...
- JS,JQuery的扩展方法
转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展 ...
随机推荐
- Linux服务器centos7系统下搭建Jenkins
Jenkins是什么? Jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建.部署.自动化, 满足任何项目的需要. 所以现在是越来越多的公司都在使用Jenkins做持续 ...
- eclipse导入项目后出现红色叉号的解决方案
对于一名程序员来说,我导入的项目在项目的名称上无端加了一个红色的叉号,虽然这个不友好的符号,对于我整个的项目运行没有任何影响,但是总让我觉得不舒服,大大的叉号写在我的项目的脑袋上,我心里能舒服吗?于是 ...
- SuperMemo method
原文:https://www.supermemo.com/en/archives1990-2015/english/ol/sm2 别人的研究:http://wdxtub.lofter.com/post ...
- wsl2 debian安装docker
应用商店下载debian 安装docker 安装依赖 打开安装好的docker安装依赖 sudo apt-get install apt-transport-https ca-certificates ...
- WIN10安装.net报0x800F081F解决方法
WIN10安装.net2.0和.net3.0报错,错误代码:0x800F081F,解决方法: 方法一:检查服务windows update有无开启,若未开启,开启服务后,再装.net 注:若安装.ne ...
- mysql运维相关
1.为什么要分库分表(设计高并发系统的时候,数据库层面该如何设计)?用过哪些分库分表中间件?不同的分库分表中间件都有什么优点和缺点?2.现在有一个未分库分表的系统,未来要分库分表,如何设计才可以让系统 ...
- [唐胡璐]Selenium技巧 - 定制元素属性检查,并写到ReportNG中
QTP 和Selenium 都会有这种要检查某一个控件元素属性的情况,比如去检查一个Button的显示文字是什么? 为了更方便的书写程序,并优美的显示到HTML测试报告中,做了以下几个小小的封装,只是 ...
- Java并发包--ConcurrentLinkedQueue
转载请注明出处:http://www.cnblogs.com/skywang12345/p/3498995.html ConcurrentLinkedQueue介绍 ConcurrentLinkedQ ...
- 设置 IntelliJ IDEA 主题
一.选择File选项====>Settings====>Appearance====>Theme====>三选一切换主题
- c++类的基本形式(一个简单类的简单sample,命名空间)
有人把类说成是占用固定大小内存块的别名,其定义时不占用空间 #include<iostream> #include<string> using namespace std; c ...