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. addEvenListener('DOMContentLoaded',function(){})

  2. 洛谷 P4961

    目录 题目 思路 Code 题目 戳 为了小埋A了这道题. 思路 读入原来的矩阵,将不是雷的格子更新为数字(数字就是该格子周围八格的雷的个数)将是雷的格子赋值为inf.然后就按照题目要求计算周围八格没 ...

  3. 2. vsCode 安装GoCode

    1)安装gocode 打开命令提示符(以管理员身份打开),输入: go get -u -v github.com/nsf/gocode 开始下载: 下载完毕: 下载完成,查看D:\GoWorks目录, ...

  4. linux python 安装 pip出现 No module named 'setuptools'

    1.下载pip wget --no-check-certificate https://pypi.python.org/packages/source/p/pip/pip-8.0.2.tar.gz#m ...

  5. 【JavaScript 5—基础知识点】:正则表达式(笔记)

    一.总体概览 1.1,什么是正则 又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符 ...

  6. ASP.NET(一):Reques对象和Response对象的区别,以及IsPostBack属性的用法

    导读:在ASP.NET的学习中,初步认识了其6大对象(严格说来只能算是属性):Request,Response,Application,Session,Server,OjectContext.这些对象 ...

  7. Maven部署异常:on project standalone-pom: Cannot deploy artifact from the local repository解决方法

    MAVEN部署异常 org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal org.apache. ...

  8. ansible部署

    ansible的特性:基于Python语言实现,由paramiko,PyYAML和jinjia2三个关键模块 部署简单,agentless 默认使用ssh协议        (1) 基于秘钥认证方式  ...

  9. Caffe的Solver参数设置

    Caffe的solver参数设置 http://caffe.berkeleyvision.org/tutorial/solver.html solver是通过协调前向-反向传播的参数更新来控制参数优化 ...

  10. Linux 下运行 C++ 程序出现 “段错误(核心已转储)”

    Linux下写C++程序出现“段错误(核心已转储)”的问题: 段错误一般就是指访问的内存超出了系统所给这个程序的内存空间,通常这个值是由gdtr来保存的,他是一个48位的寄存器,其中的32位是保存由它 ...