04-老马jQuery教程-DOM节点操作及位置和大小-阿里云开发者社区

开发者社区> aicoder> 正文

04-老马jQuery教程-DOM节点操作及位置和大小

简介: 1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码: // 动态创建标签 var domDiv = document.
+关注继续查看

1. jQuery创建DOM标签

1.1 DOM动态创建标签的方法

DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码:

// 动态创建标签
var domDiv = document.createElment('div');
// 动态创建属性
domDiv.setAttribute('id', 'box');
// 动态设置内部html标签
domDiv.innerHTML = '<span>动态span</span>';
// 动态追加到body标签中
document.body.appendChild(domDiv);

1.2 jQuery动态创建标签的方式

jQuery的构造函数本身可以接收html标签的字符串来动态创建HTML标签。

语法结构: jQuery(html, [props])

参数:

  • html:用于动态创建DOM元素的HTML标记字符串,注意标签尽量闭合。
  • props:用于附加到新创建元素上的属性、事件和方法

返回值:返回新创建标签的jQuery包装对象

// jq的 appendTo,类似DOM的appendTo方法
$("<div><p>Hello</p></div>").appendTo("body");

// 两次参数的情况
$("<div></div>", {
  "class": "test", // 设置样式类
  text: "Click me!",  // 设置内容
  click: function(){  // 设置点击事件处理程序
    $(this).toggleClass("test");
  }
}).appendTo("body"); // 追加到body标签

2. DOM节点操作

2.1 添加子节点append(content|fn)方法

  • 参数:

    • content:类型String, Element, jQuery,添加的子节点。
    • fn(index,html):返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
  • 返回值:当前父包装对象,jQuery

  • 实例:

<div id="msg">hi</div>
<script>
  $(function(){
    // 添加字符串
    $("#msg").append('<span>你好</span>');
    // 添加dom对象
    var domDiv = document.createElement('div');
    domDiv.innerHTML = "hi laoma q:515154084";
    $("#msg").append(domDiv);
    // 添加jQuery对象
    var $span = $('<span>我是 jQuery对象</span>');
    $("#msg").append($span);

    $("#msg").append(function(index, oldHtml) {
      return "<span>==" + index + "==</span>";
    });
  });
</script>

prepend(content|fn)方法跟append(content|fn)的使用方法一致,只不过一个是在最后追加子节点,一个是在最前面追加子节点(prev vs after)

2.2 追加到appendTo(content)方法

  • 参数:content: 用于被追加的内容选择器,String类型。
  • 返回值: 返回当前的jQuery包装对象。
  • 实例:
$("<div>****</div>").appendTo('body');

prependTo(content)方法,跟appendTo(content)的使用方法一致,一个是追加到最后,一个是追加到最前。

2.3 元素之后插入节点after(content|fn)方法

  • 参数
    • content:插入到每个目标后的内容,类型可以:String,DOM,jQuery
    • fn(index,html):函数必须返回一个html字符串。
  • 返回值: jQuery包装对象
  • 实例
// 字符串
$('div').after('<p>1234</p>');
// jQuery对象
$("p").after($("#msg"));
// dom对象
$("p").after($("#msg")[0]);

// 传入回调函数
$("div").after(function(index, html) {
  return '<p>' + index  + '</p>'
})

before(content|fn) 方法正好是after(content|fn)相反的方法,用法一致。

2.4 插入某个元素之后insertAfter(content)方法

参数: content:插入到每个目标后的内容,类型可以:String,DOM,jQuery。

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插到A后面,而是把A插到B后面。

$("p").insertAfter("#foo");

insertBefore(content)跟此方法相反。

2.5 包裹节点wrap(html|element|fn)方法

  • 概述:

把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。

  • 参数:
    • html, String类型,HTML标记代码字符串,用于动态生成元素并包裹目标元素
    • element, Element类型,用于包装目标元素的DOM元素。
    • fn: 生成包裹结构的一个函数,返回包裹结构html
  • 返回值:jQuery包装对象
  • 实例
<script>
// 把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");
// 用ID是"content"的div将每一个段落包裹起来
$("p").wrap(document.getElementById('content'));
// 用原先div的内容作为新div的class,并将每一个元素包裹起来
</script>

 <!-- HTML 代码: -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
// jQuery 代码:
$('.inner').wrap(function() {
  return '<div class=" + $(this).text() + " />';
});
</script>

<!-- // 结果: -->
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

2.6 去掉父节点包裹unwrap()方法

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

<!-- HTML 代码: -->
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>
<script>
  // jQuery 代码:
  $("p").unwrap()
</script>
<!-- 结果: -->
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

2.7 集合包装wrapAll(html|ele)方法

  • 概述

将所有匹配的元素用单个元素包裹起来。这于 .wrap()是不同的,.wrap()为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

  • 参数

    • html, String类型,HTML标记代码字符串,用于动态生成元素并包装目标元素
    • elem, Element类型,用于包装目标元素的DOM元素
  • 示例

$("p").wrapAll("<div></div>");
// 用一个生成的div将所有段落包裹起来
$("p").wrapAll(document.createElement("div"));

2.8 包裹内部子元素wrapInner(htm|element|fnl)方法

  • 概述

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

  • 参数

    • html, String类型,HTML标记代码字符串,用于动态生成元素并包装目标元素
    • element,Element类型,用于包装目标元素的DOM元素
    • fn,Function类型,生成包裹结构的一个函数
  • 示例

// 把所有段落内的每个子内容加粗
$("p").wrapInner("<b></b>");
// 把所有段落内的每个子内容加粗
$("p").wrapInner(document.createElement("b"));
<!-- 用原先div的内容作为新div的class,并将每一个元素包裹起来 -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
$('.inner').wrapInner(function() {
  return '<div class=" + $(this).text() + " />';
});
</script>

