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

时间:2022-09-21 21:51:36

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
老马微信:请扫码

 
04-老马jQuery教程-DOM节点操作及位置和大小
微信:Flydragon_malun 或者18911865673

04-老马jQuery教程-DOM节点操作及位置和大小的更多相关文章

  1. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  2. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  3. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  4. &lpar;转载&rpar;html dom节点操作&lpar;获取&sol;修改&sol;添加或删除&rpar;

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  5. jQuery克隆DOM节点

    jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  6. jQuery删除DOM节点

    jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  7. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  8. Dom节点操作总结

    Dom   一:Dom的概念 Dom的简介:  全称为 document object model  文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...

  9. 01-老马jQuery教程-jQuery入口函数及选择器

    前言 这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟.视频都是免费,请参考课程地址:https://chuanke.baidu.com/s5508922.html ...

随机推荐

  1. hdu 5427 A problem of sorting&lpar;字符排序&rpar;

    Problem Description There are many people's name and birth in a list.Your task is to print the name ...

  2. Maven干货

    好处: 1. 依赖管理:对jar包统一管理 2. 项目构建: 项目编码完成后,对项目进行编译.测试.打包.部署.之前项目构建通过eclipse工具实现.今天学习新的工具也可以实现这些过程.比如:通过m ...

  3. c&num; 初识WPF

    WPF,全名是Windows Presentation Foundation,是微软在.net3.0 WinFX中提出的.WPF是对Direct3D的托管封装,它的图形表现依赖于显卡.当然,作为一种更 ...

  4. k8s搭建rook-ceph

    一.介绍 Rook官网:https://rook.io Rook是云原生计算基金会(CNCF)的孵化级项目. Rook是Kubernetes的开源云本地存储协调器,为各种存储解决方案提供平台,框架和支 ...

  5. Hive之变量和属性

    首先看一下hive cli工具对于变量的定义规定的几项功能: $ bin/hive -h usage: hive -d,--define <key=value>          Vari ...

  6. python之auto鼠标&sol;键盘事件

    mouse_key.py import os import time import win32gui import win32api import win32con from ctypes impor ...

  7. C&num;下使用XmlDocument详解

    XML在开发中作为文件存储格式.数据交换的协议用的非常普遍,各个编程语言有都支持.W3C也制定了XML DOM的标准.在这里主要介绍下.Net中的XmlDocument,包括xml读取和写入等功能.一 ...

  8. mfc 函数重载

    函数重载的概念 for循环中变量 一. 函数重载的概念 函数重载允许我们使用相同的函数名定义多个函数. 提示: 函数参数类型不同,可重载. 类型相同时,则需要参数个数不同. int max(int a ...

  9. 构建私有Docker Registry

    1.设置insecure-registry: 可能会出现无法push镜像到私有仓库的问题. 这是因为我们启动的registry服务不是安全可信赖的. 1) sudo vim /etc/default/ ...

  10. SQL 一

    1.所有表都必须在模式中.2.SYS模式不是默认模式3.虽然有概念用户PUBLIC,但它根本没有模式.4.索引有自己的名称空间,存储过程.同义词.表和视图都在同一名称空间里.5.堆是可变长度行的表,这 ...