2017/7/4 jq学习心得 jq其他必备知识

最新推荐文章于 2019-08-20 11:12:29 发布

chiuwingyan

最新推荐文章于 2019-08-20 11:12:29 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/chiuwingyan/article/details/74347899

版权

1.1 操作form表单

1.1.1 属性操作

设置属性：

// 第一个参数表示：要设置的属性名称

// 第二个参数表示：该属性名称对应的值

$(selector).attr(“title”, “传智播客”);

获取属性：

// 参数为：要获取的属性的名称，改操作会返回指定属性对应的值

$(selector).attr(“title”);

此时，返回指定属性的值

移除属性：

// 参数为：要移除的属性的名称

$(selector).removeAttr(“title”);

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

prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。

细节参考：http://api.jquery.com/prop/

案例：表格案例全选反选；

1.1.2 值和内容

val()方法：

作用：设置或返回表单元素的值，例如：input,select,textarea的值

// 获取匹配元素的值，只匹配第一个元素

$(selector).val();

// 设置所有匹配到的元素的值

$(selector).val(“具体值”);

text() 方法:

作用：设置或获取匹配元素的文本内容

//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）

$(selector).text();

//设置操作带参数，参数表示要设置的文本内容

// 如果设置的内容包含html标签（<span>我要动态创建span，这时候行吗？</span>），那么text这个方法会把他们当作文本内容输出，而不会创建元素。这个text()和html()方的主要区别

$(selector).text(“我是内容”);

案例：红鲤鱼与绿鲤鱼

1.2 尺寸位置操作

1.2.1 高度和宽度操作

高度操作height() ：

作用：设置或获取匹配元素的高度值

//带参数表示设置高度

$(selector).height(200);

//不带参数获取高度

$(selector).height();

宽度操作width() ：

作用：设置或获取匹配元素的宽度值

//带参数表示设置宽度

//不带参数获取宽度

$(selector).width(200);

css()获取高度和height获取高度的区别？

css()获取的是字符串，例如“100px“；height获取的是数字100

1.2.2 坐标值操作

offset()

作用：获取或设置元素相对于文档的位置

// 无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置

$(selector).offset();

// 有参数表示设置，参数推荐使用数值类型

$(selector).offset({left:100, top: 150});

注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

position()

作用：获取相对于其最近的具有定位的父元素的位置。如果没有定位，则和上面一样

//获取，返回值为对象：{left:num, top:num}

$(selector).position();

注意：只能获取，不能设置。

scrollTop()

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

// 无参数表示获取偏移

// 有参数表示设置偏移，参数为数值类型

$(selector).scrollTop(100);

scrollLeft()

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

$(selector).scrollLeft(100);

对scrollTop的理解：

垂直滚动条位置是可滚动区域在可视区域上方的被隐藏区域的高度。

如果滚动条在最上方没有滚动或者当前元素没有出现滚动条，那么这个距离为0

案例：固定导航栏

二、jq事件机制

1、click

不会层叠；

2、bind绑定（不推荐）

$(selector).bind("click mouseenter",function(){}) 同时绑定多个事件

3、delegate

$(.parentBox).delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});

4、on (最现代的方式）

$(selector).on(event,childSelector,data,function,map)

event 必需。规定要从被选元素移除的一个或多个事件或命名空间。
由空格分隔多个事件值。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});

5、事件解绑

off解绑on方式绑定的事件（重点）

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);

$(selector).off(“click”，".box");
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );

6、事件触发

先绑定click，再触发click

（1）

$(selector).click(); //触发 click事件

（2）tigger

$(selector).trigger(“click”);

（3）triggerHandler

$(selector).triggerHandler(“focus”);

多了一个功能，不触发浏览器行为（只执行程序，不触动事件，以上是都会）

只是执行程序的语言，实际上selector没有被触发

7、事件对象

event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this，当前DOM对象
event.pageX 鼠标相对于文档左部边缘的位置
event.target 触发事件源，不一定===this
event.stopPropagation()；阻止事件冒泡
event.preventDefault(); 阻止默认行为
event.type 事件类型：click，dbclick…
event.which 鼠标的按键类型：左1 中2 右3
event.keyCode 键盘按键代码 //