获得内容:

    text() - 设置或返回所选元素的文本内容

    html() - 设置或返回所选元素的内容（包括 HTML 标记）

    val() - 设置或返回表单字段的值
<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text(function(i,origText){//将test1的文本作为参数传入origText

      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";

    });

  });

  $("#btn2").click(function(){

    $("#test1").text('l ove lin');//设置文本值

  });

  $("#btn2").click(function(){

    $("#test1").text();//显示文本值

  });

  $("#btn3").click(function(){

    $("#runoob").attr({

      "href" : "http://www.runoob.com/jquery",

      "title" : "jQuery 教程"

    });

    // 通过修改的 title 值来修改链接名称

    title =  $("#runoob").attr('title');

    $("#runoob").html(title);

      });

  $("#btn4").click(function(){

        $("#runoob1").attr("href", function(i, origValue){

            alert(i,origValue);//attr() 的回调函数:被选元素列表中当前元素的下标，以及原始（旧的）值

            return origValue + "/jquery";

        });

    });

});

</script>

</head>

<body>

<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>

<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>

<button id="btn1">显示 新/旧 文本</button>

<button id="btn2">显示 新/旧 HTML</button>

<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>

<button id='btn3'>修改 href 和 title</button>

<p><a href="//www.runoob.com" id="runoob1">菜鸟教程</a></p>

<button id='btn4'>修改 href 值</button>

</body>

</html>
    append() - 在被选元素的结尾插入内容

    prepend() - 在被选元素的开头插入内容

    after() - 在被选元素之后插入内容

    before() - 在被选元素之前插入内容
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

    $('#btn1').click(function(){

        $('p').prepend('hha');

    });

});

$(document).ready(function(){

    $('#btn2').click(function(){

        $('p').append('hha');

    });

});

function beforeText(){

    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本

    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本

    var txt3=document.createElement("p");

    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM

    $("body").before(txt1,txt2,txt3);        // 追加新元素

};

function afterText(){

    var txt1="<b>I </b>";                    // 使用 HTML 创建元素

    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素

    var txt3=document.createElement("big");  // 使用 DOM 创建元素

    txt3.innerHTML="jQuery!";

    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本

};

</script>

</head>

<body>

<p>这是一个段落。</p>

<img src='images/logo.png/'/>

<button id='btn1'>追加文本1</button>

<button id='btn2'>追加文本2</button>

<button onclick="beforeText()">追加文本</button>

<button onclick="afterText()">追加文本</button>    

</body>

</html>
    remove() - 删除被选元素（及其子元素）

    empty() - 从被选元素中删除子元素

    $("p").remove(".italic"):过滤被删除的元素
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("p").remove(".italic");

  });

  $("#btn2").click(function(){

    $("div").remove(".italic");

  });

  $("#btn3").click(function(){

    $("div").empty();

  });

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<p class="italic"><i>这是另外一个段落。</i></p>

<p class="italic"><i>这是另外一个段落。</i></p>

<button id='btn1'>移除所有  class="italic"的p元素。</button>

<button id='btn2'>移除所有的p元素。</button>

<button id='btn3'>清空所有的p元素。</button>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。

<p>这是在 div 中的一个段落。</p>

<p>这是在 div 中的另外一个段落。</p>

</div>

</body>

</html>
    addClass() - 向被选元素添加一个或多个类

    removeClass() - 从被选元素删除一个或多个类

    toggleClass() - 对被选元素进行添加/删除类的切换操作

    css() - 设置或返回样式属性
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("h3,span").addClass("blue important");

  });

  $("#btn2").click(function(){

    $("h3,span").removeClass("blue");

  });

  $("#btn3").click(function(){

    $("h3,span").toggle("blue");

  });

  $("#btn4").click(function(){

    $("p").css({"background-color":"yellow","font-size":"200%"});

  });

});

</script>

<style type="text/css">

.important

{

    font-weight:bold;

    font-size:xx-large;

}

.blue

{

    color:blue;

}

</style>

</head>

<body>

