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” 仍处于打开状态，
浏览器就会再次将选定的文档加载那个窗体，代替刚才的那些文档。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/118727.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...