一、基本操作
　　1.html() - 类似于原生DOM的innerHTML属性
　　　　*获取 - html();
　　　　*设置 - html("html代码");
　　2.val() - 类似于原生DOM的value属性
　　　　*获取 - val();
　　　　*设置 - val(value);
　　3.text() - 类似于原生DOM的textContent属性
　　　　*获取 - text();
　　　　*设置 - text("文本内容");
　　4.attr() - 获取或设置指定元素的属性
　　　　*获取 - attr(attrName) - 类似于getAttribute()
　　　　*设置 - attr(attrName,attrValue) - 类似于setAttribute()
　　　　*removeAttr(attrName) - 类似于removeAttribute()

　　示例：

 <ul id="city">

     <li id="bj" name="beijing">北京</li>

     <li id="tj" name="tianjin">天津</li>

     <li id="nj" name="nanjing">南京</li>

   </ul>

   <input type="text" id="user" value="请输入你的用户名">
 //html()

     $("#bj").html("纽约");//则北京被替换为纽约

     $("#city").html("<li>中国</li>");//ul下的所有元素被删除替换

     //val()

     console.log($("#user").val());//获得value值

     $("#user").val("请输入密码");//设置value值

     //text()

     console.log($("#bj").text());//获得节点中的文本

     $("#bj").text("长春");//修改节点中的文本

     console.log($("#city").text());//只获得标签中的文本节点内容

     $("#city").text("你好");//等价于$("#city").html("你好");

     //attr()

     console.log($("#bj").attr("name"));//beijing

     $("#bj").attr("name","bj");//修改name属性为bj

     $("#tj").attr({name:"tj","data-i":2});//批量修改|设置属性 (data-i 不带引号SyntaxError: Unexpected token -)

     $("#tj").removeAttr("name");//删除name属性

二、样式操作
　　1.attr("class",classValue) - 设置样式|属性
　　2.addClass("className") - 追加样式
　　3.removeClass() - 删除样式
　　　　*不传参 - 删除所有样式
　　　　*传参 - 删除指定样式
　　4.toggleClass() - 切换样式
　　　　*只接受一个参数
　　　　*在没有样式与指定样式之间切换
　　5.hasClass() - 判断样式
　　　　*判断指定元素是否包含指定样式
　　6.css() - 操作样式
　　　　*设置
　　　　　　*css(name,value)
　　　　　　*css(options)
　　　　　　　　*options - 选项
　　　　　　　　{
　　　　　　　　　　name:value,
　　　　　　　　　　name2:value2,
　　　　　　　　　　...
　　　　　　　　}
　　　　　　*获取 - css(name);
　　示例：

 <style>

     div {

         width : 100px;

         height : 100px;

         border : solid 1px black;

         background : pink;

         float : left;

         margin-right : 10px;

     }

     .one {

         width : 50px;

         height : 50px;

         background : yellow;

     }

     .two {

         width : 150px;

         height : 150px;

         background : green;

     }

   </style>

  </head>

  <body>

   <button id="btn1">attr()</button>

   <button id="btn2">addClass()</button>

   <button id="btn3">removeClass()</button>

   <button id="btn4">toggleClass()</button>

   <button id="btn5">hasClass()</button>

   <button id="btn6">css()</button>

   <br></br>

   <div id="d1"></div>

   <div id="d2"></div>
 //attr()

     $("#d1").attr("class","one");//设置class属性

     //addClass()

     $("#d1").addClass("two");//追加|叠加

     //removeClass()

     $("#d1").removeClass();//删除所有 相当于 .class=""

     $("#d1").removeClass("two");//有two则删除

     //toggleClass()

     $("#d1").toggleClass("one");//有则删除，无则添加

     //hasClass()

     console.log($("#d1").hasClass("one"));//返回布尔值

     //css()

     $("#d2").css({

             "background" : "red",//如果设置为空则为删除当前属性

             "width" : 50,

             "height" : 50

         });

     console.log($("#d2").css("float"));//获取当前节点的属性值(所有)

