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. 【BZOJ1019】[SHOI2008]汉诺塔（数论，搜索）

    [BZOJ1019][SHOI2008]汉诺塔(数论,搜索) 题面 BZOJ 洛谷 题解 首先汉诺塔问题的递推式我们大力猜想一下一定会是形如\(f_i=kf_{i-1}+b\)的形式. 这个鬼玩意不好 ...

  2. NOIP2018TG 初赛复习

    Date: 20180911 TCP/IP OSI7面向对象的程序设计语言 1.不是自顶向下2.simula 67语言 第一个3.继承性.封装性.多态性NOIP支持的语言环境:对于c / c++ :D ...

  3. Oracle数据库--PL/SQL存储过程和函数的建立和调用

    1.存储过程建立的格式: create or replace procedure My_Procedure is begin --执行部分(函数内容); end; / 例子:(以hr表为例) crea ...

  4. POJ 3281 Dining （网络流）

    POJ 3281 Dining (网络流) Description Cows are such finicky eaters. Each cow has a preference for certai ...

  5. QWidget窗体中使用Q_OBJECT后无法添加背景图片或背景色

    在继承自QWiget的窗体中,设置背景图片或背景色比较简单的方法是使用setStyleSheet()函数,比如在构造函数中可以这样来设置背景图片: this->setStyleSheet(&qu ...

  6. CF1027C Minimum Value Rectangle

    之前做的时候没想出来...现在来数学推导一波. 题意:从n个木棒中选出4个拼成一个矩形,使得 (周长)2/面积 最小. 解:设矩形宽a长b.我们要最小化下面这个式子: 去掉常数,不妨设b = a + ...

  7. C/C++ exception类

    #include <iostream> #include <iomanip> #include <string> #include <sstream> ...

  8. 「Vue」watch基本用法

    应用于监视路由地址改变,如有新地址(即路由地址改变)即执行自定义方法 methods: { itemShow() { this.$axios.get('item/item/'+this.id+'?to ...

  9. 利用CSS3实现简书中点击“喜欢”时的动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 20145234黄斐《Java程序设计》第八周

    教材学习内容总结 第十四章-NIO与NIO2 NIO与IO的区别 NIO Channel继承框架 想要取得Channel的操作对象,可以使用Channels类,它定义了静态方法newChannel() ...