jQuery再DOM操作方面提供了一些函数及其用法，这里就对DOM元素的包装简单说明一下，怎样使用会了，对其它方法也能灵活的使用。以下是一个小样例及其效果图。

代码例如以下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>演示jquery操作得到的元素</title>

    <%--引入jquery文件--%>

    <script  type ="text/javascript" src ="jquery-2.1.4.js"></script>

    <script  type ="text/javascript">

        $(document).ready(function () {

            //触发onclick事件

            $("#testbutton").click(

                function () {

                    //使用class为test的元素包裹给定元素

                    $("p").wrap($(".test"));

                }

                );

        });

    </script>

    <%--基本样式设定--%>

    <style type ="text/css">

        .test {

        color :white ;

        background-color :#ffd800;

        }

        .wrap {

        background-color :green ;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div id="content">

        <button id="testbutton">測试</button>

        <br /><br />

        <div class ="test"></div>

        <p id ="first">第一段文字，id为first</p>

        <p id ="second">第二段文字。id为second</p>

        <p id ="third">第三段文字，id为third</p>

    </div>

    </form>

</body>

</html>

对于jQuery的使用自己要多多实践，这样才干对它了如指掌啊~

jQuery操作得到DOM元素的更多相关文章

  1. jQuery.sort对DOM元素进行排序

    实例: 每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法. 首先,利用jquery选择器获取每个tr元素,获取回来是一个数据: var $trs ...

  2. jquery插件——检测DOM元素是否在浏览器可视范围之内

    引言 web应用中有很多地方会用到打点,用来检测用户行为,今天就做了个打点相关的需求,为了统计一个广告给用户的展示次数,每次用户请求完成并且渲染完成之后就算一次成功的展示,其实有时候这个广告还没有在用 ...

  3. jQuery捕获-获取DOM元素内容和属性

    一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...

  4. jQuery操作页面的元素

    主要有添加,替换,删除,清空三种方式: 添加又分为,在之前添加,在之后添加,在元素外之前添加,在元素外之后添加.每个添加方式又有俩种方法(效果一模一样): 俩种方法区添加,在原内容之后: p.appe ...

  5. jquery操作ajax返回的页面元素

    这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...

  6. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  7. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  8. jQuery 数据 DOM 元素 核心 属性

    jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue( ...

  9. Ajax基础（四）--dom元素简单操作

    1 //js对dom元素的操作 //添加dom元素 var param = document.createElement("p"); var node = document.cre ...

随机推荐

  1. 【Oracle】使用dblink+minus方式迁移数据

    一.需求说明 1.数据库a104的表syssde.a4_syssde_department中有1000条数据: 2.数据库a230的表syssde.a4_syssde_department中有800条 ...

  2. Windows 通过 SecureCRT 8.x 上传文件到Linux服务器

    1.SecureCRT 连接 Linux 服务器,这一步操作简单: 2.连接并登录成功后,直接在连接成功的页签上 右键 ->  Connect SFTP Session 打开SFTP窗口: 3. ...

  3. 基于注解实现SpringBoot多数据源配置

    1.功能介绍 在实际的开发中,同一个项目中使用多个数据源是很常见的场景.最近在学习的过程中使用注解的方式实现了一个Springboot项目多数据源的功能.具体实现方式如下. 2.在applicatio ...

  4. 如何使用百度地图API

    一.申请密钥 1.先用eclipse创建一个Android工程 2.在百度api官网上申请一个密钥,链接:http://lbsyun.baidu.com/apiconsole/key 二.工程配置 1 ...

  5. 【Luogu】P3381最小费用最大流模板（SPFA找增广路）

    题目链接 哈  学会最小费用最大流啦 思路是这样. 首先我们有一个贪心策略.如果我们每次找到单位费用和最短的一条增广路,那么显然我们可以把这条路添加到已有的流量里去——不管这条路的流量是多大,反正它能 ...

  6. POJ 1286 Necklace of Beads ——Burnside

    [题目分析] 题目大意:一个环有n个点,共染三种颜色.问 在旋转和对称的情况下有多少种本质不同的方案数. Burnside直接做. [代码] #include <cstdio> #incl ...

  7. noip普及组考纲+样题合集——初级篇（OIer必看）

    很明显我是想发提高组合集的.普及组考纲……用发么. 当然如果你想看的话也可以,就一点点: 递归.排序…… 很明显上面那都不是重点.普及组只要掌握搜索.二分.单调队列.数学.随机化等等,一等奖没问题的, ...

  8. 【HDOJ6228】Tree（树）

    题意:有一棵n个点的树,在树上的点涂色,每个点涂一种颜色,一共可以涂k种颜色, 然后把同一种颜色(比如说x)的点用最优方案连起来,在连线的边涂上x颜色,问涂k次的边最多有几条 k<=500 si ...

  9. NOJ1203 最多约数问题 [搜索 数论]

    传送门 njczy2010 1203 Accepted 79MS   1400K 2321Byte G++ 2015-01-25 13:14:25.0 最多约数问题 时间限制(普通/Java) : 2 ...

  10. msp430项目编程44

    msp430综合项目---门禁控制系统44 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结