jQuery包裹节点用法完整示例

本文实例讲述了jQuery包裹节点用法。分享给大家供大家参考，具体如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来
  //$("strong").wrapAll("<b></b>");
  //$("strong").wrapInner("<b></b>");
});
//]]>
</script>
</head>
<body>
<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery的父子兄弟节点查找示例代码

    jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents

  • JQuery包裹DOM节点的方法

    本文实例讲述了JQuery包裹DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果要将某个节点用其他标记包裹起来,JQuery提供了相应的方法,即wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义. wrap() 复制代码 代码如下: $("#li_1").wrap("<strong></strong>"); 得到的结果如下: <strong> <li id="l

  • jquery获取子节点和父节点的示例代码

    一.获取子节点 比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 1.使用筛选条件 $('#test span.demo') 2.使用find()函数 $('#test').find('span.demo') 3.使用children()函数 $('#test').children('span.demo') 二.获取父节点 jquery获取父元素方法比较多,比如parent(),pa

  • jQuery:节点(插入,复制,替换,删除)操作

    复制代码 代码如下: <html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js&q

  • jQuery替换节点用法示例(使用replaceWith方法)

    jQuery替换节点用法示例(使用replaceWith方法)

    本文实例讲述了jQuery替换节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jQuery查找节点方法完整实例

    jQuery查找节点方法完整实例

    本文实例讲述了jQuery查找节点方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.10

  • jQuery查找节点并获取节点属性的方法

    jQuery查找节点并获取节点属性的方法

    本文实例讲述了jQuery查找节点并获取节点属性的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jqu

  • jQuery简单创建节点的方法

    jQuery简单创建节点的方法

    本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1

  • jQuery复制节点用法示例(clone方法)

    jQuery复制节点用法示例(clone方法)

    本文实例讲述了jQuery复制节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jQuery遍历节点树方法分析

    jQuery遍历节点树方法分析

    本文实例讲述了jQuery遍历节点树方法.分享给大家供大家参考,具体如下: demo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type=&

  • jQuery删除节点用法示例(remove方法)

    jQuery删除节点用法示例(remove方法)

    本文实例讲述了jQuery删除节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

    jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

    本文实例讲述了jQuery插入节点和移动节点的方法.分享给大家供大家参考,具体如下: 1. 插入节点: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" ty

随机推荐