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






  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一个流行的JavaScript库,它简化了对DOM元素的操作。下面是一些常见的jQuery操作DOM的示例: 1. 选择元素: 使用jQuery选择器可以方便地选择DOM元素。例如,要选择id为"myElement"的元素,可以使用以下代码: ```javascript var element = $("#myElement"); ``` 2. 操作样式: 使用jQuery可以轻松地添加、删除或修改元素的样式。例如,要将元素的背景颜色设置为红色,可以使用以下代码: ```javascript element.css("background-color", "red"); ``` 3. 操作内容: jQuery提供了许多方法来操作元素的内容。例如,要获取或设置元素的文本内容,可以使用以下代码: ```javascript var text = element.text(); // 获取文本内容 element.text("Hello, World!"); // 设置文本内容 ``` 4. 操作属性: 使用jQuery可以方便地获取或设置元素的属性。例如,要获取或设置元素的href属性,可以使用以下代码: ```javascript var href = element.attr("href"); // 获取href属性值 element.attr("href", "https://www.example.com"); // 设置href属性值 ``` 5. 添加和删除元素: 使用jQuery可以在DOM添加或删除元素。例如,要在一个元素内部添加一个新的子元素,可以使用以下代码: ```javascript element.append("<div>New element</div>"); // 添加新的子元素 ``` 这些只是jQuery操作DOM的一些基本示例,jQuery还提供了许多其他强大的功能,如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值