jQuery操作DOM节点的方法总结

1、parent()：获得当前匹配元素集合中每个元素的父元素，该方法只会向上一级对 DOM 树进行遍历

$('li.item-a').parent().css('background-color', 'red');        // 寻找类名为item-a的li元素的父节点元素，并设置背景色为红色

1.1、parents() ：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

$("span").parents().css({"color":"red","border":"2px solid red"});    // 将span元素直到HTML节点之前的所有父节点元素设置边框样式

1.2、parentsUntil() ：返回介于两个给定元素之间的所有祖先元素

<!DOCTYPE html>

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors"> body (曾曾祖父)

  <div style="width:500px;">div (曾祖父)

    <ul>ul (祖父)

      <li>li (直接父)

        <span>span</span>

      </li>

    </ul>

  </div>

</body>

</html>

2、children()：返回返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历

$('ul.level-2').children().css('background-color', 'red');    // 寻找类名为level-2的ul元素，并将其子节点背景色设置为红色

2.1、find() ：返回被选元素的后代元素，一路向下直到最后一个后代

<!DOCTYPE html>

<html>

<head>

<style>

.descendants *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("div").find("span").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="descendants" style="width:500px;">div (current element)

  <p>p (子)

    <span>span (孙)</span>

  </p>

  <p>p (child)

    <span>span (孙)</span>

  </p>

</div>

</body>

</html>

3、创建节点：写好html内容，直接用$()包裹

var $newDiv = $("<div id="newDiv"></div>");

4、clone()：生成被选元素的副本，包含子节点、文本和属性

$("p:first").clone(true);    // 复制每个 p 元素，事件处理器同样被复制到p元素

5、append()：在被选元素的结尾（仍然在内部）插入指定内容

$("p").append(function(n){

      return "<b>This p element has index " + n + "</b>";

});    // 在每个 p 元素的结尾添加内容

6、appendTo()：在被选元素的结尾（仍然在内部）插入指定内容（与append()不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。）

$("<b> Hello World!</b>").appendTo("p");    // 在每个 p 元素的结尾添加内容

7、prepend()：在被选元素的开头（仍位于内部）插入指定内容

$("p").prepend("<b>Hello world!</b> ");    // 在每个 p 元素的开头插入内容

8、prependTo()：在被选元素的开头（仍位于内部）插入指定内容（与prepend()差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。）

$("<b>Hello World!</b>").prependTo("p");    // 在每个 p 元素的开头插入文本

9、before() ：在被选元素前插入指定的内容（被选元素外部）

$("p").before(function(n){

      return "<p>The p element below has index " + n + "</p>";

});    // 在每个段落前面插入新的段落

10、after() ：在被选元素后插入指定的内容（被选元素外部）

$("p").after(function(n){

      return "<p>The p element above has index " + n + "</p>";

});    // 在每个 p 元素后插入内容

11、insertBefore()：在被选元素前插入 HTML 元素（被选元素外部）

$('<span>insertBefore content</span>').insertBefore('p');    // 在p元素前插入span元素

12、insertAfter() ：在被选元素后插入 HTML 元素（被选元素外部）

$('<span>insertAfter content</span>').insertAfter('p');    // 在p元素后面插入span元素

13、remove() ：移除被选元素，包括所有文本和子节点；除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据

$('p').remove();

13.1、removeAttr() ：从被选元素中移除属性

$("p").removeAttr("id");    // 从任何 p 元素中移除 id 属性

13.2、removeClass() ：从被选元素移除一个或多个类（注释：如果没有规定参数，则该方法将从被选元素中删除所有类）

$("p").removeClass("intro");    // 移除所有 <p> 的 "intro" 类

$("p").removeClass();    // 删除<p>元素的所有类

14、detach() ：移除被选元素，包括所有文本和子节点；detach() 会保留所有绑定的事件、附加的数据

$('p').detach()

15、empty() ：从被选元素移除所有内容，包括所有文本和子节点

$('p').empty();

16、replaceWith() ：用指定的 HTML 内容或元素替换被选元素

$('p').replaceWith('<b>replaceWith content!</b>')    // 用粗体文本替换所有段落

17、replaceAll() ：指定的 HTML 内容或元素替换被选元素（与replaceWith差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。）

$('p').replaceAll('<b>replaceAll content!</b>');

18、wrap() ：把每个被选元素放置在指定的 HTML 内容或元素中

$("p").wrap(function(){ return "<div></div>" });    // 用 div 包裹每个段落

18.1、unwrap() ：删除被选元素的父元素

