获得内容 - 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操作的更多相关文章

  1. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  2. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  3. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  4. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

  5. js，jQuery和DOM操作的总结（二）

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  6. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  7. Jquery所有Dom操作汇总

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  9. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

  10. 解密jQuery内核 DOM操作的核心buildFragment

    文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...

随机推荐

  1. MongoDB的地理位置查询，以及和mysql的使用对比

    MongoDB的一个特色就是具有丰富的查询接口,比如地理位置查询. 在地理位置查询上,MongoDB有着比传统关系型数据库的优势,下面举个例子. 当前移动互联网应用,按用户离目标门店距离排序上的场景很 ...

  2. STM32 printf()函数和scanf()函数重定向到串口

    STM32 printf()函数和scanf()函数重定向到串口 printf()函数和scanf()函数重定向 在学习STM32的时候,常常需要用串口来测试代码的正确与否,这时候就要要用到print ...

  3. LOJ2540 PKUWC2018 随机算法 状压DP

    传送门 两种$DP$: ①$f_{i,j}$表示前$i$次选择,最大独立集为$j$时达到最大独立集的方案总数,转移:$a.f_{i,j}+=f_{i+1,j+2^k}$(保证$k$加入后符合条件):$ ...

  4. 在平衡树的海洋中畅游（四）——FHQ Treap

    Preface 关于那些比较基础的平衡树我想我之前已经介绍的已经挺多了. 但是像Treap,Splay这样的旋转平衡树码亮太大,而像替罪羊树这样的重量平衡树却没有什么实际意义. 然而类似于SBT,AV ...

  5. 在Windows7上如何找到Cookie

    摘要 出于兴趣爱好,前一阵子做了一个网页,网页中需要用到Cookie,但是,根据书上的说明,并没有找打教材中所说的Cookie的位置,本文就主要介绍在计算机(Win7)中Cookie的存放位置,同样适 ...

  6. item 4: 知道怎么去看推导的类型

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 对于推导类型结果的查看,根据不同的软件开发阶段,你想知道的信息的不 ...

  7. Centos7.2下OpenVPN 环境完整部署记录

    关于OpenVPN的有关介绍及为何使用OpenVPN在此就不做赘述了,下面直接记录Centos7.2系统下部署OpenVPN环境的操作过程: 1) 先将本机的yum换成阿里云的yum源 [root@t ...

  8. Linux内核及分析 第四周 扒开系统调用的三层皮（上）

    实验过程 选择20号系统调用getpid(取得进程识别码) 在网上查询getpid函数的C语言代码以及其嵌入式汇编语句 C语言代码: #include <stdio.h> #include ...

  9. 20135337——linux实践三：ELF文件格式分析（32位系统）

    ELF文件格式分析 可重定位文件 十六进制形式显示内容 显示各个段.符号表相关信息 查看各个段信息 elf文件头信息 段表 符号表信息 查看堆栈 具体分析 1.ELF文件头信息(小字节优先,均十六进制 ...

  10. windows、ubuntu、centos7下mysql 的安装与使用

    一.windows 及ubuntu下安装 windows可以傻瓜式安装,另一种空闲了下来写,也不麻烦 ubuntu: apt-get install mysql 强烈推荐使用ubuntu从这儿就很方便 ...