Jquery_HTML-对HTML内容删除添加、操作CSS改变样式、遍历定位元素
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
7 <style>
8 .important {
9 font-weight:bold;
10 font-size:xx-large;
11 }
12 .yellow{color: yellow;}
13 .blue{color:blue;}
14
15 </style>
16 </head>
17 <body>
18 <h1>获得内容 - text()、html() 以及 val()</h1>
19 <p id="test">这是段落中的<b>粗体</b>文本</p>
20 <button id="btn1">显示文本</button>
21 <button id="btn2">显示HTML</button>
22
23 <p>名称：<input type="text" id="test1" value="这是一个测试"></p>
24 <button id="btn3">显示属性value的值</button>
25
26 <p><a href="https://www.baidu.com" id="baidu">百度一下</a></p>
27 <button id="btn4">显示属性href的值</button>
28 <button id="btn8">修改href和内容</button>
29 <hr><h1>获得内容 - text()、html() 以及 val()</h1>
30 <p id="test2">这是一个段落</p>
31 <p id="test3">这是另一个段落</p>
32 <p>名称：<input type="text" id="test4" value="这是一个测试"></p>
33 <button id="btn5">设置文本</button>
34 <button id="btn6">设置HTML</button>
35 <button id="btn7">设置值</button>
36 <hr><h1>添加新的 HTML 内容</h1>
37 <p>这是一个段落</p>
38 <button onclick="appendText()">追加文本</button>
39 <hr><h1>操作 CSS</h1>
40 <button id="btn9">为元素添加 class</button>
41 <button id="btn10">从元素中移除 class</button>
42 <button id="btn11">切换 class</button>
43 <button id="btn12">为 p 元素设置多个样式</button>
44 <hr><h1>遍历</h1>
45 <p>parent() 方法返回被选元素的直接父元素---
46 $("span").parent();返回每个 span 元素的直接父元素
47 </p>
48 <p>parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素----
49 ①$("span").parents();返回所有 span 元素的所有祖先
50 ②$("span").parents("ul");返回所有 span 元素的所有祖先，并且它是 ul 元素；使用可选参数来过滤对祖先元素的搜索
51 </p>
52 <p>parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素----
53 $("span").parentsUntil("div");返回介于 span 与 div 元素之间的所有祖先元素
54 </p>
55
56 <p>children() 方法返回被选元素的所有直接子元素----
57 $("div").children();返回每个 div 元素的所有直接子元素
58 $("div").children("p.1");返回类名为 "1" 的所有 p 元素，并且它们是 div 的直接子元素
59 </p>
60 <p>find() 方法返回被选元素的后代元素，一路向下直到最后一个后代----
61 $("div").find("span");返回属于 div 后代的所有 span 元素
62 $("div").find("*");返回 div 的所有后代
63 </p>
64
65
66 <script>
67
68 $(function () {
69 $("#btn1").click(function () {
70 alert("Text:"+$("#test").text());//text() - 设置或返回所选元素的文本内容
71 });
72 $("#btn2").click(function () {
73 alert("HTML:"+$("#test").html());//html() - 设置或返回所选元素的内容（包括 HTML 标记）
74 });
75 $("#btn3").click(function () {
76 alert("值为："+$("#test1").val());//val() - 设置或返回表单字段的值
77 });
78 $("#btn4").click(function () {
79 alert("值为："+$("#baidu").attr("href"));//attr() 方法用于获取属性值
80 });
81 $("#btn8").click(function () {
82 $("#baidu").attr({
83 "href" : "https://www.12306.cn",
84 "title" : "铁路链接"
85 });
86 // 通过修改的 title 值来修改链接名称
87 title = $("#baidu").attr('title');
88 $("#baidu").html(title);
89 });
90
91 $("#btn5").click(function () {
92 $("#test2").text(function (i,origText) {
93 return "旧文本："+origText+i;//回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串
94 });
95 });
96 $("#btn6").click(function () {
97 $("#test3").html("<b>设置的HTML</b>");//html() - 设置或返回所选元素的内容（包括 HTML 标记）
98 });
99 $("#btn7").click(function () {
100 $("#test4").val("设置value的值");//val() - 设置或返回表单字段的值
101 });
102
103 $("#btn9").click(function () {
104 $("h1,p").addClass("blue");//在添加类时，可以选取多个元素
105 $("input").addClass("important");
106 $("body a:first").addClass("important yellow");//在 addClass() 方法中规定多个类
107 });
108 $("#btn10").click(function () {
109 $("h1,p").removeClass("blue");//在添加类时，可以选取多个元素
110 $("input").removeClass("important");
111 $("body a:first").removeClass("important yellow");//在 removeClass() 方法中规定多个类
112 });
113 $("#btn11").click(function () {//对被选元素进行添加/删除类的切换操作
114 $("h1,p").toggleClass("blue");//在添加类时，可以选取多个元素
115 $("input").toggleClass("important");
116 $("body a:first").toggleClass("important yellow");//在 toggleClass() 方法中规定多个类
117 });
118 $("#btn12").click(function () {
119 $("p").css({"background-color":"yellow","font-size":"200%"});//设置多个 CSS 属性
120 });
121
122 });
123
124 function appendText() {
125 var txt1 = "<p>文本。使用HTML创建</p>";
126 var txt2 = $("<p></p>").text("文本。使用Jquery创建");
127 var txt3 = document.createElement("p");
128 txt3.innerHTML="文本。使用DOM创建";
129 $("body").append(txt1,txt2,txt3);//append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）；prepend() 方法在被选元素的开头插入内容
130 //after() 方法在被选元素之后插入内容；before() 方法在被选元素之前插入内容
131 //append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加
132 }
133
134 </script>
135
136
137 </body>
138 </html>
Jquery_HTML-对HTML内容删除添加、操作CSS改变样式、遍历定位元素的更多相关文章
- js操作css样式，null和undefined的区别？
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- Python脚本控制的WebDriver 常用操作 <八> 简单的对象定位
这一部分的内容,将是在WebDriver中,定位元素方法的演示,是将Selenium中Selenese元素定位命令的WebDriver中使用方法的结合 Selenium中元素定位方法复习可以参考: & ...
- jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- 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操作盒 ...
- [原创]java WEB学习笔记66：Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) 使用 paramsPrepareParamsStack 重构代码 ，PrepareInterceptor拦截器，paramsPrepareParamsStack 拦截器栈
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- MySQL8.0数据库出现的问题——外码创建方式、外键约束两个引用列不兼容问题、check约束问题、用触发器代替check约束、关键字DELIMITER、删除添加索引、删除添加外键约束、和一些数据库方面的操作
一.首先先说一下我们都需要建立那些表 mysql> CREATE TABLE IF NOT EXISTS `student`( -> `sno` CHAR(8) NOT NULL, -&g ...
- WebLogic Server添加删除补丁操作【转】【补】
WebLogic Server添加删除补丁操作 0 查看当前weblogic版本 [weblogic@localhost bin]$ cd /data/bea/weblogic11/wlserver_ ...
- jQery 操作CSS
jQuery操作CSS也是很方便的,咱先看看这几个常用的方法: addClass():向一个元素添加一个或者多个类. removeClass():从一个元素中删除一个类或多个类. toggleClas ...
- 使用 JS 来动态操作 css ，你知道几种方法？
JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.D ...
随机推荐
- KestrelServer详解[2]: 网络链接的创建
<注册监听终结点(Endpoint)>已经详细讲述了如何使用KestrelServer,现在我们来简单聊聊这种处理器的总体设计和实现原理.当KestrelServer启动的时候,注册的每个 ...
- Material Design with the Android Design Support Library
Material Design with the Android Design Support Library 原文http://www.sitepoint.com/material-design-a ...
- 关于web以及浏览器处理预加载有哪些思考？
图片等静态资源在使用之前就提前请求资源使用到的时候能从缓存中加载, 提升用户体验页面展示的依赖关系维护
- springboot实现热部署的几种方式
原理:使用了两个ClassLoader,一个Classloader加载那些不会改变的类(第三方Jar包),另一个ClassLoader加载会更改的类,称为restart ClassLoader,这样在 ...
- Spring 框架的事务管理有哪些优点？
它为不同的事务 API 如 JTA,JDBC,Hibernate,JPA 和 JDO,提供 一个不变的编程模式. 它为编程式事务管理提供了一套简单的 API 而不是一些复杂的事务 API 它支持声明式 ...
- Zookeeper 下 Server 工作状态 ?
服务器具有四种状态,分别是 LOOKING.FOLLOWING.LEADING.OBSERVING. 1.LOOKING:寻找 Leader 状态.当服务器处于该状态时,它会认为当前集群中 没有 Le ...
- Java 中如何格式化一个日期？如格式化为 ddMMyyyy 的形式？
Java 中,可以使用 SimpleDateFormat 类或者 joda-time 库来格式日期. DateFormat 类允许你使用多种流行的格式来格式化日期.参见答案中的示例代 码,代码中演示了 ...
- transformjs 污染了 DOM？是你不了解它的强大
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得tran ...
- angular组件开发
项目中经常会有一些公共组件,比如header,如果每个页面都写一遍的话显得很冗余,而且不利于维护,这时候我们就会考虑将这些公共部分抽取出来,做成一个单独的组件. 然而angular不是很熟悉啊~怎么啵 ...
- Shiro 安全框架详解二（概念+权限案例实现）
Shiro 安全框架详解二 总结内容 一.登录认证 二.Shiro 授权 1. 概念 2. 授权流程图 三.基于 ini 的授权认证案例实现 1. 实现原理图 2. 实现代码 2.1 添加 maven ...