jquery操作DOM包括八个方面：

一：jquery对DOM节点的基本操作；
二：jquery对DOM节点的CSS样式操作；
三：jquery遍历DOM节点；
四：jquery创建DOM节点；
五：jquery删除DOM节点；
六：jquery替换DOM节点；
七：jquery复制DOM节点；
八：其他；

一：jquery对DOM节点的基本操作

1.html操作:获取或设置标签之间的 HTML,此操作类似JS中的innerHTML
①$('p').html();  //获取p元素中的html代码
②$('p').html('阿森纳夺冠');  //设置p中的内容为:阿森纳夺冠
   $('p').html('<b>阿森纳夺冠</b>');  //显示为：阿森纳夺冠，并且字体加粗

2.文本操作：获取或设置标签之间的文本内容,此操作类似JS中的textContent
①$('p').text();  //获取p元素中的文本内容，但不获取html代码
②$('p').text('阿森纳夺冠');  //设置p中的内容为:阿森纳夺冠
  $('p').text('<b>阿森纳夺冠</b>');  //设置p中的内容为:<b>阿森纳夺冠</b>

3.值操作：获取或设置元素中value属性的值
①$('input[type="text"]').val();  //获取input的value值；
②$('input[type="text"]').val("霸王龙");  //设置input的value值为霸王龙；

4.属性操作：(name、id、title、class、value、style、width...)
①$('#bj').attr('name'); //获取北京节点的name属性值
②$('#bj').removeAttr('name'); //删除北京节点的name属性值
③$('#bj').attr('name','beijing'); //设置北京节点的name属性值
④$('#bj').attr("name",function(){ return this.value}); //把value属性的值设置设给name属性
⑤$('#bj').attr({title:"北京",style:"color:red"}); //同时设置title和style值
⑥注意：$('input[type="text"]').attr('value')同样可以获得input的value值，当然也能设置value值，那还要.val()方法干嘛呢？那是因为.val()可以动态获得input中输入的文本值，例如：<input type="text" value='我是中国人' /><script type="text/javascript">
  $('input').keyup(function(){
    console.log($('input').attr('value')); //总是'我是中国人'
    console.log($('input').val()); //随input中文本变化而变化
  })
</script>
⑦注意：设置checkbox、radio和select为选中的代码如下：
$('checkbox').prop('checked',ture/false);
$('radio').prop('checked',ture/false);
$('select').prop('selected',ture/false);
prop和attr有什么区别呢？
·对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
·对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
举个例子：
<a href="#" id="link1" action="delete">删除</a>
<a>元素的DOM属性有“href、id和action”，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

二：jquery对DOM节点的CSS样式操作

①$("p").css("color"); //获取p元素的color样式值;
②$("p").css("color","red"); //设置p元素的颜色属性为红色;
③$("p").css({ //设置p元素多个样式
     width:'60px',
     height:'80px',
     background:'green',
   });
④$("p").addClass("lf"); //给p元素添加lf样式
⑤$("p").removeClass("lf"); //移除p元素lf样式
⑥$("p").toggleClass("lf"); //元素p添加、删除轮流切换样式lf
⑦$("p").hasClass("lf"); //判断p元素是否有lf样式，返回true或false
   注意：lf前面不要加.
⑧var left=$("p").offset().left; //获取p元素左侧相对于当前窗口左侧的偏移量
   var top=$("p").offset().top; //获取p元素顶部相对于当前窗口顶部的偏移量
   注意:offset()只对可见元素有效。
⑨var left=$("p").positon().left; //获取p元素于最近的个position样式属性设置为relative或者absolute的祖交节点的左侧相对偏移量
   var top=$("p").positon().top; //获取p元素于最近的个position样式属性设置为relative或者absolute的祖交节点的顶部相对偏移量
⑩var scrollLeft=$("p").scrollLeft(); //获取元素p的滚动条距左侧的距离
   var scrollTop=$("p").scrollTop(); //获取元素p的滚动条距顶端的距离
   $("p").scrollTop(300); //将p元素滚动到离页面顶部300px的位置
   $("p").scrollLeft(300); //将p元素滚动到离页面左侧300px的位置
   注意：这里的数值不能加引号，也不用加px，只需要给数值就可以了
   注意：当滚动条位置位于最顶部时，位置是0；
           当用于返回位置时：该方法返回第一个匹配元素的滚动条的垂直位置。
           当用于设置位置时：该方法设置所有匹配元素的滚动条的垂直位置。

三：jquery遍历DOM节点

1.遍历祖先
①$('#bj').parent(); //获取#bj的父节点（单个）（parent后面括号不能加选择器）
②$('#bj').parents(); //获取#bj的所有祖先元素，它一路向上直到文档的根元素(<html>)
③$("#bj").parentsUntil("div"); //获取介于<p>与<div>元素之间的所有祖先元素

2.遍历后代
①$('div').children('p.1'); //获取类名为"1"的所有p元素，并且它们是div的直接子元素
②$("div").find("span"); //获取被选元素的后代元素，一路向下直到最后一个后代。该例结果为获取属于 <div> 后代的所有 <span> 元素

3.遍历同胞
①$("h2").siblings("p"); //获取属于h2的同胞元素的所有p元素
②$('#bj').next('li'); //获取#bj的下一个兄弟节点，且节点需为li
③$('#bj').prev('li'); //获取#bj的上一个兄弟节点，且节点需为li
④$("h2").nextAll(); //从h2开始，获取它以后的所有同胞元素
⑤$("h2").nextUntil("h6"); //获取向后介于 <h2> 与 <h6> 元素之间的所有同胞元素
⑥$("h2").prevAll(); //从h2开始，获取它以前的所有同胞元素
⑦$("h2").prevUntil("h6"); //获取向前介于 <h2> 与 <h6> 元素之间的所有同胞元素

