Web前端之路WEB前端程序开发Web 前端开发

jquery基础知识二

2017-06-06  本文已影响16人  old帅

心灵鸡汤:

有志者事竟成 破釜沉舟 百二秦关终破楚

苦心人天下负 卧薪尝胆 三千越甲可吞吴

1.1重点内容


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/

属性操作总结:”()“里面只有一个参数获取值,里面有两个参数,设置属性

Øval()值操作

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

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

$(selector).val();

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

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

text()

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

//获取操作不带参数(注意:这时候会把所有匹配到的元素内容拼接为一个字符串,不同于其他获取操作!)

$(selector).text();

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

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

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

Ø事件绑定(只介绍on)

1.1.1on方式(最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用的方式)(重点)

jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法

作用:给匹配的元素绑定事件,包括了上面所有绑定事件方式的优点

语法:

//第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)

//第二个参数:selector,执行事件的后代元素

//第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用

//第四个参数:handler,事件处理函数

$(selector).on(events[,selector][,data],handler);

//表示给$(selector)绑定事件,当必须是它的内部元素span才能执行这个事件

$(selector).on( "click",“span”, function(){});

//绑定多个事件

//表示给$(selector)匹配的元素绑定单击和鼠标进入事件

$(selector).on(“click mouseenter”, function(){});

Ø事件解绑

off解绑on方式绑定的事件(重点)

//解绑匹配元素的所有事件

$(selector).off();

//解绑匹配元素的所有click事件

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

//解绑所有代理的click事件,元素本身的事件不会被解绑

$(selector).off( “click”, “**” );

Ø事件触发(用的不多,不在介绍)


上一篇下一篇

猜你喜欢

热点阅读