JavaScript（19）jQuery HTML 获取和设置内容和属性
jQuery HTML
jQuery 拥有可操作 HTML 元素和属性的强慷慨法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使訪问和操作元素和属性变得非常easy。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义訪问 HTML 和 XML 文档的标准：“W3C 文档对象模型独立于平台和语言的界面，同意程序和脚本动态訪问和更新文档的内容、结构以及样式。”
jQuery HTML - 获得内容和属性
获得内容 - text()、html() 以及 val()
三个简单有用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包含 HTML 标记）
- val() - 设置或返回表单字段的值
通过 jQuery text() 和 html() 方法来获得内容：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
通过 jQuery val() 方法获得输入字段的值：
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
获得链接中 href 属性的值：
$("button").click(function(){
alert($("#Attr").attr("href"));
});
jQuery HTML - 设置内容和属性
设置内容 - text()、html() 以及 val()
还是上面提过的3个方法（差别在于參数）：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
text()、html() 以及 val()，拥有回调函数。回调函数由两个參数：被选元素列表中当前元素的下标，以及原始（旧的）值。
然后以函数新值返回希望使用的字符串。
带有回调函数的 text() 和 html()：
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
改变（设置）链接中 href 属性的值：
$("button").click(function(){
$("#w3s").attr("href","http://www.csdn.net");
});
attr() 方法也同意同一时候设置多个属性。
同一时候设置 href 和 title 属性：
$(document).ready(function(){
$("button").click(function(){
$("#csdn").attr({
"href" : "http://www.csdn.net",
"target" : "_blank"
});
});
});
attr() 的回调函数
回调函数有两个參数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回希望使用的字符串。
带有回调函数的 attr() 方法：
$("button").click(function(){
$("#csdn").attr("href", function(i,origValue){
return origValue + "/u014194675";
});
});
提示：
<p><a href="http://blog.csdn.net" id="csdn">csdn</a></p>
哈哈~
本来想学到这里就结束了，可是看看上面都是不完整的样例，练习起来可能不太方便，可是假设贴好几个小样例，看起来会非常乱吧。。。于是我总结了一个大样例。。。顺便能够放在我的网页中。。。。。。图片不想贴了。。。。。。附个链接吧，点击打开链接。
<!DOCTYPE html>
<html> <head>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){ $("#btn1").click(function(){
alert("Text: " + $("#test1").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test1").html());
});
$("#btn3").click(function(){
alert("Value: " + $("#test2").val());
}); $("#btn4").click(function(){
$("#test1").text("能够呀");
});
$("#btn5").click(function(){
$("#test1").html("<b>真的么</b>");
});
$("#btn6").click(function(){
$("#test2").val("周董");
}); $("#btn7").click(function(){
$("#test1").text(function(i, origText){
return (origText + " 应该能够吧");
});
});
$("#btn8").click(function(){
$("#test1").html(function(i, origText){
return (origText + " <b>好的</b>");
});
});
$("#btn9").click(function(){
$("#test2").val(function(i, origText){
return (origText + " Jay Chou");
});
}); $("#button1").click(function(){
alert($("#xyxy").attr("href"));
});
$("#button2").click(function(){
$("#xyxy").attr({
"href" : "http://www.suxin.yeyou.eu",
"target" : "view_frame"
});
});
$("#button3").click(function(){
$("#xyxy").attr("href", function(i,origValue){
return origValue + "/answer.html";
});
}); });
</script>
</head> <body> <p id="test1" value="csdn">我能够继续用<b>杰伦</b>来举样例么</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button> <button id="btn4">设置文本</button>
<button id="btn5">设置 HTML</button> <button id="btn7">回调函数设置文本</button>
<button id="btn8">回调函数设置 HTML</button> <p>姓名：<input type="text" id="test2" value="周杰伦"></p>
<button id="btn3">显示 value</button>
<button id="btn6">设置 value</button>
<button id="btn9">回调函数设置 value</button> <p><a href="http://www.suxin.yeyou.eu/test.html" target="_blank" id="xyxy">自己的网页</a></p>
<button id="button1">获取 href</button>
<button id="button2">设置 href 多个属性</button>
<button id="button3">回调函数设置 href </button>
<p>先点击链接；然后点击button2，再点击链接；之后再点击button3，再点击链接。</p> </body> </html>
再补充一下刚才设定<a>标签的 target 属性遇到的小问题。
之前在“设置 href 多个属性”时，我将 target 设为 _self。这种话，“然后点击button2，再点击链接”后，尽管仍然是同一个页面，但 href 已经由http://www.suxin.yeyou.eu变成了http://www.suxin.yeyou.eu/test.html"，这不是我想要的结果，由于这样会导致“之后再点击button3，再点击链接”达不到我想要的效果。
于是我将 target 设为 view_frame。这样就既改变了属性，又不会出问题。那 view_frame 和 _blank 有什么差别呢？
target="view_window"
当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗体，将它标记为 "view_window"，然后在当中显示希望显示的文档内容。假设用户从这个内容列表中选择还有一个链接，且这个 "view_window" 仍处于打开状态，浏览器就会再次将选定的文档加载那个窗体，代替刚才的那些文档。
JavaScript（19）jQuery HTML 获取和设置内容和属性的更多相关文章
- jQuery捕获-获取DOM元素内容和属性
一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...
- JQUERY操作html--获取和设置内容、属性、回调函数
一:jQuery - 获取内容和属性 1.获得内容 - text().html() 以及 val() text() - 返回所选元素的文本内容 html() - 返回所选元素的内容(包括 HTML 标 ...
- js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- <七> jQuery 设置内容和属性
设置内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 设置属性 jQuery attr( ...
- jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()
jQuery - 设置内容和属性 设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...
- jQuery基础之获取和设置标签元素属性
jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...
- Maya cmds polyOptions() 获取和设置 mesh 的属性
Maya cmds polyOptions() 获取和设置 mesh 的属性 举例: cmds.polyOptions(dt = True) # 显示所有选择的 mesh 的三角化线(四边形的对角虚线 ...
- jQuery - 获取/设置内容和属性
获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元 ...
- jQuery设置内容和属性方
何问起 hovertree.com 设置内容 - text().html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML ...
随机推荐
- MongoDB 的 MapReduce 大数据统计统计挖掘
MongoDB虽然不像我们常用的mysql,sqlserver,oracle等关系型数据库有group by函数那样方便分组,但是MongoDB要实现分组也有3个办法: * Mongodb三种分组方式 ...
- CentOS7--Xshell网络中断引起的vi编辑文件问题
在编写Python的程序时,由于不小心触碰网线使xshell出现网络中断问题,当再次以vi命令打开文件准备编辑时,发现爆出英文错误: 该错误的英文翻译大概是(1)另一个程序也在编译这个文件,如果是这样 ...
- Linux目录和权限
1. rmdir -p 用来删除一串目录,是否可以成功删除? rmdir -p 删除一个不存在的目录时是否报错呢?rmdir -p 不能成功删除非空目录,rmdir -p 删除一个不存在的目录 ...
- jquery悬停tab
<style> *{ margin:0; padding:0;} body { font:12px/19px Arial, Helvetica, sans-serif; color:#66 ...
- Oracle语句块PL/SQL循环判断
- --pl/sql Procedural Language /sql --被数据库编译保存,由用户调用 --程序块 /* 语法 Declare – 声明变量 --声明变量 Age int; //没有 ...
- VC获取当前程序运行路径
/***************************************************/ /* 函数: 获取当前程序运行的路径 /* 返回: 当前程序运行路径 C:\AAA\BBB\ ...
- ajax请求或者页面需要缓存，代码如下
缓存页面代码 1 private void setClientCache(HttpServletResponse response, int maxAgeSec) 2 { 3 long maxAgeM ...
- OpenGL ES 2.0 限定符
限定符 说明 作用 attribute 一般用于各个顶点各不相同的量,如顶点位置.颜色等 属性限定符,修饰的变量用来接收渲染管线传递进顶点着色器的当前顶点的各种属性值. 只能用来修饰符点数标量,浮点数 ...
- [Ioi2007]Miners 矿工配餐(BZOJ1806)
[Ioi2007]Miners 矿工配餐 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 214 Solved: 128 Description 现有两 ...
- LightOj 1230 Placing Lampposts(树形DP)
题意:给定一个森林.每个节点上安装一个灯可以覆盖与该节点相连的所有边.选择最少的节点数num覆盖所有的边.在num最小的前提下,合理放置num个灯使得被两个灯覆盖的边最多? 思路:F[i][0]代表没 ...