三、遍历节点
　　1.parent() - 获取指定节点的父节点
　　2.children() - 获取指定节点的所有子节点
　　3.next() - 获取指定节点的下一个兄弟节点
　　4.prev() - 获取指定节点的上一个兄弟节点
　　5.siblings() - 获取指定节点的所有兄弟节点
　　6.find(expr) - 在指定节点中查找指定内容
　　　　*注意 - 查找指定节点的后代节点
　　示例：

 li id="bj" name="beijing">北京

         <ul>

             <li>海淀区</li>

             <li>朝阳区</li>

             <li>大兴区</li>

         </ul>

     </li>

     <li id="tj" name="tianjin">天津</li>

     <li id="nj" name="nanjing">南京</li>

     <li id="sh" name="shanghai">上海</li>

     <li id="cq" name="chongqing">重庆</li>

   </ul>
     // 1. 获取北京节点的父节点

     console.log($("#bj").parent().attr("id"));

     // 2. 获取id为city节点的所有子节点的个数

     console.log($("#city").children().length);

     // 3. 获取南京节点的上一个兄弟节点和下一个兄弟节点

     console.log($("#nj").prev().attr("name"));

     console.log($("#nj").next().attr("name"));

     // 4. 获取南京节点的所有兄弟节点的个数

     console.log($("#nj").siblings().length);

     console.log($("#nj~li").length);

     // 5. 获取id为city节点下所有li元素的个数(后代节点)

     console.log($("#city").find("li").length);

四、创建节点
　　1.元素节点 - $(HTML代码)
　　2.文本节点 - text()
　　3.属性节点 - attr()
　　4.jQuery - $(HTML代码)
　　示例：

     <ul id="city">

     <li id="bj" name="beijing">北京</li>

     <li id="tj" name="tianjin">天津</li>

     <li id="nj" name="nanjing">南京</li>

     <li id="sh" name="shanghai">上海</li>

   </ul>
 // 为id为city节点增加<li id="cq" name="chongqing">重庆</li>

     // 1. 创建<li id="cq" name="chongqing">重庆</li>

         // a. 创建<li></li>

         var $li = $("<li></li>");

         // b. 设置属性

         $li.attr("id","cq").attr("name","chongqing");

         // c. 创建文本节点

         // d. 添加文本节点

         $li.text("重庆");

         //var $li = $("<li id='cq' name='chongqing'>重庆</li>");

     // 2. 获取id为city节点

     var $city = $("#city");

     // 3. 添加append - appendChild

     $city.append($li);

     //直接添加

     $("#city").append($("<li id='cq' name='chongqing'>重庆</li>"));

五、删除节点
　　1.remove() - 删除自身及后代节点
　　2.empty() - (清空)删除后代节点,但保留自身节点
　　示例：

 // 1. 删除北京节点

     $("#bj").remove();

     // 2. 删除天津节点

     $("#tj").empty();//保留自身节点，但节点中的文本等所有都删除

六、插入节点
　　1.内部插入
　　　　*append()
　　　　*prepend
　　　　*appendTo()
　　　　*prependTo()
　　2.外部插入
　　　　*before
　　　　*after
　　　　*insertBefore
　　　　*insertAfter
　　示例：

 <ul id="city">

     <li>北京</li>

     <li id="tj">天津</li>

     <li>南京</li>

   </ul>

   <ul id="game">

     <li>反恐</li>

     <li id="ms">魔兽</li>

     <li>星际</li>

   </ul>
 //---内部插入  插入节点的内部，成为其子节点

     // 操作天津节点和魔兽节点

     // append - append后面的节点被添加到append前面的节点的后面

     $("#tj").append($("#ms"));//01append.png

     // prepend - prepend后面的节点被添加到prepend前面的节点的前面

     $("#tj").prepend($("#ms"));//02prepend.png

     // appendTo - appendTo前面的节点被添加到appendTo后面的节点的后面

     $("#tj").appendTo($("#ms"));

     // prependTo - prependTo前面的节点被添加到prependTo后面的节点的前面

     $("#tj").prependTo($("#ms"));

     //---外部插入  成为兄弟节点

     // 操作天津节点和魔兽节点

     // before - before后面的节点被添加到before前面的节点的前面

     $("#tj").before($("#ms"));//03before.png

     // after - after后面的节点被添加到after前面的节点的后面

     $("#tj").after($("#ms"));//04after.png

     // insertBefore

     $("#tj").insertBefore($("#ms"));

     // insertAfter

     $("#tj").insertAfter($("#ms"));

