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

原创 2017年10月07日 00:00:48
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;
既阻止冒泡,又阻止了默认行为
版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery事件-委托机制、事件对象

事件对象原理:是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁。...
  • QQ80583600
  • QQ80583600
  • 2017年01月11日 21:02
  • 393

jQ事件及操作大汇总

事件 bind()        为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。 focus()       当元素获得焦点时,发生 focus 事件。 blur( )  ...
  • u011313703
  • u011313703
  • 2015年12月21日 13:13
  • 1032

jQuery事件处理机制

jQuery事件处理机制: 事件处理机制 1)事件绑订的方式 bind(type,fn) 2)、绑订方式的简写形式 click(function(){ }); 3)、合成事件 ho...
  • minelibra
  • minelibra
  • 2012年05月12日 12:57
  • 1960

jquery中对表单属性的操作总结

由于最近在工作中对表单的接触比较多,对表单的属性操作也比较多,因此总结一下jquery中对表单属性的操作,方便以后工作中的使用。...
  • sinat_32546159
  • sinat_32546159
  • 2017年02月18日 22:08
  • 531

JQ设置更改属性和属性值

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="jquery-3...
  • xuemoKingDeath
  • xuemoKingDeath
  • 2017年07月25日 19:11
  • 518

[JQ权威指南]JQ操作JSON数据

操作JSON数据
  • david_520042
  • david_520042
  • 2016年07月26日 08:43
  • 1228

jq和js分别设置标签属性及样式

attr是设置标签属性,比如设置id,设置class 而css是设置style样式的,比如设置背景色,设置显示为块级元素等。例子如下: var content=$(".divContent"); c...
  • qq_34849013
  • qq_34849013
  • 2017年06月27日 18:04
  • 312

jQuery 操作属性

1、获取属性 - attr()    jQuery attr() 方法用于获取属性值。       语法:$(selector).attr(attribute)    attribute规定要获取其值...
  • qq_27626333
  • qq_27626333
  • 2016年07月16日 23:51
  • 771

jq 改变其他兄弟元素的样式

分类:                              全部                                                        ...
  • u013239233
  • u013239233
  • 2017年02月06日 09:41
  • 993

jq data属性操作的一个陷阱

今天操作元素的data-xxx属性的时候前面修改值使用了attr(),取数据用了data(),页面上看貌似改掉了,但是data函数调用的时候却还是原来的值. 后来发现修改和取得数据都用data就正常...
  • csssy003
  • csssy003
  • 2015年06月17日 16:45
  • 1031
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jq其他属性操作及jq事件机制
举报原因:
原因补充:

(最多只允许输入30个字)