from属性操作、事件机制

1、form属性操作
①设置属性：

$(selector).attr("title", ''美女");
参1：要设置的属性名称，参2：属性值，   参2没有时返回属性对应的值
$(selector).prop(); 参2没有时返回false
用法和attr 一样，设置input和button的disabled属性，以及checkbox的checked属性 、selected属性，这几种动态改变的属性必须用prop

②获取属性：

$(selector).attr(“title”);参数：要获取的属性的名称，返回要获取的属性对应的值
此时，返回指定属性的值

③移除属性：

$(selector).removeAttr(“title”); // 参数为：要移除的属性的名称

④：selected 选择selected中被选中的元素

注意：设置selected、checked、disabled要使用.prop()方法。

2、值和内容

①val()方法：
作用：设置或返回表单元素的值，例如：input,select,textarea的值

$(selector).val();// 获取匹配元素的值，只匹配第一个元素
$(selector).val(“具体值”);// 设置所有匹配到的元素的值

另外：val()能使select、checkBox、radio相应的 选项被选中 val(’ 上海 ');
②text() 方法:
作用：设置或获取匹配元素的文本内容

$(selector).text();//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串）
$(selector).text(“我是内容”);//参数表示要设置的文本内容，会清空原有内容

3、尺寸位置操作
（1）高度操作height() ： 作用：设置或获取匹配元素的高度值

$(selector).height(200);//带参数表示设置高度		
$(selector).height();//不带参数获取高度

（2）宽度操作width() ： 作用：设置或获取匹配元素的宽度值

$(selector).width(200);//带参数表示设置宽度  
$(selector).width();//不带参数获取宽度

	console.log($('div').css('width'));//200px 字符串
    console.log($('div').width());//200 数字
    console.log($('div').innerWidth());//210 数字 width+padding
    console.log($('div').outerWidth());//215 数字 width+padding+border
    console.log($('div').outerWidth(true));//215 数字 width+padding+border+margin

（3）坐标值操作
①offset() 作用：获取或设置元素相对于文档左上角的位置

$(selector).offset();// 无参数表示获取，返回值为：{top:num,left:num}，值是相对于document的位置
$(selector).offset({left:100, top: 150});// 设置，参数数值类型不带单位

如果没有定位，会设置position：relative，如果有非static，则不会设置，但会把原来的值给覆盖掉
注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

②scrollTop() 作用：获取或者设置元素垂直方向滚动的位置

$(selector).scrollTop();// 无参数表示获取偏移
$(selector).scrollTop(100);// 有参数表示设置偏移，参数为数值类型

对scrollTop的理解：
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0

③scrollLeft() 作用：获取或者设置元素水平方向滚动的位置

$(selector).scrollLeft(100);

jQuery事件机制
jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

事件发展历程

简单事件绑定–>bind()阶段—>delegate()委托阶段—>on()阶段

• 第一阶段：简单事件绑定，缺点：一次只能注册一个事件，新增的元素不能使用事件

• 第二阶段：bind()阶段，缺点：新增的元素不能使用事件

• 第三阶段：delegate()委托阶段，缺点：不能给自己的注册委托事件

• 第四阶段：on()阶段，解决了前者的缺点

1、简单事件绑定：

click() 			单击事件
mouseenter() 	鼠标进入事件
mouseleave()		鼠标离开事件
dbclick() 		双击事件
change()    		改变事件，如：文本框值改变，下拉列表值改变等
focus() 			获得焦点事件
blur() 			失去焦点事件
keydown() 		键盘按下事件

2、on方式

语法：$(selector).on(events,[selector],[data],function());
// 第一个参数：events，绑定事件的类型
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用(用处不大)
// 第四个参数：function()，事件处理函数
绑定多个事件
$(selector).on(“click mouseenter”, function(){});
表示给$(selector)匹配的元素绑定单击和鼠标进入事件
父元素注册，子元素执行，也可以给自己注册，对新增的元素无效

3、事件解绑 off

off解绑on方式绑定的事件（重点）。
$(selector).off(); 解绑匹配元素的所有事件
$(selector).off(“click”); 解绑匹配元素的所有click事件,自身的和动态的。
$(selector).off(“click”,“**”); 参1：要解绑的事件，参2：解绑动态创建的事件。自身绑定的事件还在

4、事件触发
事件触发的时候只会触发当前元素被执行的事件，单击按钮触发div的单击事件
1、$(selector).click(); 简单事件触发，触发 click事件
2、trigger()方法触发事件，触发浏览器的默认行为

$("button").on("click",function(){
	$("div").trigger("click");
});
$(selector).trigger(“click”);参数：要触发事件的名称

5、triggerHandler触发 事件响应方法，不触发浏览器行为

   $(selector).triggerHandler(“focus”);比如:文本框获得焦点是浏览器的默认行为

6、事件对象
$(function(event){})中 event就是事件对象

event.data 				传递给事件处理程序的额外数据
event.delegateTarget	代理绑定事件的元素
event.currentTarget 	绑定事件的元素，等同于this，this：哪个元素触发的事件，this就指向这个元素
event.target 			触发事件的元素，不一定===this
event.pageX 			鼠标相对于页面的位置
event.clientX 			距离浏览器的位置	
event.screenX			相对于电脑屏幕
event.offsetX			相对于定位的父元素，或者body
event.stopPropagation() 	阻止事件冒泡
event.preventDefault()  	阻止浏览器默认行为
event.type 				事件类型：click，dbclick…
event.which 			鼠标的按键类型：左1 中2 右3
event.keyCode			键盘按键代码

事件执行的顺序：
如果是单击的按钮，首先会触发按钮的单击事件，然后再触发div的单击事件

阻止事件冒泡：

event.stopPropagation()；	阻止事件冒泡
return false;  同时具有阻止冒泡和阻止默认行为的功能