<!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. HTML&CSS精选笔记_HTML入门

    HTML入门 什么是HTML HTML基本文档格式 HTML文档的基本格式,其中主要包括<!DOCTYPE>文档类型声明.<html>根标记.<head>头部标记. ...

  2. hadoop命令fsck命令

    在HDFS中,提供了fsck命令,用于检查HDFS上文件和目录的健康状态.获取文件的block块信息和位置信息等. 具体命令介绍: -move: 移动损坏的文件到/lost+found目录下 -del ...

  3. Hbase的基本认识

    1.使用场景:实时查询交互 说说概念性的东西,方便今后更加深入的理解. HBase是Apache Hadoop中的一个子项目,Hbase依托于Hadoop的HDFS作为最基本存储基础单元,通过使用ha ...

  4. Spring装配Bean的过程

    首先说一个概念:“懒加载” 懒加载:就是我们在spring容器启动的是先不把所有的bean都加载到spring的容器中去,而是在当需要用的时候,才把这个对象实例化到容器中. spring配置文件中be ...

  5. Dubbo（一） -- 初体验

    Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架. 一.Dubbo出现的背景 随着互联网的发展,网站应用的规模不断扩大,常规的 ...

  6. Websphere停止服务不用输入账号密码

    启用了安全性的WebSphere Application Server,在日常维护中经常在停止服务的时候需要输入用户名和密码.停止的方式如下:[root@was /]# /opt/IBM/WebSph ...

  7. C++11新特性之三——auto

    C++11中引入的auto主要有两种用途:自动类型推断和返回值占位.auto在C++98中的标识临时变量的语义,由于使用极少且多余,在C++11中已被删除.前后两个标准的auto,完全是两个概念 1. ...

  8. php学习三：函数

    1.  php中的函数和js中的区别 在php中,函数的形参可以给一个默认值,若有实参的传递则函数使用传递过来的参数,没有的话显示默认值 代码如下: function showSelf($name=& ...

  9. KVC与Runtime结合使用(案例)及其底层原理

    一.KVC 的用法和实践 用法 KVC(Key-value coding)键值编码,顾名思义.额,简单来说,是可以通过对象属性名称(Key)直接给属性值(value)编码(coding)“编码”可以理 ...

  10. JS-简单地匀速运动框架

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...