1.介绍

　　

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

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

 <script type="text/javascript">

     $(function(){

         //包装 li 本身

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

         //包装所有的 li

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

         //包装 li 里边的文字.

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

     })

 </script>

 </head>

 <body>

     <p>你喜欢哪个城市?</p>

     <ul id="city">

         <li id="bj" name="BeiJing">北京</li>

         <li>上海</li>

         <li id="dj">东京</li>

         <li id="se">首尔</li>

     </ul>

     <br>

     <br>

     <p>你喜欢哪款单机游戏?</p>

     <ul id="game">

         <li id="rl">红警</li>

         <li>实况</li>

         <li>极品飞车</li>

         <li>魔兽</li>

     </ul>

     <br>

     <br>

     <p>你喜欢哪种开发语言?</p>

     <ul id="language">

         <li>C</li>

         <li>Java</li>

         <li>.NET</li>

         <li>PHP</li>

     </ul>

 </body>

 </html>

015 jquery中包裹节点的更多相关文章

  1. jquery中的节点的操作

    节点的操作 Dom 文档对象 模型 解决 一．插入节点 Append() 在每个匹配的元素中追加内容 Var  $li_1= “<li></li>”; Var  $li_2 = ...

  2. jQuery中删除节点方法remove()、detach()、empty()分析

    jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并 ...

  3. jQuery中的节点操作(一)

    html代码如下 <p>Dom操作练习</p> jQuery插入节点 $("p").append("武汉php"); //向每个匹配的元 ...

  4. jQuery中的节点操作(二)

    html代码如下 <p title="武汉长乐教育PHP系列教程" name="hello" class="blue"> < ...

  5. js jquery中 的数据类型

    任何一门语言, buguan 是动态的, 还是像C语言的, 都有严格的 类型 "概念的", 这个是由于 编译器和解释器要求的, 需要的. 所以在是使用像 js, jquey ,ph ...

  6. jQuery 获取DOM节点的两种方式

    jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...

  7. jQuery中的DOM操作------复制及包裹节点

    1.复制节点: 如果单击<li>元素后需要再复制一个<li>元素,可以用clone()方法来完成: $(this).clone().appendTo("ul" ...

  8. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  9. jquery中关于append()的用法笔记---append()节点移动与复制之说

    jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...

随机推荐

  1. 【拓扑 字符串还原 + 线段树维护】奇洛金卡达(father)

    奇洛金卡达(father) Description 阿良良木历将要迎来人生(不,是吸血鬼生涯)的第三次战斗——与身为人类的奇洛金卡达在直江津高中的操场solo,以取回Heartunderblade 的 ...

  2. SQL2005分页存储过程（支持多表联接）

    Code /*********************************************************   * 作    用:数据分页(完整SQL分页存储过程(支持多表联接)) ...

  3. nova-api源码分析（APP的调用）

    调用APIRouter的 __call__函数 nova/wsgi.py class Router(object): def __init__(self, mapper): self.map = ma ...

  4. Spark记录-spark报错Unable to load native-hadoop library for your platform

    解决方案一: #cp $HADOOP_HOME/lib/native/libhadoop.so  $JAVA_HOME/jre/lib/amd64 #源码编译snappy---./configure  ...

  5. ubuntu 环境下pycharm的 安装与激活教程 以及错误解决方法

    1. 基本安装: 1.1 打开Ubuntu的应用市场,并在搜索栏搜索pycharm,结果如下图所示 1.2 选择pro版本进行安装,结果如下图所示: 1.3打开安装后的pycharm,如果出现下图所示 ...

  6. html5 canvas 奇怪的形状水平渐变（因为大多数的之前的文章把基础都打过了，所以开始写的快了，如果有不明白的，可以回顾下之前的）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. expect 交互 之双引号较长变量

    交互双引号较长变量  #!/bin/bash RemoteUser=xuesong12 Ip=192.168.1.2 RemotePasswd=xuesong Cmd="/bin/echo ...

  8. PHP-Redis操作

    /*1.Connection*/ $redis = new Redis(); $redis->connect('127.0.0.1',6379,1);//短链接,本地host,端口为6379,超 ...

  9. Requests中出现大量ASYNC_NETWORK_IO等待

    七夕活动,网页显示异常:504 Gateway Time-out The server didn't respond in time.开发询问数据库是否正常,当时正连接在实例上查询数据,感觉响应确实慢 ...

  10. [LeetCode] Candy (分糖果)，时间复杂度O(n)，空间复杂度为O(1)，且只需遍历一次的实现

    [LeetCode] Candy (分糖果),时间复杂度O(n),空间复杂度为O(1),且只需遍历一次的实现 原题: There are N children standing in a line. ...