1. 1 <!DOCTYPE html>
  2. 2 <html lang="en">
  3. 3 <head>
  4. 4 <meta charset="UTF-8">
  5. 5 <title>Title</title>
  6. 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  7. 7 <style>
  8. 8 .important {
  9. 9 font-weight:bold;
  10. 10 font-size:xx-large;
  11. 11 }
  12. 12 .yellow{color: yellow;}
  13. 13 .blue{color:blue;}
  14. 14
  15. 15 </style>
  16. 16 </head>
  17. 17 <body>
  18. 18 <h1>获得内容 - text()、html() 以及 val()</h1>
  19. 19 <p id="test">这是段落中的<b>粗体</b>文本</p>
  20. 20 <button id="btn1">显示文本</button>
  21. 21 <button id="btn2">显示HTML</button>
  22. 22
  23. 23 <p>名称:<input type="text" id="test1" value="这是一个测试"></p>
  24. 24 <button id="btn3">显示属性value的值</button>
  25. 25
  26. 26 <p><a href="https://www.baidu.com" id="baidu">百度一下</a></p>
  27. 27 <button id="btn4">显示属性href的值</button>
  28. 28 <button id="btn8">修改href和内容</button>
  29. 29 <hr><h1>获得内容 - text()、html() 以及 val()</h1>
  30. 30 <p id="test2">这是一个段落</p>
  31. 31 <p id="test3">这是另一个段落</p>
  32. 32 <p>名称:<input type="text" id="test4" value="这是一个测试"></p>
  33. 33 <button id="btn5">设置文本</button>
  34. 34 <button id="btn6">设置HTML</button>
  35. 35 <button id="btn7">设置值</button>
  36. 36 <hr><h1>添加新的 HTML 内容</h1>
  37. 37 <p>这是一个段落</p>
  38. 38 <button onclick="appendText()">追加文本</button>
  39. 39 <hr><h1>操作 CSS</h1>
  40. 40 <button id="btn9">为元素添加 class</button>
  41. 41 <button id="btn10">从元素中移除 class</button>
  42. 42 <button id="btn11">切换 class</button>
  43. 43 <button id="btn12">为 p 元素设置多个样式</button>
  44. 44 <hr><h1>遍历</h1>
  45. 45 <p>parent() 方法返回被选元素的直接父元素---
  46. 46 $("span").parent();返回每个 span 元素的直接父元素
  47. 47 </p>
  48. 48 <p>parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素----
  49. 49 $("span").parents();返回所有 span 元素的所有祖先
  50. 50 $("span").parents("ul");返回所有 span 元素的所有祖先,并且它是 ul 元素;使用可选参数来过滤对祖先元素的搜索
  51. 51 </p>
  52. 52 <p>parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素----
  53. 53 $("span").parentsUntil("div");返回介于 span div 元素之间的所有祖先元素
  54. 54 </p>
  55. 55
  56. 56 <p>children() 方法返回被选元素的所有直接子元素----
  57. 57 $("div").children();返回每个 div 元素的所有直接子元素
  58. 58 $("div").children("p.1");返回类名为 "1" 的所有 p 元素,并且它们是 div 的直接子元素
  59. 59 </p>
  60. 60 <p>find() 方法返回被选元素的后代元素,一路向下直到最后一个后代----
  61. 61 $("div").find("span");返回属于 div 后代的所有 span 元素
  62. 62 $("div").find("*");返回 div 的所有后代
  63. 63 </p>
  64. 64
  65. 65
  66. 66 <script>
  67. 67
  68. 68 $(function () {
  69. 69 $("#btn1").click(function () {
  70. 70 alert("Text:"+$("#test").text());//text() - 设置或返回所选元素的文本内容
  71. 71 });
  72. 72 $("#btn2").click(function () {
  73. 73 alert("HTML:"+$("#test").html());//html() - 设置或返回所选元素的内容(包括 HTML 标记)
  74. 74 });
  75. 75 $("#btn3").click(function () {
  76. 76 alert("值为:"+$("#test1").val());//val() - 设置或返回表单字段的值
  77. 77 });
  78. 78 $("#btn4").click(function () {
  79. 79 alert("值为:"+$("#baidu").attr("href"));//attr() 方法用于获取属性值
  80. 80 });
  81. 81 $("#btn8").click(function () {
  82. 82 $("#baidu").attr({
  83. 83 "href" : "https://www.12306.cn",
  84. 84 "title" : "铁路链接"
  85. 85 });
  86. 86 // 通过修改的 title 值来修改链接名称
  87. 87 title = $("#baidu").attr('title');
  88. 88 $("#baidu").html(title);
  89. 89 });
  90. 90
  91. 91 $("#btn5").click(function () {
  92. 92 $("#test2").text(function (i,origText) {
  93. 93 return "旧文本:"+origText+i;//回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串
  94. 94 });
  95. 95 });
  96. 96 $("#btn6").click(function () {
  97. 97 $("#test3").html("<b>设置的HTML</b>");//html() - 设置或返回所选元素的内容(包括 HTML 标记)
  98. 98 });
  99. 99 $("#btn7").click(function () {
  100. 100 $("#test4").val("设置value的值");//val() - 设置或返回表单字段的值
  101. 101 });
  102. 102
  103. 103 $("#btn9").click(function () {
  104. 104 $("h1,p").addClass("blue");//在添加类时,可以选取多个元素
  105. 105 $("input").addClass("important");
  106. 106 $("body a:first").addClass("important yellow");//在 addClass() 方法中规定多个类
  107. 107 });
  108. 108 $("#btn10").click(function () {
  109. 109 $("h1,p").removeClass("blue");//在添加类时,可以选取多个元素
  110. 110 $("input").removeClass("important");
  111. 111 $("body a:first").removeClass("important yellow");//在 removeClass() 方法中规定多个类
  112. 112 });
  113. 113 $("#btn11").click(function () {//对被选元素进行添加/删除类的切换操作
  114. 114 $("h1,p").toggleClass("blue");//在添加类时,可以选取多个元素
  115. 115 $("input").toggleClass("important");
  116. 116 $("body a:first").toggleClass("important yellow");//在 toggleClass() 方法中规定多个类
  117. 117 });
  118. 118 $("#btn12").click(function () {
  119. 119 $("p").css({"background-color":"yellow","font-size":"200%"});//设置多个 CSS 属性
  120. 120 });
  121. 121
  122. 122 });
  123. 123
  124. 124 function appendText() {
  125. 125 var txt1 = "<p>文本。使用HTML创建</p>";
  126. 126 var txt2 = $("<p></p>").text("文本。使用Jquery创建");
  127. 127 var txt3 = document.createElement("p");
  128. 128 txt3.innerHTML="文本。使用DOM创建";
  129. 129 $("body").append(txt1,txt2,txt3);//append() 方法在被选元素的结尾插入内容(仍然在该元素的内部);prepend() 方法在被选元素的开头插入内容
  130. 130 //after() 方法在被选元素之后插入内容;before() 方法在被选元素之前插入内容
  131. 131 //append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加
  132. 132 }
  133. 133
  134. 134 </script>
  135. 135
  136. 136
  137. 137 </body>
  138. 138 </html>

