jQuery操作dom事件
参考:jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
//1.绑定事件bind()
bind('event name', eventData, function(event) {
/* Act on the event */
});
//event name事件名称:可接收事件列表
blur,focus,load,resize,scroll,unload,click,dblclick,mounsedown,mouseup
mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown
keypress,keyup,error
//eventData数据对象:
//function回调函数:
//如果绑定多个事件中间用空格隔开
//映射方式绑定不同事件
$(".text").bind({
focus:function(event) {
},
change:function(){
}
});
//传参数
$(".text").bind('focus', {msg:"test"}, function(event) {
alert($(this).val());
});
//取消绑定unbind()
$("p").unbind();//取消p的所有事件
$("p").unbind( "click" );//取消p的click事件
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo //2.鼠标悬停事件:hover()
$(".clsTitle").hover(function() {
$(".clsContent").show();
}, function() {
$(".clsContent").hide();
});
//3.轮播事件:toggle(fn1,fn2,fn3....);该函数功能是按fn函数顺序依次执行。执行完最后一个然后再重复对这些函数轮番调用
//图片轮播:单击图片时轮播图片
//单击时变成a.jpg,再单击变成b.jpg,再次单击又变成a.jpg
$("img").toggle(function() {
$("img").attr('src', 'a.jpg');
}, function() {
$("img").attr('src', 'b.jpg');
}); //4.一次性事件:one(type,[data],fn),该事件只执行一次
//页面:<input id="btn" type="button" value="点击查看联系方式"/>
$("#btn").one('click', function(event) {
this.value="111111111111";
}); //5.自定义执行指定事件:trigger(),在页面dom元素加载完毕后自动执行某类事件,可以是自定义事件
//页面dom加载完成后,使input选中
$("input").trigger('select');
//页面dom加载完成后,给input赋默认值
$("input").bind('myEvent', function(event) {
$(this).val("默认值");
});
$("input").trigger('myEvent');
jQuery操作dom事件的更多相关文章
- jQuery学习笔记:整理一些常用的jQuery操作DOM事件
1.attr() .removeAttr() .attr() 方法可以传入一个名值对的参数,也可以传入一个包含2个以上名值对的对象参数,例如: .attr('src','images/a.jpg'); ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- *jquery操作DOM总结 (原创:最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
- jQuery操作DOM知识总结
jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span> ...
- 1、jQuery操作Dom
1.添加元素 <code> <script language="JavaScript">$().ready(function(){$("input ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
随机推荐
- 如何做好Web接口测试
说说我在测试接口时遇到的一些需要注意的点: 1.接口返回:数据格式是否与预期一致.例如:要求返回json格式的数据,json数据的key命名是否正确,对应的value是否与数据库一致.需要转换的数据是 ...
- 微服务-使用Redis实现分布式缓存
在单体中对于key信息和用户信息是放在内存中放的,通过session进行管理. 微服务是要放在分布式缓存中,以实现服务的无状态化. @Autowired private StringRedisTemp ...
- [转]eclipse 配置黑色主题 Luna 方式三
虽然以前也使用eclipse的黑色主题,但是配置起来稍微麻烦一点. 这里先声明,下面的方式适合最新版本的Eclipse Luna,旧的版本可以下载我提供的这个插件,并将其放在eclipse目录下的 ...
- 获取Android设备的方向,Sensor和SensorManager实现手机旋转角度
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1009/425.html 带有g-sensor的Android设备上可通过API ...
- javascript里用php
<script type="text/javascript" > <?php if (!empty($searchResult)):?> $.searchM ...
- spark + yarn调试问题java.nio.channels.ClosedChannelException
spark客户端提交任务至yarn,后台抛错,FinalStatus:UNDEFINED. ./spark-submit --class org.apache.spark.examples.Spar ...
- ArrayList原理分析(重点在于扩容)
首先,ArrayList定义只定义类两个私有属性: /** * The array buffer into which the elements of the ArrayList are stored ...
- Apache-solr
1.1. 下载 从Solr官方网站(http://lucene.apache.org/solr/ )下载Solr4.10.3,根据Solr的运行环境,Linux下需要下载lucene-4.10.3.t ...
- Kafka架构
一.Kafka介绍 Kafka是Linkin在2010年开源的分布式发布订阅消息系统,Kafka是高吞吐量的消息订阅系统. 二.Kafka结构 Kafka由三部分构成,producer.broker. ...
- Job流程:决定map个数的因素
此文紧接Job流程:提交MR-Job过程.上一篇分析可以看出,MR-Job提交过程的核心代码在于 JobSubmitter 类的 submitJobInternal()方法.本文就由此方法的这一句代码 ...