$("p").unwrap();    // 删除所有 <p> 元素的父元素

19、wrapAll() ：在指定的 HTML 内容或元素中放置所有被选的元素

$("p").wrapAll("<div></div>");    // 用一个 div 包裹所有段落

20、warpInner()：使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)

$("p").wrapInner("<b></b>");    // 加粗段落中的文本

21、each()：为每个匹配元素规定运行的函数（遍历指定元素）

$("li").each(function(){

      alert($(this).text())

});    // 输出每个列表项的值

22、text()：设置或返回被选元素的文本内容

$("p").text("Hello world!");    // 改变所有 p 元素的文本内容

$("p").text();    // 获取p元素的文本内容

23、html()：返回或设置被选元素的内容 (inner HTML)

$("p").html("Hello <b>world!</b>");    // 改变 p 元素的内容

$("p").html();    // 获取p元素的内容

　　text()和HTML()的区别：

　　　　区别一：text()函数可用于xml 文档和 html 文档，而 html() 只能用于html文档。

　　　　区别二：html()函数不仅仅显示文本，输出的还包括标签对和文本，而text()只有文本。

24、val()：返回或设置被选元素的值，元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值

$(":text").val("Hello Kitty");    // 改变文本域的值

25、next()：获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素

$("p").next(".selected").css("background", "yellow");    // 查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落，设置背景色为黄色

25.1、siblings()：返回被选元素的所有同胞元素

$("h2").siblings().css({"color":"red","border":"2px solid red"});    // 为h2标签同级的所有元素设置边框样式

$("h2").siblings("p").css({"color":"red","border":"2px solid red"});    // 为h2标签同级的所有p元素设置边框样式

25.2、next() ：返回被选元素的下一个同胞元素，该方法只返回一个元素

$("h2").next().css({"color":"red","border":"2px solid red"});   // 为h2元素的下一个同胞元素设置边框样式

25.3、nextAll() ：返回被选元素的所有跟随的同胞元素

$("h2").nextAll().css({"color":"red","border":"2px solid red"});   // 为h2元素的后面所有同胞元素设置边框样式

25.4、nextUntil() ：返回介于两个给定参数之间的所有跟随的同胞元素

$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});    // 为h2元素后的所有同胞元素，直到h6元素设置边框样式

25.5、prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

26、attr() ：设置或返回被选元素的属性值

　　（1）设置被选元素的属性和值：

$("img").attr("width","180");    // 设置图像的 width 属

　　（2）返回被选元素的属性值：

$("img").attr("width");    // 返回图像的宽度

　　（3）使用函数来设置属性/值：

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

    $("img").attr("width",function(n,v){

      return v-50;

    });

  });

});

</script>

</head>

<body>

<img src="/i/eg_smile.gif" width="128" height="128" />

<br />

<button>减少图像的宽度 50 像素</button>

</body>

</html>

　　（4）为被选元素设置一个以上的属性和值：

$("img").attr({width:"50",height:"80"});    // 设置图像的 width 和 height 属性

27、获取并设置 CSS 类：

addClass()：向被选元素添加一个或多个类
removeClass()：从被选元素删除一个或多个类
toggleClass()：对被选元素进行添加/删除类的切换操作
css()：设置或返回样式属性
hasClass() ：检查被选元素是否包含指定的 class

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

　　例子：

$("div").addClass(""important blue"");    // 向 div 元素添加类 "important blue"

$("div").removeClass("blue");    // 从div元素上删除类blue

$("div").toggleClass("blue");    // div元素切换 CSS 类blue

$("p").css("background-color");    // 返回 p 元素的背景色

$("p").css("background-color","yellow");    // 设置 p 元素的背景色

$("p").css({"background-color":"yellow","font-size":"20px"});    // 为 p 元素设置多个样式

$("p").hasClass("intro");    // 检查段落是否拥有类 "intro"

28、处理元素和浏览器窗口的尺寸：

width()：设置或返回元素的宽度（不包括内边距、边框或外边距）
height()：设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()：返回元素的宽度（包括内边距）
innerHeight()：返回元素的高度（包括内边距）
outerWidth()：返回元素的宽度（包括内边距和边框）
outerHeight()：返回元素的高度（包括内边距和边框）
outerWidth(true)：返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true)：返回元素的高度（包括内边距、边框和外边距）

　　例子：

$("#div1").width();    // 返回id为div1元素的宽

$("#div1").height();    // 返回id为div1元素的高

$("#div1").innerWidth();    // 返回id为div1元素的宽度（包括内边距）

$("#div1").innerHeight();    // 返回id为div1元素的高度（包括内边距）

