jq其他属性操作及jq事件机制

A.jQ其他属性操作
1.val方法
val方法用于设置和获取表单元素的值,例如input、select、textarea.
//填参数设置值
$("#name").val(''大触");
//不填参数获取值
$(“#name”).val();
2.html方法
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
3.text方法
$(“div”).text(“<span>这是一段内容</span>”);
html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
4.height
$(“img”).height(200);//设置图片高度200px
$(“img”).height();//200(number类型)
$(“img”).css(“width”)//"200px"(字符串)
5.width用法同height
width()如果不传递参数,是获得盒子的宽度
本质是获取内容的宽度,不包括padding和border;
innerWidth是包括内容+padding,不包括border
outerWidth是包括内容和padding和border
outerWidth如果里面穿参数true则是内容+padding+border+margin;
6.scrollTop/scrollLeft设置或者获取滚动条的位置
$(selector).scrollTop();
jq给window注册scroll事件
$(window).scroll(function(){
var top = $(this).scrollTop();
})
scrollTop()要设置高度,必须要在异步队列中
setTimeout(function(){
$(window).scrollTop(700);
},0)设为0加入异步队列最前面
B.jQuery事件机制
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定
1.简单事件绑定就是传统事件绑定的缺点就是一次只能绑定一个事件。
2. bind事件绑定
$("p").bind("click mouseenter", function(){
    //事件响应方法
});
缺点:不支持动态创建出来的元素绑定事件

不管是传统事件绑定,还是bind绑定,都不能给未来元素绑定事件。
delegate委托事件绑定
支持动态事件绑定
$().delegate(selector,'click',function(){
console.log(1);
});
好处,事件只需要绑定一次,节省性能。
可以给未来元素绑定事件。
4.on事件绑定
常用:
$(selector).on( "click",“span”,data,function() {});
参数1.事件类型,参数2.选择器,参数3.回调函数
$(selector).on(events[,selector][,data],handler);
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
5.off()解绑
off()不传参,解绑所有事件,包括绑定事件
传参(‘事件’),只解绑传递过来的事件,
box.off('click',**'')只解绑委托事件
6.事件触发
$('').click();
$().trigger('click');

整理1.1.1 jQuery事件对象()
对象属性
解释
event.type
事件类型
event.data
存储绑定事件时传递的附加数据
event.target
点了谁就是谁
event.currentTarget
等同于this,将来调用这个事件的对象
event.delegateTarget
代理对象
screenXscreenY
对应屏幕最左上角的值
offsetXoffsetY
点击的位置距离元素的左上角的位置
clientXclientY
距离页面左上角的位置(忽视滚动条)
pageXpageY
距离页面最顶部的左上角的位置(会计算滚动条的距离)
event.witch
鼠标按键类型,1=鼠标左键 2=鼠标中键 3=鼠标右键
event.keyCode
按下的键盘代码
event.stopPropagation()
阻止事件冒泡行为
event.preventDefault()
阻止浏览器默认行为(a链接跳转)
return false;
既阻止冒泡,又阻止了默认行为
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/alightman/article/details/78167812
个人分类: Jquery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