jQuery HTML获取内容和属性操作实例分析

目录
  • 获取内容和属性
    • 获得内容 - text()、html() 以及 val()
    • 获取属性 - attr()

本文实例讲述了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("值为: " + $("#test").val());
});

获取属性 - attr()

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
 alert($("#runoob").attr("href"));
});

attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

实例 1：

<a href="https://www.jb51.net" target="_self" class="btn">我们</a>

这个例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

<a href="#" rel="external nofollow" id="link1" action="delete" >删除</a>

这个例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。

prop()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是 undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery 获取、设置HTML或TEXT内容的两种方法

    jQuery提供了两个API可以直接用来为元素添加内容. html() text() 其中html()是为指定的元素添加html内容 text()是为指定的元素添加文本内容 两者的区别在于,text中的内容是纯文本,不会被解析为html 如果要对如下html代码进行操作 复制代码 代码如下: <body> <p></p> </body> 使用html() 复制代码 代码如下: $('p').html('<strong>Hello World<

  • JQuery 获取多个select标签option的text内容(实例)

    根据option的id属性,修改text值 $("#sel_div .select_class option[id='-选择省-']").text(data.province).attr("selected",true); $("#sel_div .select_class option[id='-选择市-']").text( data.city).attr("selected",true); $("#sel_div

  • jquery form表单获取内容以及绑定数据

    在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单: 获取表单的数据:$("#formid").serializeJson(); 绑定数据到表单:$("#formid").setForm(json); jquery.formHelp.js插件 /** * 将form里面的内容序列化成json * 相同的c

  • jQuery 同时获取多个标签的指定内容并储存为数组

    在网页开发中经常会碰到获取同种类型的 标签 的值得问题,比如下面的两种情况. 当需要批量获取同种标签的指定值时,新人就会碰上一点小麻烦. 比如 id=problem1的demo var list1=$("#problem1").children();//获取到problem1指定的对象数组 console.log(list1);//打印到控制台 控制台中输出的跟我们想象中的是一样的.那么接下来看下一段代码 var list1=$("#problem1").child

  • jquery获取table中的某行全部td的内容方法

    复制代码 代码如下: <table><tr class="PurViewData" id="trid95">    <td>14</td>    <td id="95"><a style="color:#0000CC" href="/PurviewManage/AddPurview?id=95">TopParty优惠</a>

  • jquery获取自定义属性(attr和prop)实例介绍

    jquery获取自定义属性(attr和prop)实例介绍

    $("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&

  • jQuery获取选中内容及设置元素属性的方法

    获取选中select : $("#id option:selected").val(); 自定义radio: $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio: $("input[name='sex']:checked").val() 设置input不能编辑: $("#cashNum").attr

  • JS和jQuery通过this获取html标签中的属性值(实例代码)

    废话不多说了,具体代码如下所示: <html> <head> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> /** JQUERY 通过当前标签属性名,获取属性的值 */ function attrsByJquery(obj){ var

  • JQuery获取与设置HTML元素的内容或文本的实现代码

    先来看看演示效果: 欢迎访问我们PHP教程 我们PHP教程 简单易懂的JavaScript魔法 简单易懂的JQuery魔法 $(function(){ $("#btn_1").click(function(){ alert( $(".nm_p").html() ); }); $("#btn_2").click(function(){ alert( $(".nm_p").text() ); }); $("#btn_3&

  • 详解jQuery获取特殊属性的值以及设置内容

    jQuery特殊属性方法 val方法 val方法适用于设置和获取表单元素的值,例如input.textarea的值 //获取name的值 $("#name").val(""); //设置name的值 $("#name").val("张三"); html方法 html方法相当于innerHTML,会识别html标签 //获取内容的值$("div").html("<span>今天天气真好&

  • jQuery获取标签文本内容和html内容的方法

    本文实例讲述了jQuery获取标签文本内容和html内容的方法.分享给大家供大家参考.具体分析如下: jQuery可以通过text和html方法获取指定标签的文本内容或者html内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $(&quo

  • jQuery获取table行数并输出单元格内容的实现方法

    本文实例讲述了jQuery获取table行数并输出单元格内容.分享给大家供大家参考,具体如下: js部分: <script language="javascript" type="text/javascript"> $(function() { $("#txtInput").attr("value", "90"); var v_temp = $("#lblMessage").

随机推荐