jQuery操作得到DOM元素
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元素的更多相关文章
- jQuery.sort对DOM元素进行排序
实例: 每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法. 首先,利用jquery选择器获取每个tr元素,获取回来是一个数据: var $trs ...
- jquery插件——检测DOM元素是否在浏览器可视范围之内
引言 web应用中有很多地方会用到打点,用来检测用户行为,今天就做了个打点相关的需求,为了统计一个广告给用户的展示次数,每次用户请求完成并且渲染完成之后就算一次成功的展示,其实有时候这个广告还没有在用 ...
- jQuery捕获-获取DOM元素内容和属性
一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...
- jQuery操作页面的元素
主要有添加,替换,删除,清空三种方式: 添加又分为,在之前添加,在之后添加,在元素外之前添加,在元素外之后添加.每个添加方式又有俩种方法(效果一模一样): 俩种方法区添加,在原内容之后: p.appe ...
- jquery操作ajax返回的页面元素
这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
- jQuery 数据 DOM 元素 核心 属性
jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue( ...
- Ajax基础(四)--dom元素简单操作
1 //js对dom元素的操作 //添加dom元素 var param = document.createElement("p"); var node = document.cre ...
随机推荐
- codeforces Lightsabers (hard)
题目大意: 给定每种球的数量,求从中选取k个球有多少种不同的取法,同种球视为相同的. 题解: 多项式(1+x+x^2+...+x^a[1])*(1+x+x^2+...+x^a[2])*(1+x+x^2 ...
- B树总结
B树是一种平衡的多路查找树,一棵m阶B树或为空树,或满足下列特性: 1. 每个节点之多有m棵子树 2. 若根节点不是叶子节点,则至少有两颗子树 3. 除根之外所有非终端节点至少有[m/2]可子树 ...
- Selenium启动项参数设置
再Selenium中使用不同的Webdriver可能会有不一样的方法,有些相同的操作会得到不同的结果, 本文主要介绍的是Chrome()的使用方法. 其他的Webdriver可以参考官方文档 Chro ...
- hdu 1536 sg (dfs实现)
S-Nim Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- Linux 查看端口占用并杀掉进程
1. 查看端口号占用情况: netstat -apn|grep 11305 tcp 0 0 10.65.42.27:80 172.22.142.20: ...
- SPOJ GSS7 Can you answer these queries VII ——树链剖分 线段树
[题目分析] 问题放到了树上,直接链剖+线段树搞一搞. 调了300行+. (还是码力不够) [代码] #include <cstdio> #include <cstring> ...
- 浅谈Oracle数据库分区表
Oracle数据库分区是作为Oracle数据库性能优化的一种重要的手段和方法,之前,只听过分区的大名,却总未用过,最近简单学习了一下,总结如下,不对之处,还希望朋友们多多指点,交流! 1.表空间及分区 ...
- 如何快速下载maven依赖jar包
找到settings.xml文件.在mirrors里面添加下面的代码: <mirror> <id>alimaven</id> <mirrorOf>cen ...
- EC++学习笔记(二) 构造/析构/赋值
条款05:了解c++默默编写并调用了哪些函数 编译器可以暗自为 class 创建default构造函数,copy构造函数,copy assignment操作和析构函数所有这些函数都是 public 并 ...
- form表单提交file
form表单提交文件,这毫无疑问不是个好办法.但是,存在既有意义.既然H5都还让着东西存在着,呢么必然有其意义. form表单中的input type=file这个空间,不得不说奇丑无比!问题是还不能 ...