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;

It's never too old to learn!
转载自http://www.cnblogs.com/Jupiter258/p/6032895.html

jQuery之元素操作及事件绑定的更多相关文章

  1. jQuery_02之元素操作及事件绑定

    1.操作元素之属性: ①attr读:$("selector").attr("属性名"):=>getAttribute("属性名"):改 ...

  2. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  3. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  4. jquery的链式操作以及事件绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery文本框(input textare)事件绑定方法教程

    jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...

  6. python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  7. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  8. 14-1 jquery的dom操作和事件对象

    一 jquery的操作有,插入,修改,删除,克隆.具体见下方代码实例: <!DOCTYPE html> <html lang="en"> <head& ...

  9. Jquery 页面元素动态添加后绑定事件丢失方法,非 live

    代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...

随机推荐

  1. apple mobile device服务无法启动,错误1053 解决

    我不想安装iTunes,于是下了iTunes64安装包,解压后得到6个文件 安装完 AppleMobileDeviceSupport64.msi 发现服务启动不起来,提示错误1053,网上搜了下发现出 ...

  2. PHP:array_chunk()数组分割

    array_chunk(); 作用:把一个数组分割为新的数组块 用法: 实例:把数组分割为带有两个元素的数组块 $cars=array("Volvo","BMW" ...

  3. linux 服务器对拷命令scp

    1.今天在进行linux下服务部署时由于重新部署的繁杂,所以我决定用scp命令在linux线上服务器(A)拷贝一份服务程序到现有的服务器(B)上: 具体的操作命令是:scp -r A_username ...

  4. linux添加ip、路由相关命令

    1- Linux添加永久路由vi /etc/sysconfig/network-scripts/route-eth1ADDRESS0=192.168.10.0NETMASK0=255.255.255. ...

  5. DOM based XSS Prevention Cheat Sheet(DOM Based XSS防御检查单)

    本文为翻译版本,原文请查看 https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet 介绍 谈到XSS攻击,有三种公认的 ...

  6. Ubantu16.4的安装过程以及基本配置

    Ubantu16.4的安装过程以及基本配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 欢迎加入高级运维工程师之路:598432640 其实很早以前就听朋友说ubantu这怎么好 ...

  7. geckodriver v0.11.0 github上下载的

    从 https://github.com/mozilla/geckodriver/releases 下载的.家里下载不了,selenium 3.0.1 + python 2.7.10 + firefo ...

  8. scrum3.0

    3.0----------------------------------------------------- SCRUM 流程的步骤2: Spring 计划 1. 确保product backlo ...

  9. 开发环境中biztalk项目设置注意事项(转)

      适用版本:biztalk 2006 适用环境:开发测试环境 在开发过程中,在开发环境中,一定会是一个对项目不断的修改.编译.部署.测试,查看测试结果,发现有问题,然后回到开发环境再修改.编译.部署 ...

  10. 大数据导致DataReader.Close超时的异常

    公司一个数据抓取的程序,数据量极大,读取数据的用IDataReader的Read方法来进行数据处理,在测试的时候我想跑一部分数据后跳出循环,即break; 然后关闭datareader,但是在执行da ...