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 ...
随机推荐
- 解决img标签上下出现间隙的方法
图片与父元素下边缘有 2px 的间隙,并不是因为空格.多个 inline-block 元素之间的间隙才是因为空格. 任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式.----< ...
- Java单例模式简单实现
代码 public class Singleton { private static Singleton singleton;//创建一个单例对象 public static Singleton ge ...
- UI测试点
UI测试点 1.界面是否美观 2.元素大小 3.界面元素是否对齐方式统一 4.界面字体属性是否正确 5.界面链接及触发动作 6.元素内容是否显示正确.易懂.友好 7.所有输入框进行输入判断测试 8.所 ...
- 学习笔记6——插件 API，“过滤器”(Filters)和“动作”(Actions)
WordPress 中有一种叫执行挂勾的机制,允许插件把一些功能“挂载”到 WordPress 当中.也就是说,在系统运行至某一个环节时,去调用插件内的一些函数.执行挂勾分为两种: 动作 (Actio ...
- PTA 10-排序4 统计工龄 (20分)
题目地址 https://pta.patest.cn/pta/test/15/exam/4/question/721 5-13 统计工龄 (20分) 给定公司NN名员工的工龄,要求按工龄增序输出每 ...
- UOJ 34 多项式乘法 ——NTT
[题目分析] 快速数论变换的模板题目. 与fft的方法类似,只是把复数域中的具有循环性质的单位复数根换成了模意义下的原根. 然后和fft一样写就好了,没有精度误差,但是跑起来比较慢. 这破题目改了好长 ...
- 使用反射获取类中的属性（可用于动态返回PO类的列，当做表格的表头）
//利用反射取类中的属性字段 try { Class clazz = Class.forName("houji.bean.model.TaskModel"); Field[] fi ...
- 准备 KVM 实验环境
KVM 是 OpenStack 使用最广泛的 Hypervisor,本节介绍如何搭建 KVM 实验环境 安装 KVM 上一节说了,KVM 是 2 型虚拟化,是运行在操作系统之上的,所以我们先要装一个 ...
- 转载自CSDN,结论：windows下按ENTER键应该是\r\n ascii码为 13 10
记得在Windows下学X86汇编语言时,用0DH(\r)和0AH(\n)来输出回车(跳到下一行的开始处).问题来了,在Windows下是 先回车再换行呢还是先换行再回车呢?在Unix系统下换行只有\ ...
- FastDFS上传/下载过程[转载-经典图列]
FastDFS上传/下载过程: 首先客户端 client 发起对 FastDFS 的文件传输动作,是通过连接到某一台 Tracker Server 的指定端口来实现的,Tracker Server 根 ...