使用JQuery进行DOM操作
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
alert("值为: " + $("#test1").text());
});
$("#btn2").click(function() {
alert("值为: " + $("#test1").html());
});
$("#btn3").click(function() {
alert("值为: " + $("#test2").val());
});
$("#btn4").click(function() {
alert("值为:" + $("#test3").attr("href"));
}); });
</script>
</head> <body>
<p id="test1">这是一个强调的<em>文字</em></p>
<input type="text" id="test2" value="this is a text" />
<a href="//this is a link" id="test3">this is a link</a>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示值</button>
<button id="btn4">显示 href 属性的值</button>
</body> </html>设置内容 - text()、html() 以及 val() 设置属性attr()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("this is paragraph 1");
});
$("#btn2").click(function(){
$("#test2").html("<b>this is paragraph 2</b>");
});
$("#btn3").click(function(){
$("#test3").val("this is text");
});
$("#btn4").click(function(){
$("font").attr("color","aqua");
});
});
</script>
</head> <body>
<p id="test1">这是段落1。</p>
<p id="test2">这是段落2。</p>
<p>输入框: <input type="text" id="test3" value="这是文本框"></p>
<font color="red">Color</font> <button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
<button id="btn4"> 修改颜色</button>
</body>
</html>
使用JQuery进行DOM操作的更多相关文章
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
- js,jQuery和DOM操作的总结(二)
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML 学习笔记 JQuery(DOM 操作)
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
- 解密jQuery内核 DOM操作的核心buildFragment
文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...
随机推荐
- Android之TCP服务器编程
推荐一个学java或C++的网站http://www.weixueyuan.net/,本来想自己学了总结出来再写博客,现在没时间,打字太慢!!!!,又想让这好东西让许多人知道. 关于网络通信:每一台电 ...
- JDBC使用MYSQL的LOAD DATA LOACAL INFILE和LOAD DATA INFILE
MYSQL的LOAD方法都必须建立在mysql服务允许使用该命令的情况下: 开启该命令的方法: 1.在实例对应的my.cnf(windows为my.ini)中添加一行local-infile=1(默认 ...
- Luogu4249 WC2007 石头剪刀布 费用流
传送门 考虑竞赛图三元环计数,设第\(i\)个点的入度为\(d_i\),根据容斥,答案为\(C_n^3 - \sum C_{d_i}^2\) 所以我们需要最小化\(\sum C_{d_i}^2\) 考 ...
- 重写Override ToString()方法
使用一个小例子来演示: 创建一个普通类别: class Ax { private int _ID; public int ID { get { return _ID; } set { _ID = va ...
- 【转】单KEY业务,数据库水平切分架构实践
本文将以“用户中心”为例,介绍“单KEY”类业务,随着数据量的逐步增大,数据库性能显著降低,数据库水平切分相关的架构实践: 如何来实施水平切分 水平切分后常见的问题 典型问题的优化思路及实践 一.用户 ...
- html table隐藏列
隐藏table表的第一列,适合显示信息,隐藏ID主键. <html> <head> <meta http-equiv="content-type" c ...
- LeetCode Pow(x, n) (快速幂)
题意 Implement pow(x, n). 求X的N次方. 解法 用正常的办法来做是会超时的,因为可能有21亿次方的情况,所以需要优化一下.这里用到了快速幂算法,简单来说就是将指数分解成二进制的形 ...
- for...else 小记
for ......: ...... else: ...... 在 for 循环中,若没有执行 break ,正常结束,则会执行 else 中的语句. 若执行了 break , 则 不会 执行 els ...
- 更换Ubuntu源为国内源的操作记录
我们都知道,Ubuntu的官方源对于国内用户来说是比较慢的,可以将它的源换成国内的源(比如阿里源),这样用起来就很快了.下面记录下更换操作: 首先了解下/etc/apt/sources.list文件 ...
- rrd文件及rrd文件与实际数据的对比研究。
一,什么是rrd文件? 所 谓的“Round Robin” 其实是一种存储数据的方式,使用固定大小的空间来存储数据,并有一个指针指向最新的数据的位置.我们可以把用于存储数据的数据库的空间看成一个圆,上 ...