jQuery之元素操作及事件绑定

1、操作元素之属性：

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

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

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

2、操作元素之内容：

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

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

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

3、操作元素之样式：

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

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

4、遍历节点：

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

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

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

5、添加：

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

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

6、其它操作：

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

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

　　③复制：var clone=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).delegate(“selector”，“事件名”，function(e)e.target)；移除绑定：(parent).undelegate(“selector”,”事件名”，function(e){e.target})；

9、其它绑定：

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

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

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

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