1.jQuery操作dom
1.1、jQuery操作属性(atrribute)
操作单个属性:(如果属性已经存在,那就修改,如果属性不存在,添加)
attr(name, value)
操作多个属性
attr(obj) {name:value,name:value...}
获取属性
attr(name) 如果属性不存在 返回undefined
移除属性
removeAttr(name) 如果不传参数 没有效果
1.2、jQuery操作值
获取值 获取的是表单元素的value属性
val()
设置值
val(value)
给select设置值的时候,如果有和值对应的opiton,那么这个option被选中
如果没有跟值对应的option,select选中空白
1.2、jQuery操作内容
获取内容
text() 不会获取到html标签
html() 会获取到
设置内容
text(content) 如果内容中有html标签,会对html标签进行转义
html(htmlStr) 如果有html标签,会把标签转换成对应的元素
1.3、jQuery操作尺寸
css()
height() 获取高度 数值类型
width() 获取宽度 数值类型
height(hegiht) 数值类型
width(width) 数值类型
1.4、jQuery操作坐标
获取坐标
offset() 获取的是当前元素相对于页面左上角的坐标 返回值是一个对象 {top:xx, left:xx}
position() 获取的是当前元素相对有有定位的父元素的坐标,如果父元素没有定位,继续往上找,直到找到body
设置坐标
offset({left:xx,top:xxx}) 如果当前元素没有定位,默认会设置定位为 relative
1.5、jQuery操作滚动
scroll 事件 注册给document window都可以
获取滚动条的滚动值
scrollTop() 获取纵向滚动条的滚动距离
scrollLeft() 获取的横向滚动条的滚动距离
设置滚动条的滚动值
scrollTop(top)
scrollLeft(left)
2.jQuery事件机制
click(function)====>bind(types,function)=====>delegate(selector,types,function)=====>on(types,selector,data,function)
on方法绑定事件的两种形式
1.给自身绑定事件
on(types,function)
2.绑定事件委托
on(types,selector,data,function)
事件委托的原理就是事件冒泡!
unbind undelegate
off() 不传参数解绑所有的事件
off(types) 解绑指定类型的事件,自身和委托事件都会被解绑
off(types,"**") 解绑指定类型的委托事件,自身保留
触发事件:
1、直接调用事件 $("div").click()
2、trigger(type) type要触发的事件的事件类型
3、triggerHandler(type) type要出发的事件的事件类型,但是,他不会触发浏览器的默认行为
事件对象:
event.type 事件的类型
event.data 在注册时间的时候,传一个数据
event.screenX/event.screentY 获取的是鼠标距离屏幕左上角的距离
event.offsetX/event.offsetY 获取的是鼠标距离当前点击的元素的左上角的距离
event.pageX/event.pageY 获取的是鼠标页面左上角的距离加上滚动条的滚动距离
event.clientX/event.clientY 获取是鼠标相对于页面左上角的距离
event.target 鼠标点击的是谁,就是谁
event.currentTarget 相当于this,当前对象
event.delegateTarget 代理对象 谁代理的事件,就是谁
event.keyCode 获取按键的按键代码
event.stopPropagation() 阻止事件冒泡
event.preventDefault() 阻止浏览器默认行为
return false;
3、jQuery补充
1.链式编程
实现原理:set方法中返回了当前对象
注意:只有set方法可以继续链式编程,get方法不可以
因为get方法会返回相应的要获取的值,不能返回当前对象了
end(),恢复当前语句的主体对象到租出状态
tips:
筛选选择器基本上都会把句子的主体对象给更改 prevAll nextAll siblings children parent
2.隐式迭代
只有设置方法才有隐式迭代,一次性操作多个元素
获取方法没有隐式迭代,获取的时候只能获取第一个元素的值
3.each
each(function(index, element){})
jQuery操作属性(重点)
1.设置单个属性
//第一个参数:需要设置的属性名
//第二个参数:对应的属性值
attr(name, value);
//用法举例
$("img").attr("title","哎哟,不错哦");
$("img").attr("alt","哎哟,不错哦");
2.设置多个属性
//参数是一个对象,包含了需要设置的属性名和属性值
attr(obj)
//用法举例
$("img").attr({
title:"哎哟,不错哦",
alt:"哎哟,不错哦",
style:"opacity:.5"
});
3.获取属性
//传需要获取的属性名称,返回对应的属性值
attr(name)
//用法举例
var oTitle = $("img").attr("title");
alert(oTitle);
注意:
- 获取属性时,只会获取到第一个元素对应的属性,与css方法一样
- 获取属性时,如果该属性不存在,那么会返回undefined