源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Jquery 基础学习笔记之文档处理

  • 时间:2021-07-03 09:12 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Jquery 基础学习笔记之文档处理
主要包括以下几部分:(1)内部插入(2)外部插入(3)包裹(4)替换(5)删除(6)赋值。那我们就开始详细地看一下。 [b]1、内部插入:向一些元素的内部插入内容 [/b](1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如 描述: 向所有段落中追加一些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) 把所有匹配的元素追加到另一个指定的元素元素集合中 描述: 把所有段落追加到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> (3) prepend(content) 向每个匹配的元素内部前置内容 描述: 向所有段落中前置一些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> ] (4) prepend() 把所有匹配的元素前置到另一个、指定的元素元素集合中。 描述: 把所有段落追加到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> [b]2、内部插入:向一些元素的外部插入内容[/b] (1)after(content)在每个匹配的元素之后插入内容。 描述: 在所有段落之后插入一些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> (2)before() 在每个匹配的元素之前插入内容 描述: 在所有段落之前插入一些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> ] (3)insertafter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 描述: 把所有段落插入到一个元素之后。与 $("#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 把所有匹配的元素插入到另一个、指定的元素元素集合的前面 描述: 把所有段落插入到一个元素之前。与 $("#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> [b]3、包裹:把一些元素包裹起来 [/b](1)wrap(html) 把所有匹配的元素用其他元素的结构化标记包裹起来 描述: 把所有的段落用一个新创建的div包裹起来 HTML 代码: <p>Test Paragraph.</p> jQuery 代码: $("p").wrap("<div class='wrap'></div>"); 结果: <div class="wrap"><p>Test Paragraph.</p></div> (2) wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来 描述: 用ID是"content"的div将每一个段落包裹起来 HTML 代码: <p>Test Paragraph.</p><div id="content"></div> jQuery 代码: $("p").wrap(document.getElementById('content')); 结果: <div id="content"><p>Test Paragraph.</p></div><div id="content"></div> (3)wrapAll(html) 将所有匹配的元素用单个元素包裹起来 描述: 用一个生成的div将所有段落包裹起来 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("p").wrapAll("<div></div>"); 结果: <div><p>Hello</p><p>cruel</p><p>World</p></div> (4) wrapAll(elem)将所有匹配的元素用单个元素包裹起来 描述: 用一个生成的div将所有段落包裹起来 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("p").wrapAll(document.createElement("div")); 结果: <div><p>Hello</p><p>cruel</p><p>World</p></div> (5) wrapInner(html)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 描述: 把所有段落内的每个子内容加粗 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("p").wrapInner("<b></b>"); 结果: <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p> (6) wrapInner(elem) 描述: 把所有段落内的每个子内容加粗 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("p").wrapInner(document.createElement("b")); 结果: <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p> [b]4、替换:用制定的元素替换一些HMTL或者DOM元素[/b] (1)replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素 描述: 把所有的段落标记替换成加粗的标记。 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("p").replaceWith("<b>Paragraph. </b>"); 结果: <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> (2) repalceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。 描述: 把所有的段落标记替换成加粗标记 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("<b>Paragraph. </b>").replaceAll("p"); 结果: <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> [b]5、删除:删除制定的元素 [/b](1)empty() 删除匹配的元素集合中所有的子节点。 描述: 把所有段落的子元素(包括文本节点)删除 HTML 代码: <p>Hello, <span>Person</span> <a href="#">and person</a></p> jQuery 代码: $("p").empty(); 结果: <p></p> (2)remove([expr]) 从DOM中删除所有匹配的元素 描述: 从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> 5、复制:克隆匹配的元素 (1)Clone() 克隆匹配的DOM元素并且选中这些克隆的副本。 描述: 克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。 HTML 代码: <b>Hello</b><p>, how are you?</p> jQuery 代码: $("b").clone().prependTo("p"); 结果: <b>Hello</b><p><b>Hello</b>, how are you?</p> (2) clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本 描述: 创建一个按钮,他可以复制自己,并且他的副本也有同样功能。 HTML 代码: <button>Clone Me!</button> jQuery 代码: $("button").click(function(){ $(this).clone(true).insertAfter(this); }); 终于整理完毕。以上内容参考与Jquery1.3中文参考。 希望此篇对初学者有益。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部