jQuery之元素操作及事件绑定

Posted 2020-08-17 Jupiter258

1、操作元素之属性：

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

　　②prop读：$(“selector”).prop(“属性名”)；=>elem.属性名；改：$(“selector”).prop(“属性名”，值)；

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

2、操作元素之内容：

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

　　②纯文本：读：$(“selector”).text()；=>elem.textContent/innerText；改：$(“selector”).text(“文本”)；

　　③表单元素的value：读：$(“selector”).val()；改：$(“selector”).val(值)；

3、操作元素之样式：

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

　　②修改class属性：a、完整修改：$(“selector”).attr(“class”,”类名”)；b、追加：$(“selector”).addClass(“类名”)；c、移除:$(“selector”).removeClass(“类名”)；d、清除：$(“selector”).attr(“class”,””)；或者$(“selector”).removeClass()；e、判断是否包含:$(“selector”).hasClass(“类名”)；f、在有或没有指定类名之间切换：$(“selector”).toggleClass(”类名“)；

4、遍历节点：

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

　　②获得兄弟元素：下一个兄弟$(“selector”).next([selector])；=>elem.nextElementSibling；前一个兄弟：$(“selector”).prev([selector])；=>elem.previousElementSibling；其他兄弟：$(“selector”).siblings([selector])；

　　③子元素：直接子元素：$(“selector”).children([selector])；所有子代元素：$(“selector”).find(selector)；*（find()必须加selector）；

5、添加：

　　①创建节点：var $elem=$(“完整html元素代码段”)；

　　②添加：追加到parent下所有子节点末尾：$(parent).append($elem)；作为parent的第一个子节点插入：$(parent).prepend($elem)；插入到child之后：$(child).after($elem)；插入到child之前：       $(child).before($elem)；

6、其它操作：

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

　　②替换：$(old).replaceWith(新元素)；或$(新元素).replaceAll(old)；

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

7、事件绑定之bind：

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

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

8、事件绑定之delegate：

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

　　②事件代理使用：将事件绑定到parent上（利用冒泡），只有符合selector条件的元素才能响应事件；$(parent).delegate(“selector”，“事件名”，function(e){e.target})；移除绑定：$(parent).undelegate(“selector”,”事件名”，function(e){e.target})；

9、其它绑定：

　　①一次性事件：$(…).one(“事件名”，fn)；只能执行一次事件处理函数，执行后自动解除；

　　②将元素所有事件绑定到document：$(…).live(“事件名”,fn)；$(…).die(“事件名”,fn)；

　　③仅为一个元素绑定事件处理函数：$(“target”).on(“事件名”，fn)；

　　④利用冒泡：$(“parent”).on(“事件名”，“selector”，fn)；解除绑定off；