$("#div1").outerWidth();    // 返回id为div1元素的宽度（包括内边距和边框）

$("#div1").outerHeight();    // 返回id为div1元素的宽度（包括内边距和边框）

$("#div1").outerWidth(true);    // 返回id为div1元素的宽度（包括内边距、边框和外边距）

$("#div1").outerHeight(true);    // 返回id为div1元素的宽度（包括内边距、边框和外边距）

$(window).width();    // 显示文档和窗口的宽

$(window).height();    // 显示文档和窗口的高

$("#div1").width(320);    // 调整 div 的宽

$("#div1").height(320);    // 调整 div 的高

$("#div1").width(320).height(320);    // 调整 div 的尺寸

29、元素的过滤：

first() ：返回被选元素的首个元素
last() ：返回被选元素的最后一个元素
eq() ：返回被选元素中带有指定索引号的元素
gt()：选择器选取 index 值高于指定数的元素（index 值从 0 开始）
lt()：选取 index 值小于指定数的元素（index 值从 0 开始）
filter() ：允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not() ：返回不匹配标准的所有元素（提示：not() 方法与 filter() 相反）

　　例子：

$("div p").first();    // 返回首个 <div> 元素内部的第一个 <p> 元素

$("div p").last();    // 返回最后一个 <div> 元素中的最后一个 <p> 元素

$("p").eq(1);    // 返回第二个 <p> 元素（索引号 等于1）

$("tr:gt(2)");    // 返回第3个<tr>元素后的所有<tr>元素（索引号大于2）

$("tr:lt(2)");    // 返回前3个<tr>元素（索引号小于2）

$("p").filter(".intro");    // 返回带有类名 "intro" 的所有 <p> 元素

$("p").not(".intro");    // 返回不带有类名 "intro" 的所有 <p> 元素

jQuery操作DOM节点的方法总结的更多相关文章

jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
vue中操作Dom节点的方法
1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...
jQuery操作DOM知识总结
jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span> ...
jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
第四章使用jQuery操作DOM
第四章使用jQuery操作DOM 一.DOM操作在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

随机推荐

MYSQL 中的 int(11) 到底代表什么意思？
各 INT 类型无符号最大值用单位表示: INT 类型无符号最大值用单位表示 TINYINT 255 SMALLINT 65535 MEDIUMINT 1677 万 INT 42 亿 BIGINT ...
php调用Redis队列使用例子
1.Controller顶部引入use think\Queue; 2.Controller调用Redis任务 // 1.当前任务将由哪个类来负责处理. $job = 'app\api\job\Resu ...
OpenCV相机标定坐标系详解
在OpenCV中,可以使用calibrateCamera函数,通过多个视角的2D/3D对应,求解出该相机的内参数和每一个视角的外参数. 使用C++接口时的输入参数如下: objectPoints - ...
开源截图工具cutycapt的安装及使用
之前在安装过程中碰到很多问题,也找了不少资料.现总结了下,给有需要的朋友.centos下安装cutycapt比较麻烦,需要先安装qt47,再下载cutycapt源码编译;而在ubuntu下安装cuty ...
[转]happybase1.0 报错：ThriftPy does not support generating module with path in protocol 'f'
happybase1.0 报错:ThriftPy does not support generating module with path in protocol 'f' 2016-10-12 14: ...
计算MySQL的内存峰值公式（转)
-- 计算MySQL的内存峰值公式,计算所有的连接满了的情况下: select (@@key_buffer_size + @@query_cache_size + @@tmp_table_size ...
java线程池ThreadPoolExecutor类使用详解
在<阿里巴巴java开发手册>中指出了线程资源必须通过线程池提供,不允许在应用中自行显示的创建线程,这样一方面是线程的创建更加规范,可以合理控制开辟线程的数量:另一方面线程的细节管理交给线 ...
QT使用SQLite
在QT的widget中用tableview显示sqlite数据库表中的内容. 用QTcreator创建一个基于Widget类的窗口,再拖一个tableview到widget中,保存. 1.在widge ...
S型顺序遍历二叉树(c++实现)
//1.s型顺序访问二叉树,默认先左后右:利用两个栈来实现:如果先右后左的话,改变一下入栈的顺序就行 //2.注意s1 s2插入栈的顺序是不同的 void S_LevelOrderPrint(Tree ...
springboot（二如何访问静态资源和使用模板引擎，以及全局异常捕获）
在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /static / ...

jQuery操作DOM节点的方法总结

jQuery操作DOM节点的方法总结的更多相关文章

随机推荐

热门专题