jQuery学习03

1. jQuery操作DOM
1.1 操作DOM元素的属性
1.1.1 设置属性
attr(name, value);设置单个属性和属性的值。
attr(obj);obj：{name:value,name:value...}设置多个属性和属性的值。
如果元素已经存在对象的属性，这将原来的属性值修改为设置的值，如果属性不存在，则添加指定的属性和属性值。
1.1.2 获取属性
attr(name);获取指定的属性值。
如果元素中没有要获取的属性则返回undefined。
1.1.3 移除属性
removeAttr(name);移除指定的属性，如果不传入参数则无效。
1.1.4 修改单属性的值
单属性有checked、selected、disable等。
prop()的用法和attr()一致，prop()可以获取这些单属性的值，获取的值为true或者false，而attr()获取的值不是boolean。
1.2 操作值
这里操作的是表单元素的value值。
1.2.1 获取值
val();获取表单元素的value值。
1.2.2 设置值
val(value);设置值。
select标签中没有value值，但是在给select设置value值时，如果select下面的option中value中与设置的value值一致的话，这个option会被select选中。如果没有对应的option，则选中空白。
1.3 操作内容
1.3.1 获取内容
text()：不会获取到html标签，只获取标签之间的内容。
html()：会获取到整个标签，包括标签本身。
1.3.2 设置内容
text(content)：如果内容中有html标签，会对html标签进行转义，并整体输出。
html(htmlStr)：如果有html标签，会把这部分内容转换成对应的元素，再展现出来。
1.4 操作尺寸
尺寸：width和height。
1.4.1 获取尺寸
height()：获取高度，获取到的值为数值类型。
width()：获取宽度，获取到的值为数值类型。
1.4.2 设置尺寸
height(hegiht)：设置高度，值必须为数值类型。
width(width)：设置宽度，值必须为数值类型。
1.4.2 与css()操作尺寸的区别
通过css()获取到的高度和宽度值为带单位的字符串，无法进行数学运算。
通过width和height获取到的是一个数字，可进行运算后改变尺寸。
1.5 操作坐标
1.5.1 获取坐标
offset();获取的是当前元素相对于整个文档左上角的距离。返回值是一个对象{top:xx, left:xx}。
position();获取的是当前元素相对于有定位的父元素的左上角的距离，如果父元素没有定位，继续往有定位的，直到找到body。
1.5.2 设置坐标
offset({left:xx,top:xxx});如果设置的元素没有设置定位，则默认叫该元素的定位更改为relative。
1.6 操作滚动距离
1.6.1 获取滚动条的滚动值
scrollTop()：获取纵向滚动条的滚动距离。
scrollLeft()：获取的横向滚动条的滚动距离。
1.6.2 设置滚动条的滚动值
scrollTop(top);设置的值必须为数值类型的。
scrollLeft(left);设置的值必须为数值类型的。
2. jQuery事件机制
2.1 事件绑定on
2.1.1 给自身绑定事件
on(types,function)：给自身绑定多个事件。动态创建的元素没有绑定到事件。
2.1.2 代理绑定、事件委托
on(types,selector,data,function)：给父元素绑定事件，当后代元素中有指定选择器触发了事件，则通过事件冒泡的形式，让父元素执行事件处理函数。
第一个参数：types，字符串，由多个事件类型组成，不同事件类型之间通过空格隔开。
第二个参数：selector, 指定子元素中能通过事件冒泡的形式将指定的事件类型传递给父元素。
第三个参数：data，传递给处理函数的数据，注册事件时就将参数对应的值已经保存至event.data中，函数执行时调用event.data。
第四个参数：handler，事件处理函数。
2.2 事件解绑off
2.2.1 解除所有绑定事件
off()：不传参数时，解绑元素所有的已注册事件。
2.2.2 解除指定的绑定事件
off(types)：解绑指定的事件类型，自身和委托事件都会被解绑。
2.2.3 解除委托事件
off(types,"**")：解绑指定的委托事件类型，自身对应的事件类型保留。
2.3 触发事件
2.3.1 直接触发事件
jQueryobj.事件类型()的方式直接调用事件，可以触发元素对应的事件类型。
2.3.2 trigger(type)
type为要触发的事件的事件类型。
2.3.3 triggerHandler(type)
type为要触发的事件类型，但是这种方式的触发不会触发浏览器的默认行为。
2.4 事件对象
2.4.1 event.type
获取到的是触发的事件类型
2.4.2 event.target/event.currentTarget/event.delegateTarget
event.target：第一个触发事件的元素。
event.currentTarget：当前触发事件的元素，等同于this。
event.delegateTarget：代理事件的对象。
2.4.3 event.data
在注册事件的时候，传入的一个数据。
2.4.4 screen/offset/page/client
event.screenX/event.screentY：获取的是鼠标距离电脑屏幕左上角的距离。
event.offsetX/event.offsetY：获取的是鼠标距离当前元素的左上角的距离。
event.pageX/event.pageY：获取的是鼠标距离整个文档左上角的距离，相当于event.clientX/event.clientY的距离加上滚动条的滚动距离。
event.clientX/event.clientY：获取是鼠标相对于页面可视区域左上角的距离。
2.4.5 stopPropagation/preventDefault
event.stopPropagation()：阻止事件冒泡。
event.preventDefault()：阻止浏览器默认行为。
如果函数中return false;则同时阻止该事件的事件冒泡和阻止当前元素触发事件时的浏览器默认行为。