*jquery操作DOM总结 (原创：最全、最系统、实例展示)

时间：2021-10-13 07:31:41

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元素&amp&semi;&amp&semi;MySQL记录操作&amp&semi;&amp&semi;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&period;jQuery操作DOM节点与jQuery&period;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. 【英语】Bingo口语笔记&lpar;48&rpar; - 关于春节的表达

  2. 1&period;4&period;2 solr字段类型--&lpar;1&period;4&period;2&period;1&rpar;字段类型定义和字段类型属性

    1.4.2 solr字段类型 (1.4.2.1) 字段类型定义和字段类型属性. (1.4.2.2) solr附带的字段类型 (1.4.2.3) 使用货币和汇率 (1.4.2.4) 使用Dates(日期 ...

  3. phpnow升级php版本 php-5&period;2&period;14-Win32升级至5&period;3&period;5

    PHPNow自带的PHP版本为5.2.14,而最后一次更新在于2010-9-22.下面来升级PHP5.3.5: 1.下载安装文件: 先下载PHP5.3.5,下载地址:php-5.3.5-Win32-V ...

  4. vi命令复制粘贴

    2.复制粘贴 yy :复制当前行 p :粘贴到光标所在行的下一行

  5. springboot配置文件（&period;yml）中自定义属性值并在controller里面获取

    1,由于项目需要,学习了新的框架--springboot,顺便练习一下在.yml中配置自定义属性并在controller里面获取.(以下的Springboot框架我已经搭建好,就不在陈述) 2,spr ...

  6. BZOJ3676&lbrack;Apio2014&rsqb;回文串——回文自动机

    题目描述 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. 输入 输入只有一行,为一个只包含小写字 ...

  7. windows快速打开命令窗口方式&lbrack;利刃篇&rsqb;

    windows当然是窗口界面操作了,谁有事没事去用什么命令行啊,但是当你要用的时候,也要会用才行哦. 打开命令行的方式小说一下: 1.开始 > 运行 > cmd , enter,  ok ...

  8. java实现网页验证码

    Servlet: package cn.bdqn.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletExceptio ...

  9. &lbrack;OpenGL&rsqb;用OpenGL制作动画

    //在窗口内绘制一个移动的矩形 /*我们通常还可以用OpenGL程序创建动画效果,这里我们利用前面的例子,绘制正方形,并使这个正方形在窗口的边框反弹.这里需要创建一个循环,在每次调用显示回调函数之前改 ...

  10. YOLO&lpar;Darknet官方&rpar;训练分类器

    目录 1. 分类数据准备 2. Darknet配置 3. Darknet命令使用 4. cifar-10 使用示例 1. 分类数据准备 需要的文件列表: 1. train.list : 训练的图片的绝 ...

相关文章