使用jQuery包装节点
<!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包装节点的更多相关文章
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- JQuery包装集size,length,index,slice,find,filter,is,children,next,nextAll,parent,parents,closest,siblings,add,end,andSelf的用法
在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. <!DOCTYPE html> <html xmlns="http:/ ...
- jQuery学习笔记(3)-操作jQuery包装集的函数
一.前言 在使用jQuery选择器获取到jQuery包装集后,我们就要对这些包装集进行各种操作 二.创建新的元素 1.使用HTMLDOM创建元素 (1)什么是DOM 当网页被加载时,浏览器会创建页面的 ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- jQuery包装集
jQuery包装集指的是通过$()方法返回的一个元素集,这跟一般的javascript数组有所区别, 包装集在后者的基础上还有一些初始化的函数和属性. 我们可以对二者进行一个比较: jsdiv = d ...
- jQuery包裹节点用法完整示例
本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- Dom对象和jQuery包装集
Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...
- JS添加节点方法与JQuery添加节点方法的比较及总结
原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...
随机推荐
- C#设计模式系列:抽象工厂模式(AbstractFactory)
出自:http://www.cnblogs.com/libingql/archive/2012/12/09/2809754.html 1. 抽象工厂模式简介 1.1 定义 抽象工厂(Abstract ...
- 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码
工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...
- mybatis由浅入深day02_9.3.5使用生成的代码_9.4逆向工程注意事项
9.3.5 使用生成的代码 需要将生成工程中所生成的代码拷贝到自己的工程中. 拷这4个到我们原来的spring_mybatis1216工程下 ItemsMapper.java package cn.i ...
- Mysql课后思考题
1.请简述数据库.表和数据库服务器之间的关系? 知识点数据库存储结构 一个数据库服务器可以管理多个数据库,通常情况下开发人员会针对每个应用创建一个数据库,为保存应用中实体的数据,会在数据库中创建多个表 ...
- Android 4.0 Tabhost图标显示不出来
安卓4.0会有这个问题,修改Manifest.xml里面的Theme,找到System Resources,里面有Theme.black,选这个就行了.剩下自己要改背景色什么的这个还是比较easy的吧 ...
- 【RF库Collections测试】Remove From Dictionary
Name:Remove From DictionarySource:Collections <test library>Arguments:[ dictionary | *keys ]Re ...
- ActiveMQ内存配置和密码设置
1.配置内存 bin中activemq.bat 中的第一行 加上 : REM 配置内存 set ACTIVEMQ_OPTS=-Xms1G -Xmx1G 2.修改控制台密码 1.打开conf/jetty ...
- ajax如何上传文件
PHP: <?php /** * Created by PhpStorm. * User: DELL * Date: 2017/11/23 * Time: 10:57 */ header(&qu ...
- Android 设置wifi共享电脑服务器资源
其实win7本身就自带无线热点的功能,按下面的方法设置. 开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑变成无线路由器,实现共享上网,节省网费和路由器购买 ...
- devstack screen 详解
n my previous blog i discussed how to install devstack based openstack. Now if I need to restart ind ...