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‘);

来自为知笔记(Wiz)

时间: 2024-10-18 10:02:54

jQuery操作dom事件的相关文章

jQuery操作Dom、jQuery事件机制、jQuery补充部分

jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要修改的属性,就会进行修改,如果没有,直接添加 例:$("a").attr("href","http://www.baidu.com"); 修改多个属性值: //attr(obj) $(“img”).attr({ “title”: ”文件名称”, “s

原生js和Jquery操作DOM

原生javascript和jQuery操作DOM的对比总结 目录: DOM元素节点:1)文档节点:2)元素节点:3)属性节点:4)文本节点:5)注释节点 1)创建节点 2)选择(访问)节点 3)操作: 1)节点操作 1)添加节点 2)删除节点 3)修改内容: 1)文本[text] 2)html 3)表单val 4)改变事件 2)CSS操作 3)动画 下文转自:http://www.jb51.net/article/103583.htm 这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一

jQuery操作DOM知识总结

jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span>"); 2.添加元素 2.1.添加新建的元素 //方法一:将jQuery对象添加到调用者内部的最后面. var $span = $("<span>这是一个span元素</span>"); $("div").append($span);

原生JS与jQuery操作DOM有什么异同点?

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

web进阶之jQuery操作DOM元素&amp;&amp;MySQL记录操作&amp;&amp;PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

原生JS和jQuery操作DOM的区别小结

一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象; 直接下标访问, $(DOM对象)[index]; 二.两者操作DOM的对比 一.创建元素节点 1.1 原生JS创建元素/文本节点 1 document.createElement("p"); 1.2 jQuery创建元素/文本节点 1 $('<

恶补jquery(三)jquery操作DOM

什么是DOM? DOM(Document Object Model,简称DOM),文档对象模型. DOM是w3c的标准.DOM定义了访问HTML和XML文档的标准:W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. Document:即文档,我们创建一个页面并加载到WEB浏览器的时候,DOM模型根据该页面的内容创建一个文档文件. Object:即文件,新建页面成为文档对象,对象关联特征称为文档属性,访问对象函数称对象方法. Model:

JQuery 操作DOM

DOM(Document Object Model—文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件DOM 操作的分类:    DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML    HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时