jquery 操作DOM元素(1)
.clone() 创建一个匹配的元素集合的深度拷贝。 .clone([withDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复制元素上的时间处理函数。 .clone([withDataAndEvents][,deepwithDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复制元素上的时间处理函数。 deepwithDataAndEvents 一个布尔值,指示是否对时间处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值。
$(".hello").clone().appendTo(".goodbye")
效果 :
<div class="hello">Hello</div>
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
.wrap() 在集合中匹配的每个元素周围包裹一个HTML 结构。 .wrap([wrappingElement]) wrappingElement 一个选择器,元素,html字符 jq 对象指定的html结构环绕包裹的匹配元素。 .wrap(function) function 一个回调函数,返回用于包裹匹配元素的HTML内容或对象。
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrap('<div class="new" />');
结果:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
$('inner').wrap(function(){
return '<div class="'+$(this).text()+'"/>'
})
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
.wrapAll() 在集合中所有的匹配元素的外褒一个HTML结构。 .wrapAll(wrappingElement) wrappingElement 一个选择器,元素,html字符。
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrapAll('<div class="new" />');
<div class="container">
<div class="new">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>
.wrapAll(function) function 一个回调函数。index 表示匹配元素在集合中的索引的位置。this 指向集合中的当前位置。
$("p").wrapAll($(".doublediv")); 在所有的"p"元素
.wraplnner() 在匹配元素里的内容外包一层结构。 .wraplnner(wrappingElement) wrappingElement 用来包在匹配元素的内容外面的HTML片段选择表达式,jquery对象 DOM 元素。
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrapInner('<div class="new" />');
<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
.wraplnner(function(index)) function(index) function 一个返回HTML结构的函数,用来包裹在匹配元素的外面 this 指匹配中的元素。
$("P").wrapInner(document.createElement("b"));
.append() 在每个匹配元素里面的末尾处插入参数内容。 .append(content[,content]) content DOM 元素 DOM 数组,HTML字符串 jquery 对象。 content 一个或多个DOM 元素,元素数组,HTML字符串。
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').append('<p>Test</p>');
效果:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
.append(function(index,html)) function(index,html) 返回一个html 字符串,DOM 元素,对象函数。this 指向元素集合中的当前元素。
<p>I would like to say: </p>
$('p').append(document.createTextNode("Hello"))
效果: <p>I would like to say: Hello</p>
.appendTo() 将匹配的元素插入到目标元素的最后面 .appendTo(target) target 一个选择符 ,元素,HTML 字符串,DOM 元素数组。
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('<p>Test</p>').appendTo('.inner');
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
.html() 获取集合中第一个匹配元素的HTML 内容或设置每一个HTML内容。 .html() 这个方法不接收任何元素。
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
$('div.demo-container').html();
获得到的结果
<div class="demo-box">Demonstration Box</div>
.html(htmlString) htmlString 用来设置每一个匹配元素的HTML代码 .html(function(index oldHTML)) 用来返回设置HTML内容的一个函数
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');
效果如下:
<div class="demo-container">
<p>All new content. <em>You bet!</em></p>
</div>
.prepend() 将参数内容插入到每个匹配元素的前面。(元素内容) .prepend(content[,content]) DOM 元素,元素数组,HTML 字符串 对象。
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').prepend('<p>Test</p>');
效果:
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>
.prepend(function(index.html)) 一个返回HTML字符串,DOM元素,jQuery对象的函数,该字符串用来插入到匹配元素的开始处 $("p").prepend(document.createTextNode("Hello "));
.prependTo() 将所有的元素插入到目标元素前面(元素内)。 .prependTo(target) target 一个选择器, DOM元素,元素数组,HTML字符串,或者jQuery对象,将被插入到匹配元素前的内容。
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('<p>Test</p>').prependTo('.inner');
效果:
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>
.text() 得到匹配元素集合中每个元素的合并文本。包括他们的后代。 .text() 这个方法不接受任何参数。
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
$('div.demo-container').text()
效果如下:
Demonstration Box list item 1 list item 2
.text(textString)
设置匹配元素集合中每个元素的文本内容
.text(text)
用于设置匹配元素内容的文本。
.text( function(index, text) )
用来返回设置文本内容的一个函数。
$('div.demo-container').text('<p>This is a test.</p>');
.text() 方法不能使用在 input 元素上。 输入的文本需要使用 .val() 方法。
- 【编程基础】C语言内存使用的常见问题
- kmeans聚类理论篇K的选择(轮廓系数)
- 算法之旅 | 选择排序法
- 【专业技术】Android数据保存之SharedPreferences
- 【答疑解惑】Java中的高精度数字
- 2000! | 看上去如此简单的面试题,让太多“前端”英雄好汉折戟
- 【Windows编程】系列第六篇:创建Toolbar与Statusbar
- arguments,想说爱你不容易
- 【android开发】Android binder学习一:主要概念
- 高考啦! JavaScript高考全国卷
- 2017 JavaScript高考全国卷 参考答案与解析
- 用贝叶斯判别分析方法预测股票涨跌
- 开发 | 在 Mac OS X 装不上 TensorFlow?看了这篇就会装
- 【答疑解惑】Java中的默认构造器和equals方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用自定义链式栈解决力扣括号匹配问题
- String及StringTable(三):StringBuilder源码解读
- UidGenerator:百度开源的分布式ID服务(解决了时钟回拨问题)
- String及StringTable(四):StringBuffer与StringBuilder对比
- Apache James 2.3.2.1 邮箱服务搭建
- SpringBoot实现微信小程序登录的完整例子
- String及StringTable(五):java8的新工具类StringJoiner
- spring security oauth2使用refresh_token报错UserDetailsService is required
- 你所不知道的React| 趋势解读、底层逻辑、学习路径、实战应用
- js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
- TKinter Label 和 Button
- Java类如何防止被实例化
- PHP中的json_encode和json_decode
- Java重写equals和hashCode方法
- upload-labs第11~12关 00截断