jQuery简要dom操作
文本
dom
获取标签 $(选择)。
创建一个标签对象 $("标签"); 由于所有的返回jQuery对象,能够调用链(无论jQuery API 回报jQuery对象)
插入标签
内部插入
1.append(content|fn)
概述
向每一个匹配的元素内部追加内容。
这个操作与对指定的元素运行appendChild方法。将它们加入到文档中的情况类似。
參数
contentString, Element, jQueryV1.0
要追加到目标中的内容
function(index, html)FunctionV1.4
返回一个HTML字符串,用于追加到每个匹配元素的里边。
接受两个參数,index參数为对象在这个集合中的索引值。html參数为这个对象原先的html值。
演示样例
描写叙述:向全部段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]
2.appendTo(content) 返回值:jQuery 把全部匹配的元素追加到还有一个指定的元素元素集合中。
实际上,使用这种方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中。而是把A追加到B中。
在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是全部被追加的内容,而不不过先前所选中的元素。所以,要选择先前选中的元素,须要使用end()方法,參见例二。
參数
contentString
用于被追加的内容
演示样例
描写叙述:把全部段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
描写叙述:新建段落追加div中并加上一个class
HTML 代码:
<div></div><div></div>
jQuery 代码:
$("<p/>")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
结果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>
3.prepend(content|fn)
prepend(content)
向每一个匹配的元素内部前置内容。
这是向全部匹配元素内部的開始处插入内容的最佳方式。
參数
contentString, Element, jQueryV1.0
要插入到目标元素内部前端的内容
function(index, html)FunctionV1.4
返回一个HTML字符串。用于追加到每个匹配元素的里边。
接受两个參数,index參数为对象在这个集合中的索引值。html參数为这个对象原先的html值。
演示样例描写叙述:向全部段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]
描写叙述:将一个DOM元素前置入全部段落
HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代码:
$("p").prepend( $(".foo")[0] );
结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>
描写叙述:向全部段落中前置一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").prepend( $("b") );
结果:
<p><b>Hello</b>I would like to say: </p>
4.prependTo(content)
返回值:jQueryprependTo(content)
概述
把全部匹配的元素前置到还有一个、指定的元素元素集合中。
实际上,使用这种方法是颠倒了常规的$(A).prepend(B)的操作。即不是把B前置到A中,而是把A前置到B中。
在jQuery 1.3.2中。appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,须要使用end()方法,參见 appendTo 方法的例二。
參数
contentString
用于匹配元素的jQuery表达式
演示样例描写叙述:把全部段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>
外部插入
1..after(content|fn)
after(content|fn)
在每一个匹配的元素之后插入内容。
參数
contentString, Element, jQueryV1.0
插入到每一个目标后的内容
functionFunctionV1.4
函数必须返回一个html字符串。
演示样例描写叙述:在全部段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>
描写叙述:在全部段落之后插入一个DOM元素。
HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("#foo")[0] );
结果:
<p>I would like to say: </p><b id="foo">Hello</b>
描写叙述:在全部段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("b") );
结果:
<p>I would like to say: </p><b>Hello</b>
2.before(content|fn) 返回值:jQuery 在每一个匹配的元素之前插入内容。
參数
contentString, Element, jQueryV1.0
插入到每一个目标后的内容
functionFunctionV1.4
函数必须返回一个html字符串。
演示样例描写叙述:在全部段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]
描写叙述:在全部段落之前插入一个元素。
HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代码:
$("p").before( $("#foo")[0] );
结果:
<b id="foo">Hello</b><p>I would like to say: </p>
描写叙述:在全部段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").before( $("b") );
结果:
<b>Hello</b><p>I would like to say: </p>
3.insertAfter(content) 返回值:jQuery 把全部匹配的元素插入到还有一个、指定的元素元素集合的后面。
实际上,使用这种方法是颠倒了常规的$(A).after(B)的操作。即不是把B插入到A后面,而是把A插入到B后面。
在jQuery 1.3.2中。appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,须要使用end()方法。參见 appendTo 方法的例二。
參数
contentStringV1.0
用于匹配元素的jQuery表达式
演示样例描写叙述:把全部段落插入到一个元素之后。与 $("#foo").after("p")同样
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>
4.insertBefore(content) 返回值:jQuery 把全部匹配的元素插入到还有一个、指定的元素元素集合的前面。
实际上,使用这种方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面。而是把A插入到B前面。
在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,须要使用end()方法。參见 appendTo 方法的例二。
參数
contentStringV1.0
用于匹配元素的jQuery表达式
演示样例描写叙述:把全部段落插入到一个元素之前。与 $("#foo").before("p")同样。
HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>
删除标签
1.empty() 返回值:jQuery 删除匹配的元素集合中全部的子节点。
演示样例描写叙述:把全部段落的子元素(包含文本节点)删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
2.remove([expr])
从DOM中删除全部匹配的元素。
这种方法不会把匹配的元素从jQuery对象中删除,因而能够在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外,其它的比方绑定的事件。附加的数据等都会被移除。
參数expr String
用于筛选元素的jQuery表达式
演示样例描写叙述:从DOM中把全部段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
描写叙述:从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>
3.detach([expr]) 返回值:jQuery detach([expr])
从DOM中删除全部匹配的元素。
这种方法不会把匹配的元素从jQuery对象中删除。因而能够在将来再使用这些匹配的元素。
与remove()不同的是,全部绑定的事件、附加的数据等都会保留下来。
參数
expr String 用于筛选元素的jQuery表达式
演示样例描写叙述:从DOM中把全部段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach();
结果:
how are
描写叙述:从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach(".hello");
结果:
how are <p>you?
</p>
获得和加入标签
attr(name|properties|key,value|fn)
设置或返回被选元素的属性值。
參数
name String 属性名称
properties Map 作为属性的“名/值对”对象
key,value String, Object 属性名称。属性值
key,function(index, attr) String,Function
1:属性名称。
2:返回属性值的函数,第一个參数为当前元素的索引值。第二个參数为原先的属性值。
演示样例
參数name
描写叙述:返回文档中全部图像的src属性值。
jQuery 代码:
$("img").attr("src");
參数properties
描写叙述:为全部图像设置src和alt属性。
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
參数key,value 描写叙述:
为全部图像设置src属性。
jQuery 代码:
$("img").attr("src","test.jpg");
參数key,回调函数 描写叙述:
把src属性的值设置为title属性的值。
jQuery 代码:
$("img").attr("title", function() { return this.src });
版权声明:本文博客原创文章。博客,未经同意,不得转载。
jQuery简要dom操作的更多相关文章
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
- js,jQuery和DOM操作的总结(二)
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML 学习笔记 JQuery(DOM 操作)
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
随机推荐
- Java笔试题1
1. 下面的代码执行后,什么结果输出是? String s1 = new String("Test"); String s2 = new String("Test&quo ...
- Excel阅读器NPOI
什么是NPOI? NPOI 它是 POI 项目的 .NET 版本号. POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 使用 NPOI 你就能够在没有安装 Office ...
- UVa 988 - Many Paths, One Destination
称号:生命是非常多的选择.现在给你一些选择(0~n-1),和其他选项后,分支数每一次选择,选择共求. 分析:dp,图论.假设一个状态也许是选择的数量0一个是,代表死亡,计数的路径数将达到所有死亡可以去 ...
- MySQL 批量Dll操作(转)
概述 本章节介绍使用游标来批量进行表操作,包括批量添加索引.批量添加字段等.如果对存储过程.变量定义.预处理还不是很熟悉先阅读我前面写过的关于这三个概念的文章,只有先了解了这三个概念才能更好的理解这篇 ...
- wpf做的3d滑动gallery
原文:wpf做的3d滑动gallery wpf做的3d滑动gallery 随着iphone\ipad的流行及热捧,现在做移动产品不管是什么平台的,领导总想做成像ios系统的样子.自从微软发布了wind ...
- POJ2239 Selecting Courses【二部图最大匹配】
主题链接: http://poj.org/problem?id=2239 题目大意: 学校总共同拥有N门课程,而且学校规定每天上12节可,一周上7天. 给你每门课每周上的次数,和哪一天哪一节 课上的. ...
- effective c++ 条款5 c++ 默默实现的函数
当写一个空类c++ 会为我们自动提供四个函数 1 默认构造函数 2 默认析构函数 3 拷贝构造函数 4 默认赋值运算符
- “ddl”有一个无效 SelectedValue,因为它不在项目列表中。
“ddl_ekt”有一个无效 SelectedValue,因为它不在项目列表中. 怎么回事 现象: 在用户控件的page_load事件里绑定下拉框,报上面错误 解决: 将下拉框绑定,放在page_In ...
- HDU 1885 Key Task 国家压缩+搜索
点击打开链接 Key Task Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- [LeetCode82]Remove Duplicates from Sorted List II
题目: Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct ...