jQuery(三)HTML
获得内容:
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的更多相关文章
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- jquery 三种开始写法
在 jquery 代码中使用 $(document).ready()时,位于其中的所有代码都会在 DOM 加载后立即执行 第一种(推荐)$(document).ready(function(){ ...
- JQuery(三)——操作HTML和CSS内容
前边我们学习过JS通过DOM来操作HTML(详看DOM(一)——HTML DOM ),这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢?顺便两者之间相互比较一下,看其差别 ...
- jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
- jQuery三——筛选方法、事件
一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...
- 你不需要jQuery(三)：新AJAX方法fetch()
XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...
- jQuery三种事件绑定方式.bind(),.live(),.delegate()
.bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...
- 小谷的战斗Jquery(三)--水平和垂直菜单
日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,Web项目中,有两个共同的菜单:纵向和横向.说到从垂直,看原代码. html代码实现最主要的菜单与子菜单 <span style=& ...
- jQuery(三)、属性、CSS
jQuery设置了很多为标签进行属性的操作,比如添加.删除. 一 .属性 1 attr(name | properties | [key, value | fn]) 设置或返回被选择的属性值. 参数: ...
随机推荐
- twaver拓扑图通道组织图（百分比使用率/水槽）效果实现
功能介绍: 利用拓扑图实现:64条通道,根据每条通道是否承载业务,提供百分比展示 首先上图,功能效果如图: 废话不多,直接上代码: <!DOCTYPE html> <html> ...
- javascript实现数据结构： 树和二叉树的应用--最优二叉树（赫夫曼树），回溯法与树的遍历--求集合幂集及八皇后问题
赫夫曼树及其应用 赫夫曼(Huffman)树又称最优树,是一类带权路径长度最短的树,有着广泛的应用. 最优二叉树(Huffman树) 1 基本概念 ① 结点路径:从树中一个结点到另一个结点的之间的分支 ...
- keras 多输出问题
转自:https://github.com/Xls1994/DeepLearningCode/blob/master/Keras/HedgeScope/multiOutputLSTM.py
- Network Embedding 论文小览
Network Embedding 论文小览 转自:http://blog.csdn.net/Dark_Scope/article/details/74279582,感谢分享! 自从word2vec横 ...
- matlab中repmat函数的用法（堆叠矩阵）
matlab中repmat函数的用法 B = repmat(A,m,n) B = repmat(A,[m n]) B = repmat(A,[m n p...]) 这是一个处理大矩阵且内容有重复时使用 ...
- 订阅无法在 ARM 模式下创建虚拟机，只能在 ASM 模式下创建 Azure VM 部署
问题描述 资源组所有者可以在新版 portal 创建经典模式的虚拟机,但是无法创建 ARM 模式的虚拟机. 问题现象 环境中有个相对权限比较高的账户,比如 account admin (以下简称为 A ...
- 大数据的正确用法你get到了吗？
Azure 镜像市场已于2016年9月21日正式上线,在这个统一的集成平台中,客户可以轻松地浏览.搜索和选择一系列来自第三方的应用和解决方案,并可以将其快速一键部署到 Azure 实例当中. 在移动为 ...
- android Handler、Thread和Runnable
android里面的创建的Handler对象并不是新建一个新的线程,而是在主线程执行,主线程的消息队列中循环. java中实现一个线程有两种方法,一种是继承Thread类,一种是实现Runnable接 ...
- sqlserver row_number函数的用法
ROW_NUMBER()函数将针对SELECT语句返回的每一行,从1开始编号,赋予其连续的编号 必须和over一起使用 select *,ROW_NUMBER() over(order by prod ...
- XPS 13 9360安装ubuntu 18
XPS 13 9360安装ubuntu 18 标签(空格分隔): Linux 操作系统 1. 雷电口驱动bug 提示更新雷电口驱动bug(thunderbolt nvm for xps noteboo ...