<!-- 结果: -->
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

2.9 替换阶段

  • 方法:replaceAll(selector),用匹配的元素替换掉所有 selector匹配到的元素。

  • 方法:replaceWith(content),用于将匹配元素替换掉的内容。可以是String\DOM\jQuery

// 替换掉所有的p,以下两种方法都可以
$("p").replaceWith("<b>Paragraph. </b>");
$("<b>Paragraph. </b>").replaceAll("p");

2.10 清空子元素

empty()方法,删除匹配的元素集合中所有的子节点

$("p").empty();

2.11 删除节点

remove()方法从DOM中删除所有匹配的元素。

// 删除所有的p标签
$("p").remove();

2.12 复制节点

clone([Even[,deepEven]])方法可以对节点进行克隆。

  • Even:一个布尔值(true 或者 false)指示事件处理函数是否会被复制。
  • deepEven:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

$("b").clone().prependTo("p");

3. DOM的CSS属性读写

3.1 简单获取元素的内部宽高(不包括边框和外边距)

  • innerHeight()

获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。没有参数,返回值是Integer类型

  • 示例
获取第一段落内部区域高度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
</script>
<!-- 结果: -->
<p>Hello</p><p>innerHeight: 16</p>
  • innerWidth()

获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。没有参数,返回值是Integer类型

  • 示例
<!-- 获取第一段落内部区域宽度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
<!-- 结果: -->
<p>Hello</p><p>innerWidth: 40</p>

3.2 获取元素的外部宽高(包括边框或外边距)

3.2.1 outerHeight([options])

  • 概述

获取第一个匹配元素外部高度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。

  • 参数: optionsBoolean默认值:'false',设置为 true 时,计算边距在内。

  • 示例

<!-- 获取第一段落外部高度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
</script>
<!-- 结果: -->
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

3.2.2 outerWidth([options])

  • 概述

获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。

  • 参数:optionsBoolean默认值:'false',设置为 true 时,计算边距在内。

  • 示例

获取第一段落外部宽度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
</script>
<!-- 结果: -->
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>

3.3 jQuery获取元素内容区域的宽高

3.3.1 height([val|fn])

  • 概述

取得匹配元素当前计算的高度值(px)。在 jQuery 1.2 以后可以用来获取 window 和 document 的高

  • 参数

valString 可以是: Number, Function两种类似。

  • Number: 设定CSS中 'height' 的值,可以是字符串或者数字,还可以是一个函数,返回要设置的数值。函数接受两个参数,第一个参数是元素在原先集合中的索引位置,第二个参数为原先的高度。

  • function(index, height) index:String, height:Number 返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。

  • 示例

//第一种:无参数描述:
// 获取第一段的高
$("p").height();
// 第二种:一个参数参数val 
// 把所有段落的高设为 20:
$("p").height(20);

// 参数function(index, height) 
// 以 10 像素的幅度增加 p 元素的高度
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

3.3.2 width([val|fn])

width的用法跟height一致,不再赘述。

3.4 获取和设置滚动条的宽高

3.4.1 scrollTop([val])

  • 概述

获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

  • 参数: val 可以是:String, Number类型

  • 实例:

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
$("div.demo").scrollTop(300);

3.4.2 scrollLeft([val])

用法通scrollTop,不再赘述。

3.5 获取位置和偏移量

3.5.1 position()

  • 概述

获取匹配元素相对父元素的偏移。此方法只对可见元素有效。从边框开始计算。

  • 返回值:Object{top,left} 返回的对象包含两个整型属性:top 和 left。 为精确计算结果,请在补白、边框和填充属性上使用像素单位。
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
// 结果:<p>Hello</p><p>left: 15, top: 15</p>

3.5.2 offset([coordinates])

  • 概述

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。

  • 参数可以省略(获取),或者 coordinates 是Object类型,属性:{top,left} 必需。规定以像素计的 top 和 left 坐标。比如 {top:100,left:0} ,或者:带有 top 和 left 属性的对象
// 获取第二段的偏移
// <p>Hello</p><p>2nd Paragraph</p>
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
// 结果:
// <p>Hello</p><p>left: 0, top: 35</p>

// 设置最后一个段落的top和left值
$("p:last").offset({ top: 10, left: 30 });

预告:
下一篇:jQuery的动画系统详解。


对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码

 
微信:Flydragon_malun 或者18911865673

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
boost操作xml 5分钟官方教程
Five Minute Tutorial This tutorial uses XML. Note that the library is not specifically bound to XML, and any other supported format (such as INI or JSON) could be used instead.
807 0
Pandas高级教程之:window操作
在数据统计中,经常需要进行一些范围操作,这些范围我们可以称之为一个window 。Pandas提供了一个rolling方法,通过滚动window来进行统计计算。 本文将会探讨一下rolling中的window用法。
60 0
jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作、事件绑定(2) ————————————————————学习目录———————————————————————— 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git ————————————————————学习目录———————————————————————
1401 0
js操作DOM入门
一、什么是DOM?    什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近。
648 0
[喵咪大数据]Hadoop节点添加下线和磁盘扩容操作
Hadoop绝非一个简单程序,集群模式下更是如此,所有的数据都存储在Hadoop中如果操作不当会存在丢失数据的风险,那么怎么在安全的情况,扩容下线维护或者磁盘满了怎么增加空间,就是今天的主要内容了.
231 0
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识。
812 0
+关注
aicoder
资深全栈开发工程师,曾任职金和软件等知名公司。对Web前端全栈开发技术、PHP、Java、DotNet、HTML5、数据库集群等有深入研究。曾参与大型分布式高并发互联网项目设计开发等工作,对于分布式应用架构设计、系统优化等经验丰富
90
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载