• jQuery_02之元素操作及事件绑定


    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;

  • 相关阅读:
    ubuntu 软件管理
    java split方法
    linux tcpdump抓包
    linux 文件压缩与解压
    AngularJs出现错误Error: [ng:areq]
    php 跨域设置
    npm 安装完bower 后,提示'bower' 不是内部或外部命令
    less--Module build failed: TypeError: loaderContext.getResolve is not a function
    npm init npm ERR! code EINVALIDTAGNAME
    yarn报错:Found incompatible module
  • 原文地址:https://www.cnblogs.com/Jupiter258/p/6032895.html
Copyright © 2020-2023  润新知