jQuery之元素操作及事件绑定

Posted 2020-08-19 WANGJUN59451

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery之元素操作及事件绑定相关的知识，希望对你有一定的参考价值。

1、操作元素之属性：

　　①attr读：

(“selector”).attr(“属性名”，值)；=>setAttribute(“属性名”，值)；*（*无法访问不再开始标签中存在的prop属性；例：checked，selected，disabled）；

　　②prop读：

(“selector”).prop(“属性名”，值)；

　　③移除属性：$(“selector”).removeAttr(“属性名”)；=>removeAttribute(“属性名”)；

2、操作元素之内容：

　　①html原文：读：

(“selector”).html(“html片段”)；=>elem.innerHTML=”html片段”；清空元素：$(“selector”).empty()；=>elem.innerHTML=””；

　　②纯文本：读：

(“selector”).text(“文本”)；

　　③表单元素的value：读：

(“selector”).val(值)；

3、操作元素之样式：

　　①直接操作CSS属性：

(“selector”).css(“CSS属性名”，值)；=>elem.style.CSS属性名=值；同时修改多个属性值：$(“selector”).css({属性名1：值1，属性名2：值2，……})；*（css（）能读取所有属性，但只能修改内联样式，属性名须去横线化驼峰）；

　　②修改class属性：a、完整修改：

(“selector”).addClass(“类名”)；c、移除:

(“selector”).hasClass(“类名”)；f、在有或没有指定类名之间切换：$(“selector”).toggleClass(”类名“)；

4、遍历节点：

　　①获得父元素：$(“selector”).parent()；=>elem.parentNode;或elem.parentElement；

　　②获得兄弟元素：下一个兄弟

(“selector”).prev([selector])；=>elem.previousElementSibling；其他兄弟：$(“selector”).siblings([selector])；

　　③子元素：直接子元素：

(“selector”).find(selector)；*（find()必须加selector）；

5、添加：

　　①创建节点：var

(“完整html元素代码段”)；

　　②添加：追加到parent下所有子节点末尾：

elem)；

6、其它操作：

　　①删除：$(要删除的元素).remove()；

　　②替换：

(新元素).replaceAll(old)；

　　③复制：var

(“selector”).clone([true])；*（true：为深度克隆包括事件处理函数）；

7、事件绑定之bind：

　　①$(…).bind(“事件名”，fn)=>addEventListener；为同一元素的事件处理函数绑定多个函数对象；

　　②$(…).unbind（“事件名”，fn）=>removeEventListener；如果有可能移除事件处理函数，则绑定时必须用实名函数绑定，不能用匿名函数；重载：a、不带任何参数：移除元素上所有事件处理函数绑定；b、只带一个事件名称参数：移除元素上指定事件名称绑定的所有函数对象；c、带两个参数：仅移除事件元素上指定事件名称绑定的执行的函数对象；

8、事件绑定之delegate：

　　①事件代理：让指定父元素下所有符合要求的子元素都能使用事件处理函数（包括生成）；原理：利用事件冒泡：a、仅将事件处理函数绑定在父元素；b、获得目标元素：e.target；c、仅响应符合条件的元素的事件；

　　②事件代理使用：将事件绑定到parent上（利用冒泡），只有符合selector条件的元素才能响应事件；