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 ...
随机推荐
- iOS开发之HelloKit代码片段
完整代码托管:https://github.com/1042710553/HelloKit.git /************************/plist/****************** ...
- U盘在制作Ubuntu启动盘后Windows系统下显示空间不对的解决办法(Ubuntu系统下格式化U盘的方法)
用Ubuntu系统自带的启动盘制作工具后,将U盘拿到Windows系统下使用显示出的空间与U盘大小不同. 解决该问题的办法: 使用Linux终端: 第一步:sudo fdisk -l 这个命令主要是查 ...
- python中统计计数的几种方法
以下实例展示了 count() 方法的使用方法: 1 2 3 4 5 6 # !/usr/bin/python3 T = (123, 'Google', 'Runoob', 'Taobao', 1 ...
- 关于axios
简介 axios是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 主要是用于向后台发起请求的,还有在请求中做更多是可控功能. 特点 从浏览器中创建 XMLHttpRe ...
- mybatis v jpa
mybatis的优势在于SQL的自由度上,SQL优化和返回对象的大小都是可控的.spring-data-JPA则在开发效率上有优势.
- mysql left join中where和on条件的区别
left join中关于where和on条件的几个知识点: 1.多表left join是会生成一张临时表,并返回给用户 2.where条件是针对最后生成的这张临时表进行过滤,过滤掉不符合where条件 ...
- springmvc.xml配置图解
- Linux kernel 编译问题记录【转】
本文转载自:http://sunyongfeng.com/201701/programmer/linux/kernel_compile_fail.html 编译内核出现以下错误 Can't use ' ...
- Elasticsearch之几个重要的分词器
前提 什么是倒排索引? Elasticsearch之分词器的作用 Elasticsearch之分词器的工作流程 Elasticsearch之停用词 Elasticsearch之中文分词器 Elasti ...
- css hover dropdown
html-------------------------- <div class="dropdown"> <span>鼠标移动到我这!</span& ...