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

2017.7.14 学习笔记 JQ选择器的使用及JS输入框事件及获取其相对属性值

JQ简化js代码的语言 为所有p标签添加颜色--> $(document).ready(function(){ $("button").click(functi...

[JQ_node3] 事件机制

JQ事件绑定及移除 bind() 为每个匹配的元素绑定一个或多个事件处理函数语法:bind( event , fn ) //不能给未来元素添加事件$("p").bind("click", funct...

jq与js中的事件机制与阻止

版权声明:此文首发于我的个人站Keyon Y,转载请注明出处。 JQuery中的事件绑定,都是属于事件冒泡。JQuery中绑定事件处理函数的几种方式,都不允许我们传递事件类型(是事件冒泡,还是事件捕获...

jq 数组操作、事件处理和相关处理函数的使用

shift: 删除数组的一个元素 unshift: 将数值插入到数组的第一个元素 pop: 删除数组里最靠后的元素 push:将数值插入到数组的最后一个元素中 splice: 通过指定的...

jq框架封装学习笔记5-样式操作与属性操作模块

样式操作有哪些方法常用.css(), .addClass(), .hasClass(), .removeClass(),.toggleClass().css 方法 jepson...

【整理】JQ样式篇——属性与样式

一、.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。(如:在img元素中,src就是元素的特性,用来标记图片的地址。)...

[JQ权威指南]第六天:使用attr获取与设置元素的属性

获取: 在一个页面中,创建一个标记,通过JQUERY中的attr()方法获取标记的src和title属性值,并显示到页面中。 ...

关于JQ对checkbox的click事件触发的一个坑

今天插件里的遇到一个坑困扰我很久,写了一个键盘事件触发input的click事件来改变选项值,一直不正确,测试了好久终于发先问题出在input点击时改变checked和执行click事件的顺序上。写一...
  • webjhh
  • webjhh
  • 2016年03月11日 17:10
  • 19038

jq中绑定事件bind(),live(),delegate(),on()的优缺点

前言   因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jq其他属性操作及jq事件机制
举报原因:
原因补充:

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