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 ...
随机推荐
- django的rest framework框架——安装及基本使用
一.django的FBV 和 CBV 1.FBV(基于函数的视图): urlpatterns = [ url(r'^users/', views.users), ] def users(request ...
- Knockout v3.4.0 中文版教程-9-计算监控-API参考
5.参考 下面的内容描述了如何构建和使用计算监控. 1. 构建一个计算监控 可以用如下的形式构建一个计算监控: ko.computed( evaluator [, targetObject, opti ...
- [转]python 多线程threading简单分析
多线程和多进程是什么自行google补脑 对于python 多线程的理解,我花了很长时间,搜索的大部份文章都不够通俗易懂.所以,这里力图用简单的例子,让你对多线程有个初步的认识. 单线程 在好些年前的 ...
- xfce-openvas9
1安装OpenVas 第一步,添加PPA源,在这我用的是一台新装的Ubuntu安装OpenVas,运行以下命令就可以进行安装 root@ubuntu:~# add-apt-repository ppa ...
- C# 字符串型转数字型
// 当需要将字符串格式的数字转为数字时候,我们会用到的函数为Convert.ToDouble(),// 然而当你的字符串为49,9时,由于包含了逗号,函数会将逗号忽略,直接转为499,// 所以我们 ...
- 利用MySQL数据库如何解决大数据量存储问题？
提问:如何设计或优化千万级别的大表?此外无其他信息,个人觉得这个话题有点范,就只好简单说下该如何做,对于一个存储设计,必须考虑业务特点,收集的信息如下:1.数据的容量:1-3年内会大概多少条数据,每条 ...
- cobbler安装配置(二)
安装环境: 操作系统:CentOS 6.5 x86_64测试机器ip:192.168.0.1 关闭防火墙.selinux:service iptables stop && chkcon ...
- 每天一个linux命令目录（转）
一. 文件目录操作命令: 1.每天一个linux命令(1):ls命令 2.每天一个linux命令(2):cd命令 3.每天一个linux命令(3):pwd命令 4.每天一个linux命令(4):mk ...
- 使用Unity做2.5D游戏教程（一）
最近在研究Unity 3D,看了老外Marin Todorov写的教程很详细,就翻译过来以便自己参考,翻译不好的地方请多包涵. 如果你不了解2.5D游戏是什么,它基本上是个3D游戏而你可以想象是压扁的 ...
- HDU——2083找单词（母函数）
找单词 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissio ...