一、基本操作
  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. JavaScript---设计模式之迭代器模式

    迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示. jQuery中我们经常会用到一个each函数就是迭代器模式 作用 为遍历不同的集合结构提供一个统一的接口,从而 ...

  2. P1103 书本整理

    P1103 书本整理 题目描述 Frank是一个非常喜爱整洁的人.他有一大堆书和一个书架,想要把书放在书架上.书架可以放下所有的书,所以Frank首先将书按高度顺序排列在书架上.但是Frank发现,由 ...

  3. centos7下安装elasticSearch错误总结(单节点模式)

    1.首先确定你安装了jdk,版本需要1.8以上 2.上传elasticsearchjar包,只需配置一个文件即可 修改配置文件config/elasticsearch.yml    network.h ...

  4. Linux下Expect 完成自动输入密码

    今天要开发一个定时任务,然后加入cron列表中.但是有个问题摆在眼前,脚本的执行中需要输入数据库密码(貌似5.1版本以上不允许在-p后直接加密码,会报错) mysql -u root -p <& ...

  5. 形象的理解Strong和Weak

    Strong Weak

  6. 【多校联合】(HDU6045)Is Derek lying?

    分析 之前没有想到题目解法,看了题解才会,记录一下思考过程. 这条题目的实质是,在满足合法的情况下,有没有a和d的可行解?也就是说,不要仅仅附在表面的思考逻辑条件,而是要思考实际的数学表达. 转化为数 ...

  7. 第三十五篇 类的内置属性(attr属性),包装和授权,__getattr__

    双下划线开头的attr方法,都是类内置的方法. 一. 如果没有在类里定义这三个方法,调用的时候就调用类内置的默认的方法 class Too: pass # 类没有定义这三个属性,就用系统默认的方法 t ...

  8. FlaskWeb开发从入门到放弃(二)

    第5章 章节五 01 内容概要 02 内容回顾 03 面向对象相关补充:metaclass(一) 04 面向对象相关补充:metaclass(二) 05 WTforms实例化流程分析(一) 06 WT ...

  9. Go基础篇【第6篇】: 内置库模块 flag

    import "flag" flag包实现了命令行参数的解析.每个参数认为一条记录,根据实际进行定义,到一个set集合.每条都有各自的状态参数. 在使用flag时正常流程: 1.  ...

  10. windows下连接hadoop运行eclipse报错Permission denied:

    这是权限问题,试了一下同时也不能在hdfs创建文件夹. 解决: 修改如下hadoop的配置文件:etc/hadoop/hdfs-site.xml,如没有的话可以添加上. <property> ...