<p style="background-color:#ff0000">这是一个段落。</p>

<p style="background-color:#00ff00">这是一个段落。</p>

<h3>标题 3</h3>

<span>i love duzi</span><br>

<button id='btn1'>从元素中添加 class</button>

<button id='btn2'>从元素中移除 class</button>

<button id='btn3'>从元素中切换 class</button>

<button id='btn4'>设置p样式</button>

</body>

</html>

jQuery(三)HTML的更多相关文章

  1. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  2. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  3. jquery 三种开始写法

    在 jquery 代码中使用 $(document).ready()时,位于其中的所有代码都会在 DOM 加载后立即执行 第一种(推荐)$(document).ready(function(){   ...

  4. JQuery(三)——操作HTML和CSS内容

    前边我们学习过JS通过DOM来操作HTML(详看DOM(一)——HTML DOM ),这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢?顺便两者之间相互比较一下,看其差别 ...

  5. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  6. jQuery三——筛选方法、事件

    一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...

  7. 你不需要jQuery(三)：新AJAX方法fetch()

    XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...

  8. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

  9. 小谷的战斗Jquery(三)--水平和垂直菜单

    日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,Web项目中,有两个共同的菜单:纵向和横向.说到从垂直,看原代码. html代码实现最主要的菜单与子菜单 <span style=& ...

  10. jQuery(三)、属性、CSS

    jQuery设置了很多为标签进行属性的操作,比如添加.删除. 一 .属性 1 attr(name | properties | [key, value | fn]) 设置或返回被选择的属性值. 参数: ...

随机推荐

  1. CSS样式编写案例

    1.制作如图三角形效果: 步骤一:将右侧盒子设置为相对定位 步骤二:在右侧盒子里面新建个子盒子,设置宽高相等,为正方形,绝对定位 步骤三:将绝对定位的盒子用CSS3旋转属性旋转 2.制定如图的序列号 ...

  2. java面试题全集（上）--java基础

    本文转载自:https://blog.csdn.net/jackfrued/article/details/44921941 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: - ...

  3. SQL Server ->> CLR存储过程枚举目录文件并返回结果集

    因工作需要写了个CLR存储过程枚举目录文件并返回结果集 using System; using System.IO; using System.Collections.Generic; using S ...

  4. day006-多线程

    1. 线程概念 a)     什么是主线程 Java程序启动过程中自动创建的并执行main方法的线程称为主线程 主线程的执行路径: 从main方法开始到main方法结束 b)什么是子线程 除了主线程的 ...

  5. CSS中的EM属性之弹性布局

    这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...

  6. JUnit报错：java.lang.ClassNotFoundException: com.mogodb.test.test

    最近在使用JUnit做单元测试时,发现新写好的测试类运行总是出错,报找不到类异常. Class not found com.mogodb.test.test java.lang.ClassNotFou ...

  7. 用AutoHotkey重置Excel的Ctrl+Alt+方向键选择的范围

    当前选择是蓝色单元格,原来的Ctrl+Alt+方向键,是选中[蓝色]到[红色]单元格的区域, 经过脚本修改后,则是[蓝色]到[黄色]的区域,应该更符合日常使用, 特别是表格比较大的时候,一直按住鼠标滚 ...

  8. 4.Zabbix 3.0 案例

    请查看我的有道云笔记: http://note.youdao.com/noteshare?id=2807c0910cd63d309e1462128a31ae0e&sub=241A94E5717 ...

  9. CRM订单状态的Open, In process和Completed这些条目是从哪里来的

    Service Order的状态字段里的这些字段从哪里带出来的?我们可能会想当然的认为是从后台配的Status profile里带出来的.事实并非如此. 这个transaction type根本没有分 ...

  10. UESTC 574 High-level ancients

    分析: 无论父节点增加了多少,子节点的增量总比父节点多1. 这种差分的关系是保存不变的,我们可以一遍dfs根据结点深度得到在根结点的每个点的系数. 估且把一开始的结点深度称做c0吧,对于子树的修改就只 ...