<!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. linux中，如何设置每隔2个小时就执行一次某个脚本？

    需求描述: 今天同事问了一个linux上crontab定时任务的问题,说,如何调整一个定时任务每2个小时 执行一次,在此记录下. 操作过程: 1.通过以下的方式设置,每2个小时执行一次脚本 */ * ...

  2. Java集合----List集合

    List List 代表一个元素有序.且可重复的集合,集合中的每个元素都有其对应的顺序索引List 允许使用重复元素,可以通过索引来访问指定位置的集合元素.List 默认按元素的添加顺序设置元素的索引 ...

  3. swift开发之 -- ？ 和 ！ 的作用

    记录下这个知识点: 一般我们在一下两种情况会遇到 ? 和 !的使用 1,声明变量时 var number:Int? var str:String? 2,在对变量进行操作时 number?.hasVal ...

  4. Python 爬虫知识点 - 淘宝商品检索结果抓包分析

    一.抓包基础 在淘宝上搜索“Python机器学习”之后,试图抓取书名.作者.图片.价格.地址.出版社.书店等信息,查看源码发现html-body中没有这些信息,分析脚本发现,数据存储在了g_page_ ...

  5. python计算时间差的方法

    本文实例讲述了python计算时间差的方法.分享给大家供大家参考.具体分析如下: 1.问题: 给定你两个日期,如何计算这两个日期之间间隔几天,几个星期,几个月,几年? 2.解决方法: 标准模块date ...

  6. Qt监控后台服务运行状态

    mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QMa ...

  7. ResourcesCompat和ContextCompat

    getResources().getDrawable() 过时的解决方法 当你这个Drawable不受主题影响时 ResourcesCompat.getDrawable(getResources(), ...

  8. Solr可视化简单的操作

    Solr可视化简单的操作 启动solr服务器;在浏览器输入Tomcat启动: http://192.168.191.142:8080/solr/#/ Ø  添加core,首先在存放home的文件下创建 ...

  9. 在lampp的proftpd下新增FTP用户的方法与配置

    用LAMPP的安装方法可以开一个默认的lampp用户,不过多用户怎样管理.目录怎样设置?这里简明说一下. 要求:使用Lampp的proftpd,开通多个FTP用户,并各分配一个目录,而且需要限制用户在 ...

  10. 静态资源的gzip

    1.项目中,接触到gzip.未压缩的文件和压缩后的文件的比例可能达到:3:1.所以,gzip是网络中文件高速传输的很好方法. 2.一般js.css.html文件都会在后端进行gzip.当浏览器请求这些 ...