好资源导航 » 文章资讯 » jQuery HTML获取内容和属性操作实例分析

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

2023-07-24 12:18:04 63

本文实例讲述了jQueryHTML获取内容和属性操作。分享给大家供大家参考，具体如下：

获取内容和属性

三个简单实用的用于DOM操作的jQuery方法：

下面的例子演示如何通过jQuerytext()和html()方法来获得内容：

$("#btn1").click(function(){alert("Text:"+$("#test").text());});

$("#btn2").click(function(){alert("HTML:"+$("#test").html());});

下面的例子演示如何通过jQueryval()方法获得输入字段的值：

$("#btn1").click(function(){
alert("值为:"+$("#test").val());
});

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

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

attr和prop的区别介绍：

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

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

实例1：

毛票票

删除

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程序设计有所帮助。