4.元素过滤
①$("div p").first(); //获取首个div元素内部的第一个p元素
②$("div p").last(); //获取首个div元素内部的最后一个p元素
③$("p").eq(1); //获取第二个p元素（索引号 1)
④$("p").filter(".intro"); //获取带有类名 "intro" 的所有p元素
⑤$("p").not(".intro"); //获取不带有类名 "intro" 的所有p元素,与folter相反

四：jquery创建DOM节点

①$('ul').append('<li>香蕉</li>'); //将<li>香蕉</li>作为最后一个子节点添加进来
②$('ul').prepend('<li>香蕉</li>'); //将<li>香蕉</li>作为第一个子节点添加进来
③$('ul').after('<li>香蕉</li>'); //将<li>香蕉</li>作为下一个兄弟节点添加进来
④$('ul').before('<li>香蕉</li>'); //将<li>香蕉</li>作为上一个兄弟节点添加进来
⑤$('<li>香蕉</li>').appendTo('ul'); //将<li>香蕉</li>作为最后一个子节点添加进来
⑥$('<li>香蕉</li>').prependTo('ul'); //将<li>香蕉</li>作为第一个子节点添加进来
⑦$("<p>insertAfter操作</p>").insertAfter("span"); //将新建的p元素添加到查找到目标元素span后面，做为目标元素后面的第一个兄弟节点
⑧$("<p>insertAfter操作</p>").insertBefore("span"); //将新建的p元素添加到查找到目标元素span后面，做为目标元素前面的第一个兄弟节点
⑨$("p").wrap("<b></b>"); //使用b标签包裹所有的p元素，所有的p元素标签用一个b标签包裹
⑩$("strong").wrapInner("<b></b>"); //使用b标签包裹每个一strong元素的子元素

五：jquery删除DOM节点

①$('ul li:eq(1)').remove(); //删除第2个li元素
②$('ul li').remove('li[title="菠萝"]'); //删除title为菠萝的li元素
③$('ul li:eq(1)').empty(); //清除第2个li元素的内容　

六：jquery替换DOM节点

①$("p").replaceWith("<b>Hello world!</b>"); //用粗体文本替换每个段落
②$("<b>Hello world!</b>").replaceAll("p"); //用粗体文本替换每个段落

七：jquery复制DOM节点；

①$('ul li').click(function(){
$(this).clone().appendTo('div');
}) //复制当前点击的li节点，并将它追加到div下的最后面;
//clone()的括号里加true，复制节点的同时复制单击事件;
②$('ul li').click(function(){
$(this).clone().prependTo('div');
}) //复制当前点击的li节点，并将它追加到div下的最前面;
//clone()的括号里加true，复制节点的同时复制单击事件;　

八：其他
①$('ul').on('click','li',function(){
        var num=$(this).index()+1;    //获取li是ul的第几个子元素
   })

转载请注明出处：http://www.cnblogs.com/jacksplwxy/p/6645442.html

*jquery操作DOM总结 (原创：最全、最系统、实例展示)的更多相关文章

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

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

  2. 1、jQuery操作Dom

    1.添加元素 <code> <script language="JavaScript">$().ready(function(){$("input ...

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

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

  4. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  5. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  6. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  7. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  8. jQuery权威指南（第2版） 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

  9. jQuery操作dom事件

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

随机推荐

  1. Kubernetes 本地仓库

    1.Kubernetes本地私有仓库 Docker仓库主要用于存放Docker镜像,Docker仓库分为公共仓库和私有仓库,基于registry可以搭建本地私有仓库.使用私有仓库有如下优点: 1)节省 ...

  2. 学JS的心路历程-函式（六）其余参数及预设参数

    今天我们要来介绍ES6新增的其余参数及预设参数! 其余参数rest parameter …numbers可以让我们表示不确定数量的参数,并将其视为一个数组: function getVal(…numb ...

  3. export default 与 export

    export default 只能导出一个 可以用任意的变量来接收 export 可以暴露多个成员,需要用 import {} 接受成员 需要用名字接受 名字必须跟导出名字一致  //或者as作为别名 ...

  4. window上安装 MongoDB 及其 PHP扩展

    window上安装 MongoDB 及其 PHP扩展   工具/原料   window MongoDB MongoDB 方法/步骤     MongoDB 下载 MongoDB提供了可用于32位和64 ...

  5. Java计算计算活了多少天

    Java计算计算活了多少天 思路: 1.输入你的出现日期: 2.利用日期转换,将字符串转换成date类型 3.然后将date时间换成毫秒时间 4.然后获取当前毫秒时间: 5.最后计算出来到这个时间多少 ...

  6. msf客户端渗透（三）：提权、图形化payload

    对普通权限session提权 生成一个木马 开启Apache服务 将木马上传网页 被攻击者从这个网页上获取到这个木马 攻击者开启msf侦听 当被攻击者双击这个木马文件时 攻击者就获取到一个sessio ...

  7. Jmeter学习（三十二）调试工具Debug Sampler（转载）

    转载自 http://www.cnblogs.com/yangxia-test 一.Debug Sampler介绍: 使用Jmeter开发脚本时,难免需要调试,这时可以使用Jmeter的Debug S ...

  8. android显示和隐藏软键盘（转）

    显示键盘: EditText editText.setFocusable(true); editText.setFocusableInTouchMode(true); editText.request ...

  9. python基础入门学习简单程序练习

    1.简单的乘法程序 i = 256*256 print('The value of i is', i) 运行结果: The value of i is 65536 2.执行python脚本的两种方式 ...

  10. Django、Flask、Tornado的比较

    一:常用请求参数的接收 Django中: request.GET/POST Tornado中: self.get_query_argument()/get_query_arguments() self ...