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 ...

随机推荐

基于SVN提交历史筛选作者并修改文件内容
笔者最近开发的项目中,是通过SVN做为版本管理工具的,因为需要创建的文件太多,所以有许多文件是在原有文件基础上拷贝过来修改的,这里就涉及到一个问题,原有文件中注释里填的JAVA类名.作者工号.创建时间 ...
re正则匹配使用
print(result.span()) #输入字符串的范围如果在匹配语句中有括号,group(1)就是提取第一个括号的内容,以此类推. 扩展思考:如果要从文本中匹配出目标字符串可以使用括号加gro ...
导入JSONPathExtractorExample.jmx文件报错，导不进去
导入之前写的JSONPathExtractorExample.jmx文件,导入不进来,报如下错,百度搜索说是缺少jar包复制别人的信息如下有的时候我们会参考别人的jmx文件,但是在导入的时候会报错 ...
Fixed-point multiplication (C166 A*B/B)
I want to multiply two fixed point numbers. After the multiplication I have to shift the result so t ...
Linux crontab配置
crontab配置 1.命令功能通过crontab 命令,我们可以在固定的间隔时间执行指定的系统指令或 shell script脚本.时间间隔的单位可以是分钟.小时.日.月.周及以上的任意组合.这个 ...
Windows消息【一】消息队列
看了MSDN后,以下是我个人的理解! 消息能够被分为「队列化消息」和「非队列化消息」. 队列化消息是指当程序发生某事件时,由Windows主动捕获并把消息放入系统消息队列中,而程序在运行时会初始化一个 ...
一个简单的PHP短信群发
function bulksms(){ ignore_user_abort();//关掉浏览器,PHP脚本也可以继续执行. set_time_limit(0);// 通过set_time_limit( ...
【巷子】---middleware---redux-promise-middleware---【react】
一.Middleware的由来单一的state是存储在store中,当要对state进行更新的时候,首先要发起一个action(通过dispatch函数),action的作用就是相当于一个消息通知, ...
JavaWeb工程目录结构***
以下是mavaen推荐的项目目录. ├── pom.xml └── src ├── main │ ├── java │ │ └── group │ │ ...
ubuntu更新提示/boot空间不足
1. 查看当前使用的内核版本 uname -a 2.在终端下察看已经安装的旧的内核: ctrl+alt+t——>进入终端——>输入命令: dpkg --get-selections|gre ...

jQuery操作DOM节点的方法总结

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

随机推荐

热门专题