04-老马jQuery教程-DOM节点操作及位置和大小
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节点操作及位置和大小相关推荐
- 03-老马jQuery教程-DOM操作(上)
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- jquery的DOM节点操作(删除元素节点)
1.删除元素节点 在操作页面时,删除多余或者指定的页面元素是非常必要的. jquery中提供了remove()方法来删除元素. 其语法格式如下: 删除元素节点示例代码: <!DOCTYPE ht ...
- jquery的DOM节点操作(复制元素节点)
1.复制元素节点 在页面中,有时候需要复制某个元素节点,可以通过clone()方法轻松实现这一功能. 语法格式如下: 在复制元素节点后,也要将复制的元素节点追加到某元素节点下,这样才会在相应的区域显示 ...
- jquery的DOM节点操作(替换元素节点)
1.替换元素节点 在jquery中,如果要替换元素中的节点,可以使用replaceWith()和replaceAll()这两种方法.这里我们推荐使用replaceWith()方法,其语法格式分别如下: ...
- jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点 动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法 元素内部插入子节点 元素内部插入子节点有两种 ...
- jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
- DOM节点操作大全(一)
下面是对DOM节点操作的整理,有创建节点.插入节点.删除节点.复制节点 希望可以帮助到有需要的小伙伴哦 在下一篇博客小编会整理DOM节点属性的知识点 文章目录 创建节点 插入节点 删除节点 复制节点 ...
- jquery对dom的操作常用方法整理
参考:https://www.jb51.net/article/39099.htm jquery对dom的操作包括了对html内容的添加.删除元素/内容.操作CSS等等,本文整理了一些dom操作的常用 ...
- jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
最新文章
- Pytorch搭建yolo3目标检测平台
- Gentoo 安装日记 07 (stage3:复制解压stage包,并切换根目录)
- dell笔记本电脑驱动_笔记本电脑摄像头打不开,怎么办?总结经验(基于摄像头本身是完好的)...
- ubuntu 开启ssh_CS学习笔记 | 22、通过SSH开通通道
- python加密程序_Python加密程序
- 华为桌面云 服务器可以虚拟多少,【华为桌面云】案例:单服务器环境且只有两块本地SATA盘创建虚拟机非常慢...
- emacs c语言,如何利用Emacs来调试C++程序
- 和显卡驱动要配套吗_天天学渲染,你的显卡驱动用对了吗?
- Python多篇新闻自动采集
- NTFS不利的一面——ADS流文件
- 图例解析四大UML关系图使用
- 硬件开发笔记(二):硬件开发基本流程,制作一个USB转RS232的模块(一):开发基本过程和元器件选型
- 塞规公差带图_螺纹塞规公差及尺寸表
- 使用Rsync+cwRsync实现数据异机备份+异地备份
- springboot酒店客房预定管理系统
- PS调出唯美冷色情侣婚纱写真照
- 浪尖断更两天回家过年了!
- AI教程之:渐变效果
- 头一回见!提升10倍效率,阿里给业务校验平台插上了AI的翅膀
- 计算机学部毕业设计答疑记录,毕业论文答疑记录
热门文章
- oracle归档目录莫名删除,Oracle归档目录被自动删除的bug
- [BUUCTF-pwn]——wustctf2020_getshell_2
- 8.2.4临时表和正式表
- 从 +new Date 说起,Javascript的一元操作符
- mysql多表关联更新
- Django基础核心技术之Model模型的介绍与设计
- jquery中filter、find、children、contents、contains区别
- 使用WeUI+JS 的label包含input触发两次的问题
- Jmeter测试监控 Summary Report界面
- Qt Qwdget 汽车仪表知识点拆解4 另类进度条实现