Jquery_HTML-对HTML内容删除添加、操作CSS改变样式、遍历定位元素的更多相关文章

  1. js操作css样式,null和undefined的区别?

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  2. Python脚本控制的WebDriver 常用操作 <八> 简单的对象定位

    这一部分的内容,将是在WebDriver中,定位元素方法的演示,是将Selenium中Selenese元素定位命令的WebDriver中使用方法的结合 Selenium中元素定位方法复习可以参考: & ...

  3. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  4. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  5. [原创]java WEB学习笔记66:Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) 使用 paramsPrepareParamsStack 重构代码 ,PrepareInterceptor拦截器,paramsPrepareParamsStack 拦截器栈

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. MySQL8.0数据库出现的问题——外码创建方式、外键约束两个引用列不兼容问题、check约束问题、用触发器代替check约束、关键字DELIMITER、删除添加索引、删除添加外键约束、和一些数据库方面的操作

    一.首先先说一下我们都需要建立那些表 mysql> CREATE TABLE IF NOT EXISTS `student`( -> `sno` CHAR(8) NOT NULL, -&g ...

  7. WebLogic Server添加删除补丁操作【转】【补】

    WebLogic Server添加删除补丁操作 0 查看当前weblogic版本 [weblogic@localhost bin]$ cd /data/bea/weblogic11/wlserver_ ...

  8. jQery 操作CSS

    jQuery操作CSS也是很方便的,咱先看看这几个常用的方法: addClass():向一个元素添加一个或者多个类. removeClass():从一个元素中删除一个类或多个类. toggleClas ...

  9. 使用 JS 来动态操作 css ,你知道几种方法?

    JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.D ...

随机推荐

  1. C++图像处理算法入门前言

    一  前言 由于面试时,很多面试官一直强调算法才是根本,编代码不是.有以下两个原因: 第一个原因:即要想成为一名合格的应用工程师(不管是软件还是硬件),都得以学习算法,动手实现算法为核心,这才是核心竞 ...

  2. luoguP6624 [省选联考 2020 A 卷] 作业题(莫比乌斯反演,矩阵树定理)

    luoguP6624 [省选联考 2020 A 卷] 作业题(莫比乌斯反演,矩阵树定理) Luogu 题外话: Day2一题没切. 我是傻逼. 题解时间 某种意义上说刻在DNA里的柿子,大概是很多人学 ...

  3. static变量和函数如何巧妙调用

    app.c 和 main.c 之间,在main.c中调用app.c的static变量和函数,需要利用一个结构体结合指针通过传地址的方式间接访问. app   --------------------- ...

  4. 《前端运维》五、k8s--1安装与基本配置

    一.k8s基础概念与安装 k8s,即kubernetes是用于自动部署,扩展和管理容器化应用程序的开源系统.详细的描述就不多说了,官网有更详细的内容.简单来说,k8s,是一个可以操作多台机器调度部署镜 ...

  5. SpringMVC源码解读 - RequestMapping注解实现解读

    SpringMVC源码解读 - RequestMapping注解实现解读 - RequestCondition体系  https://www.cnblogs.com/leftthen/p/520840 ...

  6. nacos底层原理

    Nacos   为什么选择NacosNacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理. Nacos 帮 ...

  7. 建立META-INF/spring.factories文件的意义何在

    平常我们如何将Bean注入到容器当中 @Configuration @EnableConfigurationProperties(HelloProperties.class) public class ...

  8. 什么是 Hystrix?它如何实现容错?

    Hystrix 是一个延迟和容错库,旨在隔离远程系统,服务和第三方库的访问点,当出现故障是不可避免的故障时,停止级联故障并在复杂的分布式系统中实现弹性.通常对于使用微服 构开发的系统,涉及到许多微服务 ...

  9. MyISAM 表格将在哪里存储,并且还提供其存储格式?

    每个 MyISAM 表格以三种格式存储在磁盘上: ·".frm"文件存储表定义 ·数据文件具有".MYD"(MYData)扩展名 索引文件具有".MY ...

  10. 学习docker(三)

    一.Docker介绍 1.docker容器 docker是宿主机的一个进程,通过namespace实现了资源隔离,通过cgroup实现了资源限制, 通过写时复制技术(copy-on-write)实现了 ...