<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>使用jQuery包装节点</title>

<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script type="text/javascript">

$(function (){

//包裹节点

//测试使用 jQuery 的wrap(), wrapAll(), wrapInner(),包裹节点

//使用<font>标签把每个li包装起来，

$("#city li").wrap("<font color='red'></font>");



//使用<font>标签把所有的li都包装起来

$("#major li").wrapAll("<font color='green'></font>");



//使用<font>标签把所有的li里面的文字包装起来

$("#language li").wrapInner("<font color='blue'></font>");

});

</script>

</head>

<body>

<p>选择你所喜欢的城市？</p>

<ul id="city">

<li>哈尔滨</li>

<li id="beijing">北京</li>

<li>上海</li>

<li id="guangzhou">广州</li>

</ul>

<p>选择你所喜欢的专业？</p>

<ul id="major">

<li id="computer">计算机</li>

<li>会计</li>

<li>管理学</li>

<li id="print">印刷工程</li>

</ul>

<p>选择你所喜欢的编程语言？</p>

<ul id="language">

<li>Java</li>

<li>C</li>

<li>.NET</li>

<li>PHP</li>

</ul>

</body>

</html>

使用jQuery包装节点的更多相关文章

  1. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  2. JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法

    在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. <!DOCTYPE html> <html xmlns="http:/ ...

  3. jQuery学习笔记(3)-操作jQuery包装集的函数

    一.前言 在使用jQuery选择器获取到jQuery包装集后,我们就要对这些包装集进行各种操作 二.创建新的元素 1.使用HTMLDOM创建元素 (1)什么是DOM 当网页被加载时,浏览器会创建页面的 ...

  4. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  5. jQuery包装集

    jQuery包装集指的是通过$()方法返回的一个元素集,这跟一般的javascript数组有所区别, 包装集在后者的基础上还有一些初始化的函数和属性. 我们可以对二者进行一个比较: jsdiv = d ...

  6. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

  7. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  8. Dom对象和jQuery包装集

    Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...

  9. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

随机推荐

  1. excel中，一系列单元格中包含某一个字段的单元格数量？

    excel中,一系列单元格中包含某一个字段的单元格数量?这个怎么写公式?如:A列单元格A1-A7的内容分别为 A.AB.BC.AC.CD.AD.EA,怎么数这一列中几个单元格的内容包含A字母? 任意单 ...

  2. Redis（四）-- 集群

    一.Redis适合做企业级分布式缓存集群的条件 1.Redis内置哈希槽,有16384个哈希槽(0~16383),根据CRC16算法来确定这个集群中属于哪一个服务器来处理这个请求. 2.Redis提供 ...

  3. Vitamio与FFmpeg、LGPL、GPL的关系

    转自:http://sun.sanniang.me/2014/04/26/the-relationship-vitamio-with-ffmepg-lgp-gpl Vitamio 使用了 FFmpeg ...

  4. Spring学习笔记--声明一个简单的Bean

    spring依赖的maven dependencyhttp://mvnrepository.com/artifact/org.springframework 在pom.xml中添加如下依赖: < ...

  5. PHP之ob_start()控制缓冲生成html

    输出控制函数不对使用 header() 或 setcookie(), 发送的文件头信息产生影响,只对那些类似于 echo() 和 PHP 代码的数据块有作用. 我们先举一个简单的例子,让大家对Outp ...

  6. C#实现两个时间相减的方法

    脚本之家看到的,关于两个时间差值的获取 http://www.jb51.net/article/60177.htm using System; using System.Collections.Gen ...

  7. 上传文件提示IO Error

    百度查到的解决办法 http://www.wang0214.com/news/466.html 作者:深圳网站建设 原因: Asp.net中,上传文件的默认大小是4096 KB,也就是4M,不过你可以 ...

  8. Python class的属性访问控制和内建函数重写实现高级功能以及@property

    一.类属性的访问控制 Python Class确实是博大精深,我们还是来温习一下属性的访问控制作为开(fu)场(xi). 首先_varname是可以访问的,__varname是不能直接访问(原理是__ ...

  9. weblogic新漏洞学习cve-2017-10271

    一.原理: 很明显啦,readobject又出来背锅了,一个XML的反序列化漏洞导致的命令执行. 具体原理我看不懂java代码的我也只能学习别人的分析.给出一篇参考文章,写的非常详细: 漏洞原理 二. ...

  10. 条件注释判断IE浏览器版本

    lt,lte,gt,gte分别表示什么 lt:小于当前版本 lte:小于或等于当前版本,包括本身 gt:大于当前版本 gte:大于或等于当前版本,包括本身 使用格式 // 如IE9以下(不包括IE9加 ...