七、替换节点
　　1.repalceWith
　　2.replaceAll - 就是颠倒了的repalceWith
　　示例：

 <button>按钮一</button>

     <button>按钮二</button>

     <button>按钮三</button>

     <p>这是段落.</p>
 // repalceWith - 前面的元素是被替换的,后面的元素时替换的

     $("button").replaceWith($("<p>这也是段落.</p>"));

     // replaceAll - 就是颠倒了的repalceWith

     $("<button>按钮</button>").replaceAll($("p"));

八、复制节点
　　1.JQuery - clone(boolean)
　　　　*boolean参数 - 表示是否复制事件
　　2.DOM - cloneNode(boolean)
　　　　*boolean参数 - 表示是否复制后代节点
　　示例：

 <button>点我</button>

 <p>这是一个段落.</p>
 /jQuery

     $("button").click(function(){

         alert("xxx");

     });

     // 复制button按钮,将其追加到p标签中

     $("button").clone(true).appendTo($("p"));

     // DOM

     var btn = document.getElementsByTagName("button")[0];

     var copy = btn.cloneNode(true);

     var p = document.getElementsByTagName("p")[0];

     p.appendChild(copy);

jQuery操纵DOM的更多相关文章

  1. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  2. 抛弃jQuery：DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  3. 抛弃jQuery：DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  4. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  5. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  6. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  7. jquery和dom之间的转换

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  8. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  9. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

随机推荐

  1. windows下oracle 11g r2 安装过程与卸载详细图解

    Oracle 11g安装 1.解压下载的包,然后进入包内,点击setup.exe开始安装 . 2.出现如下:一般把那个小对勾取消,点击下一步进行, 弹出下图这个后点‘是' 3.下图后,选择创建和配置数 ...

  2. cordova 框架下开发app推送

    cordova提供官方的push pluging,使用的是Google的GCM消息推送服务,一些网络原因,国内GCM可能不怎么好用.所以选择国内的第三方插件. 可供选择的有百度云推送,腾讯云信鸽,极光 ...

  3. python爬取数据需要注意的问题

    1 爬取https的网站或是接口的时候,如果是不受信用的SSL证书,会报错,需要添加如下代码,如下代码可以保证当前代码块内所有的请求都自动屏蔽ssl证书问题: import ssl # 这个是爬取ht ...

  4. C#的内存管理

    栈的填充方式是从高到低,高数位到低数位的填充 堆的填充方式是从低向高,低数位到高数位的填充 内存堆上没有被栈引用的东西,才会被垃圾回收器回收. GC垃圾自动回收会重新排列堆里面的内存占用,自动回收运行 ...

  5. spring-boot分页插件

    1.分页插件,spring-boot.,第一次调用时,存值到 model.addAttribute("status", id);页面获取2.页面获取 后台存入的值,放在input ...

  6. 洛谷P1378油滴扩展

    题目描述 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界. 必须等一个油滴扩展完毕才能放置下一个油滴 ...

  7. 数论初步——Eratosthenes筛法

    具体内容见紫书p312-p313 一.用Eratosthenes筛法构造1~n的素数表 思想:对于不超过n的每个非负整数p,删除2p,3p,4p…,当处理完所有的数后,还没有被删除的就是素数. 代码: ...

  8. MQTT在平台中的应用【本文摘自智车芯官网】

    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协议支持所有平台,几乎可以把所有联 ...

  9. Linux的常用目录学习笔记

    首先,先查看一下Linuxi的一级目录结构: ls: /:表示根目录,文件系统的入口,最高一级目录. bin和sbin:命令保存目录,bin是普通用户能,sbin是root用户用的:/bin存放着系统 ...

  10. Android调用Java WebSevice篇之二

    1.创建Activity. package com.web; import org.ksoap2.SoapEnvelope; import org.ksoap2.serialization.SoapO ...