<!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. 下载mysql server安装包的时候,不登录oracle账号,实现下载

    需求描述: 之前下载mysql安装包的时候,都是使用oracle账号进行登录下载,最近看到可以不登录账号 就实现下载的方法,在此记录下. 操作过程: 1.选择mysql linux服务器上的安装包,点 ...

  2. [Scikit-learn] Dynamic Bayesian Network - Kalman Filter

    看上去不错的网站:http://iacs-courses.seas.harvard.edu/courses/am207/blog/lecture-18.html SciPy Cookbook:http ...

  3. PL/SQL如何调试Oracle存储过程

    from:http://jingyan.baidu.com/article/3a2f7c2e144d2826aed61167.html 调试过程对找到一个存过的bug或错误是非常重要的,Oracle作 ...

  4. YARN应用程序开发和设计流程

    从业务的角度看,一个应用需要分两部分进行开发,一个是接入YARN平台,实现3个协议,通过YARN实现对集群资源的访问和利用:另一个是业务功能的实现,这个与YARN本身没有太大关系.下面主要阐述如何将一 ...

  5. linux 输入“make"命令不能执行

    我用的是VM 虚拟机的CDLinux,我想手动安装网卡驱动.网卡驱动也已经复制到linux 系统中了.接下来应该输入:makemake install可窗口提示:-bash:make :command ...

  6. COGS 1224. [SHOI2002]百事世界杯之旅（期望概率）

    COGS 1224. [SHOI2002]百事世界杯之旅 ★   输入文件:pepsi.in   输出文件:pepsi.out   简单对比 时间限制:1 s   内存限制:128 MB [问题描述] ...

  7. Android自定义类似ProgressDialog效果的Dialog

    Android自定义类似ProgressDialog效果的Dialog. 方法如下: 1.首先准备两张自己要定义成哪样子的效果的图片和背景图片(也可以不要背景). 如我要的效果: 2.定义loadin ...

  8. Mysql limit offset用法举例

    转自:http://blog.csdn.net/iastro/article/details/53037600 Mysql limit offset示例 例1,假设数据库表student存在13条数据 ...

  9. VMware Authorization Service 未运行怎么解决

    操作步骤如下: 1.按win+r快捷键,输入services.msc,点击确定: 2.服务列表找到VMware Authorization Service 并双击: 3.修改启动类型为自动,点击应用, ...

  10. Tomcat 400错误 问题集锦

    1.前后台参数类型不一致 上图错误提示就是客户端发送的请求不能找到你的具体的页面或者地址,这是Spring MVC抛出的错误,这样我们就要进行参数的检查,一定是JSP提交的参数和Controller里 ...